Components
Box
A generic container that accepts the sx prop.
Box renders a div and applies sx. Change the element with component. It is a Server
Component, so it works in React Server Components and reads no theme.
import Box from '@hone-ui/react/Box';Examples
Content
Docs<Box sx={{ p: 2, bgcolor: 'primary.main', color: 'primary.contrastText', borderRadius: 1 }}>
Content
</Box>
<Box component="a" href="/docs" sx={{ color: 'primary.main' }}>
Docs
</Box>component picks the element:
<Box component="section" aria-labelledby="title" sx={{ display: 'grid', gap: 2 }}>
...
</Box>Props
| Prop | Type | Default | Description |
|---|---|---|---|
sx | SxProps | none | Styles. The @hone-ui/sx plugin compiles them to CSS. |
component | ElementType | 'div' | The element to render. Its props are accepted and typed. |
className, style, ref, children | Standard. |
Every HTML prop of the element passes through to the root.
Notes
- System props on the element do not work. Write
<Box sx={{ p: 2, display: 'flex' }}>, not<Box p={2} display="flex">. - A function
sxsuch as(theme) => ({ ... })works in Client Components. See The sx prop. - Box does not read
components.Box.defaultProps.
Accessibility
Box adds no semantics. Choose the element with component (section, nav, ul) and add
labels yourself.