Dziennik zmian

Wszystkie wydania prfct, od najnowszego.

3.0.0 — listopad 2026

Przed tym wydaniem każdy komponent, przykład, strona dokumentacji i skrypt zostały przejrzane linia po linii. Nie usunięto żadnego eksportu, propsa ani data-slot: zmiany to poprawki.

Komponenty

Calendar. Fokus znów podąża za strzałkami; listy miesiąca i roku pokazują fokus klawiatury; wyłączone dni są przyciemnione raz, nie dwa razy.
Combobox. disabled ustawione na korzeniu albo na polu dociera do inputu.
Accordion. Wyłączona pozycja jest przyciemniona i nie reaguje na najechanie.
Carousel i Sidebar. Własne onKeyDown i onClick nie zastępują już wbudowanych handlerów, a dir dociera do paska bocznego na desktopie.
Pola. Stany wyłączony i błędny wyglądają tak samo w Input, NativeSelect, InputOTP, chipach Combobox, Switch i Toggle. InputGroup, chipy Combobox i InputOTP pokazują fokus w trybie wymuszonych kolorów.
Menu. ContextMenu ma takie same wymiary jak DropdownMenu i nie wychodzi poza ekran.
Nakładki. AlertDialog ma rozmiar tekstu i pasek przewijania jak Dialog, SheetFooter ma tło stopki, a linki w opisach wyglądają wszędzie tak samo.
Chart. Legenda pokazuje nazwę serii, gdy brakuje etykiety; zawartość tooltipa i legendy przekazuje id, style, data-* i aria-* do korzenia.
Slider. Obszar dotyku uchwytu ma 32px, zgodnie z dokumentacją.
tabsListVariants i toggleVariants można wywołać w Server Components. Warianty ghost i link w Badge reagują na najechanie tylko na linku albo przycisku.

Przykłady

Zainstalowane szablony pokazują swoje powiadomienia. Strona dodawana przez przykład montuje toaster, gdy przykład używa powiadomień.
Cofnięcie nie wstawia wiersza dwa razy; w Rezerwacji i Logowaniu nie da się wrócić w trakcie żądania; potwierdzenie usunięcia zeruje się po zamknięciu; zaznaczenie w tabeli podąża za filtrem; daty w tabeli nie zależą od strefy czasowej.
Formularze w przykładach dokumentacji nie przeładowują już strony, filtry zerują się w całości, a przykład IDE używa kolorów motywu, więc zachowuje je po instalacji.
Menu i przełączniki segmentowe używają części, które przekazują swój stan technologiom asystującym.

Dokumentacja

Stwierdzenia poprawione względem kodu: propsy, wartości domyślne, liczby, polecenia i wytyczne, których nie spełniały przykłady.
<kbd> w tekście renderuje się jako komponent Kbd.
Wymagania to Next.js 16 i Node.js 22.

Strona i narzędzia

text-code było kolorem na tej stronie, a rolą typografii wszędzie indziej. Teraz wszędzie jest rolą typografii.
Obraz społecznościowy strony głównej nie wymaga już przekierowania.
Usunięto: dwie nieużywane zależności, martwe komponenty, propsy, komunikaty i CSS. pnpm check sprawdza też formatowanie, testy, które nie mogły zawieść, zostały przepisane, a wygenerowane pliki tokenów są testowane względem źródła.

2.3.0 — listopad 2026

Przykładowe aplikacje stają się szablonami: ich kod można przeczytać na stronie i zainstalować jednym poleceniem. Strona główna jest teraz jednym z nich.

Przykłady

Podgląd i Kod. Każdy przykład ma widok Kod z plikami, z których się składa, dokładnie w takiej postaci, w jakiej się instalują.
Instalacja przykładu. shadcn add z adresem przykładu zapisuje go w components/, dodaje stronę, która go pokazuje, i instaluje komponenty, których używa. Zobacz Instalację.
Dwie strony główne. Bento ma dwutonowy nagłówek i siatkę, w której każdą cechę pokazuje ona sama; klasyczna ma wyśrodkowane hero i ścianę komponentów. Obie kończą się krokami instalacji, pytaniami i wezwaniem do działania.
Zainstalowane strony mają tytuł i opis. Strona, którą dodaje przykład, eksportuje metadata, więc jest gotowa dla wyszukiwarek od pierwszego wdrożenia.

Strona

Nowa strona główna. To przykład strony głównej w układzie bento, wyrenderowany wewnątrz nagłówka i stopki serwisu. Stara strona główna i jej komponenty zniknęły.

2.2.0 — listopad 2026

Dwie kolejne przykładowe aplikacje, napisane tak, żeby dało się je czytać: każda to jeden plik na kilkaset linii.

Przykłady

Rezerwacja na stronie /examples/booking: umawianie rozmowy. Kalendarz z niedostępnymi dniami, wolne terminy, krótki formularz z walidacją i potwierdzenie, które przejmuje fokus.
Zespół na stronie /examples/team: członkowie i zaproszenia. Wyszukiwanie, zmiana roli w miejscu, usuwanie z możliwością cofnięcia i okno zaproszenia. Na telefonie kontrolki każdego członka zajmują osobną linię.

Poprawki

Przykładowe aplikacje z kalendarzem wczytują lokalizację dat, więc kalendarz mówi językiem strony.

2.1.1 — listopad 2026

Utwardzenie pod produkcję: nic nowego do nauczenia się, mniej sposobów, na które strona może się zepsuć.

Poprawki

Miniatury nie przesuwają układu. Skala miniatury jest wyliczana w CSS, więc HTML z serwera ma od razu właściwy rozmiar. Na wolnym telefonie galeria przykładów podskakiwała, gdy docierał jej skrypt.
Strona błędu. Strona, która rzuci wyjątek, pokazuje komunikat w języku odwiedzającego i możliwość ponowienia próby zamiast domyślnego ekranu frameworka.
Przykłady psują się pojedynczo. Żywy przykład, który rzuci wyjątek, zostaje zastąpiony krótką notką, a ten, którego kod nie dotarł, zachowuje HTML z serwera; strona wokół niego działa dalej.
Mniej skryptu na stronach dokumentacji. Dane lokalizacji dat kalendarza wczytują się tylko na stronach, które pokazują kalendarz. Każda inna strona dokumentacji jest lżejsza o 12 kB.

Narzędzia

CI uruchamia kontrole i wszystkie testy end-to-end przy każdym pull requeście, a cotygodniowe zadanie instaluje prfct w świeżym projekcie na najnowszych wydaniach wszystkich zależności.
pnpm typecheck najpierw generuje typy tras Next, więc przechodzi na świeżym klonie.
SECURITY.md mówi, jak zgłosić podatność.

2.1.0 — listopad 2026

Czerń i biel jako ustawienie domyślne, drugi kolor marki oraz każdy komponent sprawdzony z dokumentacją i ze świeżą instalacją.

Fundamenty

Domyślnie czerń i biel. Kolor marki to teraz mono: wypełnienia biorą najciemniejszy stopień neutralnej skali, a kolor zostaje dla statusów i dla twojego motywu. Żeby go przywrócić, ustaw brand w themeConfig na gotową paletę albo własny kolor.
Drugi kolor marki. brand-secondary to pełna, 12-stopniowa skala z własnymi rolami, a Badge dostaje variant="brand-secondary".
Pierścień fokusu trzyma 3:1 przy każdym kolorze marki. ring wskazuje na nowy kolor brand-focus: wypełnienie, gdy odróżnia się ono od każdej powierzchni, a w przeciwnym razie stopień tekstu marki. Jasna marka, taka jak bursztynowa, rysowała wcześniej pierścień z kontrastem poniżej 2:1 na bieli.
Wymuszone kolory. W trybie wysokiego kontrastu systemu Windows stany: wciśnięty, bieżący, podświetlony i wybrany przyjmują systemowe kolory zaznaczenia, pływające powierzchnie zachowują krawędź, a pozycje menu nie mają już stałego konturu.
Role typograficzne zamiast rozmiarów wpisanych wprost. Wszędzie tam, gdzie rozmiar 13 px był wpisany na sztywno, czyli w Button, Badge, InputGroup, w przykładach i w tym serwisie, tekst przyjmuje teraz swoją rolę: text-label-sm, text-body-xs albo text-code. Wiersze, które miały 19,5 px wysokości, leżą teraz na siatce 4 px.
Kursywa przy pierwszej wizycie. Plik kursywy jest opcjonalny i dopóki nie trafił do pamięci podręcznej, wyróżnienia były rysowane prosto. Teraz przeglądarka może pochylić krój zapasowy; sztuczne pogrubienie pozostaje wyłączone.
Nowe role interakcji: secondary-hover, secondary-active, brand-hover, input-hover i border-hover.
Skrót D w ThemeProvider jest opcjonalny i włącza go hotkey.

Komponenty

Command instaluje się bez błędów. CLI shadcn przepisywało po drodze jeden z jego propsów i zainstalowany plik nie przechodził sprawdzania typów.
Popover dostaje PopoverClose, bez którego modalny popover nie zatrzymuje fokusu. Button dostaje icon-xl. Table dostaje containerClassName.
Kontrolki formularzy: zatrzymanie kursora na kontrolce nie przemalowuje już jej ramki. Aktywny Input, Textarea, Select, NativeSelect, InputGroup i Combobox zachowuje kolor fokusu, a zaznaczony Checkbox i przycisk radiowy zachowuje kolor marki.
Checkbox i RadioGroup: niewidoczny obszar kliknięcia ma rzeczywiste 24 px. Wcześniej miał 22 px, bo jego odsunięcia liczą się od wewnętrznej krawędzi obramowania.
Alert: akcja ma własną kolumnę, więc tekst nigdy pod nią nie wchodzi, niezależnie od jej szerokości.
ButtonGroup: oba końce zachowują promień właściwy dla swojego rozmiaru, także przy xs i xl.
Calendar: bez ustawionego języka daty są zapisywane po angielsku tak samo na serwerze i w przeglądarce, co usuwa błąd hydratacji u osób korzystających z innych języków. Dni sąsiednich miesięcy są przygaszone, nazwa dostępna dnia zawiera jego numer jako osobne słowo, a numery tygodni są nagłówkami wierszy, zgodnie ze swoimi atrybutami.
Accordion: pierścień fokusu na samej górze panelu nie jest już przycinany. Progress: przy ograniczonym ruchu pasek o nieokreślonym postępie zatrzymuje się na środku toru, gdzie nie da się go odczytać jako jednej trzeciej.
Drawer: treść przewija się, gdy jest wyższa, niż szuflada może urosnąć, na przykład na telefonie w orientacji poziomej.
DropdownMenu: menu rozszerza się do najdłuższej pozycji.
Toast: typ jest odczytywany razem z komunikatem, a w wąskim powiadomieniu akcja przechodzi pod tekst.
Sidebar: isActive ustawia aria-current="page"; na telefonach propsy takie jak id i aria-label trafiają do panelu; przyciski akcji zachowują cel o wielkości 24 px.
Switch: w stanie włączonym uchwyt przyjmuje kolor przeznaczony na wypełnienie marki, więc pozostaje widoczny przy jasnej marce i w domyślnym motywie w trybie ciemnym.
ScrollArea: uchwyt przyjmuje kolor krawędzi o kontraście 3:1, podobnie jak cienkie natywne paski przewijania.
Spinner: label="" czyni go dekoracyjnym. Separator: dekoracyjna linia zachowuje pozostałe propsy. AvatarGroup ma rolę group, więc jego etykieta jest odczytywana.
Input przyjmuje propsy Base UI, między innymi render i onValueChange, a wypełnienie stanu tylko do odczytu nie obejmuje już pól plików. NativeSelect używa na telefonach tekstu 16 px, bo mniejszy powiększa stronę przy fokusie.
NavigationMenu: wyłączony wyzwalacz wygląda na wyłączony. Item: separator poza listą zachowuje swoją rolę. Chart: id trafia do elementu, fokus z klawiatury rysuje pierścień wokół wykresu, a długa etykieta w podpowiedzi nie styka się już z wartością. Resizable: uchwyt z fokusem pokazuje pierścień, a nie tylko zmianę koloru. Card: stopka zagnieżdżonej karty nie usuwa już paddingu karty zewnętrznej. Label przygasa w wyłączonym Field.
Rozmiary Select, Avatar i AlertDialog to zwykłe klasy, więc rozmiar podany w className wygrywa. ScrollArea opakowuje treść we własny element.

Dokumentacja

Osiem przykładowych aplikacji na stronie /examples: panel, poczta, asystent, zamówienie, cennik, ustawienia, faktury i logowanie, każda interaktywna.
Kopiuj stronę zwraca stronę jako Markdown: przykłady stają się kodem, a tabele referencyjne pozostają tabelami.
Przebudowany kreator motywu: dwa kolory marki z gotowej palety, odcienia albo wartości hex, tabela kontrastu obejmująca pierścień fokusu i arkusz stylów do pobrania.
Każda strona została sprawdzona z kodem, który opisuje: poprawiono około stu stwierdzeń na mniej więcej pięćdziesięciu stronach, w obu językach.
Wprowadzenie mówi, czym jest prfct: design systemem dla Next.js zbudowanym na shadcn, i wymienia, co dodaje do komponentów shadcn oraz którą jedną część pomija.
Instalacja wymienia pytania, które zadaje CLI, i podpowiada, jak na nie odpowiedzieć.
Diagramy anatomii dla RadioGroup, InputOTP, Collapsible, Resizable i Carousel; we wszystkich diagramach wskaźnik części tekstowej kończy się obok tekstu, a nie na nim.
Przykłady Checkout i Assistant nie zostawiają już pod stopką pustego miejsca, w które dało się przewinąć: ich przewijane kontenery są pozycjonowane, więc treść ukryta wizualnie zostaje w środku. Z tego samego powodu Drawer pozycjonuje swoją treść.
Punkty orientacyjne i nagłówki: dwie boczne szyny tego serwisu nie są już nienazwanymi punktami complementary, a małe tytuły w przykładach nie zaburzają kolejności nagłówków strony, na której się znajdują.
Przykłady dokładniej trzymają się reguł systemu: siatki kart zachowują odstęp wymagany przez regułę odstępów, ramka wideo pozostaje widoczna na ciemnej stronie, a ostatnia gradientowa okładka zniknęła.
Nowy znak.

Narzędzia

pnpm test:install instaluje prfct w świeżym projekcie z każdym komponentem i każdym przykładem, na najnowszych wydaniach wszystkich zależności, a potem uruchamia linter, buduje całość i sprawdza typy. Sprawdza też, czy prfct zachowuje każdy eksport i każdy data-slot aktualnych komponentów shadcn, oraz buduje komponenty shadcn, których prfct nie ma, razem z komponentami prfct.
Test rejestru pilnuje, żeby każdy dostarczany plik dało się zainstalować, kontrola stanu stron działa też na ekranie o szerokości 320 px, nowy test sprawdza, że najechanie kursorem nigdy nie przemalowuje ramki zaznaczonej lub aktywnej kontrolki, a żadna strona nie może być wyższa niż jej stopka.
Zbudowano i przetestowano na Base UI 1.9, Next.js 16.4, React 19.3 i Recharts 3.10.

2.0.0 — październik 2026

Spokojniejszy i precyzyjniejszy prfct. Każda powierzchnia została narysowana od nowa według jednej zasady: strukturę tworzą typografia, odstępy i jedna cienka linia, nigdy dekoracja.

Fundamenty

Powierzchnie wyniesione są płaskie. Karty, pola, listy wyboru, pola wyboru, przyciski z obramowaniem i przełączniki rysuje samo obramowanie 1 px; shadow-raised nie daje teraz żadnego cienia. Cienie rzucają tylko warstwy pływające i modalne.
Pełne przyciski tracą fazowanie. default, brand i destructive to płaskie wypełnienia; narzędzie bevel zostało usunięte.
Typografia ekspozycyjna oddycha. Role display mają grubość 600 i światło zgodne z metryką Intera, od −0,020 do −0,024 em, oraz nieco wyższą interlinię.
Spokojniejsze kropki statusu. BadgeDot live łagodnie przygasa zamiast pulsować pierścieniem i służy wyłącznie do trwających czynności.
Poświata fokusu w polach tekstowych to jeden pierścień, bez dodatkowego cienia.
Awatary w AvatarGroup zachodzą na siebie o jedną piątą średnicy, więc inicjały pozostają całe.
Narzędzie bg-grid zostało usunięte.

Dokumentacja

Podglądy pokazują swój kod. Przykład i jego źródło są razem; dłuższe źródła startują zwinięte. Kropkowane tło zniknęło.
Tabele rysują same linie. Nagłówki w pasku bocznym, spisie treści i stopce są zapisane zwykłą wielkością liter.
Strony oznaczone jako stabilne nie mają już odznaki; mają ją tylko nowe, beta i wycofane.
Wyszukiwarka jest przyciskiem także na telefonach.
Przełączanie motywu jest natychmiastowe.
Przegląd komponentów renderuje miniatury na serwerze; kod w przeglądarce wczytuje tylko wykres, który mierzy swój kontener.
Nowa strona główna: produkt, a po nim specyfikacja fundamentów, komponentów, motywów i kodu.
Nowa strona: Produkcja.

Produkcja

Nagłówki bezpieczeństwa w każdej odpowiedzi: Content Security Policy zapisana jako dane w lib/security.ts, HSTS, X-Frame-Options, Cross-Origin-Opener-Policy i ostrzejsza Permissions-Policy.
Element rejestru security instaluje ten sam zestaw w dowolnym projekcie Next.js: shadcn add https://www.prfct.dev/r/security.json.
/.well-known/security.txt, manifest aplikacji, ikony PNG i ICO oraz dyrektywy dla robotów dopuszczające duże podglądy obrazów.
Pliki rejestru i tokenów można odczytywać z dowolnego pochodzenia.

Poprawki

Żadna strona nie przewija się na boki ani nie ucina treści na ekranie o szerokości 320 px, w żadnym języku.
Card: tytuł zawija się, zanim CardAction zostanie ściśnięta, a akcje w stopce się zawijają.
Długie identyfikatory w tekście łamią się, zamiast poszerzać stronę.
Odnośniki do poprzedniej i następnej strony są przetłumaczone.
Przykłady używają neutralnych wypełnień zamiast gradientowych grafik.

1.1.0 — wrzesień 2026

prfct mówi nie tylko po angielsku.

Lokalizacja

LocaleProvider przełącza słowa, które komponenty mówią same od siebie — przyciski zamykania, status spinnera, punkty orientacyjne paginacji, ścieżki nawigacji i karuzeli, mobilny pasek boczny i paletę poleceń — z wbudowanym angielskim i polskim, a każdy inny język to jeden obiekt z komunikatami. Zobacz Lokalizację.
Calendar pobiera lokalizację dat z providera, a podpowiedzi Chart formatują liczby w jego języku.

Dokumentacja

Po polsku, pod /pl: każda strona, przykład, opis tokenu i obraz Open Graph, ze wspólnymi kotwicami, alternatywami hreflang, polskim indeksem wyszukiwania i /pl/llms.txt.
Przykłady pisze się raz i tłumaczy z katalogów tekstów podczas budowania, więc kod, który kopiujesz, to kod, który działa.
Dane strukturalne (ścieżki nawigacji i artykuły) na każdej stronie.

Poprawki

PaginationEllipsis i BreadcrumbEllipsis są odczytywane przez czytniki ekranu, zamiast być przed nimi ukryte.
Opisy w diagramach anatomii wyświetlają kod w tekście.
Elementy rejestru nie wymieniają już importów samych typów jako zależności.
Strony nie niosą już indeksu wyszukiwania; paleta pobiera go, gdy za chwilę ma się otworzyć.

1.0.0 — wrzesień 2026

Pierwsze stabilne wydanie.

Fundamenty

Generowana paleta OKLCH. Dziesięć 12-stopniowych skal — szara, marki, czerwona, bursztynowa, zielona, niebieska, pomarańczowa, morska, fioletowa i różowa — generowanych dla trybu jasnego i ciemnego, ze stopniami tekstu wyliczonymi pod WCAG 2.2 AA.
Tokeny semantyczne zgodne z nazewnictwem shadcn/ui, a do tego role brand, surface, field, input, edge, overlay, selection i role statusów.
Samodzielnie hostowany Inter 4.1 ze wszystkimi funkcjami OpenType i rozmiarem optycznym; Geist Mono do kodu.
Semantyczne role typograficzne: display, heading, body, label, caption, overline i code.
Tokeny ruchu ze sprężynami w CSS linear() oraz wspólne klasy narzędziowe do choreografii popupów i okien modalnych.
Motywy lokalne: dowolne poddrzewo może przełączyć tryb za pomocą klasy.
Eksport tokenów w formacie DTCG 2025.10 dla narzędzi projektowych.

Komponenty

54 komponenty zbudowane na Base UI, ze stylami opracowanymi od podstaw.
Button zyskuje stan loading, który zachowuje szerokość i fokus.
Input, Select i NativeSelect zyskują rozmiary zgodne z Button.
Tabs zyskuje przesuwający się wskaźnik, Sheet — wariant pływający, a Command — stopkę z podpowiedziami klawiszy.

Dokumentacja

Strona dla każdego komponentu: przykłady na żywo, wytyczne z przykładami „dobrze” i „źle”, opis obsługi klawiatury dla komponentów interaktywnych i API — a dla 23 z nich także diagramy anatomii mierzone na żywym komponencie.
Fundamenty, wzorce, kreator motywów i cztery przykładowe aplikacje zbudowane wyłącznie z prfct.
Wyszukiwanie z rankingiem wyników i synonimami, indeks /llms.txt dla modeli językowych oraz obrazy Open Graph dla każdej strony.

Narzędzia

Rejestr ze wszystkimi komponentami i motywem, instalowany przez shadcn CLI i przetestowany na świeżym projekcie.
Funkcja cn() rozpoznająca tokeny.
Automatyczne testy każdej strony: axe-core w trybie jasnym i ciemnym, błędy w konsoli, błędy hydratacji i nieprawidłowe zagnieżdżanie elementów na komputerach i urządzeniach mobilnych oraz widoczny fokus na każdym elemencie w kolejności tabulacji na najbardziej interaktywnych stronach.