ناحیه اسکرول

نصب

1. با CLI

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

   $ npx vibefarsi add scroll-area

2. نصب دستی

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

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

استفاده

1import { ScrollArea } from "@/components/ui/scroll-area"23<ScrollArea className="h-64 rounded-lg border border-border p-3">4  {items.map((item) => (5    <p key={item} className="border-b border-border py-2 last:border-0">{item}</p>6  ))}7</ScrollArea>

پراپ‌ها

نکته‌های راست‌چین

• با scroll-progress فرق داره؛ آن فقط نوار پیشرفت بالای صفحه است، این خود ظرف اسکرول با اسکرول‌بار قابل استایل است.
• ارتفاع یا عرض ثابت (مثل h-64) بدهید وگرنه محتوا کش می‌آید و اسکرولی دیده نمی‌شود.