Page
Full-viewport application surface and text-colour wrapper.
Add it to your project
Eject the complete page group, then import from its generated local barrel. The copied source and CSS belong to your application.
bash
pnpm exec toucan eject pagebash
npx toucan eject pageapp.tsx
import { Page } from '@/components/toucan/page';Use when
A route needs the standard application background and minimum viewport height.
Avoid when
You only need a local content band; use Section or Box.
Example
Page provides min-height: 100vh with themed background and text colour. Typically the outermost wrapper in your app.
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
Page
Page
Props type: PageProps
No Toucan-specific props.
Also accepts the native div attributes that are not replaced by a Toucan prop.
Type exports
PageProps
Accessibility
- Page is a visual div; add main, header, and navigation landmarks inside it.
Token families
page