### Navigate, install dependencies, and start development server

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/blog/(posts)/how-to-install-sveltekit-and-daisyui/+page.md

After creating the SvelteKit project, change into the project directory, install required packages, and launch the development server.

```bash
cd my-app
npm install
npm run dev -- --open
```

--------------------------------

### Install Vanilla Calendar Pro

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/components/calendar/+page.md

Install the Vanilla Calendar Pro library using npm.

```bash
npm i vanilla-calendar-pro
```

--------------------------------

### Create a Solid Start Project

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/install/solid-start/+page.md

Initializes a new Solid Start project in the current directory using npm.

```sh
npm init solid@latest ./
```

--------------------------------

### Start Development Server with Yarn

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/blog/(posts)/mary-ui/+page.md

This command initiates the development server, compiling assets and enabling live reloading for your project. It's used after setup to run the application.

```bash
yarn dev
```

--------------------------------

### Install React Day Picker

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/components/calendar/+page.md

Install the React Day Picker library using npm.

```bash
npm i react-day-picker
```

--------------------------------

### Prompt Cursor to create a page with daisyUI components

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/(marketing)/pages/cursor-ui-design-skill/+page.md

An example prompt to guide Cursor in generating a project settings page using various daisyUI components and states. This illustrates how to leverage the skill for complex UI generation.

```markdown
/daisyui Create a project settings page. Use tabs, cards, inputs, toggles, and alerts. Include disabled, loading, success, and error states.
```

--------------------------------

### Start Rails Development Server

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/install/rails/+page.md

Run this command to start your Rails development server after setting up daisyUI.

```sh
./bin/dev
```

--------------------------------

### Start Development Server

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/blog/(posts)/nexus-dashboard-template/+page.md

Use this command to start the development server and run your project in development mode. This allows for live reloading and debugging.

```bash
npm run dev
```

--------------------------------

### Install daisyUI Skill

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/skill/[slug]/+page.md

Run this command in your terminal to install the daisyUI skill.

```bash
npm install -D daisyui
```

--------------------------------

### Install Project Dependencies (npm)

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/blog/(posts)/daisyui-nextjs-online-store-template/+page.md

Run this command in your project's terminal to install all required dependencies for the online store template.

```bash
npm install
```

--------------------------------

### Basic Mockup Code Example

Source: https://github.com/saadeghi/daisyui/blob/master/skills/daisyui/components/mockup-code.md

Displays a single line of code with a '$' prefix, simulating a command-line interface. Use this for simple command examples.

```html
<div class="mockup-code">
  <pre data-prefix="$"><code>npm i daisyui</code></pre>
</div>
```

--------------------------------

### Install Headless UI for React

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/blog/(posts)/how-to-use-headless-ui-and-daisyui/+page.md

Use this command to install the Headless UI package for React projects.

```bash
npm install @headlessui/react
```

--------------------------------

### Install Tailwind CSS, PostCSS, Autoprefixer, and daisyUI

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/blog/(posts)/how-to-install-sveltekit-and-daisyui/+page.md

Install necessary development dependencies for styling and generate configuration files for Tailwind CSS and PostCSS.

```bash
npm install -D tailwindcss postcss autoprefixer daisyui
npx tailwindcss init -p
```

--------------------------------

### Prompt Example for CRM Contact Page

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/(marketing)/pages/how-to-design-ui-with-cursor/+page.md

An example prompt to guide Cursor in designing a CRM contact page using specific daisyUI components like tabs, badges, tables, and modals.

```md
Design a CRM contact page with daisyUI. Use tabs for overview and activity, badges for lifecycle stage, a table for deals, and a modal for notes.
```

--------------------------------

### Start Deno Fresh Development Server

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/install/fresh/+page.md

Run the development server to preview your Deno Fresh project with daisyUI.

```bash
deno task dev
```

--------------------------------

### Cally Web Component Calendar Example

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/components/calendar/+page.md

This example shows how to integrate the Cally web component with daisyUI styles for a basic calendar display. Ensure the Cally web component is imported via CDN or installed as a dependency.

```html
<calendar-date class="cally bg-base-100 border border-base-300 shadow-lg rounded-box">
  <svg aria-label="Previous" class="fill-current size-4" slot="previous" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M15.75 19.5 8.25 12l7.5-7.5"></path></svg>
  <svg aria-label="Next" class="fill-current size-4" slot="next" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path></svg>
  <calendar-month></calendar-month>
</calendar-date>
```

```html
<!--
* Import Cally web component from CDN
<script type="module" src="https://unpkg.com/cally"></script>

* Or install as a dependency:
npm i cally
* and import it in JS
import "cally";
-->

<calendar-date class="$$cally bg-base-100 border border-base-300 shadow-lg rounded-box">
  <svg aria-label="Previous" class="fill-current size-4" slot="previous" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M15.75 19.5 8.25 12l7.5-7.5"></path></svg>
  <svg aria-label="Next" class="fill-current size-4" slot="next" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path></svg>
  <calendar-month></calendar-month>
</calendar-date>
```

--------------------------------

### Create a new Qwik project

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/install/qwik/+page.md

Initialize a new Qwik project in the current directory using the Qwik CLI.

```sh
npm create qwik@latest empty ./
```

--------------------------------

### Get Tailwind CSS Executable (Manual Install)

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/install/yew/+page.md

Download the appropriate Tailwind CSS standalone CLI executable for your operating system and architecture.

```sh
# Run the corresponding command for your OS

# Linux
curl -sLo tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-arm64
curl -sLo tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-arm64-musl
curl -sLo tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64
curl -sLo tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64-musl
```

```sh
# MacOS
curl -sLo tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-arm64
curl -sLo tailwindcss https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-macos-x64
```

```sh
# Windows
curl -sLo tailwindcss.exe https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-windows-x64.exe
```

--------------------------------

### Shorter Claude Code Prompt with daisyUI Skill

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/(marketing)/pages/claude-ui-design-prompt/+page.md

An example of a concise prompt for Claude Code after installing the daisyUI skill, focusing on core components and functionality.

```markdown
Build the account settings page with daisyUI skill. Use tabs, cards, alerts, inputs, toggles, and a confirmation modal.
```

--------------------------------

### Create Django Project and Navigate

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/install/django/+page.md

Initializes a new Django project named 'myapp' and changes the current directory into the newly created project folder.

```sh
django-admin startproject myapp
cd myapp
```

--------------------------------

### Run Mary UI Installation Command for New Projects

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/blog/(posts)/mary-ui/+page.md

Execute this Artisan command to complete the setup of Mary UI in a new Laravel project. It configures necessary files and settings.

```bash
php artisan mary:install
```

--------------------------------

### Run development server

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/blog/(posts)/install-daisyui-and-tailwindcss-in-nextjs/+page.md

Start the Next.js development server to view your application.

```bash
npm run dev
```

--------------------------------

### Include DaisyUI Themes CSS via CDN

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/cdn/+page.md

Add this link tag to your HTML's <head> section to include all DaisyUI themes. This is the simplest way to get started with DaisyUI styling.

```html
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
```

--------------------------------

### Basic Steps Example

Source: https://github.com/saadeghi/daisyui/blob/master/skills/daisyui/components/steps.md

A simple unordered list used to display steps in a process. Add `step-primary` to activate a step.

```html
<ul class="steps">
  <li class="step">Register</li>
  <li class="step step-primary">Choose plan</li>
  <li class="step">Purchase</li>
  <li class="step">Receive Product</li>
</ul>
```

--------------------------------

### Prompt for Frontend Generation

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/(marketing)/pages/claude-code-frontend-skill/+page.md

Example prompt to guide Claude Code in building a complex UI using the daisyUI skill. It specifies components like stats, cards, tables, badges, and modals.

```md
Build a billing page with daisyUI skill. Use stats for usage, cards for plans, a table for invoices, badges for status, and a modal for canceling a subscription.
```

--------------------------------

### Setup Elysia server with CSS build and watch

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/install/elysia/+page.md

Create a server file that builds CSS on startup, watches for changes, and serves static files using Elysia with the static plugin.

```typescript
import { Elysia } from "elysia";
import { staticPlugin } from '@elysiajs/static'
import { exec } from 'child_process'
import { watch } from 'fs'

const buildCSS = () =>
  new Promise(resolve =>
    exec('tailwindcss -i ./src/app.css -o ./public/output.css',
      (_error, _stdout, stderr) => {
        console.log(stderr);
        resolve(null);
      })
  );

await buildCSS();

const watcher = watch('./public', { recursive: true },
  async () => {
    await buildCSS();
  }
);

process.on('SIGINT', () => {
  watcher.close();
  process.exit(0);
});

const app = new Elysia()
	.use(
		staticPlugin({
			assets: "public",
      prefix: "",
		}),
	)
	.listen(3000, ({ hostname, port }) => {
		console.log(`Server started http://${hostname}:${port}`);
	});
```

--------------------------------

### Initialize a new Node.js project

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/install/electron/+page.md

Use these commands to create a new directory, navigate into it, and initialize a Node.js project.

```sh
mkdir myapp
cd myapp
npm init
```

--------------------------------

### Prompt Pattern for AI UI Generation

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/(marketing)/pages/ai-ui-code-generation/+page.md

An example prompt that instructs AI to use specific semantic components (cards, fields, buttons) and Tailwind utilities for layout, guiding the generation process.

```text
Build a settings page with daisyUI.
Use cards for sections, fieldsets for form groups, inputs for text fields,
selects for option lists, and btn-primary for the main action.
Use Tailwind utilities only for layout and spacing.
```

--------------------------------

### Create Electron main process file

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/install/electron/+page.md

This `main.js` file sets up the Electron application window and loads the `index.html`.

```js
const { app, BrowserWindow } = require('electron')

const createWindow = () => {
  const win = new BrowserWindow()
  win.loadFile('src/index.html')
}

app.whenReady().then(() => {
  createWindow()
})
```

--------------------------------

### Install Django

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/install/django/+page.md

Installs the Django framework using Python's package installer, pip.

```sh
python -m pip install Django
```

--------------------------------

### Install daisyUI Plugin for Codex

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/(marketing)/pages/ui-design-plugin-for-codex/+page.md

Commands to install the daisyUI plugin for Codex from the marketplace and add it to your Codex environment. Ensure you have Codex installed and configured.

```sh
codex plugin marketplace add saadeghi/daisyui --sparse .agents/plugins
codex plugin add daisyui@daisyui
```

--------------------------------

### Create a new Waku project

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/install/waku/+page.md

Create a new Waku project named 'myapp' and navigate into its directory using the command line.

```sh
npm create waku@latest -- --project-name=myapp
cd myapp
```

--------------------------------

### Initialize Node.js project and add scripts

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/install/11ty/+page.md

Use npm to initialize a new project and define 'dev' and 'build' scripts for Eleventy.

```sh
npm init -y
npm pkg set scripts.dev="eleventy --serve"
npm pkg set scripts.build="eleventy"
```

--------------------------------

### Install daisyUI Skill for Cursor

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/(marketing)/pages/best-cursor-design-skill-2026/+page.md

Install the daisyUI skill for Cursor using the provided command. The --agent flag specifies it for Cursor, and --yes accepts the installation prompt.

```sh
npx skills add saadeghi/daisyui --agent cursor --yes
```

--------------------------------

### Create new Elysia project with Bun

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/install/elysia/+page.md

Initialize a new Elysia project and install the static plugin for serving files.

```shell
bun create elysia myapp
cd myapp
```

```shell
bun install @elysiajs/static
```

--------------------------------

### Run Elysia development server

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/install/elysia/+page.md

Start the development server using Bun.

```shell
bun run dev
```

--------------------------------

### Install daisyUI v5.6

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/blog/(posts)/v5.6/+page.md

Install the latest version of daisyUI using npm.

```bash
npm i daisyui@5.6
```

--------------------------------

### Install Trunk

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/install/yew/+page.md

Install Trunk, a build tool for WebAssembly applications, using Cargo.

```sh
cargo install --locked trunk
```

--------------------------------

### Create a new SvelteKit project

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/install/sveltekit/+page.md

Initialize a new SvelteKit project in the current directory using the create command.

```shell
npx sv create ./
```

--------------------------------

### Install daisyUI npm package

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/install/reactrouter/+page.md

Install the latest version of daisyUI from npm into your project.

```shell
npm install daisyui@latest
```

--------------------------------

### Initialize a new Bun project

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/install/bun/+page.md

Initializes a new Bun project in the current directory with default settings.

```sh
bun init -y
```

--------------------------------

### Start Laravel development server

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/install/laravel/+page.md

Starts the Laravel development server to serve the application.

```sh
php artisan serve
```

--------------------------------

### Install Angular CLI

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/install/angular/+page.md

Install the latest Angular CLI globally to manage Angular projects.

```sh
npm install -g @angular/cli@latest
```

--------------------------------

### Create a new Rails project

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/install/rails/+page.md

Use these commands to initialize a new Rails application and navigate into its directory.

```sh
rails new my-app
cd my-app
```

--------------------------------

### Create an HTML file with a daisyUI button

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/install/bun/+page.md

Creates a basic `index.html` file, linking to `style.css` and including a daisyUI button for demonstration.

```html
<!doctype html>
<html>
  <head>
    <title>daisyUI</title>
    <link rel="stylesheet" href="./style.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <button class="btn">daisyUI Button</button>
  </body>
</html>
```

--------------------------------

### Horizontal Join Example

Source: https://github.com/saadeghi/daisyui/blob/master/skills/daisyui/components/join.md

A basic example of a horizontal join container with multiple join items.

```html
<div class="join">
  <button class="join-item btn">Button 1</button>
  <button class="join-item btn">Button 2</button>
  <button class="join-item btn">Button 3</button>
</div>
```

--------------------------------

### Example daisyUI Components

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/(marketing)/pages/ui-design-plugin-for-claude-code/+page.md

These are examples of primary and secondary action buttons styled with daisyUI classes.

```html
<a class="btn btn-primary" href="/checkout/">Start trial</a>
<a class="btn btn-ghost" href="/docs/">Read docs</a>
```

--------------------------------

### Example Prompt for Responsive Dashboard

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/(marketing)/pages/claude-code-frontend-design-plugin/+page.md

This prompt instructs Claude Code to create a responsive product dashboard using daisyUI, specifying various components and states to include.

```md
Create a responsive product dashboard with daisyUI. Use a navbar, drawer, stats, table, filter tabs, alerts, and a modal. Include loading, empty, error, focus, and disabled states.
```

--------------------------------

### Install Tailwind CSS and daisyUI

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/install/astro/+page.md

Installs Tailwind CSS, its Vite plugin, and daisyUI as project dependencies.

```sh
npm install tailwindcss@latest @tailwindcss/vite@latest daisyui@latest
```

--------------------------------

### Select Skeleton project template during SvelteKit setup

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/blog/(posts)/how-to-install-sveltekit-and-daisyui/+page.md

During the SvelteKit project creation, choose the 'Skeleton project' option for a barebones scaffolding.

```text
┌  Welcome to SvelteKit!
│
◆  Which Svelte app template?
│  ○ SvelteKit demo app
│  ● Skeleton project (Barebones scaffolding for your new SvelteKit app)
│  ○ Library project
└
```

--------------------------------

### Navigate to project directory

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/blog/(posts)/install-daisyui-and-tailwindcss-in-nextjs/+page.md

Change to the newly created Next.js project directory.

```bash
cd my-app
```

--------------------------------

### Install Headless UI for Vue

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/blog/(posts)/how-to-use-headless-ui-and-daisyui/+page.md

Use this command to install the Headless UI package for Vue projects.

```bash
npm install @headlessui/vue
```

--------------------------------

### Initialize daisyUI with npm, yarn, or bun

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/blog/(posts)/npm-init-daisyui/+page.md

Use these commands to automatically set up Tailwind CSS and daisyUI. Choose the package manager that matches your project.

```bash
npm init daisyui
```

```bash
yarn create daisyui
```

```bash
bun create daisyui
```

```bash
npm create daisyui
```

--------------------------------

### Install Tailwind CSS and daisyUI

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/(marketing)/pages/install-tailwind-css-vite/+page.md

Install the necessary packages for Tailwind CSS and daisyUI using npm.

```sh
npm install tailwindcss@latest @tailwindcss/vite@latest daisyui@latest
```

--------------------------------

### Run Phoenix Project Server

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/install/phoenix/+page.md

Execute this command to start your Phoenix project server after creation.

```sh
mix phx.server
```

--------------------------------

### Create a new Vike project

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/install/vike/+page.md

Use this command to initialize a new Vike project in the current directory.

```sh
npm create vike ./
```

--------------------------------

### Collapse with checkbox

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/components/collapse/+page.md

This collapse works with checkbox instead of focus. It needs to get clicked again to get closed.

```html
<div class="$$collapse bg-base-100 border border-base-300">
  <input type="checkbox" />
  <div class="$$collapse-title font-semibold">How do I create an account?</div>
  <div class="$$collapse-content text-sm">
    Click the "Sign Up" button in the top right corner and follow the registration process.
  </div>
</div>
```

--------------------------------

### Initialize Deno Fresh Project with Tailwind

Source: https://github.com/saadeghi/daisyui/blob/master/packages/docs/src/routes/(routes)/docs/install/fresh/+page.md

Use `jsr` to create a new Deno Fresh project, including Tailwind CSS and VS Code integration.

```bash
deno run -Ar jsr:@fresh/init ./ --tailwind --vscode
```