All components included in the template are:

  1. React Components
  2. Written in TypeScript
  3. Styled with TailwindCSS

Each component is documented in the code and in this documentation site, so you can poke around and change the code or style however you wish.

Some components also include tips for customizing or getting more out of them.


The template uses daisyUI as the baseline for simple components like buttons, modals, and inputs. To style them further, it uses Tailwind classes.

Here's an example of using a daisyUI component, avatar, styled further with Tailwind:

<div className="avatar border-2">
  <div className="w-24 rounded">
    <img src="" />

To dig deeper, check out all the daisyUI components and Tailwind documentation.


By default, the template comes with 2 themes: light and dark, used for light and dark mode. The theme switches automatically based on the device settings.

All components are styled keeping this in mind, making them dark-mode friendly.

To configure your own theme, head over to tailwind.config.js and configure the daisyui.themes parameter. Here's an example:

// Check out
// and for more details
daisyui: {
    themes: [
            mytheme: [
                "primary": "#9c00ff",
                "secondary": "#009600",
                "accent": "#00b200",
                "neutral": "#1c140c",
                "base-100": "#352913",
                "info": "#3098ff",
                "success": "#00ad6e",
                "warning": "#ff9d00",
                "error": "#ff2e71",

Last Updated: March 5