🌼 Soothing pastel theme for daisyui
npm install @catppuccin/daisyui

🌻 Latte

🪴 Frappé

🌺 Macchiato

🌿 Mocha

| npm | pnpm | yarn |
| ---------------------------------- | ------------------------------- | ------------------------------- |
| npm install -D @catppuccin/daisyui | pnpm add -D @catppuccin/daisyui | yarn add -D @catppuccin/daisyui |
0. Follow the installation instructions for Tailwind CSS and Daisy UI
1. Create a separate file like catppuccinTheme.latte.ts and import @catppuccin/daisyui
``javascript
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
`css
@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:
`html`
href="https://cdn.jsdelivr.net/npm/@catppuccin/daisyui@2/latte.css"
rel="stylesheet"
type="text/css"
/>
href="https://cdn.jsdelivr.net/combine/npm/@catppuccin/daisyui@2/latte.css,npm/@catppuccin/daisyui@2/frappe.css"
rel="stylesheet"
type="text/css"
/>
href="https://cdn.jsdelivr.net/combine/npm/@catppuccin/daisyui@2/latte.css,npm/@catppuccin/daisyui@2/macchiato.css"
rel="stylesheet"
type="text/css"
/>
href="https://cdn.jsdelivr.net/combine/npm/@catppuccin/daisyui@2/latte.css,npm/@catppuccin/daisyui@2/mocha.css"
rel="stylesheet"
type="text/css"
/>
You can use the following HTML to test the theme:
`html`
You can find the example in the example` folder.
Copyright © 2021-present Catppuccin Org