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 only — React, from @krizaka/ui/component-page. Beta: its API may still change in a minor version.
When to use
- Each page of a design system's documentation.
- A kit's component in a product's docs.
When not to use
- For an article without a preview.Use instead: Docs article page
- For the list of components.Use instead: Catalogue page
Installation
Install
npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";Import
import { ComponentPage } from "@krizaka/ui/component-page";Examples
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 | Default | Description |
|---|---|---|---|
previewrequired | ReactNode | — | The live preview of its first example (a framed stage with its code). |
sectionsrequired | readonly ComponentPageSection[] | — | The sections, in reading order: when to use / not, examples, props, accessibility. |
summaryrequired | ReactNode | — | Its summary, in one sentence. |
titlerequired | 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. |
Accessibility
- The name is the
h1; each section is named by itsh2. - The import line has a copy button that says it copied.
Best practices
- 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).
Related components
Generated from the code of @krizaka/ui 2.10.0: its meta.ts, its examples and its types.Edit this documentation on GitHub