penaui
v1.0.0
Published
penaui - Tailwind CSS Components forked from daisyUI for unpad design system
Downloads
10
Maintainers
Readme
Modify UI Library from DaisyUI For application development purposes in UNPAD ecosystem
Tailwind CSS Components
Adds component classes like btn
, card
and more to Tailwind CSS
penaUI
- 👉 [ 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, no dependencies. Works on all frameworks and environments!
📀 Install now!
npm i penaui
Then add daisyUI to your tailwind.config.js
[ Read more ]
module.exports = {
plugins: [
require('penaui'),
],
}
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" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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
- [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
- [x] 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:
- Blogs
- 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!
- 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
༼ つ ◕_◕ ༽つ Please share