This project uses Tailwind CSS as well as daisyUI, shadcn/ui & magicui for styling.

​
Project Structure

Components are organized by category, each located in its corresponding folder under components. For example:

  • Alert components: components/alerts
  • Auth components: components/auth
  • Chat components: components/chat

This structure applies to all component types.

Additionaly, you’ll find shadcn/ui components in the components/ui folder & magicui components in the components/magicui.

​
Themes

You’ll notice that each demo app has a different theme. We use daisyUI to make this possible.

You’ll find the available themes in the daisyui section of the configuration:

tailwind.config.ts
  daisyui: {
    styled: true,
    themes: [
      "light",
      {
        whisper: {
          primary: "#84aac1",
          secondary: "#30475E",
          accent: "#EADBC8",
          neutral: "#ffffff",
          "base-100": "#F1F1F1",
          info: "#3abff8",
          success: "#36d399",
          warning: "#fbbd23",
          error: "#f87272",
        },
        workoutpro: {
          // Theme details here
        }
      }
    ]
  }

​
Selecting a Theme

The core theme of the overall project can be set in the config.ts file in the root of the codebase. The themes for the different demo apps are set in their respective toolConfig.ts file.

@/config.ts
// Themes and customization
export const defaultTheme = "whisper";

You can easily set different themes for different pages/components by editing the data-theme attribute of your HTML tags:

page.tsx
export default function Page() {
  return (
    <div className="bg-base-100" data-theme="yourTheme">
      <p>Hello world!</p>
    </div>
  );
}