ربات رسا
نمونهٔ خروجی React · shadcn/ui
کامپوننتReact · shadcn/uiرابط کاربری و وبP1889
کامپوننت لیکید گلاس با اثر شکست نور
چطور می‌تونی جلوه‌ای فناورانه رو در رابط کاربری خودت اضافه کنی؟
دستور نصب
npx shadcn@latest add https://kokonutui.com/r/liquid-glass-card.json
چه کاری می‌کند
- اصلی‌ترین ویژگی این کامپوننت، اثر شکست نور است که به طور دینامیک با تغییرات صفحه پاسخ می‌دهد
- با استفاده از SVG و Tailwind CSS، سازگاری بالایی با قالب‌های فعلی رابط کاربری دارد
- قالب حرفه‌ای و ساده‌ای برای افزودن عمق به کاربردی‌ها مثل دکمه‌ها و کارت‌ها ایجاد می‌کند
- کجا به کار می‌آید
- می‌تونی اثر شکست نور رو به هر بخشی از رابط کاربری که می‌خوای عمق بدهی اضافه کنی
- پیش‌نیاز
- پروژهٔ React یا Next.js با shadcn/ui؛ دستور نصب را در پوشهٔ پروژه اجرا کنید
- مناسب برای
- اجزای رابط کاربری با طراحی مدرن و حرفه‌ای
P1411
P1314
P1104
P1310
P1100