https://github.com/catppuccin/daisyui
🌼 Soothing pastel theme for daisyUI
https://github.com/catppuccin/daisyui
catppuccin daisyui hacktoberfest theme
Last synced: 10 months ago
JSON representation
🌼 Soothing pastel theme for daisyUI
- Host: GitHub
- URL: https://github.com/catppuccin/daisyui
- Owner: catppuccin
- License: mit
- Created: 2024-04-27T12:33:25.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-07-29T10:36:35.000Z (11 months ago)
- Last Synced: 2025-07-31T17:48:41.973Z (11 months ago)
- Topics: catppuccin, daisyui, hacktoberfest, theme
- Language: HTML
- Homepage: https://www.npmjs.com/package/@catppuccin/daisyui
- Size: 3.01 MB
- Stars: 233
- Watchers: 2
- Forks: 6
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Catppuccin for daisyUI
## Previews
🌻 Latte
🪴 Frappé
🌺 Macchiato
🌿 Mocha
## 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](https://tailwindcss.com/docs/installation/using-vite) and [daisyUI](https://daisyui.com/docs/install/)
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](https://github.com/catppuccin/daisyui/tree/main/example/src) 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 daisyUI v4, you can import required functions from `@catppuccin/daisyui/legacy`. For specific usage, refer to the [previous guide](https://github.com/catppuccin/daisyui/blob/c03cb0e6eafc3d20c9d85c38a671a937d93a64c8/README.md).
#### For CDN
Inspired by the CDN usage of daisyUI, I have separated each theme, allowing you to independently import a single theme or combine the themes you need. See:
```html
```
### Example
You can use the following HTML to test the theme:
```html
Default
Neutral
Primary
Secondary
Accent
Info
Success
Warning
Error
```
You can find the example in the `example` folder.
## 💝 Thanks to
- [Liumingxun](https://github.com/Liumingxun)
Copyright © 2021-present Catppuccin Org
