Open Source · MIT License · v1.0

prfct.dev

Build faster. Ship better.

Design System oparty na Next.js 16 + shadcn/ui + Tailwind CSS v4. Gotowe bloki, ścisłe zasady, zero magicznych wartości.

Zacznij budować GitHub

Next.js 16 React 19 Tailwind v4 shadcn/ui TypeScript 5

6

Prymitywów layoutu

Section · Container · Stack · Grid · Heading · Text

4

Warstwy architektury

ui → layout → blocks → pages

12+

Gotowych bloków

Heroes · Nav · Cards · Sidebars · Feeds

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. Od zera do działającej strony w minuty — idealny na hackathony i szybkie wdrożenia.

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 z ograniczonymi odpowiedzialnościami

Niższe warstwy nie wiedzą o wyższych. Zmiana atomu nie rozrywa bloków. Zmiana bloku nie dotyka stron.

Atomy

components/ui/

Prymitywy shadcn/ui — Button, Input, Badge, Card, Dialog. Czyste atomy bez wiedzy o kontekście strony.

Szkielet

components/layout/

6 prymitywów przestrzeni. Robią wyłącznie layout. Żadnych kolorów, żadnej treści — tylko struktura.

Wzorce

components/blocks/

Złożone sekcje gotowe do użycia — HeroLanding, CardIcon, NavLanding, AppSidebar, BentoHero i więcej.

Widoki

app/**/page.tsx

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

Zasada zależności

ui/layout/blocks/pages/

Każda warstwa importuje wyłącznie z warstw poniżej niej. Naruszenie tej zasady = zależność cykliczna = nieprzetestowany komponent.

Layout Primitives

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

Zamiast pisać px-4 md:px-6 lg:px-8 mx-auto — używasz Container. Zamiast flex flex-col gap-4 — używasz Stack. Zawsze.

Section

Semantyczna sekcja z kontrolą odstępów pionowych

as · size (compact/default/relaxed/hero)

Container

Centruje treść z responsywnym paddingiem

size (narrow/default/wide)

Stack

<Stack>

Flex kolumna lub wiersz z responsywnymi odstępami

direction · gap (xs–xl) · align

Grid

<Grid>

Responsywna siatka z predefiniowanymi breakpointami

cols (2/3/4) · gap (sm/md/lg)

Heading

Nagłówek — tag HTML niezależny od rozmiaru wizualnego

as (h1–h6) · size (h1–h5)

Text

<Text>

Paragraf z semantycznymi wariantami

variant (lead/body/small/muted/mono)

Blocks

Gotowe bloki do natychmiastowej kompozycji

Importuj z @/components/blocks. Każdy blok jest samodzielny, typowany i sprawdzony na produkcji.

HeroLanding

RSC

Hero z eyebrow, CTA i tech stack

HeroCenter

RSC

Wyśrodkowany hero z obrazem

HeroTitle

RSC

Hero wyrównany do lewej

TitleSection

RSC

Nagłówek sekcji z kicker

CardIcon

RSC

Karta z ikoną Lucide

BentoHero

RSC

Bento grid artykułów

NewsCard

RSC

Karta artykułu z datą

NavLanding

Client

Sticky navbar z mobile Sheet

NavBreadcrumb

Client

Breadcrumb (usePathname)

AppSidebar

Client

Sidebar ze scrollspy

ModeToggle

Client

Przełącznik motywu

NewsNav

Client

Nawigacja kategorii

Import

import { HeroLanding, CardIcon, NavLanding } from "@/components/blocks"

Zasady bez wyjątków

Reguły, które eliminują całe klasy błędów

Każda zasada ma konkretne uzasadnienie — spójność systemu ważniejsza niż szybkość jednorazowego haka.

Czytaj dokumentację

Tylko tokeny semantyczne

bg-primary, text-muted-foreground — nigdy bg-zinc-900

Mobile-first zawsze

Klasy bazowe = smartfon, breakpointy = rozbudowa w górę

Dostępność WCAG AA

Kontrast 4.5:1, pełna nawigacja klawiaturą, aria-hidden

RSC domyślnie

"use client" tylko gdy useState/useEffect/Radix

Named exports wszędzie

export default tylko dla page.tsx i layout.tsx

Design Tokens

Jedno źródło prawdy dla wszystkich kolorów

Tokeny OKLCH w globals.css kaskadują przez całą aplikację. Dark mode obsługują wyłącznie tokeny — żaden komponent nie wie o klasie .dark.

✓ Zawsze tak

bg-primary text-primary-foreground

bg-muted text-muted-foreground

bg-card border-border

bg-secondary text-secondary-foreground

bg-destructive

✗ Nigdy tak

bg-zinc-900 text-white

surowa paleta Tailwinda

bg-gray-100 text-gray-900

surowa paleta Tailwinda

dark:bg-gray-800

prefiks dark: zamiast tokenów

text-[#1a1a1a]

hardkodowana wartość hex

bg-black text-white

surowy kolor CSS

Gotowy do produkcji

Zacznij od Założeń

Filozofia systemu, zasady i pełna dokumentacja wszystkich komponentów. Twój punkt startowy do budowania bez magicznych wartości.

Przejdź do dokumentacji GitHub

Open Source · MIT

TypeScript strict

WCAG AA

Dark mode