prfct to design system dla Reacta z otwartym kodem. Generowana paleta OKLCH z kontrastem wyliczanym podczas budowania, 54 dostępne komponenty na Base UI i tokeny, które należą do ciebie — dla Next.js, Tailwind CSS i shadcn.
$ pnpm dlx shadcn@latest add https://www.prfct.dev/r/prfct.jsonSystemowo z założenia
Każdy komponent prfct powstaje z tych samych fundamentów. Zmień fundament, a cały interfejs podąży za nim.
Dwanaście stopni na każdy odcień, generowanych w OKLCH. Stopnie tekstu są wyliczane pod WCAG AA na każdym wypełnieniu, na którym mogą się znaleźć — i sprawdzane na 1152 wygenerowanych skalach w testach.
Inter z rozmiarem optycznym przechodzi w odmianę Display, gdy tekst rośnie. Każda funkcja OpenType przetrwała samodzielny hosting.
Fizyczne sprężyny symulowane podczas budowania i dostarczane jako krzywe CSS linear(). Można je przerwać, a przy ograniczonym ruchu się wyłączają.
// light.tokens.json — DTCG 2025.10
"brand": { "9": {
"$type": "color",
"$value": { "colorSpace": "oklch",
"components": [0.515, 0.24, 267],
"hex": "#2c4fee" } } }Zdefiniowane raz w TypeScripcie. Eksportowane jako CSS, klasy Tailwinda i JSON w formacie W3C Design Tokens dla Figmy i Tokens Studio.
Prymitywy Base UI implementują wzorce ARIA; prfct sprawia, że dostępny wybór jest wyborem domyślnym.
Zrób go swoim
Wybierz kolor marki, a prfct wygeneruje całą skalę dla trybu jasnego i ciemnego — na nowo wyliczając kontrast każdego stopnia tekstu. Cała ta strona przemalowuje się w trakcie wyboru.
Otwarty kod
Komponenty trafiają do twojego projektu przez shadcn CLI. Czytaj je, zmieniaj, usuwaj to, czego nie potrzebujesz. Aktualizacja to diff, który przeglądasz — nigdy wymuszona zmiana, która psuje twój kod.
const buttonVariants = cva(base, {
variants: {
variant: {
default: "bevel bg-primary text-primary-foreground",
brand: "bevel bg-brand text-brand-foreground",
outline: "border border-border-strong bg-card",
ghost: "hover:bg-accent",
},
size: { xs, sm, default, lg, xl, icon },
},
})
// Stan ładowania zachowuje szerokość i fokus — układ nie skacze.
<Button loading={saving}>Zapisz zmiany</Button>Zainstaluj motyw, dodaj pierwszy komponent i dostarcz interfejs, który jest precyzyjny od pierwszego commita.