Theming - Horizon UI

Customize Horizon UI with your own theme. You can change the base styles like the colors, typography, box-shadows and breakpoints as well as the components style.

Horizon UI is customizable using the tailwind.config.js and you can set your own theme and styles through the Tailwind CSS React configurations for all of the components.

The className Attribute

Each component has a className attribute that you can use to add tailwindcss classnames or your own custom classnames.

The className attribute overrides the tailwindcss classnames for a component and sometimes you need to use the ! modifier before the tailwindcss classnames to override the classnames for a component.

e.g. !bg-brand-500

<button className="!bg-brand-500 px-4">
  Button
</button>