Flex
Single-axis layout with responsive direction, alignment, and child sizing.
Add it to your project
Eject the complete flex group, then import from its generated local barrel. The copied source and CSS belong to your application.
bash
pnpm exec toucan eject flexbash
npx toucan eject flexapp.tsx
import { Flex, FlexItem } from '@/components/toucan/flex';Use when
Content should flow in one primary direction and needs consistent alignment or gaps.
Avoid when
Rows and columns must align in two dimensions; use Grid instead.
Example
ReactTypeScriptCSSAccessibilityTokens
Left content
Jane Doe
Product Engineer
ReactTypeScriptDesign Systems
API reference
Generated from packages/react/src/components. Only Toucan-specific props are listed; forwarded native props remain available as noted for each export.
FlexFlexItem
Flex
Props type: FlexProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
align | "start" | "center" | "end" | "stretch" | "baseline" | { base?: FlexAlign; sm?: FlexAlign; md?: FlexAlign; lg?: FlexAlign; xl?: FlexAlign; } | undefined | No | Alignment within the component layout. |
gap | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | undefined | No | Space between child items from the Toucan scale. |
justify | "start" | "center" | "end" | "between" | { base?: FlexJustify; sm?: FlexJustify; md?: FlexJustify; lg?: FlexJustify; xl?: FlexJustify; } | undefined | No | Main-axis distribution within the component layout. |
row | boolean | "sm" | "md" | "lg" | "xl" | undefined | No | Switch flex direction to a row, optionally at a breakpoint. |
wrap | boolean | false | No | Allow child items to wrap onto additional lines. |
Also accepts the native div attributes that are not replaced by a Toucan prop.
FlexItem
Props type: FlexItemProps
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
align | "auto" | "start" | "center" | "end" | "stretch" | "baseline" | { base?: SelfAlign; sm?: SelfAlign; md?: SelfAlign; lg?: SelfAlign; xl?: SelfAlign; } | undefined | No | Alignment within the component layout. |
grow | boolean | false | No | Allow the flex item to grow into available space. |
shrink | boolean | true | No | Allow the flex item to shrink below its content size. |
Also accepts the native div attributes that are not replaced by a Toucan prop.
Type exports
FlexItemProps, FlexProps
Accessibility
- Flex and FlexItem are visual wrappers and do not change reading order or semantics.
Token families
scale