کارتهای آمار
dashboard-statsبلاکچهار کارت شاخص برای بالای داشبورد، با درصد تغییر و یک روند میلهای کوچک.
داشبوردآمار
فروش امروز
۱۲٬۴۵۰٬۰۰۰تومان
۱۳٪سفارشها
۸۴
۳٪مشتری جدید
۲۳
۸٪میانگین سبد
۴۸۰٬۰۰۰تومان
۱٪نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add dashboard-statsنصب دستی
محتوای تب «کد» را در
components/blocks/dashboard-stats.tsxبگذارید. پیشنیاز: stat.$ npm i lucide-reactکپی کل فایلregistry json
ساختهشده از
استفاده
usage.tsx
1import { DashboardStats } from "@/components/blocks/dashboard-stats"23<DashboardStats items={[4 { label: "فروش امروز", value: "۱۲٬۴۵۰٬۰۰۰", unit: "تومان", delta: 12.5, trend: [4, 6, 5, 8, 7, 9, 11] },5 { label: "سفارشها", value: "۸۴", delta: -3.2, trend: [9, 8, 8, 7, 9, 8, 7] },6]} />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| trend | number[] | - | چند عدد برای میلههای کوچک؛ آخرین میله رنگ برند میگیره. |