← All components

Scroll Area

Custom scrollbars for sidebars and logs.

Line 1 of scrollable content

Line 2 of scrollable content

Line 3 of scrollable content

Line 4 of scrollable content

Line 5 of scrollable content

Line 6 of scrollable content

Line 7 of scrollable content

Line 8 of scrollable content

Line 9 of scrollable content

Line 10 of scrollable content

Line 11 of scrollable content

Line 12 of scrollable content

Example

import { ScrollArea } from "matcha-ui";

<ScrollArea className="h-32 w-full max-w-sm rounded-md border p-4">
  <div className="space-y-2 text-sm">
    {Array.from({ length: 12 }).map((_, i) => (
      <p key={i}>Line {i + 1} of scrollable content</p>
    ))}
  </div>
</ScrollArea>