Widget
GitHubStatistic card with title, value, icon, size variants, and optional positive-value sign.
Installation
bash
pnpm dlx shadcn@latest add @cs/widgetUsage
tsx
import { Users } from "lucide-react";
import { Widget } from "@/components/cs/widget";tsx
<Widget title="Active users" value={1284} icon={<Users />} variant="default" size="lg" withSign />API Reference
Widget
Statistic card with a title, value, icon, size, and visual variant.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| icon * | React.ReactNode | - | Icon displayed next to the statistic. |
| size | "default" | "xs" | "lg" | "sm" | null | undefined | - | Controls the widget icon size. |
| title * | string | - | Statistic label. |
| value * | React.ReactNode | - | Statistic value. Numeric values are formatted for the current widget locale. |
| variant | "default" | "secondary" | "destructive" | "outline" | null | undefined | - | Controls the card color treatment. |
| withSign | boolean | - | Adds a plus sign before positive numeric values. |