Height-limited scroll container with a slim scrollbar.
npx @agents-npm-packages/vibeui add scroll-area --dir ./src/components/uiImport
import { ScrollArea } from "@/components/ui/scroll-area"Generated from the component's TypeScript types, so it always matches the source. * marks a required prop.
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | ReactNode | — | Content rendered inside the component. |
| className | string | — | Extra classes, merged with the component's own. |
| maxHeight | number | 240 | Maximum height in pixels before content scrolls. |
import { cn } from "@/lib/utils";
/** Height-limited scroll container with a slim scrollbar. */
export function ScrollArea({
className,
children,
maxHeight = 240,
}: {
className?: string;
children: React.ReactNode;
maxHeight?: number;
}) {
return (
<div
tabIndex={0}
className={cn(
"overflow-y-auto rounded-md border border-line bg-surface [scrollbar-color:var(--line-strong)_transparent] [scrollbar-width:thin]",
className,
)}
style={{ maxHeight }}
>
{children}
</div>
);
}
Exports ScrollArea. Peer dependencies: clsx, tailwind-merge.