Wrapper
Centered max-width container with responsive edge padding.
Add it to your project
Eject the complete wrapper group, then import from its generated local barrel. The copied source and CSS belong to your application.
bash
pnpm exec toucan eject wrapperbash
npx toucan eject wrapperapp.tsx
import { Wrapper } from '@/components/toucan/wrapper';Use when
Page content needs a readable maximum width and consistent viewport gutters.
Avoid when
Content should span the full available width.
Example
xs — 480px
sm — 560px
md — 768px
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
Wrapper
Wrapper
Props type: WrapperProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
padding | "sm" | "md" | "lg" | "xl" | "none" | 'lg' | No | Internal spacing from the Toucan scale. |
size | "xs" | "sm" | "md" | "lg" | "xl" | "full" | 'lg' | No | Visual size variant. |
Also accepts the native div attributes that are not replaced by a Toucan prop.
Type exports
WrapperProps
Accessibility
- Wrapper is a visual div and does not add a landmark.
Token families
wrapperlayout