Override styles

Overriding default component styles is as simple as passing your own class names to the className or to the classNames prop for components with slots.

What is a Slot?

A slot is a part of a component that can be styled separately. For example, the CircularProgress component has multiple slots/parts that can be styled separately, such as the track, indicator, value, etc.

Components with slots have a classNames prop that allows you to style each slot separately.

Overriding a component

Let's override the default styles of the Button component, which is a component that has no slots.

Components with slots

Some NextUI components have slots, which means that you can style all the parts inside the component using the classNames prop. For example, the CircularProgress component has the following slots:

• base: The base slot of the circular progress, it is the main container.
• svgWrapper: The wrapper of the svg circles and the value label.
• svg: The svg element of the circles.
• track: The track is the background circle of the circular progress.
• indicator: The indicator is the one that is filled according to the value.
• value: The value content.
• label: The label content.

Each slot can be styled using the classNames prop, the example below shows how to change the styles of some slots to create a circular progress with a different style.

Note: You will find a Slots section in the documentation of each component that has slots.

CSS Modules

CSS Modules allow for the creation of local scope classes and variables. Here's how you can use it to override styles:

With the corresponding CSS module:

CSS-in-JS

If you are using a CSS-in-JS library such as styled-components or emotion, you can use the following example to override the styles of a component:

In this example, the StyledCard, StyledCardBody, and StyledCircularProgress components have the combined styles of the original components and the custom styles defined in the template strings. The .attrs method is used to add the classNames prop to the StyledCircularProgress component.