Override styles

NextUI allows you to override the default styles of the components in several ways. Before you start overriding the NextUI components styles we recommend you to read the Stitches Styling docs and Stitches variants docs.

Remember that all Stitches features are available in NextUI since NextUI uses Stitches as a style engine.

Here are some options depending on your goals:

• Using the css prop
• Using the styled function

Note: The tokens used here like $space$1, $pink800, etc.. are defined in the default theme section.

Using the css prop

NextUI provides the Stitches css prop for overriding styles easily. It's like the style attribute, but it supports tokens, media queries, nesting and token-aware values.

import { css, Button } from '@nextui-org/react';

For more information about the Stitches css prop, check out the Stitches documentation.

Using the styled function

NextUI provides the Stitches styled function for creating your own components easily. The styled function allows you to create a component including its styles and variants. It receives:

• element or component: a HTML element (div) or a React Component (Component)
• styles: as many styleObject as you need

import { styled, Button } from '@nextui-org/react';

Note: This approach requires you to override and create your own variants like size and color.

For more information about the Stitches css prop, check out the Stitches documentation.

Overriding the HTML tag

NextUI provides an as prop for changing which tag a component outputs.