Layout
NextUI's plugin provides a variety of layout customization options. Alter spacing units, font sizes, line heights, radius and more to personalize each theme to your liking.
Using layout tokens, you can ensure a uniform aesthetic across all components without needing to override the default Tailwind CSS configuration.
Layout options are applied to all components.
Default Layout
Default values for the layout tokens are:
CSS Variables
NextUI creates CSS variables using the format --prefix-prop-name-scale for each layout token. By
default the prefix is nextui, 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. |
