ballerine-daisyui
v2.49.6TypeScript
daisyUI - Tailwind CSS Components
464/weekUpdated 1 years agoMITUnpacked: 3.1 MB
Published by Pouya Saadeghi
npm install ballerine-daisyui[![][logo-url]][docs-url]
The most popular, free and open-source Tailwind CSS component library
[![][tweet]][tweet-url]
[![][banner-url]][docs-url]
daisyUI 2.0
[![][build]][build-url] [![][npm]][npm-url] [![][number-of-components]][docs-url] [![][license]][license-url]
[![][dl]][npm-url] [![][stars]][gh-url] [![][commit]][gh-url]
- Official website ā
- See all components ā
- How to use ā
š¼ Features
- A plugin for Tailwind CSS
- Faster development
- Cleaner HTML
- Customizable and themeable
- Pure CSS. Works on all frameworks
š Install now!
``bash`
npm i daisyui
Then add daisyUI to your tailwind.config.js:
`js`
module.exports = {
plugins: [require("daisyui")],
};
[ [Read more ā][docs-url-install] ]
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.
`html``
š Use
š Documents + Examples
See the official site: [daisyui.com ā]
š¤ Support daisyUI
| | |
|---|---|
| Premium Sponsors
Support this project by becoming a premium sponsor.
[Become a sponsor] | 
|
| Backers
Thank you to all our backers!
[Become a backer] | 
|
| Contributors
This project exists thanks to all the people who contribute.
[Contribute] | |
Tweet about daisyUI: [![][tweet]][tweet-url]
š List of components
show / hide
- Actions
- [x] Button
- [x] Dropdown
- [x] Modal
- [x] Swap
- Data display
- [x] Alert
- [x] Avatar
- [x] Badge
- [ ] Banner
- [ ] Calendar
- [x] Card
- [x] Carousel
- [x] Chat bubble
- [x] Collapse
- [ ] Comment
- [x] Countdown
- [ ] Empty placeholder
- [x] Kbd
- [ ] Loading
- [x] Progress
- [x] Radial progress
- [x] Stat
- [x] Table
- [ ] Tag
- [ ] Timeline
- [x] Toast
- [x] Tooltip
- [ ] Treeview
- Data input
- [x] Checkbox
- [x] Text input
- [x] Radio
- [x] Range
- [x] Rating
- [x] Select
- [x] Textarea
- [x] Toggle
- [ ] Upload
- Layout
- [x] Artboard
- [x] Button group
- [x] Divider
- [x] Drawer
- [x] Footer
- [x] Hero
- [x] Indicator
- [x] Input group
- [x] Mask
- [x] Stack
- Navigation
- [x] Bottom Navigation
- [x] Breadcrumbs
- [x] Link
- [x] Menu
- [x] Navbar
- [x] Pagination
- [x] Steps
- [x] Tab
- Mockup
- [ ] Browser
- [x] Code
- [x] Phone
- [x] Window
š° Featured on:
show / hide
- Blogs
- Logrocket
- GraphCMS
- wweb.dev
- flaming.codes
- rockyourcode
- HackerNews
- Product Hunt
- Siecle Digital
- speckyboy
- dailydev
- Future Tech Blog (Japanese)
- Adding Tailwind and Daisy UI to SvelteKit
- Youtube videos
- Supabase & Sveltekit - Build Twitter in 75 minutes
- Setup the Best Frontend JavaScript Stack - Svelte, Vite, TailwindCSS and DaisyUI
- Jamstack powered Image gallery with Cloudinary, Tailwind and DaisyUI
- SvelteKit Crash Course w/ Tailwind CSS and DaisyUI, GraphQL and dynamic routes
- DaisyUI : Worth a try or skip on by?
- How to use daisyUI in SvelteKit?
- DaisyUI Untuk Yang Mau Pindah ke TailwindCSS dari Bootstrap (Indonesian)
- Next.js - Tailwind - DeisyUI Setup
- Svelte Setup with Vite, Tailwind, DaisyUI. Custom Themes!
- Build a blog with Svelte
- Building a product in less than 10 minutes: Laravel, InertiaJS, VueJS, TailwindCSS, DaisyUI
- Infinite scrolling with MERN | ReactJS, TailwindCSS v3, DaisyUI | NodeJs, Express, MongoDB
- How to install TailwindCSS v3 and DaisyUI to your React app
- Laravel: DaisyUI Agiliza Tus Desarrollos Con TailwindCSS + Select2 Tailwind Style (Spanish)
- Build a Responsive Landing Page using DaisyUI, ReactJS and Tailwind CSS
- Courses
- Building with SvelteKit and GraphCMS
- Svelte for Beginners by Mike Karan
- React Front To Back 2022 by Brad Traversy
- Build Instagram profile page UI clone w/Next.js TailwindCSS
- Instagram UI Clone Login Page w/ NextJS & TailwindCSS
- Build your Developer Portfolio and Blog from Scratch with Svelte and GraphCMS
- Starters
- Vite-Boot Vite + Vue3 + TypeScript + Vue-Router4 + Pinia + Tailwind CSS + daisyUI Template.
---
ą¼¼ ć¤ ā_ā ą¼½ć¤ Please share
[![][tweet]][tweet-url]
[install-size]: https://badgen.net/bundlephobia/minzip/daisyui?label=bundle%20size&color=green
[build]: https://badgen.net/github/checks/saadeghi/daisyui?label=build
[npm]: https://badgen.net/github/tag/saadeghi/daisyui?label=version&color=green
[dl]: https://badgen.net/npm/dt/daisyui?label=installs&icon=npm&color=green
[commit]: https://badgen.net/github/last-commit/saadeghi/daisyui?icon=github&color=green
[license]: https://badgen.net/github/license/saadeghi/daisyui?color=green
[stars]: https://badgen.net/github/stars/saadeghi/daisyui?color=green
[tweet]: https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Fgithub.com%2Fsaadeghi%2Fdaisyui
[install-size-url]: https://bundlephobia.com/result?p=daisyui
[license-url]: https://github.com/saadeghi/daisyui/blob/master/LICENSE
[npm-url]: https://www.npmjs.com/package/daisyui
[cdnjs-url]: https://cdnjs.com/libraries/daisyui
[gh-url]: https://github.com/saadeghi/daisyui
[tw-play-url]: https://daisyui.com/tailwindplay
[codepen-url]: https://codepen.io/saadeghi/pen/gOwWKvv
[unpkg-url]: https://unpkg.com/browse/daisyui/
[jsdeliver-url]: https://www.jsdelivr.com/package/npm/daisyui
[build-url]: https://github.com/saadeghi/daisyui/actions
[tweet-url]: https://twitter.com/intent/tweet?text=daisyUI%20%0D%0AComponents%20for%20Tailwind%20CSS%20%0D%0Ahttps://github.com/saadeghi/daisyui
[number-of-components]: https://badgen.net/badge/total%20components/49/green
[docs-url-install]: https://daisyui.com/docs/install
[docs-url]: https://daisyui.com/
[logo-url]: https://raw.githubusercontent.com/saadeghi/files/main/daisyui/logo-4.svg
[banner-url]: https://raw.githubusercontent.com/saadeghi/files/main/daisyui/card-3.png