# prfct.dev

> prfct to design system dla Reacta z otwartym kodem: generowane tokeny z gwarantowanym kontrastem, dostępne komponenty i dokumentacja, która uzasadnia każdą decyzję. Zbudowany na Next.js, Tailwind CSS v4, Base UI i shadcn.

Zainstaluj motyw poleceniem `npx shadcn@latest add https://www.prfct.dev/r/prfct.json`, a potem dowolny komponent poleceniem `npx shadcn@latest add https://www.prfct.dev/r/<name>.json`. Indeks rejestru znajdziesz pod adresem https://www.prfct.dev/r/registry.json.

## Pierwsze kroki

- [Wprowadzenie](https://www.prfct.dev/pl/docs): prfct to design system z otwartym kodem do budowania precyzyjnych, dostępnych interfejsów w Reakcie.
- [Instalacja](https://www.prfct.dev/pl/docs/installation): Dodaj prfct do nowego lub istniejącego projektu Next.js w kilka minut — za pomocą shadcn CLI albo ręcznie.
- [Zasady](https://www.prfct.dev/pl/docs/principles): Sześć przekonań, które kształtują każdą decyzję w prfct — od jasności obramowania po nazwy propsów.
- [Kompozycja](https://www.prfct.dev/pl/docs/composition): Jak łączą się komponenty prfct — części, prop render, atrybuty data do stylowania i zasady, dzięki którym własne modyfikacje da się utrzymać.
- [Lokalizacja](https://www.prfct.dev/pl/docs/localization): Przełącz na dowolny język te nieliczne słowa, które komponenty prfct mówią same od siebie — przyciski zamykania, spinnery, paginację, kalendarze — jednym providerem.

## Fundamenty

- [Fundamenty](https://www.prfct.dev/pl/docs/foundations): Decyzje, z których zbudowany jest każdy komponent — kolor, typografia, przestrzeń, kształt, głębia, ruch i zasady, które je spajają.
- [Kolor](https://www.prfct.dev/pl/docs/foundations/color): Zamknięta, generowana paleta w OKLCH. Dwanaście stopni na każdy odcień, jedno zadanie na stopień i kontrast, który wynika z obliczeń — nie z nadziei.
- [Typografia](https://www.prfct.dev/pl/docs/foundations/typography): Jeden krój, jedna skala ról semantycznych i detale optyczne, dzięki którym tekst wygląda na starannie złożony, a nie po prostu wyrenderowany.
- [Odstępy i układ](https://www.prfct.dev/pl/docs/foundations/spacing): Siatka 4 px, krótka lista stopni, z których każdy naprawdę pracuje, i zasady układu, które utrzymują jednolitą gęstość — od formularza ustawień po pulpit.
- [Kształt](https://www.prfct.dev/pl/docs/foundations/shape): Jeden bazowy promień steruje każdym narożnikiem w systemie. Zmień jedną zmienną, a cały interfejs proporcjonalnie się dostosuje — od ostrego i technicznego po miękki i przyjazny.
- [Elewacja](https://www.prfct.dev/pl/docs/foundations/elevation): Cztery poziomy głębi wyrażone obramowaniami, warstwowymi cieniami, a w trybie ciemnym — jaśniejszymi powierzchniami. Głębia pokazuje, co do czego należy i co jest tymczasowe.
- [Ruch](https://www.prfct.dev/pl/docs/foundations/motion): Krótki, celowy ruch, który wyjaśnia, skąd elementy się biorą i dokąd znikają. Czasy trwania i krzywe przejścia są tokenami, a sprężyny działają w czystym CSS.
- [Ikonografia](https://www.prfct.dev/pl/docs/foundations/iconography): Ikony Lucide na siatce 24 px — rozmiarem dopasowane do tekstu, przy którym stoją, a kolorem do komponentu, w którym się znajdują.
- [Dostępność](https://www.prfct.dev/pl/docs/foundations/accessibility): prfct jest projektowany pod WCAG 2.2 AA od podstaw — w palecie, prymitywach i ustawieniach domyślnych — a automatyczne testy sprawdzają to na każdej stronie.
- [Motywy](https://www.prfct.dev/pl/docs/foundations/theming): Zmień odcień marki, zabarwienie szarości, zaokrąglenie albo tryb — globalnie lub dla jednego poddrzewa — bez dotykania komponentów.
- [Tokeny projektowe](https://www.prfct.dev/pl/docs/foundations/tokens): Jak tokeny prfct są zbudowane, nazywane, generowane i eksportowane — jako zmienne CSS, klasy Tailwinda i JSON w formacie W3C Design Tokens.
- [Treść](https://www.prfct.dev/pl/docs/foundations/content): Jasno, spokojnie, konkretnie. Jak mówią produkty prfct — na przyciskach, w komunikatach o błędach, w stanach pustych i wszędzie pomiędzy.

## Komponenty

- [Komponenty](https://www.prfct.dev/pl/docs/components): Wszystkie komponenty prfct pogrupowane według tego, do czego służą. Każdy jest dostępny, obsługuje motywy, a jego kod należy do ciebie.
- [Accordion](https://www.prfct.dev/pl/docs/components/accordion): Stos nagłówków, z których każdy odsłania sekcję treści — stopniowe ujawnianie informacji drugorzędnych.
- [Alert](https://www.prfct.dev/pl/docs/components/alert): Trwały komunikat osadzony w treści, który informuje o czymś ważnym dla bieżącej strony lub zadania.
- [Alert Dialog](https://www.prfct.dev/pl/docs/components/alert-dialog): Modalne okno potwierdzenia, które zatrzymuje użytkownika przed akcją o poważnych lub nieodwracalnych skutkach. Zamknąć je można tylko, dokonując wyboru.
- [Aspect Ratio](https://www.prfct.dev/pl/docs/components/aspect-ratio): Utrzymuje media w stałych proporcjach szerokości do wysokości i rezerwuje dla nich miejsce, zanim treść się załaduje.
- [Avatar](https://www.prfct.dev/pl/docs/components/avatar): Zwarta wizualna tożsamość osoby lub organizacji — z obrazem, inicjałami zastępczymi i opcjonalnym statusem obecności.
- [Badge](https://www.prfct.dev/pl/docs/components/badge): Krótka, nieinteraktywna etykieta, która oznacza obiekt statusem, kategorią lub liczbą.
- [Breadcrumb](https://www.prfct.dev/pl/docs/components/breadcrumb): Pokazuje, gdzie w hierarchii znajduje się bieżąca strona, i jednym kliknięciem prowadzi na każdy wyższy poziom.
- [Button](https://www.prfct.dev/pl/docs/components/button): Wywołuje akcję. Najważniejszy element interaktywny każdego interfejsu — i ten, którego najłatwiej nadużyć.
- [Button Group](https://www.prfct.dev/pl/docs/components/button-group): Łączy powiązane przyciski, pola i tekst w jedną kontrolkę, dzięki czemu odbiera się je jako jeden zestaw akcji.
- [Calendar](https://www.prfct.dev/pl/docs/components/calendar): Siatka miesiąca do wyboru jednej daty, kilku dat lub zakresu — podstawa każdego selektora daty.
- [Card](https://www.prfct.dev/pl/docs/components/card): Wyniesiona powierzchnia, która grupuje powiązane treści i akcje dotyczące jednego tematu.
- [Carousel](https://www.prfct.dev/pl/docs/components/carousel): Przewijany poziomo lub pionowo zestaw slajdów z nawigacją gestem przesunięcia, klawiaturą i przyciskami, zbudowany na Embla.
- [Chart](https://www.prfct.dev/pl/docs/components/chart): Dostępne wykresy dopasowane do motywu, zbudowane na Recharts — ze sprawdzoną paletą kategorialną, stonowaną oprawą i podpowiedziami spójnymi z systemem.
- [Checkbox](https://www.prfct.dev/pl/docs/components/checkbox): Włącza lub wyłącza pojedynczą opcję albo zaznacza dowolną liczbę opcji z zestawu — zmiana obowiązuje po wysłaniu formularza.
- [Collapsible](https://www.prfct.dev/pl/docs/components/collapsible): Pojedynczy obszar, który można pokazać lub ukryć — najmniejsza jednostka stopniowego ujawniania treści.
- [Combobox](https://www.prfct.dev/pl/docs/components/combobox): Pole tekstowe z filtrowaną listą do wyboru spośród większej liczby opcji, niż wygodnie pomieści lista wyboru.
- [Command](https://www.prfct.dev/pl/docs/components/command): Szybka, projektowana z myślą o klawiaturze lista poleceń i wyników z wyszukiwaniem rozmytym — osadzona w stronie albo jako paleta ⌘K nad jej treścią.
- [Context Menu](https://www.prfct.dev/pl/docs/components/context-menu): Akcje dla konkretnego obiektu, otwierane prawym przyciskiem myszy lub długim przytrzymaniem dokładnie tam, gdzie jest kursor — skrót, nigdy jedyna droga.
- [Dialog](https://www.prfct.dev/pl/docs/components/dialog): Okno nałożone na stronę, które skupia uwagę na jednym zadaniu i blokuje wszystko inne, dopóki zadanie nie zostanie zakończone albo okno zamknięte.
- [Drawer](https://www.prfct.dev/pl/docs/components/drawer): Panel projektowany z myślą o dotyku, który wysuwa się od krawędzi, podąża za palcem, zatrzymuje się w punktach przyciągania i zamyka gestem przesunięcia.
- [Dropdown Menu](https://www.prfct.dev/pl/docs/components/dropdown-menu): Lista akcji lub opcji rozwijana z wyzwalacza, dzięki której polecenia drugorzędne są o jedno kliknięcie stąd i nie zagracają interfejsu.
- [Empty](https://www.prfct.dev/pl/docs/components/empty): Wyjaśnia, dlaczego nie ma nic do pokazania i co zrobić dalej — przy pierwszym użyciu, braku wyników, gdy wszystko jest już zrobione i przy braku dostępu.
- [Field](https://www.prfct.dev/pl/docs/components/field): System układu formularzy — etykiety, kontrolki, opisy i błędy rozmieszczone spójnie, dostępnie i przy każdej szerokości.
- [Hover Card](https://www.prfct.dev/pl/docs/components/hover-card): Podgląd treści, która kryje się za linkiem — osoby, repozytorium, strony — wyświetlany po najechaniu na link lub ustawieniu na nim fokusu.
- [Input](https://www.prfct.dev/pl/docs/components/input): Jednowierszowe pole tekstowe na imiona, adresy e-mail, liczby i wyszukiwane frazy — zawsze w parze z widoczną etykietą.
- [Input Group](https://www.prfct.dev/pl/docs/components/input-group): Pole z dołączonymi ikonami, tekstem, przyciskami lub podpowiedziami klawiszy — z jednym obramowaniem, fokusem i walidacją, jak pojedyncza kontrolka.
- [Input OTP](https://www.prfct.dev/pl/docs/components/input-otp): Segmentowane pole na kody jednorazowe, PIN-y i kody odzyskiwania — z obsługą wklejania, autouzupełniania z SMS-ów i menedżerów haseł.
- [Item](https://www.prfct.dev/pl/docs/components/item): Elastyczny wiersz, który łączy grafikę, tytuł i opis z akcjami — podstawowy element list, ustawień i wierszy zasobów.
- [Kbd](https://www.prfct.dev/pl/docs/components/kbd): Wyświetla klawisz lub skrót klawiszowy — w tekście, w menu albo w podpowiedziach.
- [Label](https://www.prfct.dev/pl/docs/components/label): Dostępna nazwa kontrolki formularza. Kliknięcie etykiety ustawia fokus na kontrolce, do której należy, albo ją przełącza.
- [Menubar](https://www.prfct.dev/pl/docs/components/menubar): Stały pasek menu — Plik, Edycja, Widok — który daje aplikacjom klasy desktopowej pełny, łatwy do odkrycia zestaw poleceń.
- [Native Select](https://www.prfct.dev/pl/docs/components/native-select): Natywny element select przeglądarki, dopasowany wyglądem do prfct — najlepszy na urządzeniach mobilnych, w długich formularzach i wszędzie tam, gdzie kontrolka ma działać bez JavaScriptu.
- [Navigation Menu](https://www.prfct.dev/pl/docs/components/navigation-menu): Główna nawigacja witryny z rozbudowanymi, animowanymi panelami — dla stron marketingowych i dokumentacji, w których każda sekcja potrzebuje czegoś więcej niż jednego linku.
- [Pagination](https://www.prfct.dev/pl/docs/components/pagination): Dzieli długi zbiór wyników na strony i pozwala się między nimi poruszać — przewidywalnie, z linkami, które można udostępnić, i z poczuciem, jak duży jest cały zbiór.
- [Popover](https://www.prfct.dev/pl/docs/components/popover): Pływający panel przypięty do wyzwalacza, na niewielkie interaktywne treści — ustawienia, szybkie formularze, selektory — który nie blokuje strony.
- [Progress](https://www.prfct.dev/pl/docs/components/progress): Pokazuje, jak daleko zaszło zadanie — albo że trwa, gdy nie wiadomo, ile jeszcze potrwa.
- [Radio Group](https://www.prfct.dev/pl/docs/components/radio-group): Pozwala wybrać dokładnie jedną opcję z niewielkiego zestawu, pokazując wszystkie opcje naraz.
- [Resizable](https://www.prfct.dev/pl/docs/components/resizable): Panele, których rozmiar można zmieniać przeciąganiem lub z klawiatury — do układów, których proporcje każdy ustawia po swojemu.
- [Scroll Area](https://www.prfct.dev/pl/docs/components/scroll-area): Przewijany obszar z dyskretnymi, nakładanymi paskami przewijania dopasowanymi do motywu — pod spodem natywne przewijanie, na wierzchu spójna oprawa.
- [Select](https://www.prfct.dev/pl/docs/components/select): Pozwala wybrać jedną opcję — albo kilka — z listy, która pozostaje schowana, dopóki nie jest potrzebna.
- [Separator](https://www.prfct.dev/pl/docs/components/separator): Cienka linia, która dzieli treść na grupy — poziomo między sekcjami, pionowo między elementami w jednym wierszu.
- [Sheet](https://www.prfct.dev/pl/docs/components/sheet): Panel wysuwany z krawędzi ekranu na dłuższe formularze, szczegóły i filtry — strona pod spodem pozostaje przy tym w zasięgu wzroku.
- [Sidebar](https://www.prfct.dev/pl/docs/components/sidebar): Stała nawigacja aplikacji — zwija się do paska ikon, na telefonach wysuwa się spoza ekranu, a jej wygląd dopasujesz do motywu co do piksela.
- [Skeleton](https://www.prfct.dev/pl/docs/components/skeleton): Element zastępczy, który podczas ładowania pokazuje kształt treści, dzięki czemu strona spokojnie się układa, zamiast skakać.
- [Slider](https://www.prfct.dev/pl/docs/components/slider): Wybiera wartość lub zakres wartości przez przeciąganie wzdłuż toru — sprawdza się najlepiej, gdy przybliżone położenie liczy się bardziej niż dokładna liczba.
- [Spinner](https://www.prfct.dev/pl/docs/components/spinner): Nieokreślony wskaźnik aktywności na krótkie oczekiwanie — gdy system pracuje, a wynik jest już w drodze.
- [Switch](https://www.prfct.dev/pl/docs/components/switch): Włącza lub wyłącza ustawienie — zmiana działa w chwili przełączenia.
- [Table](https://www.prfct.dev/pl/docs/components/table): Semantyczne tabele HTML do danych ustrukturyzowanych — z cyframi tabelarycznymi, stanami wierszy i częściami do budowy tabel z sortowaniem i zaznaczaniem.
- [Tabs](https://www.prfct.dev/pl/docs/components/tabs): Przełącza powiązane widoki o wspólnym kontekście — pokazuje jeden panel naraz, bez opuszczania strony.
- [Textarea](https://www.prfct.dev/pl/docs/components/textarea): Wielowierszowe pole tekstowe, które rośnie razem z treścią — na wiadomości, opisy i opinie.
- [Toast](https://www.prfct.dev/pl/docs/components/toast): Krótkie, nieblokujące powiadomienie, które potwierdza akcję lub informuje o zdarzeniu w tle, a potem schodzi z drogi.
- [Toggle](https://www.prfct.dev/pl/docs/components/toggle): Dwustanowy przycisk, który włącza lub wyłącza jedną opcję i pokazuje jej bieżący stan.
- [Toggle Group](https://www.prfct.dev/pl/docs/components/toggle-group): Zestaw przycisków przełączających do wyboru jednej opcji — albo kilku — z małego, widocznego zbioru.
- [Tooltip](https://www.prfct.dev/pl/docs/components/tooltip): Krótka etykieta tekstowa, która pojawia się po najechaniu i przy fokusie z klawiatury, żeby nazwać kontrolkę z samą ikoną albo pokazać jej skrót.

## Wzorce

- [Wzorce](https://www.prfct.dev/pl/docs/patterns): Jak łączyć komponenty prfct, by rozwiązywać powtarzalne problemy produktowe — z uzasadnieniem każdego wyboru.
- [Formularze](https://www.prfct.dev/pl/docs/patterns/forms): Układ, walidacja, błędy i wysyłanie — zasady, dzięki którym formularz wypełnia się szybko, a pomylić się w nim trudno.
- [Stany puste](https://www.prfct.dev/pl/docs/patterns/empty-states): Co pokazać, gdy nie ma czego pokazać — przy pierwszym użyciu, braku wyników i błędach.
- [Ładowanie](https://www.prfct.dev/pl/docs/patterns/loading): Szkielety, spinnery, postęp i optymistyczne aktualizacje — dobrane do tego, jak długo ludzie będą czekać i ile wiesz o tym oczekiwaniu.
- [Informacja zwrotna](https://www.prfct.dev/pl/docs/patterns/feedback): Wybór między komunikatami w treści, alertami, powiadomieniami i oknami dialogowymi — tak, by ludzie zauważali to, co ważne, a nie przerywało im to, co nieważne.
- [Akcje nieodwracalne](https://www.prfct.dev/pl/docs/patterns/destructive-actions): Pozwól cofnąć, gdy to możliwe, pytaj o potwierdzenie, gdy to konieczne, a akcje nieodwracalne celowo zabezpiecz przed przypadkowym uruchomieniem.
- [Tabele danych](https://www.prfct.dev/pl/docs/patterns/data-tables): Gęstość, wyrównanie, sortowanie, filtrowanie, zaznaczanie i akcje zbiorcze — tabele, które pozostają czytelne nawet przy stu wierszach.

## Zasoby

- [Zasoby](https://www.prfct.dev/pl/docs/resources): Informacje o wydaniach, tokeny i dokumentacja w formatach do odczytu maszynowego oraz rejestr — wszystko, czego potrzebujesz do pracy z prfct poza tą stroną.
- [Dziennik zmian](https://www.prfct.dev/pl/docs/resources/changelog): Wszystkie wydania prfct, od najnowszego.

## Tokens

- [prfct.tokens.json](https://www.prfct.dev/tokens/prfct.tokens.json): typography, radius, durations and easing curves (W3C Design Tokens format).
- [light.tokens.json](https://www.prfct.dev/tokens/light.tokens.json) and [dark.tokens.json](https://www.prfct.dev/tokens/dark.tokens.json): every color scale and semantic role, per mode.

## Other languages

- https://www.prfct.dev/llms.txt