Components

Stat

Displays related numbers and supporting data in composable horizontal, vertical, or responsive blocks.

Preview

Total page views
89,400
21% more than last month

More examples

Responsive dashboard

Combine figures, semantic colors, and multiple values in a layout that stacks on smaller screens.

Downloads
31K
Jan 1 – Feb 1
New users
4,200
↗ 400 (22%)
New registrations
1,200
↘ 90 (14%)

Actions and alignment

Add controls or center individual stat items with ordinary Tailwind classes.

Account balance
$89,400
Active projects
24
Across 6 workspaces

Installation

Install directly from the hosted registry with the shadcn-svelte CLI.

Terminal 
npx shadcn-svelte@latest add https://ui.akcodeworks.com/r/stat.json

Usage

Compose Root, Item, Title, Value, and Description. Add Figure for an icon or image and Actions for controls. Root defaults to a horizontal layout; use vertical or responsive when the stats should stack, including on smaller screens.

API reference

PropTypeDefaultDescription
Root.directionhorizontal | vertical | responsivehorizontalSets the horizontal or vertical layout direction.
classstring—Tailwind CSS classes applied to the component root.
childrenSnippetrequiredContent rendered inside the component.

Source

These files are included in the registry item and copied into the consuming project.

stat.svelte 
<script lang="ts" module>	export type StatDirection = 'horizontal' | 'vertical' | 'responsive';</script><script lang="ts">	import type { Snippet } from 'svelte';	import type { HTMLAttributes } from 'svelte/elements';	import { cn } from '$lib/utils.js';	let {		children,		direction = 'horizontal',		class: className,		...restProps	}: HTMLAttributes<HTMLDivElement> & {		children: Snippet;		direction?: StatDirection;	} = $props();</script><div	{...restProps}	data-slot="stats"	data-direction={direction}	class={cn(		'grid overflow-x-auto rounded-xl bg-card text-card-foreground',		{			'auto-cols-fr grid-flow-col divide-x divide-border': direction === 'horizontal',			'grid-flow-row divide-y divide-border': direction === 'vertical',			'grid-flow-row divide-y divide-border sm:auto-cols-fr sm:grid-flow-col sm:divide-x sm:divide-y-0':				direction === 'responsive'		},		className	)}>	{@render children()}</div>
stat-item.svelte 
<script lang="ts">	import type { Snippet } from 'svelte';	import type { HTMLAttributes } from 'svelte/elements';	import { cn } from '$lib/utils.js';	let {		children,		class: className,		...restProps	}: HTMLAttributes<HTMLDivElement> & { children: Snippet } = $props();</script><div	{...restProps}	data-slot="stat"	class={cn(		'grid min-w-56 grid-cols-[minmax(0,1fr)_auto] grid-rows-[auto_auto_auto] gap-x-4 px-6 py-5',		className	)}>	{@render children()}</div>
stat-title.svelte 
<script lang="ts">	import type { Snippet } from 'svelte';	import type { HTMLAttributes } from 'svelte/elements';	import { cn } from '$lib/utils.js';	let {		children,		class: className,		...restProps	}: HTMLAttributes<HTMLDivElement> & { children: Snippet } = $props();</script><div	{...restProps}	data-slot="stat-title"	class={cn('col-start-1 row-start-1 text-sm text-muted-foreground', className)}>	{@render children()}</div>
stat-value.svelte 
<script lang="ts">	import type { Snippet } from 'svelte';	import type { HTMLAttributes } from 'svelte/elements';	import { cn } from '$lib/utils.js';	let {		children,		class: className,		...restProps	}: HTMLAttributes<HTMLDivElement> & { children: Snippet } = $props();</script><div	{...restProps}	data-slot="stat-value"	class={cn('col-start-1 row-start-2 text-3xl font-bold tracking-tight', className)}>	{@render children()}</div>
stat-description.svelte 
<script lang="ts">	import type { Snippet } from 'svelte';	import type { HTMLAttributes } from 'svelte/elements';	import { cn } from '$lib/utils.js';	let {		children,		class: className,		...restProps	}: HTMLAttributes<HTMLDivElement> & { children: Snippet } = $props();</script><div	{...restProps}	data-slot="stat-description"	class={cn('col-start-1 row-start-3 text-xs text-muted-foreground', className)}>	{@render children()}</div>
stat-figure.svelte 
<script lang="ts">	import type { Snippet } from 'svelte';	import type { HTMLAttributes } from 'svelte/elements';	import { cn } from '$lib/utils.js';	let {		children,		class: className,		...restProps	}: HTMLAttributes<HTMLDivElement> & { children: Snippet } = $props();</script><div	{...restProps}	data-slot="stat-figure"	class={cn('col-start-2 row-start-1 row-end-4 place-self-start', className)}>	{@render children()}</div>
stat-actions.svelte 
<script lang="ts">	import type { Snippet } from 'svelte';	import type { HTMLAttributes } from 'svelte/elements';	import { cn } from '$lib/utils.js';	let {		children,		class: className,		...restProps	}: HTMLAttributes<HTMLDivElement> & { children: Snippet } = $props();</script><div	{...restProps}	data-slot="stat-actions"	class={cn('col-start-2 row-start-3 flex items-end justify-end gap-2 self-end', className)}>	{@render children()}</div>
index.ts 
import Root from './stat.svelte';import Item from './stat-item.svelte';import Title from './stat-title.svelte';import Value from './stat-value.svelte';import Description from './stat-description.svelte';import Figure from './stat-figure.svelte';import Actions from './stat-actions.svelte';export { Root, Item, Title, Value, Description, Figure, Actions };export {	Root as Stat,	Item as StatItem,	Title as StatTitle,	Value as StatValue,	Description as StatDescription,	Figure as StatFigure,	Actions as StatActions};export type { StatDirection } from './stat.svelte';