tessl/npm-daisyui

The most popular, free and open-source component library for Tailwind CSS

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Utility Classes

Name: tessl/npm-daisyui
Author: tessl

Additional utility classes for special effects, joins, typography, and layout enhancements that extend Tailwind CSS functionality.

Capabilities

Glass Effect Utility

Glass morphism effect for creating frosted glass appearance.

<!-- Basic glass effect -->
<div class="glass w-64 h-32 p-6">
  <p>Glass morphism effect</p>
</div>

<!-- Glass effect with content -->
<div class="hero min-h-screen" style="background-image: url(https://daisyui.com/images/stock/photo-1507003211169-0a1dd7228f2d.jpg);">
  <div class="hero-overlay bg-opacity-60"></div>
  <div class="hero-content text-center text-neutral-content">
    <div class="max-w-md">
      <div class="glass p-6 rounded-box">
        <h1 class="mb-5 text-5xl font-bold">Hello there</h1>
        <p class="mb-5">This is a glass morphism card</p>
        <button class="btn btn-primary">Get Started</button>
      </div>
    </div>
  </div>
</div>

<!-- Glass card -->
<div class="card glass w-96">
  <figure><img src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg" alt="Shoes" /></figure>
  <div class="card-body">
    <h2 class="card-title">Glass Card</h2>
    <p>This card has a glass effect</p>
    <div class="card-actions justify-end">
      <button class="btn btn-primary">Buy Now</button>
    </div>
  </div>
</div>

Join Utility (Already covered in layout)

Utility for visually joining elements together.

<!-- Join buttons -->
<div class="join">
  <button class="btn join-item">1</button>
  <button class="btn join-item">2</button>
  <button class="btn join-item">3</button>
</div>

<!-- Join inputs -->
<div class="join">
  <input class="input input-bordered join-item" placeholder="Email"/>
  <button class="btn btn-primary join-item">Subscribe</button>
</div>

<!-- Vertical join -->
<div class="join join-vertical">
  <button class="btn join-item">Top</button>
  <button class="btn join-item">Middle</button>
  <button class="btn join-item">Bottom</button>
</div>

Radius Utility

Border radius utilities with theme integration.

<!-- Border radius utilities -->
<div class="bg-primary text-primary-content p-4 rounded-selector">
  Using theme selector radius
</div>

<div class="bg-secondary text-secondary-content p-4 rounded-field">
  Using theme field radius
</div>

<div class="bg-accent text-accent-content p-4 rounded-box">
  Using theme box radius
</div>

<!-- Custom radius values -->
<div class="bg-info text-info-content p-4" style="border-radius: var(--radius-selector);">
  Using CSS custom property
</div>

Typography Utility

Typography enhancements and utilities.

<!-- Typography utilities -->
<article class="prose">
  <h1>Typography Example</h1>
  <p>This paragraph uses DaisyUI typography utilities.</p>
  <blockquote>This is a blockquote with proper styling.</blockquote>
  <ul>
    <li>List item one</li>
    <li>List item two</li>
  </ul>
</article>

<!-- Typography sizes -->
<article class="prose prose-sm">
  <h1>Small Typography</h1>
  <p>Smaller text for compact layouts.</p>
</article>

<article class="prose prose-lg">
  <h1>Large Typography</h1>
  <p>Larger text for better readability.</p>
</article>

<article class="prose prose-xl">
  <h1>Extra Large Typography</h1>
  <p>Extra large text for headers and hero sections.</p>
</article>

<!-- Typography with theme colors -->
<article class="prose prose-primary">
  <h1>Primary Typography</h1>
  <p>Typography with primary theme colors.</p>
</article>

<article class="prose prose-secondary">
  <h1>Secondary Typography</h1>
  <p>Typography with secondary theme colors.</p>
</article>

Mask Utility

Image and element masking utilities.

<!-- Basic masks -->
<div class="mask mask-star w-12 h-12 bg-primary"></div>
<div class="mask mask-heart w-12 h-12 bg-red-400"></div>
<div class="mask mask-hexagon w-12 h-12 bg-primary"></div>
<div class="mask mask-circle w-12 h-12 bg-primary"></div>
<div class="mask mask-triangle w-12 h-12 bg-primary"></div>

<!-- Mask shapes -->
<div class="mask mask-squircle w-12 h-12 bg-primary"></div>
<div class="mask mask-decagon w-12 h-12 bg-primary"></div>
<div class="mask mask-pentagon w-12 h-12 bg-primary"></div>
<div class="mask mask-diamond w-12 h-12 bg-primary"></div>
<div class="mask mask-square w-12 h-12 bg-primary"></div>

<!-- Masks with images -->
<img src="https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg" class="mask mask-star w-20 h-20" />
<img src="https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg" class="mask mask-heart w-20 h-20" />
<img src="https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg" class="mask mask-hexagon w-20 h-20" />

<!-- Half masks -->
<img src="https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg" class="mask mask-half-1 w-20 h-20" />
<img src="https://daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.jpg" class="mask mask-half-2 w-20 h-20" />

Swap Utility

Utility for swapping between two states or icons.

<!-- Basic swap -->
<label class="swap">
  <input type="checkbox" />
  <div class="swap-on">ON</div>
  <div class="swap-off">OFF</div>
</label>

<!-- Swap with icons -->
<label class="swap">
  <input type="checkbox" />
  <div class="swap-on fill-current">
    <svg class="w-8 h-8" viewBox="0 0 24 24">
      <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/>
    </svg>
  </div>
  <div class="swap-off fill-current">
    <svg class="w-8 h-8" viewBox="0 0 24 24">
      <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
    </svg>
  </div>
</label>

<!-- Swap with rotate -->
<label class="swap swap-rotate">
  <input type="checkbox" />
  <svg class="swap-on w-8 h-8 fill-current" viewBox="0 0 24 24">
    <path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/>
  </svg>
  <svg class="swap-off w-8 h-8 fill-current" viewBox="0 0 24 24">
    <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
  </svg>
</label>

<!-- Swap with flip -->
<label class="swap swap-flip">
  <input type="checkbox" />
  <div class="swap-on">😈</div>
  <div class="swap-off">😇</div>
</label>

Link Utility

Utility classes for styling links.

<!-- Basic links -->
<a class="link">I'm a simple link</a>
<a class="link link-primary">I'm a primary link</a>
<a class="link link-secondary">I'm a secondary link</a>
<a class="link link-accent">I'm an accent link</a>

<!-- Link variants -->
<a class="link link-neutral">Neutral link</a>
<a class="link link-info">Info link</a>
<a class="link link-success">Success link</a>
<a class="link link-warning">Warning link</a>
<a class="link link-error">Error link</a>

<!-- Link states -->
<a class="link link-hover">Link with hover effect</a>
<p>You can use link class on <a class="link">any text</a> inside a paragraph.</p>

KBD (Keyboard) Utility

Utility for displaying keyboard keys.

<!-- Basic keyboard keys -->
<kbd class="kbd">ctrl</kbd>
<kbd class="kbd">+</kbd>
<kbd class="kbd">shift</kbd>
<kbd class="kbd">+</kbd>
<kbd class="kbd">del</kbd>

<!-- Keyboard key sizes -->
<kbd class="kbd kbd-lg">shift</kbd>
<kbd class="kbd">shift</kbd>
<kbd class="kbd kbd-sm">shift</kbd>
<kbd class="kbd kbd-xs">shift</kbd>

<!-- In context -->
<p>Press <kbd class="kbd">F</kbd> to pay respects.</p>
<p>To select all, press <kbd class="kbd">ctrl</kbd> + <kbd class="kbd">A</kbd></p>
<p>To copy, press <kbd class="kbd">⌘</kbd> + <kbd class="kbd">C</kbd> on Mac</p>

Usage Examples:

<!-- Combining utilities -->
<div class="card glass w-96">
  <div class="card-body">
    <h2 class="card-title">Glass Card with Utilities</h2>
    <div class="badge badge-primary">New</div>
    <p>This card combines multiple DaisyUI utilities:</p>
    <ul class="list-disc list-inside">
      <li>Glass morphism effect</li>
      <li>Card component</li>
      <li>Badge utility</li>
    </ul>
    <div class="card-actions justify-end">
      <label class="swap">
        <input type="checkbox" />
        <div class="swap-on">❤️</div>
        <div class="swap-off">🤍</div>
      </label>
    </div>
  </div>
</div>

<!-- Utility composition -->
<div class="join">
  <input class="input input-bordered join-item" placeholder="Search..." />
  <button class="btn btn-primary join-item">
    <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24">
      <path d="M21,6.41L17.59,3L12,8.59L6.41,3L3,6.41L8.59,12L3,17.59L6.41,21L12,15.41L17.59,21L21,17.59L15.41,12L21,6.41Z"/>
    </svg>
  </button>
</div>

Types

// Glass effect utility
interface GlassClasses {
  "glass": string;
}

// Mask utility types
type MaskShape = 
  | "mask-star" | "mask-heart" | "mask-hexagon" | "mask-circle"
  | "mask-triangle" | "mask-squircle" | "mask-decagon" 
  | "mask-pentagon" | "mask-diamond" | "mask-square"
  | "mask-half-1" | "mask-half-2";

interface MaskClasses {
  "mask": string;
  [key: MaskShape]: string;
}

// Swap utility types
type SwapVariant = "swap-rotate" | "swap-flip";

interface SwapClasses {
  "swap": string;
  "swap-on": string;
  "swap-off": string;
  "swap-rotate": string;
  "swap-flip": string;
}

// Link utility types
type LinkColor = 
  | "link-primary" | "link-secondary" | "link-accent"
  | "link-neutral" | "link-info" | "link-success"
  | "link-warning" | "link-error";

type LinkVariant = "link-hover";

interface LinkClasses {
  "link": string;
  [key: LinkColor]: string;
  "link-hover": string;
}

// KBD utility types
type KbdSize = "kbd-lg" | "kbd-sm" | "kbd-xs";

interface KbdClasses {
  "kbd": string;
  [key: KbdSize]: string;
}

// Typography utility types
type ProseSize = "prose-sm" | "prose-lg" | "prose-xl" | "prose-2xl";
type ProseColor = "prose-primary" | "prose-secondary" | "prose-accent";

interface TypographyClasses {
  "prose": string;
  [key: ProseSize]: string;
  [key: ProseColor]: string;
}

// Radius utility types (CSS custom properties)
interface RadiusProperties {
  "--radius-selector": string;
  "--radius-field": string;
  "--radius-box": string;
}

Install with Tessl CLI