Installation

Start a project

npx create-next-app@latest my-app --typescript --eslint

npm install tailwindcss@next @tailwindcss/postcss@next

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

@import "tailwindcss";

Run the CLI

npx dotui-cli init

Configure your project.

You will be asked some questions to create your configuration file.

What is the alias for your components? @/components
What is the alias for your core components? @/components/core
Which alias for your lib? @/lib
Which icon library do you want use? lucide-icons

Customize your theme

See our theme builder to create a unique and accessible theme for your project, or use one of our predefined themes.

You're done!

Add Tailwind CSS to your project.

Follow the Tailwind CSS v4 installation guide.

Configure the import alias

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
    // ...
  }
}

Add required dependencies

npm install tailwind-variants clsx tailwind-merge tailwindcss-animate tailwindcss-rac

Add an icon library

If you're using the default icon library, install lucide-react:

npm install lucide-react

Add helper functions

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Configure your theme

See our theme builder to create a unique and accessible theme for your project, or use one of our predefined themes.

You're done!