Banksider — Tvoje rybářská komunita

Barvy

Blue 500 (Primary)#1E5A8E--color-blue-500

Blue 400#4793C2--color-blue-400

Blue 700#14406A--color-blue-700

Green 500 (Secondary)#3E7C47--color-green-500

Amber 500 (Accent)#E8A857--color-amber-500

Red 500 (Error)#C6543C--color-red-500

Neutral 900#0F172A--color-neutral-900

Neutral 600#475569--color-neutral-600

Neutral 400#94A3B8--color-neutral-400

Neutral 200#E2E8F0--color-neutral-200

Neutral 50#F8FAFC--color-neutral-50

White#FFFFFF--color-neutral-0

Sémantické barvy

--bg-primary

--surface

--brand-primary

--brand-secondary

--brand-accent

--status-error-text

Typografie

Font: Inter (next/font, latin-ext pro české háčky)

Display — 3rem / 800

H1 — 1.875rem / 700

H2 — 1.5rem / 700

H3 — 1.25rem / 600

Large — 1.125rem / 400

Body — 1rem / 400 (výchozí)

Small — 0.875rem / 400

Label — 0.75rem / 600 / uppercase

Spacing (4px base)

--space-1

4px

--space-2

8px

--space-3

12px

--space-4

16px

--space-5

20px

--space-6

24px

--space-8

32px

--space-10

40px

--space-12

48px

--space-16

64px

--space-20

80px

Buttons

Velikosti

Stavy

Alerts

Profil byl úspěšně aktualizován.

Nepodařilo se uložit změny. Zkuste to znovu.

Váš účet bude za 7 dní deaktivován.

Nová verze aplikace je k dispozici.

Formulářové prvky

E-mail

Výběr

Bio

Cards

Základní karta

Statická karta s titulem a obsahem.

Interaktivní karta

Hover efekt s elevation a translateY.

Shadows

--shadow-xs

--shadow-sm

--shadow-md

--shadow-lg

--shadow-xl

Border Radius

sm (6px)

md (8px)

lg (12px)

xl (16px)

full (9999px)

Chipy a štítky

Chip — varianty

DefaultPrimarySuccessWarningDanger

Chip — velikosti

SmallMedium

Chip — s removable + leading

Kapr obecnýLipan podhorníPstruh duhový

Badge — varianty

31215999+NEWBETAOnlineOffline

Avatary

Velikosti

JNPSKDTHEN

S online indikátorem

JNPSKD

Tvar — čtverec

KKTL

Vlastní initials

JNPSKD

Ikonová tlačítka

Varianty

Velikosti

Stavy

Záložky (Tabs)

Varianta underline (default)

Obsah záložky Detail. Použij šipky pro klávesovou navigaci.

Varianta pills

Vše (aktivní)

Dialogy (Confirm + Prompt)

Imperativní helpery confirmDialog() a promptDialog() jako náhrada za window.confirm / window.prompt. Vrací Promise.

ConfirmDialog

PromptDialog

Popover

Anchored popup positioned vůči triggeru. Portal do body, auto-flip, outside click + Esc zavření.

Trigger pattern (bottom-start)

anchorRef pattern (top-end)

Sheet

Slide-in panel z hrany viewportu. Pro mobilní detail views, filtry, vícekrokové flow. Pro centered overlays použij <Modal>.

Strany + velikosti

VerticalNav

Vertikální Link-based navigace pro sidebars (Settings, AdminShell). Auto-detekuje aktivní item přes usePathname().

S sekcemi, ikonami a badges

Flat (no sections), prefix match

Responsive horizontal-mobile + hint

Při šířce < 900px se flipne do horizontálního scrollu (tabs). Hint je hidden v horizontal módu. Active indicator přepíná border-left → border-bottom.

Custom badge slot (ReactNode)

Když je badge ReactNode (např. <Badge variant="danger" />), renderuje se v custom slotu místo defaultního pillu.

Oznámení (Toasts)

Klikni a podívej se do pravého horního rohu. Auto-dismiss za 4 s, lze zavřít manuálně.

Barvy

Sémantické barvy

Typografie

Spacing (4px base)

Buttons

Velikosti

Stavy

Alerts

Formulářové prvky

Cards

Základní karta

Interaktivní karta

Shadows

Border Radius

Chipy a štítky

Chip — varianty

Chip — velikosti

Chip — s removable + leading

Badge — varianty

Avatary

Velikosti

S online indikátorem

Tvar — čtverec

Vlastní initials

Ikonová tlačítka

Varianty

Velikosti

Stavy

Záložky (Tabs)

Varianta underline (default)

Varianta pills

Dialogy (Confirm + Prompt)

ConfirmDialog

PromptDialog

Popover

Trigger pattern (bottom-start)

anchorRef pattern (top-end)

Sheet

Strany + velikosti

VerticalNav

S sekcemi, ikonami a badges

Flat (no sections), prefix match

Responsive horizontal-mobile + hint

Custom badge slot (ReactNode)

Oznámení (Toasts)

Varianty

S titulkem + custom dobou