v1.0 · Design System · Open Source

Build faster. Ship better.

Design System oparty na Next.js + shadcn/ui + Tailwind CSS. Gotowe bloki, ścisłe zasady, zero magicznych wartości. Od zera do produkcji w minuty.

Zacznij budować GitHub

Next.js 16 shadcn/ui v4 Tailwind CSS v4 TypeScript RSC

6

Prymitywów layoutu

Section / Container / Stack / Grid / Heading / Text

4

Warstwy architektury

ui → layout → blocks → pages

100%

TypeScript

strict mode, zero any

Filozofia

Trzy filary systemu

Zasady, które prowadzą każdą decyzję projektową i techniczną w prfct.dev.

Prostota i minimalizm

Jeden schemat komponentów, zero magicznych wartości. Spójność systemu jest ważniejsza niż unikalność pojedynczego widoku.

Szybkość dostarczania

Gotowe bloki do kompozycji. Hackathon-ready — od zera do działającej strony w minuty, nie godziny.

Jedno Źródło Prawdy

Tokeny CSS w globals.css kaskadują przez całą aplikację. Dark mode bez prefiksu dark: — obsługują go wyłącznie tokeny.

Architektura

Cztery warstwy

Ograniczone, ściśle zdefiniowane odpowiedzialności. Niższe warstwy nie wiedzą o wyższych.

Atomy

components/ui/

Shadcn/ui — Button, Input, Badge, Card. Czyste atomy bez wiedzy o kontekście.

Szkielet

components/layout/

6 prymitywów przestrzeni — Section, Container, Stack, Grid, Heading, Text.

Wzorce

components/blocks/

Złożone sekcje gotowe do wdrożenia — HeroLanding, CardIcon, NavLanding.

Widoki

app/page.tsx

Czysta kompozycja bloków. Zero logiki, zero kilometrów kodu.

Zasady kodu

Reguły bez wyjątków

Każda zasada ma konkretne uzasadnienie. Żadna nie podlega negocjacjom.

Czytaj Dokumentację

Tokeny semantyczne zamiast surowych kolorów Tailwinda

Mobile-first — klasy bazowe dla smartfona, breakpointy w górę

RSC domyślnie — use client tylko gdy naprawdę potrzeba

Ikony wyłącznie z lucide-react, obrazy przez next/image

Dostępność WCAG AA — kontrast 4.5:1, pełna nawigacja klawiaturą

Gotowy do działania

Zacznij od Założeń

Filozofia systemu i zasady prowadzące każdą decyzję projektową. Twój punkt startowy.

Przejdź do Dokumentacji Instalacja