# daisyUI 5
daisyUI 5 is a CSS library for Tailwind CSS
daisyUI 5 provides class names for common UI components
[docs](http://daisyui.com)
## daisyUI 5 install notes
[install guide](https://daisyui.com/docs/install/)
1. daisyUI 5 requires Tailwind CSS v4
2. `tailwind.config.js` file is deprecated in Tailwind CSS v4. do not use `tailwind.config.js`. Tailwind CSS v4 only needs `@import "tailwindcss";` in the CSS file if it's a node dependency.
3. daisyUI 5 can be installed using `npm i -D daisyui@latest` and then adding `@plugin "daisyui";` to the CSS file
4. daisyUI is suggested to be installed as a dependency but if you really want to use it from CDN, you can use Tailwind CSS and daisyUI CDN files:
```html
```
5. A CSS file with Tailwind CSS and daisyUI looks like this (if it's a node dependency)
```css
@import "tailwindcss";
@plugin "daisyui";
```
## daisyUI 5 usage rules
1. We can give styles to a HTML element by adding daisyUI class names to it. By adding a component class name, part class names (if there's any available for that component), and modifier class names (if there's any available for that component)
2. Components can be customized using Tailwind CSS utility classes if the customization is not possible using the existing daisyUI classes. For example `btn px-10` sets a custom horizontal padding to a `btn`
3. If customization of daisyUI styles using Tailwind CSS utility classes didn't work because of CSS specificity issues, you can use the `!` at the end of the Tailwind CSS utility class to override the existing styles. For example `btn bg-red-500!` sets a custom background color to a `btn` forcefully. This is a last resort solution and should be used sparingly
4. If a specific component or something similar to it doesn't exist in daisyUI, you can create your own component using Tailwind CSS utility
5. when using Tailwind CSS `flex` and `grid` for layout, it should be responsive using Tailwind CSS responsive utility prefixes.
6. Do not invent new class names. Only allowed class names are existing daisyUI class names or Tailwind CSS utility classes.
7. Ideally, you won't need to write any custom CSS. Using daisyUI class names or Tailwind CSS utility classes is preferred.
8. suggested - if you need placeholder images, use https://picsum.photos/200/300 with the size you want
9. suggested - when designing , don't add a custom font unless it's necessary
10. don't add `bg-base-100 text-base-content` to body unless it's necessary
daisyUI 5 class names are one of the following categories. these type names are only for reference and are not used in the actual code
- `component`: the required component class
- `part`: a child part of a component
- `style`: sets a specific style to component or part
- `behavior`: changes the behavior of component or part
- `color`: sets a specific color to component or part
- `size`: sets a specific size to component or part
- `placement`: sets a specific placement to component or part
- `direction`: sets a specific direction to component or part
- `modifier`: modifies the component or part in a specific way
## Config
daisyUI 5 config docs: https://daisyui.com/docs/config/
daisyUI without config looks like this:
```css
@plugin "daisyui";
```
daisyUI config with `light` theme only (no dark theme) looks like this:
```css
@plugin "daisyui" {
themes: light --default;
}
```
daisyUI with all the default configs looks like this:
```css
@plugin "daisyui" {
themes: light --default, dark --prefersdark;
root: ":root";
include: ;
exclude: ;
prefix: ;
logs: true;
}
```
An example config:
In below config, all the built-in themes are enabled while bumblebee is the default theme and synthwave is the prefersdark theme (default dark mode)
All the other themes are enabled and can be used by adding `data-theme="THEME_NAME"` to the `` element
root scrollbar gutter is excluded. `daisy-` prefix is used for all daisyUI classes and console.log is disabled
```css
@plugin "daisyui" {
themes: light, dark, cupcake, bumblebee --default, emerald, corporate, synthwave --prefersdark, retro, cyberpunk, valentine, halloween, garden, forest, aqua, lofi, pastel, fantasy, wireframe, black, luxury, dracula, cmyk, autumn, business, acid, lemonade, night, coffee, winter, dim, nord, sunset, caramellatte, abyss, silk;
root: ":root";
include: ;
exclude: rootscrollgutter, checkbox;
prefix: daisy-;
logs: false;
}
```
## daisyUI 5 colors
### daisyUI color names
- `primary`: Primary brand color, The main color of your brand
- `primary-content`: Foreground content color to use on primary color
- `secondary`: Secondary brand color, The optional, secondary color of your brand
- `secondary-content`: Foreground content color to use on secondary color
- `accent`: Accent brand color, The optional, accent color of your brand
- `accent-content`: Foreground content color to use on accent color
- `neutral`: Neutral dark color, For not-saturated parts of UI
- `neutral-content`: Foreground content color to use on neutral color
- `base-100`:-100 Base surface color of page, used for blank backgrounds
- `base-200`:-200 Base color, darker shade, to create elevations
- `base-300`:-300 Base color, even more darker shade, to create elevations
- `base-content`: Foreground content color to use on base color
- `info`: Info color, For informative/helpful messages
- `info-content`: Foreground content color to use on info color
- `success`: Success color, For success/safe messages
- `success-content`: Foreground content color to use on success color
- `warning`: Warning color, For warning/caution messages
- `warning-content`: Foreground content color to use on warning color
- `error`: Error color, For error/danger/destructive messages
- `error-content`: Foreground content color to use on error color
### daisyUI color rules
1. daisyUI adds semantic color names to Tailwind CSS colors
2. daisyUI color names can be used in utility classes, like other Tailwind CSS color names. for example, `bg-primary` will use the primary color for the background
3. daisyUI color names include variables as value so they can change based the theme
4. There's no need to use `dark:` for daisyUI color names
5. Ideally only daisyUI color names should be used for colors so the colors can change automatically based on the theme
6. If a Tailwind CSS color name (like `red-500`) is used, it will be same red color on all themes
7. If a daisyUI color name (like `primary`) is used, it will change color based on the theme
8. Using Tailwind CSS color names for text colors should be avoided because Tailwind CSS color `text-gray-800` on `bg-base-100` would be unreadable on a dark theme - because on dark theme, `bg-base-100` is a dark color
9. `*-content` colors should have a good contrast compared to their associated colors
10. suggestion - when designing a page use `base-*` colors for majority of the page. use `primary` color for important elements
### daisyUI custom theme with custom colors
A CSS file with Tailwind CSS, daisyUI and a custom daisyUI theme looks like this:
```css
@import "tailwindcss";
@plugin "daisyui";
@plugin "daisyui/theme" {
name: "mytheme";
default: true; /* set as default */
prefersdark: false; /* set as default dark mode (prefers-color-scheme:dark) */
color-scheme: light; /* color of browser-provided UI */
--color-base-100: oklch(98% 0.02 240);
--color-base-200: oklch(95% 0.03 240);
--color-base-300: oklch(92% 0.04 240);
--color-base-content: oklch(20% 0.05 240);
--color-primary: oklch(55% 0.3 240);
--color-primary-content: oklch(98% 0.01 240);
--color-secondary: oklch(70% 0.25 200);
--color-secondary-content: oklch(98% 0.01 200);
--color-accent: oklch(65% 0.25 160);
--color-accent-content: oklch(98% 0.01 160);
--color-neutral: oklch(50% 0.05 240);
--color-neutral-content: oklch(98% 0.01 240);
--color-info: oklch(70% 0.2 220);
--color-info-content: oklch(98% 0.01 220);
--color-success: oklch(65% 0.25 140);
--color-success-content: oklch(98% 0.01 140);
--color-warning: oklch(80% 0.25 80);
--color-warning-content: oklch(20% 0.05 80);
--color-error: oklch(65% 0.3 30);
--color-error-content: oklch(98% 0.01 30);
--radius-selector: 1rem; /* border radius of selectors (checkbox, toggle, badge) */
--radius-field: 0.25rem; /* border radius of fields (button, input, select, tab) */
--radius-box: 0.5rem; /* border radius of boxes (card, modal, alert) */
--size-selector: 0.25rem; /* base size of selectors (checkbox, toggle, badge) */
--size-field: 0.25rem; /* base size of fields (button, input, select, tab) */
--border: 1px; /* border size */
--depth: 1; /* Adds a shadow and subtle 3D effect to components */
--noise: 0; /* Adds a subtle noise effect to components */
}
```
You can use https://daisyui.com/theme-generator/ to create your own theme
## daisyUI 5 components
### accordion
Accordion is used for showing and hiding content but only one item can stay open at a time
[accordion docs](https://daisyui.com/components/accordion/)
#### Class names
- component
- `collapse`
- part
- `collapse-title`
- `collapse-content`
- modifier
- `collapse-arrow`
- `collapse-plus`
- `collapse-open`
- `collapse-close`
#### Syntax
```html
{CONTENT}
```
where content is:
```html
{title}
{CONTENT}
```
#### Rules
- {MODIFIER} is optional and can have one of the modifier class names
- Accordion uses radio inputs. All radio inputs with the same name work together and only one of them can be open at a time
- If you have more than one set of accordion items on a page, use different names for the radio inputs on each set
- Replace {name} with a unique name for the accordion group
- replace `{checked}` with `checked="checked"` if you want the accordion to be open by default
### alert
Alert informs users about important events
[alert docs](https://daisyui.com/components/alert/)
#### Class names
- component
- `alert`
- style
- `alert-outline`
- `alert-dash`
- `alert-soft`
- color
- `alert-info`
- `alert-success`
- `alert-warning`
- `alert-error`
- direction
- `alert-vertical`
- `alert-horizontal`
#### Syntax
```html
{CONTENT}
```
#### Rules
- {MODIFIER} is optional and can have one of each style/color/direction class names
- Add `sm:alert-horizontal` for responsive layouts
### avatar
Avatars are used to show a thumbnail representation of an individual or business in the interface
[avatar docs](https://daisyui.com/components/avatar/)
#### Class names
- component
- `avatar`
- `avatar-group`
- modifier
- `avatar-online`
- `avatar-offline`
- `avatar-placeholder`
#### Syntax
```html
```
#### Rules
- {MODIFIER} is optional and can have one of the modifier class names
- Use `avatar-group` for containing multiple avatars
- You can set custom sizes using `w-*` and `h-*`
- You can use mask classes such as `mask-squircle`, `mask-hexagon`, `mask-triangle`
### badge
Badges are used to inform the user of the status of specific data
[badge docs](https://daisyui.com/components/badge/)
#### Class names
- component
- `badge`
- style
- `badge-outline`
- `badge-dash`
- `badge-soft`
- `badge-ghost`
- color
- `badge-neutral`
- `badge-primary`
- `badge-secondary`
- `badge-accent`
- `badge-info`
- `badge-success`
- `badge-warning`
- `badge-error`
- size
- `badge-xs`
- `badge-sm`
- `badge-md`
- `badge-lg`
- `badge-xl`
#### Syntax
```html
Badge
```
#### Rules
- {MODIFIER} is optional and can have one of each style/color/size class names
- Can be used inside text or buttons
- To create an empty badge, just remove the text between the span tags
### breadcrumbs
Breadcrumbs helps users to navigate through the website
[breadcrumbs docs](https://daisyui.com/components/breadcrumbs/)
#### Class names
- component
- `breadcrumbs`
#### Syntax
```html
```
#### Rules
- breadcrumbs only has one main class name
- Can contain icons inside the links
- If you set `max-width` or the list gets larger than the container it will scroll
### button
Buttons allow the user to take actions or make choices
[button docs](https://daisyui.com/components/button/)
#### Class names
- component
- `btn`
- color
- `btn-neutral`
- `btn-primary`
- `btn-secondary`
- `btn-accent`
- `btn-info`
- `btn-success`
- `btn-warning`
- `btn-error`
- style
- `btn-outline`
- `btn-dash`
- `btn-soft`
- `btn-ghost`
- `btn-link`
- behavior
- `btn-active`
- `btn-disabled`
- size
- `btn-xs`
- `btn-sm`
- `btn-md`
- `btn-lg`
- `btn-xl`
- modifier
- `btn-wide`
- `btn-block`
- `btn-square`
- `btn-circle`
#### Syntax
```html
```
#### Rules
- {MODIFIER} is optional and can have one of each color/style/behavior/size/modifier class names
- btn can be used on any html tags such as `