Przejdź do treści
prfct
Nowość: przykłady do zainstalowania

Design system dla Next.js.Zbudowany na shadcn, do zmiany po swojemu.

Tokeny ze sprawdzonym kontrastem, dostępne komponenty i kompletne przykładowe aplikacje. Instalujesz je przez CLI shadcn, a kod należy do Ciebie.

ZacznijPrzeglądaj komponenty
$ pnpm dlx shadcn@latest add https://prfct.dev/r/prfct.json

Cechy

Komponenty, które do siebie pasują

Jeden promień, jedna skala odstępów i jeden zestaw stanów we wszystkich komponentach.

Zespół
Trzy osoby mogą otworzyć ten projekt.
MMaya ChenWłaściciel
JJonah OkaforAdministrator
LLena ParkCzłonek
Plan
Zmienisz go w każdej chwili.

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.

Typografia z rolami

Każda rola ustawia naraz rozmiar, interlinię, grubość i tracking.

  • Display
  • Nagłówek
  • Tekst
  • Etykieta
  • Kod

Obsługa bez myszy

Obsługa klawiatury, zarządzanie fokusem i ARIA są w każdym komponencie.

Jeden motyw, dowolna marka

Wybierz kolor w kreatorze motywów. Każdy komponent się dostosuje.

Otwórz kreator motywów

Kod należy do Ciebie

CLI shadcn kopiuje komponenty do Twojego projektu. Czytaj je, zmieniaj, usuwaj to, czego nie potrzebujesz.

$ shadcn add button
✔ components/ui/button.tsx
✔ components/ui/spinner.tsx
✔ components/ui/locale.tsx
✔ lib/utils.ts

Całe ekrany, nie tylko części

Przykładowe aplikacje, które instalujesz jednym poleceniem i dostosowujesz.

Od pustego folderu do pierwszego ekranu

  1. 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
  2. 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
  3. 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

Pytania, które padają przed instalacją

Tak. To otwarte oprogramowanie na licencji MIT, do projektów prywatnych i komercyjnych.

Zainstaluj motyw. Zbuduj pierwszy ekran jeszcze dziś.

Przeczytaj instrukcję instalacji
$ pnpm dlx shadcn@latest add https://prfct.dev/r/prfct.json