UI Kit & Design System

FOXTER 2.0 · Tailwind CSS v4 + shadcn/ui + Geist Variable · Tryb ciemny ✓

Kolory

Semantyczne tokeny CSS zdefiniowane w globals.css. Automatycznie dostosowują się do trybu jasnego/ciemnego.

Marka

Primary

--primary

Secondary

--secondary

Muted

--muted

Accent

--accent

Status

Destructive

--destructive

Warning

--warning

Success

--success

Powierzchnie

Background

--background

Card

--card

Popover

--popover

Border / Ring

--border · --ring

Wykresy

--chart-1

--chart-2

--chart-3

--chart-4

--chart-5

Typografia

Font: Geist Variable. Skala Tailwind v4.

text-5xl / 800 Display

text-4xl / 700 Heading 1

text-3xl / 600 Heading 2

text-2xl / 600 Heading 3

text-xl / 500 Heading 4

text-base / 400 Body — Regularny tekst paragrafu używany w treści strony i opisach.

text-sm / 400 Small — Etykiety, opisy, tekst pomocniczy w formularzach.

text-xs / 400 Extra small — Metadane, znaczniki statusu, tabele.

muted-foreground Tekst wyciszony — pomocniczy, opisy, placeholder, etykiety.

Border Radius

Bazowy --radius: 0.75rem. Pozostałe wartości obliczane proporcjonalnie.

--radius-sm

--radius-md

--radius-lg

--radius-xl

--radius-2xl

full

Przyciski (Buttons)

Warianty, rozmiary, ikony i stany. Komponent obsługuje asChild (renderowanie jako <a>).

variant

size

size="icon*" — przyciski kwadratowe

stany: disabled + z ikonami

Plakietki (Badges)

Małe etykiety statusu i kategorii. Warianty domyślne + niestandardowe tokeny statusu.

variant (domyślne shadcn)

DefaultSecondaryDestructiveOutlineGhostLink

status FOXTER (custom className z tokenami CSS)

OpłaconoOczekujeAnulowanoAktywne zapisyTriathlonBieg

Formularze

Input, Textarea, Select, Checkbox, Label, InputGroup — wszystkie stany walidacji.

Input — stany (default / disabled / error)

Adres email

Wyłączony (disabled)

Błąd walidacji (aria-invalid)

Podaj poprawny adres email.

InputGroup — hasło z togglem widoczności

Hasło

InputGroup — ikony i tekst prefix

Szukaj wydarzeń

Miasto startu

Publiczny URL profilu

foxter.pl/

Textarea

Opis dystansu

Select — rozmiary

Checkbox + Label — stany

Akceptuję regulamin i politykę prywatności

Chcę otrzymywać newsletter FOXTER

Opcja niedostępna (disabled)

Karty (Cards)

Kontener informacji z opcjonalnym header, content i footer.

Bieg Piastów 2026

Wrocław · 28 września 2026

Dystanse: 5 km, 10 km, półmaraton. Limit: 2 000 uczestników.

Zapisy otwarteBieg

Statystyki sezonu

Bieżący sezon 2026

248

Zapisów

Wydarzeń

18 940 zł

Przychód

94%

Opłaconych

Zakładki (Tabs)

Nawigacja pozioma między widokami — typowy wzorzec w dashboardzie organizatora.

Przegląd wydarzenia — statystyki uczestnictwa, statusy płatności, kalendarz.

Tabela (Table)

Dane tabelaryczne — przykład: lista zgłoszeń uczestników.

Uczestnik	Wydarzenie	Dystans	Status	Data	Kwota
Jan Kowalski	Bieg Piastów	10 km	Opłacono	15.01.2026	89 zł
Anna Nowak	Triathlon Poznań	Sprint	Oczekuje	22.01.2026	149 zł
Piotr Wiśniewski	OCR Mazury	5 km	Opłacono	03.02.2026	119 zł
Marta Kowalczyk	Bieg Piastów	5 km	Anulowano	10.01.2026	59 zł
Tomasz Dąbrowski	Wrocław Maraton	42,2 km	Opłacono	14.02.2026	199 zł

Nakładki (Dialog & Drawer)

Dialog — okna modalne na desktop. Drawer — szuflada dolna, lepsza na mobile.

Wzorce UI (Patterns)

Złożone przykłady zbudowane z komponentów — gotowe wzorce dla FOXTER.

Wzorzec: Logowanie

Logowanie

Zaloguj się do konta FOXTER.

Hasło

Zapamiętaj mnie

Wzorzec: Toggle Group — edytor tekstu

Wzorzec: Wybór dystansu (toggle single)

Wzorzec: Wyszukiwarka z przyciskiem