Playnament UI Playground
Jedna strona do testowania całego design systemu: kolorów, typografii, komponentów, stanów, formularzy, overlayów oraz wykresów.
Semantic colors
Najważniejsza sekcja podczas edycji globals.css.
Chart colors
Radius & surfaces
Zaokrąglenia, bordery i hierarchia powierzchni.
Główna powierzchnia aplikacji.
Powierzchnia zawartości.
Typography
Nagłówki, tekst główny, muted i elementy specjalne.
Heading H1
Heading H2
Heading H3
Heading H4
Lead — większy tekst wprowadzający do sekcji.
Zwykły paragraf. To jest przykładowa treść pozwalająca ocenić czytelność, kontrast, wysokość linii oraz szerokość tekstu.
Muted text — informacje drugorzędne.
Dobry design system powinien pozwolić zmienić charakter całej aplikacji przez zmianę tokenów, bez poprawiania każdego komponentu osobno.
Przykład bg-primary oraz text-primary-foreground.
- Light theme
- Dark theme
- High contrast theme
Cards
Przykładowa zawartość komponentu.
Theme preview
Miniatura prawdziwego UI pokazująca wiele tokenów jednocześnie.
Form controls
Input, textarea, select, checkbox i radio group.
Input states
Przydatne szczególnie przy ustawianiu border, input, ring i destructive.
To pole zawiera błąd.
Field
Form + React Hook Form
Tabs
Aktualny shadcn oraz nasza zawijana wersja TabsList2.
Dialog, Sheet, Popover, Tooltip & Hover Card
Dropdown menu
Navigation menu
Command
Accordion
Avatar
Scroll area
Table
| # | Zawodnik | Bilans | Punkty |
|---|---|---|---|
| 1 | Anna Kowalska | 8–1 | 24 |
| 2 | Jan Nowak | 7–2 | 21 |
| 3 | Maria Lis | 6–3 | 18 |
| 4 | Piotr Mazur | 5–4 | 15 |
Carousel
Charts
Bar, Line, Area i Pie do strojenia chart-1 ... chart-5.
Loading states
Empty state
Sonner / Toast
Zakłada globalny Toaster w root layout.
Focus & accessibility
Przejdź po elementach klawiszem Tab podczas strojenia ring/focus.