Read this first

1) Daisy UI

Most of the components in this library are based on the Daisy UI design system. This means that you can use the same classes and utilities that you would use with Daisy UI components.

This is one of the most popular UI kits and it makes it very easy to start developing UI (alongside with Tailwind CSS, of course).

2) Components structure

The components are organized in a way that makes it easy to find and use them. Each component is located in its own file in the src/lib/components directory.

Why this way? Why not just use the DaisyUI classes?

• - Reusability: you can use the components in multiple places in your project without having to remember the classes.
• - Consistency: the components are consistent across the project.
• - Customization: you can easily customize the components by changing the code in the component file.

3) Customization

The components are designed to be easily customizable. You can change the classes, add new props, or even change the structure of the component.

If you want to customize a component, you can simply copy the component file to your project and make the changes there. This way, you can keep the original component as it is and use the customized version in your project.

4) Themes

You can easily change the theme of the components by changing the colors in the tailwind.config.js file. This way, you can match the components with the design of your project.

See DaisyUI's guide to theme/typography customziation.

The theme switch functionality has already been implemented (server cookies store the user's theme preference). You can toggle the theme by clicking the "Toggle theme" button in the top right corner of the page. Take a look at the `routes/+layout.svelte`:

5) Theme recommendations

I would recommend you define the following colors for simplicity (unless you're an advanced designer and you know what you're doing):

• - primary → your main (and only) brand color
• - primary-content → text color on the "primary" fill
• - base-100 → default background color
• - base-200 → used for borders and lighter backgrounds
• - base-300 → used for borders and lighter backgrounds
• - base-content → text color on the "base-100" fill

Usually, keeping it simple (only one "accent"/"primary" color, no "secondary" color) is the best approach. You can always add more colors later.