Boxes
A flexible container component supporting all style props for spacing, layout, flexbox, grid, and more
Installation
Import
Usage
Use Box as a flexible container for building layouts. It supports all style props for spacing, layout, flexbox, grid, borders, and sizing. Use the component prop to change the underlying HTML element for semantic HTML. Box is perfect for creating consistent, predictable layouts without writing custom CSS.
Design Guidelines
Use Box consistently throughout your application for layout structure. Leverage the style props system for spacing and layout instead of custom CSS classes. Use flexbox for one-dimensional layouts and grid for two-dimensional layouts. Maintain consistent spacing using the numeric scale.
Card Layout
Creating a card layout with Box components
Navigation Bar
Building a navigation bar with flexbox layout
Spacing
Using margin, padding, and gap for consistent spacing
Flexbox Layout
Building responsive layouts with flexbox
Grid Layout
Creating responsive grid layouts for content
Responsive Container
Creating responsive containers with width constraints
Semantic HTML
Using component prop for semantic HTML elements
packages.sections.api
Component props and API reference This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. For detailed documentation and examples, see the Style Props documentation.
| packages.propsTable.headers.name | packages.propsTable.headers.type | packages.propsTable.headers.default | packages.propsTable.headers.description |
|---|---|---|---|
component | 'div' | 'section' | 'article' | 'aside' | 'header' | 'footer' | 'main' | 'nav' | 'span' | 'figure' | 'figcaption' | 'mark' | 'time' | 'address' | 'details' | 'summary' | 'dialog' | 'fieldset' | 'legend' | 'blockquote' | 'pre' | 'output' | CustomComponent | 'div' | The HTML element or React component to render |
className | string | — | packages.commonProps.className.description |
Accessibility
Accessibility features and considerations
Box renders semantic HTML elements when using the component prop. Use appropriate elements (section, article, header, etc.) for better accessibility. Ensure proper heading hierarchy and ARIA labels when needed.