Forwarded from CleverDevs (Ｓｕｒｅｎ)
New Text Document.txt
605 B
درود دوستان طی هفته گذشته داشتم یه وبسایت با nextjs توسعه میدادم و برای ui دنبال component های آماده و زیبا و کاربر پسند بودم که به این لایبرری ها و وبسایت ها بر خوردم، امیدوارم به شما هم کمک کنن.
01. shadcn
02. nextui
03. mui
04. chakra
05. tailwind
06. aceternity
07. preline
08. tailus
09. flowbite
10. daisyui
11. mantine
12. ariakit
13. primevue
موفق باشید🌹
#UI #Next #React
@CleverDevs @CleverDevsGp
01. shadcn
02. nextui
03. mui
04. chakra
05. tailwind
06. aceternity
07. preline
08. tailus
09. flowbite
10. daisyui
11. mantine
12. ariakit
13. primevue
موفق باشید🌹
#UI #Next #React
@CleverDevs @CleverDevsGp
Forwarded from Golden Code (علی 🇨🇴)
نکات طراحی pop-up های delete :
۱- از باتن های مشخص برای حذف یا تایید استفاده کنیم تا کاربر راحت تر بفهمه چیکار میکنه.
۲- از رنگهایی مانند قرمز برای باتن حذف استفاده کنیم تا توجه کاربر جلب بشه.
۳-باتن ها رو در مکانهای قابل دسترس قرار بدیم تا کاربر راحت بتونه تصمیم بگیره.
(در تصویر به نمونههای ایدهآل و اشتباه اشاره شده)
#UI
@GoldenCodeir
(به منبع و مثالش توجه کنین 👇🏾)
https://x.com/uxpeak_/status/1718579351644410367?s=19
۱- از باتن های مشخص برای حذف یا تایید استفاده کنیم تا کاربر راحت تر بفهمه چیکار میکنه.
۲- از رنگهایی مانند قرمز برای باتن حذف استفاده کنیم تا توجه کاربر جلب بشه.
۳-باتن ها رو در مکانهای قابل دسترس قرار بدیم تا کاربر راحت بتونه تصمیم بگیره.
(در تصویر به نمونههای ایدهآل و اشتباه اشاره شده)
#UI
@GoldenCodeir
(به منبع و مثالش توجه کنین 👇🏾)
https://x.com/uxpeak_/status/1718579351644410367?s=19
X (formerly Twitter)
uxpeak (@uxpeak_) on X
💎 Design tip: Design better delete pop-ups using the right CTAs, colors, and position.
#ui #uxui #ux #uitip #learndesign #uidesign
#ui #uxui #ux #uitip #learndesign #uidesign
👍1
Forwarded from 🎄 یک برنامه نویس تنبل (Raymond 🐈⬛ Dev)
🔶 بهترین منابع رایگان برای طراحان محصولات دیجیتال
https://www.cursorup.com/resources
#ui
@TheRaymondDev
https://www.cursorup.com/resources
#ui
@TheRaymondDev
Cursorup
100's of FREE Resources for Product / UX & UI Designers
Free Illustrations. Fonts. UI Kits. Wireframe Kits. Tools. Free Stock Photography Sites. Website Builders. Free Icon Sites & Free Stock Video Sites.
Forwarded from Golden Code (@lix)
روشی برای به دست آوردن عرض scrollbar بدون استفاده از جاوااسکریپت که احتمالا به کارتون بیاد:
میتونیم عرض scrollbar رو به پیکسل در یک متغیر CSS ذخیره کنیم و ازش در هر قسمته دیگه از کد استفاده کنیم. همچنین میتونیم این مقدار رو بدون واحد و فقط مقدار عددیش رو بدستش بیاریم و نمایش بدیم. این روش باعث میشه کدمون سادهتر و برای تغییر راحتتر باشه.
#UI
#CSS
@GoldenCodeir
(به منبع و مثالش دقت کنید 👇🏾)
https://x.com/ChallengesCss/status/1857031287682334869?s=19
میتونیم عرض scrollbar رو به پیکسل در یک متغیر CSS ذخیره کنیم و ازش در هر قسمته دیگه از کد استفاده کنیم. همچنین میتونیم این مقدار رو بدون واحد و فقط مقدار عددیش رو بدستش بیاریم و نمایش بدیم. این روش باعث میشه کدمون سادهتر و برای تغییر راحتتر باشه.
#UI
#CSS
@GoldenCodeir
(به منبع و مثالش دقت کنید 👇🏾)
https://x.com/ChallengesCss/status/1857031287682334869?s=19
X (formerly Twitter)
CSS by T. Afif (@ChallengesCss) on X
💡 CSS Tip!
Do you want to know the scrollbar width? It's possible using only CSS and a few lines of code! You can get the pixel value within a CSS variable and use it everywhere.
As a bonus, you can also have the unitless value and show it!
Do you want to know the scrollbar width? It's possible using only CSS and a few lines of code! You can get the pixel value within a CSS variable and use it everywhere.
As a bonus, you can also have the unitless value and show it!
🔥1
Forwarded from Golden Code (@lix)
ظاهر فرم ها بطور پیشفرض سادست ولی یه سری مواقع نیازه کاستوم بشن. یک قابلیتی که css ارائه داده و خیلی مفیده accent-color هستش.
با این قابلیت میشه حتی اجزای فرم مثل check box یا radio button ها رو هم به زیبایی کاستوم کرد بصورت دیفالت تا با ظاهر سایت هماهنگ تر بشن👌🏾
#Css
#UI
@GoldenCodeir
(بهمنبع و مثالش دقت کنید 👇🏾)
https://x.com/csaba_kissi/status/1695692651188916575?t=QCxTPRVdbovbQJ-9Z8PD7w&s=35
با این قابلیت میشه حتی اجزای فرم مثل check box یا radio button ها رو هم به زیبایی کاستوم کرد بصورت دیفالت تا با ظاهر سایت هماهنگ تر بشن👌🏾
#Css
#UI
@GoldenCodeir
(بهمنبع و مثالش دقت کنید 👇🏾)
https://x.com/csaba_kissi/status/1695692651188916575?t=QCxTPRVdbovbQJ-9Z8PD7w&s=35
👏1
Forwarded from 🎄 یک برنامه نویس تنبل (The Lazy 🌱)
🔶 سوپابیس (Supabase) جایگزین فایربیس (Firebase) کتابخانه UI جدیدی برای ریکت و نکست جی اس منتشر کرده است.
https://supabase.com/ui
#خبر
#UI
@TheRaymondDev
https://supabase.com/ui
#خبر
#UI
@TheRaymondDev
Supabase
Supabase UI Library
Provides a library of components for your project
Forwarded from 🎄 یک برنامه نویس تنبل (Lazy 🌱)
Ripplejs
Ripple TS
A new way to build reactive web applications.
Forwarded from 🎄 یک برنامه نویس تنبل (Lazy 🌱)
🔶 یه UI تمیز با رنگ بندی ملایم پیدا کردم که برای TailwindCSS است و دارای کلاس های آماده مشابه بوت استرپ است.
https://preline.co/
#ui
@TheRaymondDev
https://preline.co/
#ui
@TheRaymondDev
Preline
Preline UI - Tailwind CSS components library
Preline UI is an open-source Tailwind CSS components library for any needs. Comes with UI examples & blocks, templates, plugins, Figma design system and more.
Forwarded from 🎄 یک برنامه نویس تنبل (Lazy 🌱)
🔶 در مستندات Preline UI یه مشکلی درباره CSS Variants داره.
وقتی توی فایل input.css مسیر CSS Variants Preline UI کپی و پیست می کنید و دستور زیر را اجرا می کنیم, خطا می دهد.
CSS Variants :
Run :
حالا CSS Variants بدون پوشه node_modules قرار می دهیم این مشکل حل می شود و اجرا می شود.
این مشکل رو به گیت هاب Preline UI گزارش دادم.
https://github.com/htmlstreamofficial/preline/issues/722
#ui
@TheRaymondDev
وقتی توی فایل input.css مسیر CSS Variants Preline UI کپی و پیست می کنید و دستور زیر را اجرا می کنیم, خطا می دهد.
CSS Variants :
/* Preline UI */
@import "./node_modules/preline/variants.css";
Run :
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch
≈ tailwindcss v4.1.13
Error: Can't resolve './node_modules/preline/variants.css' in
'/home/.../www/wordpress/wp-content/themes/new/src'
حالا CSS Variants بدون پوشه node_modules قرار می دهیم این مشکل حل می شود و اجرا می شود.
@import "preline/variants.css";
این مشکل رو به گیت هاب Preline UI گزارش دادم.
https://github.com/htmlstreamofficial/preline/issues/722
#ui
@TheRaymondDev
GitHub
A problem calling CSS Variants · Issue #722 · htmlstreamofficial/preline
Your documentation says to copy and paste the following css import path. /* Preline UI */ @import "./node_modules/preline/variants.css"; but, when I run the following command, it gives an...
Forwarded from 🎄 یک برنامه نویس تنبل (Lazy 🌱)
🔶 این مسیر فایل درسته :
توی مستندات نوشته یک dot کم داره
#ui
@TheRaymondDev
@import "../node_modules/preline/variants.css";
توی مستندات نوشته یک dot کم داره
#ui
@TheRaymondDev
Forwarded from 🎄 یک برنامه نویس تنبل (Lazy 🌱)