react-layout - React Layout with BAIFlex and Theme Tokens
Use BAIFlex for flex layouts and theme tokens for consistent spacing in React components
Tags
Updated: 2026-05-11Capabilities
Typical Inputs
Typical Outputs
What this skill does
- create BAIFlex layout
- set gap values
- apply theme tokens
- arrange children horizontally
- arrange children vertically
- create responsive grid
- wrap card extra content
- configure table scroll
- migrate Space component
- migrate Flex component
Inputs
- layout requirements
- children elements
- gap values
- responsive breakpoints
Outputs
- BAIFlex layout
- themed spacing
- responsive grid
- aligned card header
- scrollable table
Requirements
- backend.ai-ui package
- BAIFlex component
- theme.useToken hook
- antd breakpoints