رفتن به محتوا
Pixelbits
نسخهٔ ۱٫۰ · ۴۵ کامپوننت

پیکسل‌ها، با وسواس ساخته‌شده.

پیکسل‌بیتس یک کیت رابط کاربری آرام و لوکس برای ری‌اکت است. افکت‌های پیکسلی‌اش فقط لحظهٔ تعامل ظاهر می‌شوند و همه با فوکوس صفحه‌کلید هم کار می‌کنند. این صفحه همهٔ آن‌ها را در جهت راست‌به‌چپ نشان می‌دهد.

تیلویند ۴ری‌اکت ۱۹دیالوگ بومیپاپ‌اور APIرنگ‌های OKLCHرجیستری shadcnدسترس‌پذیری AA
چرا پیکسل‌بیتس

ظریف در آرامش، زنده در تعامل

پیکسل، فقط هنگام لمس

افکت‌های پیکسلی با هاور، فوکوس صفحه‌کلید، باز شدن و بارگذاری ظاهر می‌شوند. در حالت عادی همه‌چیز آرام است.

سبک و سریع

هر کامپوننت ورودی جداگانه دارد و هر چه وارد نکنید در باندل نیست. بدون کتابخانهٔ انیمیشن و بدون CSS-in-JS.

ساخته‌شده روی پلتفرم

دیالوگ بومی، پاپ‌اور API، ورودی‌های واقعی فرم و جزئیات بومی؛ دسترس‌پذیر حتی با جاوااسکریپت کم.

راست‌به‌چپ، از پایه

همهٔ کامپوننت‌ها از ویژگی‌های منطقی CSS استفاده می‌کنند؛ فلش‌ها، کلیدهای جهت‌دار و افکت‌ها خودبه‌خود برمی‌گردند.

نمونهٔ زنده

کامپوننت‌ها در جهت راست‌به‌چپ

فرم

در صفحهٔ عمومی شما نمایش داده می‌شود.

پیمایش و پنجره‌ها

کلیدهای چپ و راست در جهت راست‌به‌چپ برعکس کار می‌کنند.

نمایش داده

نمونهٔ کار

خانهٔ مد نوآر

سایت یک خانهٔ مد که با همین کیت ساخته شده است.

منتشر شده
پیش‌فرضویژهدر انتظارخطااطلاعات

بارگذاری و پیشرفت

بارگذاری فایل‌ها64%
ساخت رجیستری65%
نصب

در دو دقیقه راه بیندازید

terminal
pnpm add pixelbits
app/globals.css
@import "tailwindcss";
@import "pixelbits/theme.css";

برای راست‌به‌چپ کافی است روی عنصر <html dir="rtl"> را بگذارید. راهنمای کامل در مستندات انگلیسی است.

پرسش‌های متداول

پاسخ‌های کوتاه

آیا دسترس‌پذیر است؟
بله. همهٔ رنگ‌ها کنتراست AA دارند و همهٔ افکت‌ها با فوکوس صفحه‌کلید هم اجرا می‌شوند. اگر کاربر «حرکت کمتر» را در سیستم روشن کرده باشد، انیمیشن‌ها خاموش یا آرام می‌شوند.
آیا از راست‌به‌چپ پشتیبانی می‌کند؟
بله، همین صفحه نمونهٔ آن است: چیدمان، فلش‌ها، کلیدهای جهت‌دار، پنل‌های کناری و افکت‌های پیکسلی همه برمی‌گردند.
بدون تیلویند هم کار می‌کند؟
بله. یک فایل CSS از پیش ساخته‌شده هم دارد که فقط یک بار وارد می‌شود.
می‌توانم کد کامپوننت را خودم تغییر دهم؟
بله. هر کامپوننت در رجیستری shadcn هم هست و با یک فرمان، کد آن در پروژهٔ شما کپی می‌شود.