Strona główna: klasyczna
Wyśrodkowane hero z poleceniem do skopiowania, ściana żywych komponentów, sześć cech, trzy kroki instalacji, lista przykładów, pytania i końcowe wezwanie do działania. Własny nagłówek i stopka są opcjonalne.
Design system dla Next.js, zbudowany na shadcn
Tokeny ze sprawdzonym kontrastem, dostępne komponenty i kompletne przykładowe aplikacje. Instalujesz je przez CLI shadcn, a kod należy do Ciebie.
$ pnpm dlx shadcn@latest add https://prfct.dev/r/prfct.jsonKażdy element powyżej to komponent prfct w domyślnym motywie.
Od czego zaczynasz
Decyzje, które design system musi podjąć, są już podjęte i spisane.
Kontrast, którego nie musisz sprawdzać
Każda skala jest generowana, a jej stopnie tekstowe są sprawdzane względem WCAG AA na wypełnieniach, na których leżą, w jasnym i ciemnym motywie.
Dostępność od pierwszego renderu
Obsługa klawiatury, zarządzanie fokusem i ARIA są w każdym komponencie, a testy automatyczne sprawdzają je w obu motywach.
Kod należy do Ciebie
CLI shadcn kopiuje komponenty do Twojego projektu. Czytaj je, zmieniaj, usuwaj to, czego nie potrzebujesz.
Jeden motyw, dowolna marka
Wybierz kolor w kreatorze motywów i wklej jeden arkusz stylów. Każdy komponent się dostosuje.
Całe ekrany, nie tylko części
Panel, zamówienie, klient poczty i więcej: przykładowe aplikacje, które instalujesz jednym poleceniem i dostosowujesz.
Gotowy nie tylko na angielski
Teksty wbudowane w komponenty, daty i liczby podążają za językiem Twojej strony.
Od pustego folderu do pierwszego ekranu
Bez pakietu do konfigurowania i bez opakowywania aplikacji.
- 01
Załóż projekt
Utwórz aplikację Next.js z shadcn. W istniejącej aplikacji pomiń --template next.
$ pnpm dlx shadcn@latest init --template next --base base --preset nova - 02
Dodaj motyw
Tokeny, style bazowe i definicje fontów trafiają do projektu jako pliki. Instrukcja pokazuje import arkusza stylów i dwa pliki fontów do pobrania.
$ pnpm dlx shadcn@latest add https://prfct.dev/r/prfct.json - 03
Dodaj to, czego potrzebujesz
Pojedynczy komponent albo całą przykładową aplikację. Każda pozycja instaluje to, od czego zależy.
$ pnpm dlx shadcn@latest add https://prfct.dev/r/dashboard.json
Zacznij od gotowego ekranu
Przykładowe aplikacje napisane tak, żeby dało się je czytać, każda instalowana jednym poleceniem.
- PanelNawigacja, statystyki, wykres ruchu i tabela wdrożeń.
- PocztaFoldery, lista wiadomości i panel czytania z polem odpowiedzi.
- ZamówienieKontakt, dostawa i płatność z podsumowaniem zamówienia w zasięgu wzroku.
- RezerwacjaKalendarz, wolne terminy, krótki formularz i potwierdzenie.
- ZespółCzłonkowie, zmiana roli w miejscu i okno zaproszenia.
- CennikTrzy plany, tabela porównawcza i odpowiedzi na pytania.
Pytania
Te, które padają, zanim ktokolwiek coś zainstaluje.
Zainstaluj motyw i zbuduj pierwszy ekran
$ pnpm dlx shadcn@latest add https://prfct.dev/r/prfct.json