repository·master·Indexed 12 days ago
https://github.com/saadeghi/daisyuiAn open-source component library for Tailwind CSS that provides a collection of reusable UI components with semantic class names. It functions as a Tailwind CSS plugin and includes a wide array of built-in themes, CSS variables for design tokens, and components such as Dropdowns, Stats, Megamenus, Aura, and Drawers.
daisyUI is a collection of semantic CSS class names that act as a high-level abstraction of Tailwind CSS utility classes. It is not a replacement for Tailwind CSS, but a plugin that extends it.
card, btn, or toggle) directly in your HTML/components. These classes provide the base styling for UI components, while Tailwind utility classes can be used alongside them for fine-grained customization (spacing, layout, etc.).// Conceptual workflow:
// 1. npm install -D daisyui
// 2. Add to tailwind.config.js:
// tailwind.config.js = {
// plugins: [require("daisyui")]
// }
// 3. Use in HTML:
// <button class="btn btn-primary">Click me</button>daisyUI 5 introduces several new components for building interfaces:
online, offline, or error. Available in 5 sizes: xs, sm, md, lg, and xl.fieldset-legend for titles and a label for descriptions.floating-label which floats above the field when focused. Can be placed before or after the field.error or success based on validation rules and can display hint text.bottom-navigation. A horizontal bar that sticks to the bottom of the screen. Available in 5 sizes: xs, sm, md, lg, and xl. It is compatible with safe-area-inset-bottom on mobile devices.Many existing components received significant updates in version 5, including new modifiers, features, and accessibility improvements:
ghost/outline styles, new soft/dash styles.dropdown-center modifier; clicking the button toggles the dropdown if open.modal-start, modal-end, and modal-top.tabs-border style and top/bottom positioning.tooltip-content class.The Card component is used to group and display content in a readable way. A standard card structure typically includes a figure (for images), a card-body (for content), and optionally card-actions (for buttons or interactive elements).
<div class="card w-96 bg-base-100 shadow-sm">
<figure><img src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp" alt="Shoes" /></figure>
<div class="card-body">
<h2 class="card-title">Card Title</h2>
<p>A card component has a figure, a body part, and inside body there are title and actions parts</p>
<div class="justify-end card-actions">
<button class="btn btn-primary">Buy Now</button>
</div>
</div>
</div>daisyUI 5 introduces several significant architectural improvements:
@plugin syntax.node_modules.oklch) instead of complex numeric extractions. This makes variables more readable and allows for easy customization via browser developer tools.The collapse component is used for showing and hiding content. It can be implemented using several different interaction models depending on your needs (focus-based, checkbox-based, or native HTML elements).
Core Classes:
collapse: The main container.collapse-title: The part of the component that acts as the trigger/header.collapse-content: The part containing the hidden content.Modifiers:
collapse-arrow: Adds an arrow icon.collapse-plus: Adds a plus/minus icon.collapse-open: Forces the collapse to be open.collapse-close: Forces the collapse to be closed.daisyUI adds a component layer to your Tailwind CSS setup. Key features include:
@plugin "daisyui".@tailwindcss/browser@4.daisyUI is a component library built on top of Tailwind CSS. While Tailwind CSS provides utility classes for individual CSS rules, daisyUI provides semantic component class names (like btn) to speed up development.
It follows a utility-first (not utility-only) philosophy: you use component classes for speed and utility classes for customization. This allows you to combine the rapid development of a component library with the extreme flexibility of Tailwind CSS.
Nexus uses a structured folder /styles/custom/ for overrides and extensions:
layout.css: Styles for the topbar, sidebar, and rightbar.animation.css: Animation keyframes and utilities.components.css: Minor overrides to daisyUI components (can be removed if not needed).plugins.css: Plugin overrides to ensure compatibility between Nexus and daisyUI styles.iconify.js: Plugin for Iconify to allow adding additional icon sets.