daisyui
    TypeScript icon, indicating that this package has built-in type declarations

    1.14.5 • Public • Published

    Tailwind CSS Components
    Adds component classes like btn, card and more to Tailwind CSS

    [ See all components ]

    daisyUI



    🌼 Features

    show / hide
    • Tailwind CSS plugin
      daisyUI is a Tailwind CSS plugin. Install it and add it to your tailwind.config.js file.
    • Component classes
      Adds component classes to Tailwind. Classes like btn, card,… So you will end up with a cleaner HTML.
    • Semantic color names
      Adds color names like primary, secondary, accent,….
    • Customizable
      You can customize the design of components with Tailwind utility classes and CSS variables.
    • Themeable
      Add multiple themes and customize colors. You can even set a theme for a specific section of your page.
    • RTL supported
      Enable rtl config for right to left layouts.
    • Pure CSS
      No script file, no dependencies. Works on all frameworks and environments!

    📀 Install now!

    npm i daisyui

    Then add daisyUI to your tailwind.config.js
    [ Read more ]

    module.exports = {
    
      plugins: [
        require('daisyui'),
      ],
    
    }
    Or use a CDN

    Loading CSS files from CDN is not recommended for production. It's better to install Tailwind and daisyUI as Nodejs dependencies so you can config/customize everything, and purge unused styles.*

    <link href="https://cdn.jsdelivr.net/npm/daisyui@1.14.4/dist/full.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css" rel="stylesheet" type="text/css" />

    🚀 Use

    Use component classes to build your UI.

    <a class="btn">Hello!</a>
    <input type="checkbox" class="checkbox"/>
    <input type="checkbox" class="toggle"/>
    <div class="alert alert-success">
      Message sent successfully 
    </div>

    👉 See all components
    🎲 Try it online


    📘 Documents + Examples

    See the official site:
    [ daisyui.com ↗︎ ]


    🤝 Contributing

    Read the documents for more info:
    [ Read contribution guide ]


    List of Components

    show / hide
    • [x] Alert
    • [x] Artboard
    • [ ] App bar
    • [x] Avatar
      • [x] Avatar group
    • [x] Badge
    • [ ] Banner
    • [x] Breadcrumb
    • [x] Button
      • [x] Button group
    • [ ] Calendar
    • [x] Carousel
    • [x] Card
    • [ ] Chat bubble
    • [x] Collapse (Accordion)
    • [ ] Comment
    • [x] Countdown
    • [ ] Cover
    • [x] Divider
    • [x] Drawer
    • [ ] Empty placeholder
    • [x] Footer
    • [ ] Form
      • [x] Select
      • [x] Text input
      • [x] Text area
      • [x] Checkbox
      • [x] Radio
      • [x] Range slider
      • [ ] Rating
      • [x] Toggle
      • [ ] Upload
    • [x] Hero
    • [x] Indicator
    • [x] Kbd
    • [x] Link
    • [ ] Loading
    • [x] Menu
    • [ ] Mockup
      • [ ] Browser
      • [x] Code
      • [x] Phone
      • [x] Window
    • [x] Navbar
    • [x] Mask
    • [x] Modal
    • [x] Pagination
    • [x] Progress
    • [x] Stack
    • [x] Stat
    • [x] Steps
    • [ ] Tag
    • [x] Table
    • [x] Tabs
    • [ ] Timeline
    • [ ] Toast
    • [x] Tooltip
    • [ ] Treeview

    Featured on:

    show / hide

    ༼ つ ◕_◕ ༽つ Please share

    Install

    npm i daisyui

    DownloadsWeekly Downloads

    9,837

    Version

    1.14.5

    License

    MIT

    Unpacked Size

    1.08 MB

    Total Files

    22

    Last publish

    Collaborators

    • saadeghi