New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

Sign in Demo Install

Sign in Demo Install

daisyui

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

daisyui

CSS components for Tailwind CSS

0.3.13
Source
npm

Version published: 4 years ago

Weekly downloads: 57K; decreased by-80.22%

Maintainers: 1

Weekly downloads

Created: 4 years ago

What is daisyui?

DaisyUI is a plugin for Tailwind CSS that provides a set of pre-designed components and utilities to help developers quickly build modern and responsive user interfaces. It extends Tailwind CSS with additional classes and components, making it easier to create consistent and visually appealing designs.

What are daisyui's main functionalities?

Pre-designed Components

DaisyUI offers a variety of pre-designed components such as buttons, cards, modals, and more. These components come with default styles that can be easily customized using Tailwind CSS classes.

<button class="btn btn-primary">Primary Button</button>

Utility Classes

In addition to components, DaisyUI provides utility classes that extend Tailwind CSS. These utilities help in quickly applying common styles like padding, margin, background colors, and more.

<div class="bg-base-200 p-4 rounded-lg">Content goes here</div>

Theming

DaisyUI supports theming, allowing developers to switch between different themes easily. This is useful for creating dark mode or other custom themes for your application.

<html data-theme="dark"><body>...</body></html>

Responsive Design

DaisyUI components are designed to be responsive out of the box. This means they adapt to different screen sizes, making it easier to build mobile-friendly applications.

<div class="card lg:card-side bg-base-100 shadow-xl">...</div>

Other packages similar to daisyui

CSS components for Tailwind CSS ↗︎
Styled + unstyled UI components
Scalable, Themeable and designer-friendly
[ demo ↗︎ ]

DaisyUI

🌼 Demo

See all components ↗︎

👩‍💻 Use

1. Install

npm i daisyui

Then add plugin and preset to tailwind.config.js

module.exports = {
  plugins: [
    require('daisyui/styled'), // 🎨 for styled UI
    // require('daisyui'), // for base UI only
  ],
  presets: [
    require('daisyui/preset')
  ],
}

Or use a CDN

(Not recommended for production)

Version	Description	URL
Base	Unstyled domponents ^{(Basic layout, no color, no visual style)}	`https://unpkg.com/daisyui@latest/dist/base.css`
Styled	DaisyUI Styled domponents ^{(But you can't use DaisyUI colors on other elements)}	`https://unpkg.com/daisyui@latest/dist/styled.css`
Full	Tailwind default style + DaisyUI styled domponents ^{(But it's a large file for production)}	`https://unpkg.com/daisyui@latest/dist/full.css`

2. Customize theme and colors (optional)

Add your custom colors in your CSS file
[ Theming guide and examples ↗︎ ]

Quick example

/* Values are HSL (hue, saturation, lightness) */
:root {
  --d: 0 0% 100%; /* default color */
  --p1: 340 82% 62%; /* Primary color - light */
  --p2: 340 82% 52%; /* Primary color - normal */
  --p3: 340 82% 42%; /* Primary color - dark */
  --s1: 262 52% 56%; /* Secondary color - light */
  --s2: 262 52% 46%; /* Secondary color - normal */
  --s3: 262 52% 36%; /* Secondary color - dark */
  --a1: 199 98% 58%; /* Accent color - light */
  --a2: 199 98% 48%; /* Accent color - normal */
  --a3: 199 98% 38%; /* Accent color - dark */
  --c1: 220 14% 96%; /* Content colors */
  --c2: 228 14% 93%;
  --c3: 220 15% 84%;
  --c4: 218 14% 65%;
  --c5: 220 14% 46%;
  --c6: 220 14% 37%;
  --c7: 219 14% 28%;
  --c8: 222 13% 19%;
  --c9: 223 14% 10%;
  --cp: 0 0% 100%; /* Foreground content color to use on a primary color */
  --cs: 0 0% 100%; /* Foreground content color to use on a secondary color */
  --ca: 0 0% 100%; /* Foreground content color to use on a accent color */
  --in: 207 90% 54%; /* Info */
  --su: 174 100% 29%; /* Success */
  --wa: 36 100% 50%; /* Warning */
  --er: 14 100% 57%; /* Error */
}

🤔 FAQ

Why do I need it?

Instead of using lots of utility classes for all elements, use component classes like .btn, .card, .navbar, etc... for your common elements to make sure all your elements use same style
Instead of using general-purpose color names like blue-600 or gray-100 use semantic role names like primary, content-300 or info. This way, you can change primary color of your whole project using a single CSS variable; no need to replace all color classes in all files. You can also define multiple themes (not just dark-mode) using CSS variables.

How does it work?

DaisyUI provides basic/unstyled component classes that you can use for almost all design systems. You will need different .btn sizes for every project so you can have a basic style that predefined .xs, .sm, .lg sizes for your .btn but it has no color or additianal styles.
DaisyUI also has an optional styled version that is useful if you don't want to fully design your components but you want to use custom color themes.
DaisyUI is based on tailwind so you can customize everything with utility classes and purge ↗︎ all unused class names.

What's included?

When you add daisyui/styled as a Tailwind CSS plugin, it gives you ready-to-use UI component classes to use. Like .btn, .card, .alert, etc...
If you use styled version, you get something pre-designed (like Bootstrap) but you can still customize it with Tailwind utility classes.
If you use the base (unstyled) version, it has no color or visual style so you can fully style the components with Tailwind utility classes or Tailwind's @apply directive.

Concepts

Spacing, layout, Typography
You will handle these with Tailwind utility classes. It's easy to create any layout with flexbox or grid. Also for spacing (margins, paddings, etc...), Tailwind classes are perfect for the job. For typography, I suggest using the official Tailwind Typography ↗︎ plugin.

Colors and theming
Instead of using Tailwind's general-purpose colors we use a custom/themeable set of color names (Why? 👉 Theming guide ↗︎)

Components
DaisyUI has component classes for every component (button, card, etc...) so you don't need to use many utility classes to build a button. Just use a .btn class.

What is "preset"?

module.exports = {
  // ...
  presets: [
    require('daisyui/preset')
  ],
}

When you add DaisyUI preset it will add: A set of semantic color names (as utility classes)
A few additional utility classes that are used by components (like border-radius, min-height, etc...)

Extending and customizing

You can define multiple custom themes using a few CSS variable.
You can use Tailwind utility classes anywhere. So your button element can look like <a class="px-16 m-5 shadow-md btn">
You're not forced to use all the components. Unused components will be purged anyway.
If you use the base style, you can fully design elements using Tailwind utility classes or Tailwind's @apply directive.
For example, you can style your button this way:

.btn{
  @apply px-16 m-5 shadow-md;
}

🎛 List of components

Show

Please share

Keywords

FAQs

What is daisyui?

Is daisyui popular?

Is daisyui well maintained?

Package last updated on 23 Dec 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Related posts