Skip to content
Docs
Theming

Theming

Extend Theme

Default theme can be extended with extend prop which can be added to AdaptUIProvider.

To extend or override a token in the default theme simply add a new file adaptui.config.js & export a theme object. Use a extend key to extend a theme token or simply to overwrite a token in the default theme object, create a new object of same name like how it is done in Tailwind customization.

For example, if you want to add a new color variant to the button you can as follows:

import { extendTheme } from "@adaptui/react-tailwind";

// You get the typings for the theme object from the default theme file
export const theme = extendTheme({
  extend: {
    button: {
      themeColor: {
        base: {
          tertiary: { default: "bg-purple-600 text-white-900" },
        },
      },
      size: {
        xxl: {
          base: "h-14 min-w-14 px-6 rounded-xl text-xl",
        },
      },
    },
  },
});

Now inside your <AdaptUIProvider> you can use extend prop to pass the exported theme object. If you haven't already set up the provider you can refer this guide.

<AdaptUIProvider extend={theme}>
  <App />
</AdaptUIProvider>
// Now you can use these colors in your components
<Button variant="tertiary">Welcome</Button>

If you are wondering about which keys of the theme you can extend you can look at the source code of the default theme file.

💡

Checkout our typescript guide to get autocompletion of your custom theme keys.

Custom Theme

If you need to provide the default styling for any components, you can do so by creating a theme file and exporting it.

Our AdaptUIProvider accepts a theme prop which can be used to provide a custom theme of your choice.

<AdaptUIProvider theme={theme} extend={extendTheme}>
  <App />
</AdaptUIProvider>