وایب‌فارسیUI

کارت

cardکامپوننت

کادر محتوا با سربرگ، عنوان و توضیح.

هدف ماهانه

۷۲٪ از هدف ۳۰۰ میلیون تومانی

نصب

  1. با CLI

    اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.

    $ npx vibefarsi add card

  2. نصب دستی

    محتوای تب «کد» را در components/ui/card.tsx بگذارید.

    $ npm i lucide-react
    کپی کل فایلregistry json

استفاده

usage.tsx
1import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card"23<Card>4  <CardHeader><CardTitle>هدف ماهانه</CardTitle><CardDescription>۷۲٪ از ۳۰۰ میلیون تومان</CardDescription></CardHeader>5  <CardContent>…</CardContent>6</Card>
قبلیجعبه‌ی پرامپتبعدیجدول داده