TypeScript Support

AdaptUI provides a full typesafe theming system which can help you get better intellisense while working with the components.

In this guide we are going to see how to setup TypeScript, and see how we can add extra typesafe variants to component themes.

First, we need to extract our custom theme object into it's own file so that we can infer it's types.

Creating theme file#

extendTheme is an identity function which helps us infer the type of the customTheme, and provide intellisense.

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

export const customTheme = extendTheme({
  extend: {
    buttton: {
      variants: {
        red: "bg-red-300 text-white",
      },
    },
  },
});

Creating declaration file#

TypeScript definitions for the AdaptUI's theme can be extended by using declaration merging. So the first step is creating a declarations file. Let's name it global.d.ts for example.

// global.d.ts
import { DefaultTheme } from "@adaptui/react-tailwind";
import { customTheme } from "./my-theme";

type UserTheme = typeof customTheme.extend;

declare global {
  namespace AdaptUI {
    interface Theme {
      components: MergeTheme<DefaultTheme, UserTheme>;
    }
  }
}

For CRA projects you can put this content inside react-app-env.d.ts

Thats It!

Now if you can create a new Button & you'll see that there is a new variant called red