Next.js 16 · shadcn/ui · Tailwind v4

Przestań pisać
px‑4 py‑16 mx‑auto.

prfct.dev to Design System z gotową architekturą, pełnym zestawem tokenów i blokami do natychmiastowej kompozycji. Zacznij od struktury, nie od konfiguracji.

Zacznij budować GitHub

Open Source

TypeScript strict

WCAG AA

Dark mode

Brzmi znajomo?

Ile razy napisałeś już to samo?

Każdy projekt zaczyna się od kopiowania snippetów, ustawiania grid-cols i tłumaczenia dark: klas. prfct.dev eliminuje całą tę warstwę.

Bez prfct.dev

py-10 md:py-16

max-w-7xl mx-auto px-4 md:px-6

flex flex-col gap-4 md:gap-6 lg:gap-8

grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6

text-3xl md:text-4xl font-semibold tracking-tight

text-sm text-muted-foreground leading-relaxed

Z prfct.dev

Te same 6 abstrakcji. Tysiące projektów. Nigdy więcej decyzji o paddingu.

System

Cztery warstwy.
Nieograniczona kompozycja.

Każda warstwa ma ograniczoną, ściśle zdefiniowaną odpowiedzialność. Zmiana atomu nie dotyka bloków. Zmiana bloku nie dotyka stron. Wszystko płynie w jednym kierunku.

Atomy

components/ui/

Prymitywy shadcn/ui — Button, Input, Badge, Card. Nic nie wiedzą o kontekście strony.

Szkielet

components/layout/

6 prymitywów przestrzeni — Section, Container, Stack, Grid, Heading, Text. Tylko struktura, żadnych kolorów.

Wzorce

components/blocks/

Złożone sekcje gotowe do użycia — HeroLanding, CardIcon, NavLanding, AppSidebar i inne.

Widoki

app/**/page.tsx

Czysta kompozycja bloków. Plik strony to lista klocków — zero logiki, zero surowego layoutu.

Wszystko czego potrzebujesz.
Nic czego nie potrzebujesz.

Layout Primitives

6 komponentów, które budują każdy ekran

Section, Container, Stack, Grid, Heading, Text — importuj z jednego miejsca, używaj wszędzie. Nikt nie pisze px-4 ręcznie.

SectionContainerStackGridHeadingText

Blocks

12+

gotowych bloków do natychmiastowej kompozycji

Tokens

OKLCH. Zero dark:

Pełna paleta semantyczna w globals.css. Dark mode przez tokeny, bez prefiksu dark: w komponentach.

React 19

RSC domyślnie

use client tylko gdy stan, event handlery lub Radix. Reszta renderuje na serwerze.

Dostępne bloki

Hero · Nav · Sidebar · Cards · Feed

HeroLanding

RSC

NavLanding

Client

AppSidebar

Client

CardIcon

RSC

BentoHero

RSC

TitleSection

RSC

TypeScript

strict mode, zero any

RSC default

client tylko gdzie potrzeba

Dark mode

przez tokeny, bez dark:

WCAG AA

kontrast 4.5:1, focus-visible

Next.js 16

App Router, Turbopack

shadcn/ui v4

Radix + CVA

Tailwind v4

OKLCH, bez tailwind.config

Open Source

MIT, darmowy na zawsze

Filozofia

Trzy zasady bez wyjątków.

Prostota jest zasadą, nie opcją.

Jeden schemat komponentów przez cały projekt. Spójność systemu jest ważniejsza niż unikalność pojedynczego widoku. Zanim napiszesz własny komponent, sprawdź dwukrotnie czy już istnieje.

Każdy token ma znaczenie.

Zmiana jednego tokenu w globals.css aktualizuje kaskadowo całą aplikację. Dark mode bez prefiksu dark: — obsługują go wyłącznie tokeny. Żadnych hardkodowanych wartości hex.

Layout to język, nie lista klas.

Section, Container, Stack, Grid — to słowa, które opisują intencję. Zamiast py-16 max-w-7xl mx-auto piszesz Section size=relaxed. Rozmawiasz z systemem, nie z silnikiem CSS.

Next.js 16

React 19

Tailwind v4

shadcn/ui

TypeScript 5

Lucide React

prfct.dev

Zacznij za 5 minut.

Klonuj repo, uruchom pnpm dev i masz gotową architekturę, dark mode, pełen zestaw komponentów i zasady, które prowadzą każdą decyzję projektową.

Otwórz dokumentację GitHub

Open Source · MIT

Zero konfiguracji Dark Mode