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

[ See all components ]

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 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, 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
  • Logrocket
  • GraphCMS
  • wweb.dev
  • flaming.codes
  • rockyourcode
  • HackerNews
  • Product Hunt
  • Siecle Digital
  • speckyboy
  • dailydev
  • Future Tech Blog (Japanese)
• 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