Przejdź do treści

Design System — v 1.0

Komponenty

Katalog wszystkich dostępnych komponentów UI. Shadcn/ui jako fundament atomów, bloki prfct.dev jako nadbudowa.

Atomy

Atomy i Formularze

Podstawowe jednostki interfejsu z components/ui. Gotowe do użycia, bez konfiguracji.

Badge

shadcn/ui

Etykiety statusów, kategorii i metadanych.

defaultsecondaryoutlinedestructiveghostlink
variant=defaultsecondaryoutlinedestructiveghostlink

Skeleton

shadcn/ui

Placeholder podczas ładowania — zachowuje layout.

Separator

shadcn/ui

Linia oddzielająca konteksty. Reguła DS: obramowanie separuje, nie dekoruje.

horizontal
Lewy
Prawy
vertical
Lewy
Prawy

Button

shadcn/ui

Główny element akcji. 6 wariantów × 9 rozmiarów. Wszystkie obsługują ikonę Lucide dziedziczącą color.

Warianty

Rozmiary

Z ikonami Lucide

Input — stany

shadcn/ui

Brak wariantów wizualnych — stany komunikowane przez atrybuty HTML.

normalny
type="password"
disabled
aria-invalid

Input — wzorzec formularza

Typowa kompozycja: etykieta + Input + Button. Zero zewnętrznych zależności.

Tabela

Dane Tabelaryczne

Komponent Table oparty na natywnym HTML — pełna zgodność z TanStack Table. Responsywny, dostępny, ze stylem hover.

Table — katalog komponentów DS

shadcn/ui

TableHead stosuje wzorzec kicker — uppercase tracking-widest. TableRow ma hover:bg-muted/50 i przejście transition.

KomponentKategoriaWarianty / Rozmiary
ButtonAkcjedefault · secondary · outline · ghost · destructive · link
BadgeStatusdefault · secondary · outline · destructive · ghost · link
InputFormularze— (stany: normal, disabled, aria-invalid)
CardKompozycjasize: default · sm
SkeletonInformacja— (className dla kształtu)
SeparatorStrukturaorientation: horizontal · vertical
TableDane— (TanStack-compatible)
BreadcrumbNawigacja— (BreadcrumbLink · BreadcrumbPage · BreadcrumbSeparator)
ScrollAreaUkład— (ScrollBar direction: vertical · horizontal)
DropdownMenuOverlayuse client
TooltipOverlayuse client
SheetOverlayuse client
Kompozycja

Karty

Card jest głównym kontenerem treści w DS. Dostępne sub-komponenty: CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction.

Podstawowa

Tytuł karty
CardDescription — krótkie wprowadzenie do treści. Domyślnie text-sm text-muted-foreground.

Treść karty w CardContent. Używaj Stack i Grid do układu zawartości wewnątrz karty.

Z CardFooter

Karta z akcjami
CardFooter renderuje się na szarym tle z border-t — wizualnie oddziela akcje od treści.

Używaj CardFooter dla przycisków CTA bezpośrednio związanych z zawartością karty.

size="sm" + CardAction

Kompaktowa karta
CardAction umieszcza element w prawym górnym rogu. Rozmiar sm zmniejsza padding wewnętrzny.
Projekty12
Komponenty47