saadeghi / Daisyui
Licence: mit
⭐️ ⭐️ ⭐️ ⭐️ ⭐️ Tailwind Components
Stars: ✭ 382
Labels
Projects that are alternatives of or similar to Daisyui
Class101 Ui
💅A React-based UI Component Library.
Stars: ✭ 102 (-73.3%)
Mutual labels: ui-kit, ui-framework, ui-components, ui-library
Css Mint
Lightweight and simple to use UI Kit. Fully responsive, just 3KB gzipped.
Stars: ✭ 209 (-45.29%)
Mutual labels: css-framework, ui-design, ui-kit, ui-components
design-systems
A list of famous design systems, design languages and guidelines
Stars: ✭ 403 (+5.5%)
Mutual labels: design-systems, ui-kit, design-system, ui-library
bui
‹b› Web components for creating applications – built by Blackstone Publishing using lit-html and lit-element
Stars: ✭ 29 (-92.41%)
Mutual labels: ui-components, design-system, ui-library, ui-framework
kahi-ui
Straight-forward Svelte UI for the Web
Stars: ✭ 169 (-55.76%)
Mutual labels: css-framework, ui-kit, design-system, ui-library
Vitamin Web
Decathlon Design System libraries for web applications
Stars: ✭ 70 (-81.68%)
Mutual labels: design-system, ui-kit, ui-components, ui-library
moon-design
Moon Design System for React
Stars: ✭ 209 (-45.29%)
Mutual labels: design-systems, design-patterns, design-system
flowbite
The most popular and open-source library of Tailwind CSS components
Stars: ✭ 3,727 (+875.65%)
Mutual labels: design-system, ui-library, ui-framework
Modulz Original Design System Archive
An open-source design system for building scalable, responsive websites and applications.
Stars: ✭ 300 (-21.47%)
Mutual labels: css-framework, design-systems, ui-components
carbon-components-svelte
Svelte implementation of the Carbon Design System
Stars: ✭ 1,615 (+322.77%)
Mutual labels: ui-components, design-system, ui-library
sugui
UI Components library based on React, Styled Components and React Testing Library
Stars: ✭ 17 (-95.55%)
Mutual labels: ui-kit, design-system, ui-library
ui-ux
The learning guide contains the Basics, Intermediate and Advance resources for User Interface and User Experience Design
Stars: ✭ 187 (-51.05%)
Mutual labels: ui-design, design-patterns, design-system
web-components
A set of high-quality standards based web components for enterprise web applications. Part of Vaadin 20+
Stars: ✭ 322 (-15.71%)
Mutual labels: design-systems, ui-kit, design-system
mint-ui
Design System | React UI components for web
Stars: ✭ 17 (-95.55%)
Mutual labels: ui-design, design-system, ui-library
awesome-software-architecture
A curated list of awesome articles, videos, and other resources to learn and practice software architecture, patterns, and principles.
Stars: ✭ 1,594 (+317.28%)
Mutual labels: design-systems, design-pattern, design-patterns
mijin
Tailwind CSS UI components build for Vue.js / Nuxt.js
Stars: ✭ 168 (-56.02%)
Mutual labels: ui-kit, ui-components, ui-library
open design system
Open Source Design System using Sketch. It's early days of my project.
Stars: ✭ 22 (-94.24%)
Mutual labels: ui-design, ui-components, design-system
dashkit-ui
UI Components built on React.
Stars: ✭ 17 (-95.55%)
Mutual labels: ui-design, ui-components, ui-library
Minna Ui
😸 A fast, friendly, and fun web UI kit for everyone.
Stars: ✭ 86 (-77.49%)
Mutual labels: css-framework, design-system, postcss
Fluent Reveal Effect
Fluent Reveal Effect JavaScript library for web
Stars: ✭ 164 (-57.07%)
Mutual labels: css-framework, ui-kit, ui-components
Tailwind CSS Components
Adds components like btn
, card
and more to Tailwind CSS
DaisyUI
- 👉 [ See all components ]
- 📘 Documents: daisy.js.org
- 🎲 Try it online: Tailwind Play | Codepen
- 📦 Source: GitHub | NPM | Unpkg | JSdeliver
🌼 Features
-
Component classes: DaisyUI adds component classes to Tailwind. Classes like
btn
,card
,… No need to deal with hundreds of utility classes. -
Tailwind CSS plugin: DaisyUI is a Tailwind CSS plugin so you can simply add it to your
tailwind.config.js
file. - Based on design system: DaisyUI applies design system concepts to Tailwind CSS. All components on your page are committed to a single design system.
- Customizable: You can customize the design of components with Tailwind utility classes and CSS variables.
-
Semantic color names: Use color names like
primary
,secondary
,accent
,… just like your design system defines. -
RTL supported: Enable
rtl
config for right to left layouts. - Themeable: Add multiple themes or change colors with a CSS variable. You can even set a theme for a specific section of your page.
-
Designer-friendly: You can disable
styled
config and only get the skeleton of components. No style, no colors. You can style everything using utility classes.
👩💻 Install now!
npm i daisyui --save
Then add DaisyUI to your tailwind.config.js
[ Read more ]
module.exports = {
plugins: [
require('daisyui'),
],
theme: {
extend: {
colors: require('daisyui/colors'),
},
},
}
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.
-
- Tailwind's default config
- DaisyUI components
https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css
🎉 Use
Use component classes like btn
, card
, etc… to build your UI.
<a class="btn">Hello!</a>
<div class="shadow card">
<div class="card-body">
<h2 class="card-title">Card Title</h2>
<p>Card text</p>
</div>
</div>
👉 See all components
🎲 Try it online
📘 Documents + Examples
Read the documents for more info
[ daisy.js.org ↗︎ ]
List of components
- [x] Accordion
- [x] Alert
- [x] Artboard
- [ ] App bar
- [x] Avatar
- [ ] Avatar group
- [x] Badge
- [ ] Banner
- [x] Breadcrumb
- [x] Button
- [x] Button group
- [ ] Calendar
- [x] Card
- [ ] Chat bubble
- [ ] Comment
- [ ] Countdown
- [ ] Cover
- [ ] Divider
- [x] Drawer
- [ ] Empty placeholder
- [ ] Footer
- [ ] Form
- [x] Select
- [x] Text input
- [x] Text area
- [x] Checkbox
- [x] Radio
- [ ] Range slider
- [ ] Rating
- [x] Toggle
- [ ] Upload
- [x] Hero
- [ ] Loading
- [x] Menu
- [ ] Mockup
- [ ] Browser
- [x] Code
- [x] Phone
- [x] Window
- [x] Navbar
- [x] Modal
- [x] Pagination
- [x] Progress
- [ ] Statistic
- [ ] Steps
- [ ] Tag
- [x] Tabs
- [ ] Timeline
- [ ] Toast
- [ ] Tooltip
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].