Box
Token-styled surface with padding, radius, elevation, and overflow.
Add it to your project
Eject the complete box group, then import from its generated local barrel. The copied source and CSS belong to your application.
bash
pnpm exec toucan eject boxbash
npx toucan eject boxapp.tsx
import { Box } from '@/components/toucan/box';Use when
Content needs a bounded visual surface or card-like container.
Avoid when
The grouping needs a semantic landmark; use the appropriate HTML structure.
Example
Elevation 0
Elevation 1
Elevation 2
Elevation 3
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
Box
Box
Props type: BoxProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
elevation | 0 | 1 | 2 | 3 | 1 | No | Shadow elevation from the Toucan scale. |
fill | boolean | undefined | No | Stretch to fill the parent's height (e.g. inside a Grid cell). |
overflow | "hidden" | "auto" | "visible" | "scroll" | undefined | No | Overflow behavior for the component container. |
padding | "sm" | "md" | "lg" | "none" | 'md' | No | Internal spacing from the Toucan scale. |
radius | "sm" | "md" | "lg" | "none" | 'md' | No | Corner radius from the Toucan scale. |
Also accepts the native div attributes that are not replaced by a Toucan prop.
Type exports
BoxProps
Accessibility
- Box is a visual div and does not add semantic grouping by itself.
Token families
surfaceradiusshadow