TypeScript Support

Renderlesskit 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.

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

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

Creating declaration file#

TypeScript definitions for the Renderlesskit'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 "@renderlesskit/react-tailwind";
import { customTheme } from "./my-theme";

type UserTheme = typeof customTheme.extend;

declare global {
  namespace Renderlesskit {
    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