Box
Universal layout wrapper for padding, margin, background, border, and border-radius via Visor design tokens.
npx visor add boxWhy Box?
Box closes the gap between Visor's typed token system and ad-hoc Tailwind utility classes like p-4 bg-white rounded-lg. Every spacing, surface, border, and radius prop accepts only Visor token names — off-system values like padding="17px" are TypeScript errors. Token changes propagate automatically.
Reach for Box whenever you'd otherwise write inline padding/margin/background utilities. For arranging children, compose Stack, Inline, or Grid inside.
Padding
Background + Border
Responsive Padding
The padding, paddingX, paddingY, edge-padding, and margin props all accept a responsive { base, sm, md, lg, xl } map for breakpoint-aware spacing.
<Box padding={{ base: "sm", md: "lg", xl: "2xl" }}>
Responsive padding
</Box>Polymorphic as
<Box as="section" padding="lg" bg="card">
Renders a <section>
</Box>Installation
npx visor add boxThis copies two files into your project:
components/ui/box/box.tsx— the componentcomponents/ui/box/box.module.css— the styles
API Reference
BoxProps
| Prop | Type | Default | Description |
|---|---|---|---|
as | keyof React.JSX.IntrinsicElements | 'div' | HTML element to render. |
padding | SpacingToken | ResponsiveProp<SpacingToken> | — | Shorthand padding on all sides. Token-named — off-system values are TypeScript errors. |
paddingX | SpacingToken | ResponsiveProp<SpacingToken> | — | Padding on the X axis (overrides padding for left/right). |
paddingY | SpacingToken | ResponsiveProp<SpacingToken> | — | Padding on the Y axis (overrides padding for top/bottom). |
paddingTop / paddingRight / paddingBottom / paddingLeft | SpacingToken | ResponsiveProp<SpacingToken> | — | Padding on a single edge. |
margin / marginX / marginY / margin{Top,Right,Bottom,Left} | SpacingToken | ResponsiveProp<SpacingToken> | — | Margin shorthand and per-axis/edge overrides. |
bg | SurfaceToken | — | Token-named background surface (e.g. 'card', 'subtle', 'muted', 'popover', 'accent-subtle'). |
border | boolean | BorderToken | — | When true uses --border-default; when a token name (e.g. 'error', 'strong') uses that border color. |
borderRadius | RadiusToken | — | Token-named border radius ('none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full'). |
The component also accepts all standard HTML attributes for the rendered element.