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.

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>