Component page
A component's page: its name, summary, status and platforms, the live preview, the import line, its sections, the related components aside.
Web uniquement — React, depuis @krizaka/ui/component-page. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- Each page of a design system's documentation.
- A kit's component in a product's docs.
Quand ne pas l’utiliser
- For an article without a preview.À la place : Docs article page
- For the list of components.À la place : Catalogue page
Installation
Installer
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Importer
import { ComponentPage } from "@krizaka/ui/component-page";Exemples
Button
The page of the Button, with its preview and its sections.
Actions
Button
The action: six looks, three sizes, the Krizaka cut, and the whole life of an action built in.
- Web + Mobile
- Stable
import { Button } from "@krizaka/ui/button";When to use
For the action a block is about; links that look like actions use `asChild`.
Accessibility
A real button; while loading it says so in a live region.
Props
A component's page: name, summary, facts, live preview, install, then its sections; facts and related aside.
| Prop | Type | Défaut | Description |
|---|---|---|---|
previewrequis | ReactNode | — | The live preview of its first example (a framed stage with its code). |
sectionsrequis | readonly ComponentPageSection[] | — | The sections, in reading order: when to use / not, examples, props, accessibility. |
summaryrequis | ReactNode | — | Its summary, in one sentence. |
titlerequis | ReactNode | — | The component's name: the h1. |
aside | ReactNode | — | The side column: related components, source, the version. |
back | ReactNode | — | The way back to the catalogue (your router's link). |
eyebrow | ReactNode | — | The category (Blocks, Forms). |
facts | readonly Fact[] | — | Its status and platforms. |
install | { code: string; language?: string; copyLabel: string; copiedLabel: string; file?: ReactNode; } | — | The line to install or import it, and the copy words. |
Accessibilité
- The name is the
h1; each section is named by itsh2. - The import line has a copy button that says it copied.
Bonnes pratiques
- Generate it from the registry: the words live in the component's meta, never here.
- The first example is the preview; the others in their section.
- Words and content arrive as props; the motion is the platform's (
[data-reveal], still under reduced motion).
Composants liés
Générée depuis le code de @krizaka/ui 2.10.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub