0.0.14 ā¢ Published 2 years ago
dculus-daisy-ui v0.0.14
Tailwind CSS Components
Adds component classes like btn
, card
and more to Tailwind CSS
daisyUI 2.0
- š [ See all components ]
- š Documents: daisyui.com
- š² Try it online: Tailwind Play | Codepen
- š¦ Source: GitHub | NPM | Unpkg | JSdeliver | cdnjs
š¼ Features
- Tailwind CSS plugin
daisyUI is a Tailwind CSS plugin. Install it and add it to yourtailwind.config.js
file. - Component classes
Adds component classes to Tailwind. Classes likebtn
,card
,ā¦ So you will end up with a cleaner HTML. - Semantic color names
Adds color names likeprimary
,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
Enablertl
config for right to left layouts. - Pure CSS
No script file. Pure CSS. Works on all frameworks!
š Install now!
npm i daisyui
Then add daisyUI to your tailwind.config.js
[ Read more ]
module.exports = {
plugins: [require("daisyui")],
};
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@2.13.3/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
š 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
Actions
- Button
- Dropdown
- Modal
- Swap
Data display
- Alert
- Avatar
- Badge
- Banner
- Calendar
- Card
- Carousel
- Chat bubble
- Collapse
- Comment
- Countdown
- Empty placeholder
- Kbd
- Loading
- Progress
- Radial progress
- Stat
- Table
- Tag
- Timeline
- Toast
- Tooltip
- Treeview
Data input
- Checkbox
- Text input
- Radio
- Range
- Rating
- Select
- Textarea
- Toggle
- Upload
Layout
- Artboard
- Button group
- Divider
- Drawer
- Footer
- Hero
- Indicator
- Input group
- Mask
- Stack
Navigation
- App bar
- Breadcrumbs
- Link
- Menu
- Navbar
- Pagination
- Steps
- Tab
Mockup
- Browser
- Code
- Phone
- Window