Design System — v 1.0

Bloki

Gotowe sekcje złożone z prymitywów i atomów shadcn. Importowane z components/blocks — zero konfiguracji, gotowe do użycia.

Heroes

Bloki Hero

Sekcje nagłówkowe stron. Renderowane jako semantyczny element header z predefiniowanymi rozmiarami pionowego paddingu.

HeroTitle

prfct.dev

Nagłówek strony wyrównany do lewej z kicker, tytułem i opisem. Używany na wszystkich podstronach dokumentacji.

prop	typ	wymagany	domyślnie
`title`	`string`	tak	`—`
`kicker`	`string`	nie	`—`
`description`	`string`	nie	`—`
`size`	`compact \| default \| relaxed \| hero`	nie	`relaxed`
`containerSize`	`narrow \| default \| wide`	nie	`default`
`children`	`ReactNode`	nie	`—`

Podgląd

Przykładowy kicker

Tytuł strony

Krótki opis sekcji lub strony. Zwięzły, informacyjny.

HeroCenter

prfct.dev

Wyśrodkowane hero na stronę główną lub landing page. Zawiera obraz, CTA i opcjonalne linki-odznaki.

prop	typ	wymagany	domyślnie
`title`	`string`	tak	`—`
`description`	`string`	tak	`—`
`cta`	`{ href: string; label: string }`	tak	`—`
`image`	`{ src: string; width: number; height: number }`	nie	`—`
`badges`	`{ label: string; href: string }[]`	nie	`—`

Zastosowanie

Stosowany jako pierwsza sekcja strony głównej lub landing page. Używa Section size="hero" i Container size="narrow" — treść zawsze wyśrodkowana i wąska.

Nawigacja

Bloki Nawigacyjne

Elementy powłoki aplikacji — nagłówki, paska boczne, przełączniki. Większość wymaga dyrektywy use client.

NavLanding

prfct.dev

Sticky header dla landing pages. Logo po lewej, nawigacja wyśrodkowana absolutnie, ModeToggle po prawej.

Props

brak — komponent bezstanowy

Podgląd (uproszczony)

prfct.dev

ZałożeniaLayoutTokeny

NavBreadcrumb

prfct.devuse client

Breadcrumb dashboardu. Odczytuje aktywną ścieżkę przez usePathname i renderuje bieżący tytuł strony.

Props

brak — odczytuje pathname automatycznie

Rozszerzanie

Mapa ścieżek pageNames jest hardkodowana w komponencie. Każda nowa podstrona wymaga dodania wpisu do mapy.

ModeToggle

prfct.devuse client

Przełącznik motywu Light / Dark / System. Dropdown z trzema opcjami, animowana ikona słońca i księżyca.

Props

brak — używa useTheme() z next-themes

Podgląd (statyczny)

AppSidebar

prfct.devuse client

Boczny pasek nawigacji dashboardu z collapsible groups. Scrollspy przez Intersection Observer — aktywna sekcja podświetlana automatycznie.

Props

React.ComponentProps<typeof Sidebar>

Podgląd

Sekcje

Bloki Treści

Reużywalne bloki budujące zawartość stron. Stosowane bezpośrednio w page.tsx jako gotowe sekcje.

TitleSection

prfct.dev

Nagłówek sekcji z opcjonalnym kickerem (Badge), tytułem (Heading h2) i opisem (Text lead). Używany na początku każdej sekcji strony wewnątrz Stack.

prop	typ	wymagany	domyślnie
`title`	`string`	tak	`—`
`kicker`	`string`	nie	`—`
`description`	`ReactNode`	nie	`—`

Podgląd

Przykładowy kicker

Tytuł sekcji strony

Krótki opis wprowadzający. Optymalna długość: jedno zdanie, maksymalnie dwa.

CardIcon

prfct.dev

Karta z ikoną Lucide, tytułem i opisem. Stosowana w siatce Grid do prezentacji funkcji, zasad i kategorii.

prop	typ	wymagany	domyślnie
`icon`	`LucideIcon`	tak	`—`
`title`	`string`	tak	`—`
`description`	`string`	tak	`—`

Podgląd — Grid cols="3"

Prymitywy layoutu

Section, Container, Stack, Grid, Heading, Text.

Bloki DS

HeroTitle, HeroCenter, TitleSection, CardIcon.

Atomy shadcn

Button, Badge, Input, Card, Table i pozostałe.