Layout
HeroUI provides layout customization options for spacing, fonts, and other visual properties. Layout tokens help maintain consistency across components without modifying Tailwind CSS defaults.
Layout options are applied to all components.
Default Layout
Default values for the layout tokens are:
CSS Variables
HeroUI creates CSS variables using the format --prefix-prop-name-scale for each layout token. By
default the prefix is heroui, but you can change it with the prefix option.
Then you can use the CSS variables in your CSS files.
API Reference
| Attribute | Type | Description |
|---|---|---|
| hoverOpacity | string, number | A number between 0 and 1 that is applied as opacity-[value] when the component is hovered. |
| disabledOpacity | string, number | A number between 0 and 1 that is applied as opacity-[value] when the component is disabled. |
| dividerWeight | string | The default height applied to the divider component. We recommend to use px units. |
| fontSize | FontThemeUnit | The default font size applied across the components. |
| lineHeight | FontThemeUnit | The default line height applied across the components. |
| radius | BaseThemeUnit | The default radius applied across the components. We recommend to use rem units. |
| borderWidth | BaseThemeUnit | The border width applied across the components. |
| boxShadow | BaseThemeUnit | The box shadow applied across the components. |
