JSPM

daisyui

0.1.22
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 413065
  • Score
    100M100P100Q203609F
  • License ISC

Styled and unstyled UI Components based on Tailwind CSS

Package Exports

  • daisyui

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (daisyui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Unstyled (and styled) UI component library based on Tailwind CSS

DaisyUI 🌼

Demo

↗︎ See all components

Get Started

1. Install

You need TailwindCSS 2.0+ of course.

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
  • 🌼 styled version
<link rel="stylesheet" href="https://unpkg.com/daisyui@latest/dist/styled.min.css" />
  • unstyled version
<link rel="stylesheet" href="https://unpkg.com/daisyui@latest/dist/base.min.css" />

2. Set up the colors for your design system (optional)

If you want to use your custom colors , you need to define the color values in your css. Colors must be themeable so we're using CSS Variables.
↗︎ Theming guide and examples

FAQ

Why do I need it?

↗︎ Utility first is fast and scalable but developing a scalable design system with utility first is messy, time consuming hard to manage. So why not put all basic skeleton of your UI components in one place and use it on all your design systems then use the power of utility first everywhere?

How does it work?

DaisyUI provides basic and unstyled component classes that you can use for almost all design systems. It also has an optional style that you can use if you don't want to fully design your components.
It's all based on tailwind so you can customize everything with utility classes and ↗︎ purge all unused class names.

What's included?

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

Concepts
  • Typography, spacing, layout You will handle these with tailwind classes. We suggest using the official ↗︎ Tailwind Typography plugin
  • Colors and theming You should ditch Tailwind's default and multi-purpose color set and set your custom set of colors for a DaisyUI project. (↗︎ Theming guide)
  • Components (like button, card, etc...) DaisyUI will handle this
What is "preset" 
module.exports = {
  // ...
  presets: [
    require('daisyui/preset')
  ],
}

When you add DaisyUI preset it will replaces default tailwind colors with a set of semantic color set that is themeable and can be configed with CSS variables.
daisyui/preset also adds a few borderRadius that is used in components. They are also configurable with CSS variables.

Components

Show
  • Accordion
  • Alert
  • Artboard
  • App bar
  • Avatar
  • Avatar group
  • Badge
  • Banner
  • Breadcrumb
  • Button
  • Button group
  • Card
  • Chat bubble
  • Comment
  • Divider
  • Empty placeholder
  • Form
    • Dropdown
    • Select
    • Text input
    • Text area
    • Checkbox
    • Radio
    • Range slider
    • Switch
    • Upload
  • Loading
  • Menu
  • Navbar
  • Modal
  • Pagination
  • Progress
  • Progress indicator
  • Skeleton placeholder
  • Statistic
  • Steps
  • Tag
  • Tabs
  • Timeline
  • Toast
  • Tooltip

Please share