sigpro-ui/docs/components/stat.md

Stat

Statistic card component for displaying metrics, counts, and key performance indicators with optional icons and descriptions.

Tag

Stat

Props

Prop	Type	Default	Description
label	string | VNode | Signal	-	Statistic label/title
value	string | number | Signal	-	Main statistic value
desc	string | VNode | Signal	-	Description or trend text
icon	string | VNode | Signal	-	Icon displayed in the figure area
class	string	''	Additional CSS classes (DaisyUI + Tailwind)

Styling

Stat supports all daisyUI Stat classes:

Category	Keywords	Description
Base	stat	Base stat container
Sections	stat-figure, stat-title, stat-value, stat-desc	Stat sub-components
Variants	stat-compact	Compact spacing variant

For further details, check the daisyUI Stat Documentation – Full reference for CSS classes.

Live Examples

Basic Stat

Live Demo

const BasicDemo = () => {
  return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [
    Stat({
      label: 'Total Users',
      value: '2,345',
      desc: '↗︎ 120 new users this month'
    }),
    Stat({
      label: 'Revenue',
      value: '$45,678',
      desc: '↘︎ 5% decrease from last month'
    }),
    Stat({
      label: 'Conversion Rate',
      value: '3.45%',
      desc: '↗︎ 0.5% increase'
    })
  ]);
};
$mount(BasicDemo, '#demo-basic');

With Icons

Live Demo

const IconsDemo = () => {
  return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [
    Stat({
      label: 'Active Users',
      value: '1,234',
      desc: 'Currently online',
      icon: Span({ class: 'text-2xl' }, '👥')
    }),
    Stat({
      label: 'New Orders',
      value: '89',
      desc: 'Today',
      icon: Span({ class: 'text-2xl' }, '📦')
    }),
    Stat({
      label: 'Pending Tasks',
      value: '23',
      desc: 'Need attention',
      icon: Span({ class: 'text-2xl' }, '⏳')
    })
  ]);
};
$mount(IconsDemo, '#demo-icons');

Reactive Values

Live Demo

const ReactiveDemo = () => {
  const count = $(0);
  
  return Div({ class: 'flex flex-col gap-4' }, [
    Div({ class: 'grid grid-cols-1 md:grid-cols-2 gap-4' }, [
      Stat({
        label: 'Counter',
        value: () => count(),
        desc: 'Click the button to increase',
        icon: Span({ class: 'text-2xl' }, '🔢')
      }),
      Stat({
        label: 'Squared',
        value: () => Math.pow(count(), 2),
        desc: 'Square of counter',
        icon: Span({ class: 'text-2xl' }, '📐')
      })
    ]),
    Div({ class: 'flex gap-2 justify-center' }, [
      Button({ 
        class: 'btn btn-primary',
        onclick: () => count(count() + 1)
      }, 'Increment'),
      Button({ 
        class: 'btn btn-ghost',
        onclick: () => count(0)
      }, 'Reset')
    ])
  ]);
};
$mount(ReactiveDemo, '#demo-reactive');

With Trend Indicators

Live Demo

const TrendsDemo = () => {
  return Div({ class: 'grid grid-cols-1 md:grid-cols-3 gap-4' }, [
    Stat({
      label: 'Weekly Sales',
      value: '$12,345',
      desc: Div({ class: 'text-success' }, '↗︎ 15% increase'),
      icon: Span({ class: 'text-2xl' }, '📈')
    }),
    Stat({
      label: 'Bounce Rate',
      value: '42%',
      desc: Div({ class: 'text-error' }, '↘︎ 3% from last week'),
      icon: Span({ class: 'text-2xl' }, '📉')
    }),
    Stat({
      label: 'Avg. Session',
      value: '4m 32s',
      desc: Div({ class: 'text-warning' }, '↗︎ 12 seconds'),
      icon: Span({ class: 'text-2xl' }, '⏱️')
    })
  ]);
};
$mount(TrendsDemo, '#demo-trends');

Multiple Stats in Row

Live Demo

const MultipleDemo = () => {
  return Div({ class: 'grid grid-cols-1 md:grid-cols-4 gap-4' }, [
    Stat({
      label: 'Posts',
      value: '1,234',
      desc: 'Total content',
      icon: Span({ class: 'text-2xl' }, '📝')
    }),
    Stat({
      label: 'Comments',
      value: '8,901',
      desc: 'Engagement',
      icon: Span({ class: 'text-2xl' }, '💬')
    }),
    Stat({
      label: 'Likes',
      value: '12,345',
      desc: 'Reactions',
      icon: Span({ class: 'text-2xl' }, '❤️')
    }),
    Stat({
      label: 'Shares',
      value: '456',
      desc: 'Viral reach',
      icon: Span({ class: 'text-2xl' }, '🔄')
    })
  ]);
};
$mount(MultipleDemo, '#demo-multiple');

Dashboard Example

Live Demo

const DashboardDemo = () => {
  const stats = $({
    users: 1245,
    revenue: 89342,
    orders: 342,
    satisfaction: 94
  });
  
  const updateStats = () => {
    stats({
      users: stats().users + Math.floor(Math.random() * 50),
      revenue: stats().revenue + Math.floor(Math.random() * 1000),
      orders: stats().orders + Math.floor(Math.random() * 20),
      satisfaction: Math.min(100, stats().satisfaction + Math.floor(Math.random() * 5) - 2)
    });
  };
  
  return Div({ class: 'flex flex-col gap-6' }, [
    Div({ class: 'grid grid-cols-1 md:grid-cols-4 gap-4' }, [
      Stat({
        label: 'Total Users',
        value: () => stats().users.toLocaleString(),
        desc: 'Registered users',
        icon: Span({ class: 'text-2xl' }, '👥')
      }),
      Stat({
        label: 'Revenue',
        value: () => `$${stats().revenue.toLocaleString()}`,
        desc: 'This month',
        icon: Span({ class: 'text-2xl' }, '💰')
      }),
      Stat({
        label: 'Orders',
        value: () => stats().orders.toLocaleString(),
        desc: 'Completed',
        icon: Span({ class: 'text-2xl' }, '📦')
      }),
      Stat({
        label: 'Satisfaction',
        value: () => `${stats().satisfaction}%`,
        desc: stats().satisfaction > 90 ? 'Excellent!' : 'Good',
        icon: Span({ class: 'text-2xl' }, '😊')
      })
    ]),
    Div({ class: 'flex justify-center' }, [
      Button({ 
        class: 'btn btn-primary',
        onclick: updateStats
      }, 'Refresh Data')
    ])
  ]);
};
$mount(DashboardDemo, '#demo-dashboard');

All Variants

Live Demo

const VariantsDemo = () => {
  return Div({ class: 'grid grid-cols-1 md:grid-cols-2 gap-4' }, [
    Stat({
      label: 'Primary Stat',
      value: '1,234',
      desc: 'With description',
      icon: Span({ class: 'text-2xl' }, '⭐'),
      class: 'bg-primary/10 text-primary'
    }),
    Stat({
      label: 'Success Stat',
      value: '89%',
      desc: 'Success rate',
      icon: Span({ class: 'text-2xl' }, '✅'),
      class: 'bg-success/10 text-success'
    }),
    Stat({
      label: 'Warning Stat',
      value: '23',
      desc: 'Pending items',
      icon: Span({ class: 'text-2xl' }, '⚠️'),
      class: 'bg-warning/10 text-warning'
    }),
    Stat({
      label: 'Error Stat',
      value: '5',
      desc: 'Failed attempts',
      icon: Span({ class: 'text-2xl' }, '❌'),
      class: 'bg-error/10 text-error'
    })
  ]);
};
$mount(VariantsDemo, '#demo-variants');

Compact Stats

Live Demo

const CompactDemo = () => {
  return Div({ class: 'flex flex-wrap gap-4' }, [
    Stat({
      label: 'Views',
      value: '12.3K',
      class: 'stat-compact'
    }),
    Stat({
      label: 'Likes',
      value: '2,456',
      class: 'stat-compact'
    }),
    Stat({
      label: 'Comments',
      value: '345',
      class: 'stat-compact'
    }),
    Stat({
      label: 'Shares',
      value: '89',
      class: 'stat-compact'
    })
  ]);
};
$mount(CompactDemo, '#demo-compact');