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

Data Display Components

Name: tessl/npm-daisyui
Author: tessl

Components for displaying data including tables, statistics, badges, avatars, progress indicators, and other data visualization elements.

Capabilities

Table Component

Data tables with styling and responsive features.

<!-- Basic table -->
<table class="table">
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Job</th>
      <th>Favorite Color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Cy Ganderton</td>
      <td>Quality Control Specialist</td>
      <td>Blue</td>
    </tr>
    <tr class="hover">
      <th>2</th>
      <td>Hart Hagerty</td>
      <td>Desktop Support Technician</td>
      <td>Purple</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Brice Swyre</td>
      <td>Tax Accountant</td>
      <td>Red</td>
    </tr>
  </tbody>
</table>

<!-- Table variants -->
<table class="table table-zebra">
  <!-- Table with zebstripe rows -->
</table>

<table class="table table-pin-rows table-pin-cols">
  <!-- Table with pinned rows and columns -->
</table>

<table class="table table-xs">
  <!-- Extra small table -->
</table>

<table class="table table-lg">
  <!-- Large table -->
</table>

Badge Component

Small status indicators and labels.

<!-- Basic badges -->
<div class="badge">neutral</div>
<div class="badge badge-primary">primary</div>
<div class="badge badge-secondary">secondary</div>
<div class="badge badge-accent">accent</div>
<div class="badge badge-ghost">ghost</div>

<!-- Badge sizes -->
<div class="badge badge-lg">Large</div>
<div class="badge badge-md">Normal</div>
<div class="badge badge-sm">Small</div>
<div class="badge badge-xs">Tiny</div>

<!-- Badge variants -->
<div class="badge badge-outline">Outline</div>
<div class="badge badge-info">Info</div>
<div class="badge badge-success">Success</div>
<div class="badge badge-warning">Warning</div>
<div class="badge badge-error">Error</div>

Avatar Component

User profile images and placeholders.

<!-- Basic avatar -->
<div class="avatar">
  <div class="w-24 rounded">
    <img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
  </div>
</div>

<!-- Avatar sizes -->
<div class="avatar">
  <div class="w-32 rounded">
    <img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
  </div>
</div>

<!-- Avatar shapes -->
<div class="avatar">
  <div class="w-24 rounded-full">
    <img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
  </div>
</div>

<!-- Avatar with status -->
<div class="avatar online">
  <div class="w-24 rounded-full">
    <img src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
  </div>
</div>

<!-- Avatar placeholder -->
<div class="avatar placeholder">
  <div class="bg-neutral text-neutral-content rounded-full w-24">
    <span class="text-3xl">K</span>
  </div>
</div>

Stats Component

Statistical data display with values and descriptions.

<!-- Basic stats -->
<div class="stats shadow">
  <div class="stat">
    <div class="stat-title">Total Downloads</div>
    <div class="stat-value">31K</div>
    <div class="stat-desc">Jan 1st - Feb 1st</div>
  </div>
  
  <div class="stat">
    <div class="stat-title">Total Users</div>
    <div class="stat-value text-secondary">4,200</div>
    <div class="stat-desc text-secondary">21% more than last month</div>
  </div>
  
  <div class="stat">
    <div class="stat-title">New Registers</div>
    <div class="stat-value">1,200</div>
    <div class="stat-desc">↘︎ 90 (14%)</div>
  </div>
</div>

<!-- Stats with icons -->
<div class="stats bg-primary text-primary-content">
  <div class="stat">
    <div class="stat-figure text-secondary">
      <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
        <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"/>
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clip-rule="evenodd"/>
      </svg>
    </div>
    <div class="stat-title">Account balance</div>
    <div class="stat-value">$89,400</div>
    <div class="stat-actions">
      <button class="btn btn-sm btn-success">Add funds</button>
    </div>
  </div>
</div>

Progress Component

Progress bars and indicators.

<!-- Basic progress -->
<progress class="progress w-56" value="0" max="100"></progress>
<progress class="progress w-56" value="10" max="100"></progress>
<progress class="progress w-56" value="40" max="100"></progress>
<progress class="progress w-56" value="70" max="100"></progress>
<progress class="progress w-56" value="100" max="100"></progress>

<!-- Progress colors -->
<progress class="progress progress-primary w-56" value="20" max="100"></progress>
<progress class="progress progress-secondary w-56" value="40" max="100"></progress>
<progress class="progress progress-accent w-56" value="60" max="100"></progress>
<progress class="progress progress-info w-56" value="80" max="100"></progress>
<progress class="progress progress-success w-56" value="100" max="100"></progress>
<progress class="progress progress-warning w-56" value="60" max="100"></progress>
<progress class="progress progress-error w-56" value="40" max="100"></progress>

<!-- Indeterminate progress -->
<progress class="progress w-56"></progress>

Loading Component

Loading spinners and indicators.

<!-- Basic loading -->
<span class="loading loading-spinner loading-xs"></span>
<span class="loading loading-spinner loading-sm"></span>
<span class="loading loading-spinner loading-md"></span>
<span class="loading loading-spinner loading-lg"></span>

<!-- Loading variants -->
<span class="loading loading-dots loading-xs"></span>
<span class="loading loading-ring loading-xs"></span>
<span class="loading loading-ball loading-xs"></span>
<span class="loading loading-bars loading-xs"></span>
<span class="loading loading-infinity loading-xs"></span>

<!-- Loading colors -->
<span class="loading loading-spinner text-primary"></span>
<span class="loading loading-spinner text-secondary"></span>
<span class="loading loading-spinner text-accent"></span>
<span class="loading loading-spinner text-neutral"></span>
<span class="loading loading-spinner text-info"></span>
<span class="loading loading-spinner text-success"></span>
<span class="loading loading-spinner text-warning"></span>
<span class="loading loading-spinner text-error"></span>

Radial Progress Component

Circular progress indicators.

<!-- Basic radial progress -->
<div class="radial-progress" style="--value:70;" role="progressbar">70%</div>

<!-- Radial progress sizes -->
<div class="radial-progress" style="--value:70; --size:12rem; --thickness: 2px;" role="progressbar">70%</div>
<div class="radial-progress" style="--value:70; --size:8rem;" role="progressbar">70%</div>
<div class="radial-progress" style="--value:70; --size:4rem;" role="progressbar">70%</div>

<!-- Radial progress colors -->
<div class="radial-progress text-primary" style="--value:70;" role="progressbar">70%</div>
<div class="radial-progress text-secondary" style="--value:70;" role="progressbar">70%</div>
<div class="radial-progress text-accent" style="--value:70;" role="progressbar">70%</div>
<div class="radial-progress text-info" style="--value:70;" role="progressbar">70%</div>
<div class="radial-progress text-success" style="--value:70;" role="progressbar">70%</div>
<div class="radial-progress text-warning" style="--value:70;" role="progressbar">70%</div>
<div class="radial-progress text-error" style="--value:70;" role="progressbar">70%</div>

Countdown Component

Countdown timer display.

<!-- Basic countdown -->
<div class="grid grid-flow-col gap-5 text-center auto-cols-max">
  <div class="flex flex-col">
    <span class="countdown font-mono text-5xl">
      <span style="--value:15;"></span>
    </span>
    days
  </div> 
  <div class="flex flex-col">
    <span class="countdown font-mono text-5xl">
      <span style="--value:10;"></span>
    </span>
    hours
  </div> 
  <div class="flex flex-col">
    <span class="countdown font-mono text-5xl">
      <span style="--value:24;"></span>
    </span>
    min
  </div> 
  <div class="flex flex-col">
    <span class="countdown font-mono text-5xl">
      <span style="--value:58;"></span>
    </span>
    sec
  </div>
</div>

<!-- Large countdown -->
<span class="countdown font-mono text-6xl">
  <span style="--value:10;"></span>
</span>

Timeline Component

Timeline for displaying chronological events.

<!-- Basic timeline -->
<ul class="timeline timeline-vertical">
  <li>
    <div class="timeline-start">1984</div>
    <div class="timeline-middle">
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
      </svg>
    </div>
    <div class="timeline-end timeline-box">First Macintosh computer</div>
    <hr/>
  </li>
  <li>
    <hr/>
    <div class="timeline-start">1998</div>
    <div class="timeline-middle">
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
      </svg>
    </div>
    <div class="timeline-end timeline-box">iMac</div>
    <hr/>
  </li>
</ul>

<!-- Horizontal timeline -->
<ul class="timeline timeline-horizontal">
  <li>
    <div class="timeline-start">1984</div>
    <div class="timeline-middle">
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
      </svg>
    </div>
    <div class="timeline-end timeline-box">First Macintosh computer</div>
  </li>
  <li>
    <div class="timeline-start">1998</div>
    <div class="timeline-middle">
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
      </svg>
    </div>
    <div class="timeline-end timeline-box">iMac</div>
  </li>
</ul>

Types

// Table component types
type TableVariant = "table-zebra" | "table-pin-rows" | "table-pin-cols";
type TableSize = "table-xs" | "table-sm" | "table-md" | "table-lg";

// Badge component types
type BadgeVariant = "badge-outline" | "badge-ghost";
type BadgeSize = "badge-lg" | "badge-md" | "badge-sm" | "badge-xs";
type BadgeColor = 
  | "badge-primary" | "badge-secondary" | "badge-accent"
  | "badge-neutral" | "badge-info" | "badge-success" 
  | "badge-warning" | "badge-error";

// Avatar component types
type AvatarStatus = "online" | "offline";
interface AvatarClasses {
  "avatar": string;
  "avatar-group": string;
  "placeholder": string;
}

// Stats component types
interface StatsClasses {
  "stats": string;
  "stat": string;
  "stat-title": string;
  "stat-value": string;
  "stat-desc": string;
  "stat-figure": string;
  "stat-actions": string;
}

// Progress component types
type ProgressColor = 
  | "progress-primary" | "progress-secondary" | "progress-accent"
  | "progress-info" | "progress-success" | "progress-warning" | "progress-error";

// Loading component types
type LoadingVariant = 
  | "loading-spinner" | "loading-dots" | "loading-ring"
  | "loading-ball" | "loading-bars" | "loading-infinity";
type LoadingSize = "loading-xs" | "loading-sm" | "loading-md" | "loading-lg";

// Timeline component types
type TimelineVariant = "timeline-vertical" | "timeline-horizontal";
interface TimelineClasses {
  "timeline": string;
  "timeline-start": string;
  "timeline-middle": string;
  "timeline-end": string;
  "timeline-box": string;
}

Install with Tessl CLI