Configuration

BrifUI provides light and dark themes by default, but you can also create a custom themes to match your needs.

Custom themes

Here are some custom themes that you can try

Show code

Override component styles

BrifUI helps you override the default component styles easily via configurations.

Let's override the default styles of the Button component, which has 2 slots:

root
container

And we want to change the default text color of the Button to blue.

Each component can configure individually by overriding 2 properties:

base
variants

1import { defineConfig } from "@brifui/theme";
2              
3export default defineConfig({
4  ...,
5  recipes: {
6    button: {
7      variants: {
8        size: {
9          md: {
10            container: {
11              borderRadius: "none"
12            }
13          }
14        }
15      }
16    }
17  }
18});