Design System — v 1.0

Layout

6 komponentów wymuszających strukturę wizualną. Odpowiadają wyłącznie za przestrzeń — nie za wygląd.

Sekcja IV

6 Prymitywów Architektury

Zdefiniowane w components/layout/. Każdy prymityw ma ściśle określoną odpowiedzialność.

<Section>

Semantyczna sekcja strony z kontrolą odstępów pionowych.

prop	wartości	domyślnie
`as`	`section \| article \| main \| header \| footer`	section
`size`	`compact \| default \| relaxed \| hero`	default

Warianty CSS

compactpy-6 md:py-8

defaultpy-10 md:py-16

relaxedpy-16 md:py-24

heropy-20 md:py-32

Przykład użycia

<Section as="section" size="relaxed">
  <Container>...</Container>
</Section>

<Container>

Centruje i ogranicza szerokość treści z responsywnym paddingiem.

prop	wartości	domyślnie
`size`	`narrow \| default \| wide`	default

Warianty CSS

narrowmax-w-3xl

defaultmax-w-7xl

widemax-w-screen-2xl

Przykład użycia

<Container size="narrow">
  <Heading as="h1">...</Heading>
</Container>

<Stack>

Flex kolumna lub wiersz z responsywnymi odstępami.

prop	wartości	domyślnie
`direction`	`col \| row`	col
`gap`	`xs \| sm \| md \| lg \| xl`	md
`align`	`start \| center \| end \| stretch`	stretch

Warianty CSS

xsgap-2 md:gap-3

smgap-3 md:gap-4 lg:gap-6

mdgap-4 md:gap-6 lg:gap-8

lggap-6 md:gap-8 lg:gap-10

xlgap-8 md:gap-12 lg:gap-16

Przykład użycia

<Stack direction="row" gap="sm" align="center">
  <Badge>Tag</Badge>
  <Text variant="muted">Opis</Text>
</Stack>

<Grid>

Responsywna siatka z predefiniowanymi kolumnami.

prop	wartości	domyślnie
`cols`	`2 \| 3 \| 4`	3
`gap`	`sm \| md \| lg`	md

Warianty CSS

2 colsgrid-cols-1 md:grid-cols-2

3 colsgrid-cols-1 md:grid-cols-2 lg:grid-cols-3

4 colsgrid-cols-1 md:grid-cols-2 lg:grid-cols-4

Przykład użycia

<Grid cols="3" gap="md">
  <Card>...</Card>
  <Card>...</Card>
  <Card>...</Card>
</Grid>

<Heading>

Nagłówek z rozdziałem tagu SEO od rozmiaru wizualnego.

prop	wartości	domyślnie
`as`	`h1 \| h2 \| h3 \| h4 \| h5 \| h6`	h1
`size`	`h1 \| h2 \| h3 \| h4 \| h5`	= as

Warianty CSS

h1text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight leading-tight text-balance

h2text-3xl md:text-4xl font-semibold tracking-tight leading-tight text-balance

h3text-2xl md:text-3xl font-semibold tracking-tight leading-tight

h4text-xl font-medium leading-tight

h5text-lg font-medium leading-tight

Przykład użycia

<Heading as="h2" size="h1">
  Duży nagłówek, tag h2 dla SEO
</Heading>

<Text>

Paragraf tekstowy z semantycznymi wariantami.

prop	wartości	domyślnie
`variant`	`lead \| body \| small \| muted \| mono`	body

Warianty CSS

leadtext-lg md:text-xl text-muted-foreground leading-relaxed text-balance

bodytext-base text-foreground leading-relaxed text-pretty

smalltext-sm font-medium leading-none

mutedtext-sm text-muted-foreground

monotext-sm font-mono text-foreground

Przykład użycia

<Text variant="lead">
  Wiodący akapit — większy, muted, relaxed
</Text>

prfct.dev

6 Prymitywów Architektury