Vibes logo

Scroll Area

Installation

Run the following command

npx vibes@latest add scroll-area

Usage

import { ScrollArea } from '@/vibes/soul/primitives/scroll-area';function Usage() {  const items = Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`);  return (      <div className="w-72">          <ScrollArea className="h-64 rounded-lg border bg-background p-4">              <div className="space-y-2">                  {items.map((item, index) => (                      <div                           key={index}                          className="rounded-md p-3 hover:bg-contrast-100 transition-colors"                      >                          {item}                      </div>                  ))}              </div>          </ScrollArea>      </div>  );}

API Reference

ScrollAreaProps

PropTypeDefault
children*
ReactNode
className
string
orientation
'vertical' | 'horizontal'
'vertical'

CSS Variables

This component supports various CSS variables for theming. Here's a comprehensive list.

:root {  --scroll-area-background: var(--contrast-100);  --scroll-area-thumb: var(--contrast-200);}