Demo Card
Demo Card is the titled card a showcase page is built from: a header band with a name and an optional description, a rule, and a body that holds one example. It is the component-gallery page type's card, so twenty-seven reference pages take their frame from it and a theme retunes all of them through the vui-demo tokens.
Installation
Nothing to add. This component ships as source in your download, so it is already in your project.
src/vui/demo-card.tsx@viliha/vui-react/demo-cardThe exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.
Usage
import { DemoCard, DemoCardTitle } from "@viliha/vui-react/demo-card";Exports
Everything this family exports. They are read from the source, so this list is what the package actually ships.
| Prop | Type | Default |
|---|---|---|
| DemoCard | component | — |
| DemoCardTitle | component | — |
DemoCard props
| Prop | Type | Default | What it does |
|---|---|---|---|
| title | string | — | |
| description? | string | — | |
| children | React.ReactNode | — | |
| className? | string | — | On the body, for the demo that wants the padding gone: a table draws its own frame. |
| menu? | React.ReactNode | — | The header's trailing control. Nothing is rendered when it is absent. |
DemoCardTitle props
| Prop | Type | Default |
|---|---|---|
| title | string | — |
| description? | string | — |
Customize
Every value this component draws comes from the theme: the colours, the radius, the control height and the type scale. Change a token and this moves with everything else, which is the difference between theming the product and overriding a component. See Theming for the token contract, and Swapping defaults for replacing the markup itself.