danyrupes / daisyui Goto Github PK

View Code? Open in Web Editor NEW

This project forked from saadeghi/daisyui

1.0 1.0 0.0 138.77 MB

⭐️ ⭐️ ⭐️ ⭐️ ⭐️ Tailwind Components

Home Page: https://daisyui.com

License: MIT License

CSS 26.13% JavaScript 17.76% Shell 0.01% HTML 0.07% Svelte 56.02%

daisyui's Introduction

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

[ See all components ]

daisyUI 2.0

👉 [ See all components ]
📘 Documents: daisyui.com
🎲 Try it online: Tailwind Play | Codepen
📦 Source: GitHub | NPM | Unpkg | JSdeliver | cdnjs

🌼 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. 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")],
};

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/[email protected]/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

show / hide

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