# Dashboard 2

> Dense KPI grid with net revenue, channel sales lines, invoices table, billing health, and activity feed.

A shadcn/ui block from the [@efferd](https://efferd.com/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/efferd/dashboard-2).

- Page, with a live preview: https://shadcn.exchange/r/efferd/dashboard-2
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/efferd/dashboard-2-light-68479cce7aa025dd.png
- Registry item: https://efferd.com/r/dashboard-2.json
- Categories: dashboard
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://efferd.com/r/dashboard-2.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `badge`, `button`, `card`, `chart`, `empty`, `table`, `@efferd/app-shell-2`, `@efferd/formater`

## Files

### `registry/blocks/dashboard/2/billing-health.tsx`

```tsx
import { Button } from "@/components/ui/button";
import {
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import {
	Empty,
	EmptyContent,
	EmptyDescription,
	EmptyHeader,
	EmptyMedia,
	EmptyTitle,
} from "@/components/ui/empty";
import { DashboardCard } from "@/components/dashboard-card";

export function BillingHealth() {
	return (
		<DashboardCard className="gap-0">
			<CardHeader className="border-b">
				<CardTitle className="text-balance text-base">Billing health</CardTitle>
				<CardDescription className="text-pretty">
					Nothing urgent needs your attention.
				</CardDescription>
			</CardHeader>
			<CardContent className="flex h-full items-center px-0">
				<Empty>
					<EmptyHeader>
						<EmptyMedia variant="icon">
							<IconPlaceholder
								aria-hidden="true"
								hugeicons="CheckmarkCircle02Icon"
								lucide="CircleCheckIcon"
								phosphor="CheckCircleIcon"
								remixicon="RiCheckboxCircleLine"
								tabler="IconCircleCheck"
							/>
						</EmptyMedia>
						<EmptyTitle className="font-heading">You're caught up.</EmptyTitle>
						<EmptyDescription className="text-xs">
							Balances and payouts look fine. nothing overdue in this snapshot.
						</EmptyDescription>
					</EmptyHeader>
					<EmptyContent>
						<Button asChild variant="ghost">
							<a href="/#">
								Review open invoices
								<IconPlaceholder
									aria-hidden="true"
									hugeicons="ArrowRightIcon"
									lucide="ArrowRightIcon"
									phosphor="ArrowRightIcon"
									remixicon="RiArrowRightLine"
									tabler="IconArrowRight"
								/>
							</a>
						</Button>
					</EmptyContent>
				</Empty>
			</CardContent>
		</DashboardCard>
	);
}
```

### `registry/blocks/dashboard/2/channel-sales-chart.tsx`

```tsx
"use client";

import { useId } from "react";
import { CartesianGrid, Line, LineChart, XAxis } from "recharts";
import { formatDate } from "@/lib/formater";
import {
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import {
	type ChartConfig,
	ChartContainer,
	ChartTooltip,
	ChartTooltipContent,
} from "@/components/ui/chart";
import { Delta, DeltaIcon, DeltaValue } from "@/components/delta";
import { DashboardCard } from "@/components/dashboard-card";

const VISIBLE_DAYS = 7;

/** One row per day: ISO `date`, `retail` / `online` = sales counts (units sold). */
type ChannelSalesChartRow = {
	date: string;
	retail: number;
	online: number;
};

/**
 * Demo Data.
 */
const chartData: ChannelSalesChartRow[] = [
	{ date: "2026-03-15", retail: 198, online: 96 },
	{ date: "2026-03-16", retail: 176, online: 82 },
	{ date: "2026-03-17", retail: 184, online: 88 },
	{ date: "2026-03-18", retail: 170, online: 80 },
	{ date: "2026-03-19", retail: 188, online: 90 },
	{ date: "2026-03-20", retail: 180, online: 85 },
	{ date: "2026-03-21", retail: 192, online: 92 },
	{ date: "2026-03-22", retail: 172, online: 78 },
	{ date: "2026-03-23", retail: 166, online: 74 },
	{ date: "2026-03-24", retail: 174, online: 79 },
	{ date: "2026-03-25", retail: 158, online: 72 },
	{ date: "2026-03-26", retail: 168, online: 76 },
	{ date: "2026-03-27", retail: 152, online: 70 },
	{ date: "2026-03-28", retail: 160, online: 74 },
	{ date: "2026-03-29", retail: 146, online: 68 },
	{ date: "2026-03-30", retail: 154, online: 71 },
	{ date: "2026-03-31", retail: 142, online: 65 },
	{ date: "2026-04-01", retail: 140, online: 63 },
	{ date: "2026-04-02", retail: 132, online: 59 },
	{ date: "2026-04-03", retail: 124, online: 56 },
	{ date: "2026-04-04", retail: 128, online: 58 },
	{ date: "2026-04-05", retail: 116, online: 52 },
	{ date: "2026-04-06", retail: 84, online: 40 },
	{ date: "2026-04-07", retail: 82, online: 38 },
	{ date: "2026-04-08", retail: 96, online: 46 },
	{ date: "2026-04-09", retail: 92, online: 69 },
	{ date: "2026-04-10", retail: 96, online: 62 },
	{ date: "2026-04-11", retail: 112, online: 75 },
	{ date: "2026-04-12", retail: 101, online: 77 },
	{ date: "2026-04-13", retail: 112, online: 78 },
];

/** Most recent daily rows shown in the chart. */
const chartRows = chartData.slice(-VISIBLE_DAYS);

function rowTotal(row: ChannelSalesChartRow) {
	return row.retail + row.online;
}

function growthPctForWindow(rows: readonly ChannelSalesChartRow[]) {
	const first = rows[0];
	if (!first) {
		return 0;
	}
	const last = rows.at(-1);
	if (!last) {
		return 0;
	}
	const a = rowTotal(first);
	const b = rowTotal(last);
	if (!a) {
		return 0;
	}
	return ((b - a) / a) * 100;
}

const growthPctNum = growthPctForWindow(chartRows);

const chartConfig = {
	retail: {
		label: "Retail",
		color: "var(--chart-2)",
	},
	online: {
		label: "Online",
		color: "var(--chart-1)",
	},
} satisfies ChartConfig;

export function ChannelSalesChart() {
	const chartUid = useId().replace(/:/g, "");
	const idLineGlow = `channel-sales-line-glow-${chartUid}`;

	return (
		<DashboardCard className="gap-0 md:col-span-2">
			<CardHeader>
				<div className="min-w-0 space-y-2">
					<div className="flex flex-wrap items-center gap-2">
						<CardTitle >Channel sales</CardTitle>
						<Delta value={growthPctNum} variant="badge">
							<DeltaIcon variant="trend" />
							<DeltaValue />
						</Delta>
					</div>
					<CardDescription>
						Daily sales count by channel, last {VISIBLE_DAYS} days.
					</CardDescription>
				</div>
			</CardHeader>
			<CardContent>
				<ChartContainer
					className="aspect-auto h-60 w-full p-0 md:h-80"
					config={chartConfig}
				>
					<LineChart
						accessibilityLayer
						data={chartRows}
						margin={{
							left: 12,
							right: 12,
							top: 8,
						}}
					>
						<CartesianGrid className="stroke-border" vertical={false} />
						<XAxis
							axisLine={false}
							dataKey="date"
							interval={0}
							tickFormatter={(value) => formatDate(String(value), "day-month")}
							tickLine={false}
							tickMargin={8}
						/>
						<ChartTooltip
							content={<ChartTooltipContent hideLabel />}
							cursor={false}
						/>
						<defs>
							<filter
								height="140%"
								id={idLineGlow}
								width="140%"
								x="-20%"
								y="-20%"
							>
								<feGaussianBlur result="blur" stdDeviation="10" />
								<feComposite in="SourceGraphic" in2="blur" operator="over" />
							</filter>
						</defs>
						<Line
							dataKey="online"
							dot={false}
							filter={`url(#${idLineGlow})`}
							stroke="var(--color-online)"
							strokeWidth={2}
							type="step"
						/>
						<Line
							dataKey="retail"
							dot={false}
							filter={`url(#${idLineGlow})`}
							stroke="var(--color-retail)"
							strokeWidth={2}
							type="step"
						/>
					</LineChart>
				</ChartContainer>
			</CardContent>
		</DashboardCard>
	);
}
```

### `registry/blocks/dashboard/2/dashboard-activity.tsx`

```tsx
import {
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import { DashboardCard } from "@/components/dashboard-card";

const items = [
	{
		title: "Invoice #1045 marked paid",
		time: "About 2 hours ago",
		icon: (
			<IconPlaceholder
				hugeicons="CreditCardIcon"
				lucide="CreditCardIcon"
				phosphor="CreditCardIcon"
				remixicon="RiBankCardLine"
				tabler="IconCreditCard"
			/>
		),
	},
	{
		title: "Jordan joined the team",
		time: "This morning",
		icon: (
			<IconPlaceholder
				hugeicons="UserAdd01Icon"
				lucide="UserPlusIcon"
				phosphor="UserPlusIcon"
				remixicon="RiUserAddLine"
				tabler="IconUserPlus"
			/>
		),
	},
	{
		title: "Weekly summary exported",
		time: "Yesterday",
		icon: (
			<IconPlaceholder
				hugeicons="File01Icon"
				lucide="FileTextIcon"
				phosphor="FileTextIcon"
				remixicon="RiFileTextLine"
				tabler="IconFileText"
			/>
		),
	},
	{
		title: "Dashboard v2 shipped to prod",
		time: "2 days ago",
		icon: (
			<IconPlaceholder
				hugeicons="Rocket01Icon"
				lucide="RocketIcon"
				phosphor="RocketIcon"
				remixicon="RiRocketLine"
				tabler="IconRocket"
			/>
		),
	},
] as const;

export function DashboardActivity() {
	return (
		<DashboardCard className="gap-0">
			<CardHeader className="border-b">
				<CardTitle >Activity</CardTitle>
				<CardDescription>Latest updates in your workspace.</CardDescription>
			</CardHeader>
			<CardContent className="px-0">
				<ul className="flex flex-col divide-y divide-border">
					{items.map((item) => (
						<li className="flex h-16 items-center gap-3 px-6" key={item.title}>
							<span
								aria-hidden="true"
								className="flex size-10 shrink-0 items-center justify-center [&_svg]:size-4"
							>
								{item.icon}
							</span>
							<div className="min-w-0 flex-1 space-y-1">
								<p className="line-clamp-1 text-pretty text-foreground text-sm leading-snug">
									{item.title}
								</p>
								<p className="text-muted-foreground text-xs">{item.time}</p>
							</div>
						</li>
					))}
				</ul>
			</CardContent>
		</DashboardCard>
	);
}
```

### `registry/blocks/dashboard/2/dashboard-card.tsx`

```tsx
import { cn } from "@/lib/utils";
import type * as React from "react";
import { Card } from "@/components/ui/card";

export function DashboardCard({
	className,
	...props
}: React.ComponentProps<typeof Card>) {
	return (
		<Card
			className={cn("rounded-none bg-background shadow-none ring-0", className)}
			{...props}
		/>
	);
}
```

### `registry/blocks/dashboard/2/dashboard-invoices.tsx`

```tsx
"use client";

import { Button } from "@/components/ui/button";
import {
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import {
	Table,
	TableBody,
	TableCaption,
	TableCell,
	TableHead,
	TableHeader,
	TableRow,
} from "@/components/ui/table";
import { DashboardCard } from "@/components/dashboard-card";

const invoices = [
	{
		id: "1045",
		customer: "Northwind Labs",
		amount: "$2,400.00",
		status: "Paid",
	},
	{
		id: "1044",
		customer: "Blue River Co.",
		amount: "$890.00",
		status: "Pending",
	},
	{
		id: "1043",
		customer: "Oak Street Studio",
		amount: "$5,120.00",
		status: "Paid",
	},
	{
		id: "1042",
		customer: "Harbor Freight LLC",
		amount: "$310.50",
		status: "Overdue",
	},
] as const;

export function DashboardInvoices() {
	return (
		<DashboardCard className="relative gap-0 md:col-span-2">
			<CardHeader className="border-b">
				<CardTitle className="text-base">Recent invoices</CardTitle>
				<CardDescription>Open amounts and payment status.</CardDescription>
			</CardHeader>
			<CardContent className="mask-b-from-50% mask-b-to-100% px-0">
				<Table>
					<TableCaption className="sr-only">
						Recent invoices with customer, amount, and status.
					</TableCaption>
					<TableHeader>
						<TableRow>
							<TableHead className="ps-6">Customer</TableHead>
							<TableHead>Invoice</TableHead>
							<TableHead className="pe-6 text-right tabular-nums">
								Amount
							</TableHead>
						</TableRow>
					</TableHeader>
					<TableBody>
						{invoices.map((inv) => (
							<TableRow className="h-12" key={inv.id}>
								<TableCell className="max-w-40 truncate ps-6 font-medium">
									{inv.customer}
								</TableCell>
								<TableCell className="text-muted-foreground tabular-nums">
									#{inv.id}
								</TableCell>
								<TableCell className="pe-6 text-right tabular-nums">
									{inv.amount}
								</TableCell>
							</TableRow>
						))}
					</TableBody>
				</Table>
			</CardContent>
			<div className="mask-t-from-30% absolute inset-x-0 bottom-0 flex h-1/5 items-center justify-center bg-background">
				<Button asChild className="relative" variant="ghost">
					<a href="/#">
						View All
						<IconPlaceholder
							aria-hidden="true"
							hugeicons="ArrowRightIcon"
							lucide="ArrowRightIcon"
							phosphor="ArrowRightIcon"
							remixicon="RiArrowRightLine"
							tabler="IconArrowRight"
						/>
					</a>
				</Button>
			</div>
		</DashboardCard>
	);
}
```

### `registry/blocks/dashboard/2/dashboard.tsx`

```tsx
import { BillingHealth } from "@/components/billing-health";
import { ChannelSalesChart } from "@/components/channel-sales-chart";
import { DashboardActivity } from "@/components/dashboard-activity";
import { DashboardInvoices } from "@/components/dashboard-invoices";
import { NetRevenueChart } from "@/components/net-revenue-chart";
import { DashboardStats } from "@/components/stats";

export function Dashboard() {
	return (
		<div className="grid grid-cols-1 gap-px bg-border p-px md:grid-cols-2 lg:grid-cols-4">
			<DashboardStats />
			<NetRevenueChart />
			<ChannelSalesChart />
			<DashboardInvoices />
			<BillingHealth />
			<DashboardActivity />
		</div>
	);
}
```

### `registry/blocks/dashboard/2/net-revenue-chart.tsx`

```tsx
"use client";

import type * as React from "react";
import { Bar, BarChart, XAxis } from "recharts";
import {
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import {
	type ChartConfig,
	ChartContainer,
	ChartTooltip,
	ChartTooltipContent,
} from "@/components/ui/chart";
import { Delta, DeltaIcon, DeltaValue } from "@/components/delta";
import { DashboardCard } from "@/components/dashboard-card";

/** Demo: last 7 days. */
const salesDaily7 = [
	{ day: "Mon", sales: 3200 },
	{ day: "Tue", sales: 3001 },
	{ day: "Wed", sales: 3780 },
	{ day: "Thu", sales: 4100 },
	{ day: "Fri", sales: 4520 },
	{ day: "Sat", sales: 4004 },
	{ day: "Sun", sales: 5340 },
] as const;

const chartRows = salesDaily7.map((row) => ({ ...row }));

const firstDay = salesDaily7[0].sales;
const lastDay = salesDaily7.at(-1)?.sales ?? firstDay;
const growthPct = (((lastDay - firstDay) / firstDay) * 100).toFixed(1);

const chartConfig = {
	sales: {
		label: "Sales",
		color: "var(--chart-2)",
	},
} satisfies ChartConfig;

function CustomGradientBar(
	props: React.SVGProps<SVGRectElement> & {
		index?: number;
		dataKey?: string | number;
	}
) {
	const {
		fill,
		x = 0,
		y = 0,
		width = 0,
		height = 0,
		dataKey = "sales",
		index = 0,
	} = props;
	const gid = `gradient-bar-${String(dataKey)}-${index}`;

	return (
		<>
			<rect
				fill={`url(#${gid})`}
				height={height}
				stroke="none"
				width={width}
				x={x}
				y={y}
			/>
			<rect fill={fill} height={2} stroke="none" width={width} x={x} y={y} />
			<defs>
				<linearGradient id={gid} x1="0" x2="0" y1="0" y2="1">
					<stop offset="0%" stopColor={fill} stopOpacity={0.5} />
					<stop offset="100%" stopColor={fill} stopOpacity={0} />
				</linearGradient>
			</defs>
		</>
	);
}

export function NetRevenueChart() {
	return (
		<DashboardCard className="gap-0 md:col-span-2">
			<CardHeader className="gap-2">
				<div className="flex flex-wrap items-center gap-2">
					<CardTitle >Net revenue</CardTitle>
					<Delta value={Number(growthPct)} variant="badge">
						<DeltaIcon variant="trend" />
						<DeltaValue />
					</Delta>
				</div>
				<CardDescription>Daily net sales, last 7 days.</CardDescription>
			</CardHeader>
			<CardContent>
				<ChartContainer
					className="aspect-auto h-60 w-full md:h-80"
					config={chartConfig}
				>
					<BarChart accessibilityLayer data={chartRows}>
						<XAxis
							axisLine={false}
							dataKey="day"
							interval={0}
							tickFormatter={(value) => String(value)}
							tickLine={false}
							tickMargin={10}
						/>
						<ChartTooltip
							content={<ChartTooltipContent hideLabel />}
							cursor={false}
						/>
						<Bar
							dataKey="sales"
							fill="var(--color-sales)"
							shape={<CustomGradientBar />}
						/>
					</BarChart>
				</ChartContainer>
			</CardContent>
		</DashboardCard>
	);
}
```

### `registry/blocks/dashboard/2/stats.tsx`

```tsx
import {
	CardContent,
	CardFooter,
	CardHeader,
	CardTitle,
} from "@/components/ui/card";
import { Delta, DeltaIcon, DeltaValue } from "@/components/delta";
import { DashboardCard } from "@/components/dashboard-card";

type Stat = {
	label: string;
	value: string;
	delta: number;
};

const stats: Stat[] = [
	{
		label: "Active users",
		value: "847",
		delta: 3.1,
	},
	{
		label: "Revenue",
		value: "$18,290",
		delta: 12.4,
	},
	{
		label: "Conversion Rate",
		value: "3.28%",
		delta: -0.4,
	},
	{
		label: "New signups",
		value: "142",
		delta: 8.7,
	},
] as const;

export function DashboardStats() {
	return (
		<>
			{stats.map((s) => (
				<DashboardCard className="" key={s.label}>
					<CardHeader className="flex flex-row items-center justify-between">
						<CardTitle className="font-normal text-xs tracking-wide">
							{s.label}
						</CardTitle>
					</CardHeader>
					<CardContent className="flex flex-row items-center gap-2">
						<p className="font-semibold text-2xl tabular-nums">{s.value}</p>
					</CardContent>
					<CardFooter className="gap-1 rounded-none bg-background text-xs">
						<Delta value={s.delta}>
							<DeltaIcon />
							<DeltaValue />
						</Delta>
						<span className="text-muted-foreground">vs last week</span>{" "}
					</CardFooter>
				</DashboardCard>
			))}
		</>
	);
}
```

### `registry/blocks/dashboard/delta.tsx`

```tsx
"use client";
import { cn } from "@/lib/utils";
import * as React from "react";
import { Badge } from "@/components/ui/badge";

type DeltaIconVariant = "default" | "trend" | "arrow";
type DeltaVariant = "default" | "badge";

type DeltaContextValue = {
	value: number;
};

const DeltaContext = React.createContext<DeltaContextValue | null>(null);

function useDeltaValue() {
	const context = React.useContext(DeltaContext);

	if (!context) {
		throw new Error(
			"DeltaIcon and DeltaValue must be used inside a `Delta` component."
		);
	}

	return context.value;
}

function Delta({
	className,
	value,
	variant = "default",
	...props
}: React.ComponentProps<"div"> & {
	value: number;
	variant?: DeltaVariant;
}) {
	return (
		<DeltaContext.Provider value={{ value }}>
			{variant === "badge" ? (
				<Badge
					className={cn(
						"gap-1 border-none tabular-nums [&_svg]:size-4 [&_svg]:shrink-0",
						value > 0
							? "bg-emerald-500/10 text-emerald-500"
							: "bg-red-500/10 text-red-500",
						className
					)}
					data-slot="delta"
					variant="secondary"
					{...(props as React.ComponentProps<typeof Badge>)}
				/>
			) : (
				<div
					className={cn(
						"inline-flex items-center gap-1 text-muted-foreground tabular-nums",
						"[&_svg]:size-3 [&_svg]:shrink-0",
						value > 0 ? "text-emerald-600 dark:text-emerald-400" : "",
						value < 0 ? "text-rose-600 dark:text-rose-400" : "",
						className
					)}
					data-slot="delta"
					{...props}
				/>
			)}
		</DeltaContext.Provider>
	);
}

function FilledShell({
	value,
	children,
}: {
	value: number;
	children: React.ReactNode;
}) {
	return (
		<span
			className={cn(
				"inline-flex size-3 shrink-0 items-center justify-center rounded-full",
				"[&_svg]:size-2! [&_svg]:shrink-0 [&_svg]:stroke-3! [&_svg]:text-background",
				value > 0 && "bg-emerald-500",
				value < 0 && "bg-red-500",
				(!value || value === 0) && "bg-muted-foreground"
			)}
			data-slot="delta-icon"
		>
			{children}
		</span>
	);
}

function DeltaIcon({
	variant = "default",
	filled = false,
	className,
	...props
}: Omit<React.ComponentProps<"svg">, "fill"> & {
	variant?: DeltaIconVariant;
	filled?: boolean;
}) {
	const resolvedValue = useDeltaValue();

	const mergedClassName = cn(className);

	const shell = (node: React.ReactElement) =>
		filled ? <FilledShell value={resolvedValue}>{node}</FilledShell> : node;

	const slotProps = filled ? {} : { "data-slot": "delta-icon" as const };

	if (!resolvedValue || resolvedValue === 0) {
		return shell(
			<IconPlaceholder
				{...slotProps}
				className={mergedClassName}
				hugeicons="MinusSignIcon"
				lucide="MinusIcon"
				phosphor="MinusIcon"
				remixicon="RiSubtractLine"
				tabler="IconMinus"
				{...props}
			/>
		);
	}

	if (resolvedValue > 0) {
		if (variant === "trend") {
			return shell(
				<IconPlaceholder
					{...slotProps}
					className={mergedClassName}
					hugeicons="TradeUpIcon"
					lucide="TrendingUpIcon"
					phosphor="TrendUpIcon"
					remixicon="RiArrowRightUpLine"
					tabler="IconTrendingUp"
					{...props}
				/>
			);
		}

		if (variant === "arrow") {
			return shell(
				<IconPlaceholder
					{...slotProps}
					className={mergedClassName}
					hugeicons="ArrowUp02Icon"
					lucide="ArrowUpIcon"
					phosphor="ArrowUpIcon"
					remixicon="RiArrowUpLine"
					tabler="IconArrowUp"
					{...props}
				/>
			);
		}

		return shell(
			<IconPlaceholder
				{...slotProps}
				className={mergedClassName}
				hugeicons="ArrowUp01Icon"
				lucide="ChevronUpIcon"
				phosphor="CaretUpIcon"
				remixicon="RiArrowUpSLine"
				tabler="IconChevronUp"
				{...props}
			/>
		);
	}

	if (variant === "trend") {
		return shell(
			<IconPlaceholder
				{...slotProps}
				className={mergedClassName}
				hugeicons="TradeDownIcon"
				lucide="TrendingDownIcon"
				phosphor="TrendDownIcon"
				remixicon="RiArrowRightDownLine"
				tabler="IconTrendingDown"
				{...props}
			/>
		);
	}

	if (variant === "arrow") {
		return shell(
			<IconPlaceholder
				{...slotProps}
				className={mergedClassName}
				hugeicons="ArrowDown02Icon"
				lucide="ArrowDownIcon"
				phosphor="ArrowDownIcon"
				remixicon="RiArrowDownLine"
				tabler="IconArrowDown"
				{...props}
			/>
		);
	}

	return shell(
		<IconPlaceholder
			{...slotProps}
			className={mergedClassName}
			hugeicons="ArrowDown01Icon"
			lucide="ChevronDownIcon"
			phosphor="CaretDownIcon"
			remixicon="RiArrowDownSLine"
			tabler="IconChevronDown"
			{...props}
		/>
	);
}

function DeltaValue({
	className,
	precision = 1,
	suffix = "%",
	absolute = true,
	...props
}: React.ComponentProps<"span"> & {
	precision?: number;
	suffix?: string;
	absolute?: boolean;
}) {
	const resolvedValue = useDeltaValue();

	const formattedValue = (
		absolute ? Math.abs(resolvedValue) : resolvedValue
	).toFixed(precision);

	return (
		<span
			className={cn("tabular-nums", className)}
			data-slot="delta-value"
			{...props}
		>
			{formattedValue}
			{suffix}
		</span>
	);
}
export { Delta, DeltaIcon, DeltaValue };
```