Components

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.

Styling

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="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
  </div>
</div>

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

Themes

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 https://daisyui.com/docs/themes/
// and https://daisyui.com/theme-generator/ 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",
            },
        },
      ],
},