Wprowadzenie

prfct to design system, który należy do ciebie. Komponenty trafiają do twojego kodu przez shadcn CLI. Opierają się na prymitywach Base UI, są stylowane w Tailwind CSS v4 i sterowane zamkniętym zestawem tokenów projektowych — dzięki temu każda powierzchnia, w każdym motywie, powstaje z tych samych decyzji.

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 dwóch parametrów, 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#

Aktualna wersja prfct to 1.1.0. Strona każdego komponentu pokazuje jego status — Stabilny, Beta, Nowy lub Przestarzały — a zmiany są 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(), :has() i krzywych przejścia CSS linear(), których starsze przeglądarki nie obsługują.