Wprowadzenie
prfct to design system dla Next.js, zbudowany na shadcn, do tworzenia precyzyjnych i dostępnych interfejsów.
prfct to design system dla Next.js, który należy do ciebie. Jest zbudowany na shadcn: komponenty trafiają do twojego kodu przez shadcn CLI i zachowują nazwy oraz części znane z shadcn. Opierają się na prymitywach Base UI, są stylowane w Tailwind CSS v4 i sterowane zamkniętym zestawem tokenów projektowych, dzięki czemu każda powierzchnia, w każdym motywie, powstaje z tych samych decyzji.
Zbudowany na shadcn
shadcn jest podstawą prfct, a nie jednym ze składników. System instaluje się przez shadcn CLI z rejestru shadcn, a jego komponenty to komponenty shadcn w nowej stylizacji.
- Te same części. Każda nazwa, którą eksportuje komponent shadcn, i każdy ustawiany przez niego atrybut
data-slotistnieje w prfct, więc kod napisany dla shadcn/ui działa z komponentami prfct. Poleceniepnpm test:installporównuje oba zestawy przy każdym uruchomieniu. - Te same tokeny.
background,primary,muted,border,ringi pozostałe zachowują nazwy z shadcn, więc komponent dodany z samego shadcn albo z innego rejestru przyjmuje motyw prfct. - Kilka dodatków. Warianty statusu w
AlertiBadge, stanloadingi rozmiarxlwButton, rozmiary wInput, pływającySheetorazLocaleProviderdla słów, które komponenty wypowiadają same. - Jedna pominięta część.
NavigationMenuIndicator, dla którego Base UI nie ma odpowiednika.
Skąd nazwa „prfct”
Nazwa to angielskie słowo perfect („doskonały”) bez liter, których nie potrzebuje — i dokładnie tak działa cały system. Każdy token, każdy komponent i każda wytyczna ma swoje zadanie; wszystko, co nie zasłużyło na swoje miejsce, odpada. Sygnet wyraża tę samą myśl: to kątownik, którym stolarz wyznacza idealny kąt prosty, oraz punkt, od którego zaczyna się każdy pomiar.
Co jest w zestawie
Co wyróżnia prfct
Kolor poparty dowodem
Palety prfct nie są dobierane ręcznie. Każdy odcień jest generowany w OKLCH: dwanaście stopni na skalę, a każdy stopień ma swoje zadanie. Stopnie tekstu są następnie wyliczane — przesuwane tak długo, aż osiągną kontrast wymagany przez WCAG na każdym wypełnieniu, na którym mogą się znaleźć. Testy sprawdzają te gwarancje na 1152 wygenerowanych skalach, a kreator motywów korzysta z tego samego kodu, więc własne motywy również je zachowują. Zobacz Kolor.
Dostępny z samej konstrukcji
Komponenty są zbudowane na Base UI — bibliotece, która implementuje wzorce WAI-ARIA dla fokusu, obsługi klawiatury i czytników ekranu. prfct dodaje do tego fokus widoczny w każdym motywie, cele dotyku o wymiarach co najmniej 24 × 24 px, obsługę preferencji ograniczonego ruchu i automatyczny test axe każdej strony dokumentacji w trybie jasnym i ciemnym. Zobacz Dostępność.
Jeden zestaw tokenów, dowolny motyw
Komponenty nigdy nie używają dark:. Każdy kolor to token semantyczny, który przełącza się razem z klasami .light i .dark — na całej stronie albo w dowolnym poddrzewie, jak w podglądzie powyżej. Zmiana marki to zmiana trzech parametrów, palety szarości i dwóch kolorów marki, a nie „znajdź i zamień” w całym kodzie. Zobacz Motywy.
Otwarty kod
Nie ma pakietu, który trzeba aktualizować, ani stylów, które trzeba nadpisywać. Kod należy do ciebie od chwili instalacji: czytaj go, zmieniaj, usuwaj to, czego nie potrzebujesz. Aktualizacje przyjmujesz tylko wtedy, gdy chcesz, a CLI może pokazać ci diff, zanim którąkolwiek zaakceptujesz. Zobacz Instalację.
W twoim języku
Komponenty prawie nic nie mówią same od siebie — a to, co mówią, mówią w twoim języku. Jeden LocaleProvider przełącza każdą wbudowaną etykietę, punkt orientacyjny i datę; angielski i polski są wbudowane w system. Ta dokumentacja jest dostępna w obu językach.
Dokumentacja, która wyjaśnia dlaczego
Strona każdego komponentu wyjaśnia, kiedy go używać, a kiedy nie, pokazuje dobre i złe praktyki, obsługę klawiatury i pełne API — razem z diagramami anatomii mierzonymi na żywym komponencie, dzięki czemu nie mogą rozjechać się z kodem. Każda wytyczna ma swoje uzasadnienie, więc następną decyzję podejmiesz w ten sam sposób. Zobacz Zasady.
Stos technologiczny
Od czego zacząć
- Budujesz produkt? Zacznij od Instalacji, raz przeczytaj Kompozycję, a potem przeglądaj komponenty.
- Projektujesz z prfct? Przeczytaj Zasady, potem Fundamenty, a na koniec wypróbuj kreator motywów.
- Piszesz teksty do interfejsu? Reguły wraz z uzasadnieniem znajdziesz na stronie Głos i ton.
- Wydajesz produkt w kilku językach? Lokalizacja opisuje słowa, które komponenty mówią same od siebie, i to, jak przetłumaczono tę stronę.
Status i obsługiwane przeglądarki
Komponenty są stabilne, chyba że ich strona mówi inaczej: odznaka Nowy, Beta lub Wycofany oznacza wyjątki. Każde wydanie jest opisane w dzienniku zmian.
prfct obsługuje te same przeglądarki co Tailwind CSS v4: Safari 16.4, Chrome 111 i Firefox 128 lub nowsze. Korzysta z kolorów OKLCH, color-mix() i :has(), których starsze przeglądarki nie obsługują. Sprężyste krzywe przejścia używają funkcji CSS linear(), która wymaga Safari 17.2 lub Chrome 113; we wcześniejszych wersjach te przejścia biegną po domyślnej krzywej przeglądarki.