Previews

Usage

Installation

| npm | pnpm | yarn | | ---------------------------------- | ------------------------------- | ------------------------------- | | npm install -D @catppuccin/daisyui | pnpm add -D @catppuccin/daisyui | yarn add -D @catppuccin/daisyui |

Configuration

0. Follow the installation instructions for Tailwind CSS and Daisy UI

1. Create a separate file like catppuccinTheme.latte.ts and import @catppuccin/daisyui

   import { createCatppuccinPlugin } from '@catppuccin/daisyui'
   
   export default createCatppuccinPlugin('latte')

   You can view available values through your editor's type hints. Check example for additional details.

2. Import the created file in your CSS configuration file

   @import 'tailwindcss';
   @plugin "daisyui" {
     themes: false;
   }
   
   @plugin "./catppuccinTheme.latte.ts";
   @plugin "./catppuccinTheme.frappe.ts";
   @plugin "./catppuccinTheme.macchiato.ts";
   @plugin "./catppuccinTheme.mocha.ts";

[!TIP] For Daisy UI v4, you can import required functions from @catppuccin/daisyui/legacy. For specific usage, refer to the previous guide.

For CDN

Inspired by the CDN usage of Daisy UI, I have separated each theme, allowing you to independently import a single theme or combine the themes you need. See:

<!-- some? -->
<link
  href="https://cdn.jsdelivr.net/npm/@catppuccin/daisyui@2/latte.css"
  rel="stylesheet"
  type="text/css"
/>
<link
  href="https://cdn.jsdelivr.net/combine/npm/@catppuccin/daisyui@2/latte.css,npm/@catppuccin/daisyui@2/frappe.css"
  rel="stylesheet"
  type="text/css"
/>
<link
  href="https://cdn.jsdelivr.net/combine/npm/@catppuccin/daisyui@2/latte.css,npm/@catppuccin/daisyui@2/macchiato.css"
  rel="stylesheet"
  type="text/css"
/>
<link
  href="https://cdn.jsdelivr.net/combine/npm/@catppuccin/daisyui@2/latte.css,npm/@catppuccin/daisyui@2/mocha.css"
  rel="stylesheet"
  type="text/css"
/>
<!-- every! -->
<link href="https://cdn.jsdelivr.net/npm/@catppuccin/daisyui@2/themes.css" rel="stylesheet" type="text/css" />

Example

You can use the following HTML to test the theme:

<div class="grid grid-cols-2 gap-2 md:grid-cols-4 lg:grid-cols-9">
  <button class="btn">Default</button>
  <button class="btn btn-neutral">Neutral</button>
  <button class="btn btn-primary">Primary</button>
  <button class="btn btn-secondary">Secondary</button>
  <button class="btn btn-accent">Accent</button>
  <button class="btn btn-info">Info</button>
  <button class="btn btn-success">Success</button>
  <button class="btn btn-warning">Warning</button>
  <button class="btn btn-error">Error</button>
</div>

You can find the example in the example folder.

💝 Thanks to

• Liumingxun