Installation
Nothing to add. This component ships as source in your download, so it is already in your project.
src/vui/page.tsx@viliha/vui-react/pageThe 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 { Page } from "@viliha/vui-react/page";Exports
Everything this family exports. They are read from the source, so this list is what the package actually ships.
| Prop | Type | Default |
|---|---|---|
| Page | component | — |
Page props
| Prop | Type | Default | What it does |
|---|---|---|---|
| breadcrumbs? | React.ReactNode | — | Left of the action header. Usually `<Breadcrumbs />`. |
| actions? | React.ReactNode | — | Right of the action header: buttons, a note, a filter control. |
| children | React.ReactNode | — | The page body. Rendered inside the one scrolling region. |
| footer? | React.ReactNode | — | Pinned below the content, outside the scroll: a Save bar, a summary. |
| bare? | boolean | false | Drop the standard `flex flex-col gap-4 p-4` wrapper and lay the body out yourself. For a page that owns its own scrolling, like a board. |
| hideHeader? | boolean | false | Hide the header entirely, for a page that has nothing to put in it. |
| className? | string | — | |
| headerClassName? | string | — | |
| contentClassName? | 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.