Yami UI

Augments native scroll for custom styling.

Row 1

Row 2

Row 3

Row 4

Row 5

Row 6

Row 7

Row 8

Row 9

Row 10

Row 11

Row 12

Row 13

Row 14

Row 15

Row 16

Row 17

Row 18

Row 19

Row 20

Installation

Add the scroll area component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/scroll-area.json

Usage

import { ScrollArea } from "@/components/ui/scroll-area"

<ScrollArea className="h-40 w-56 border border-border p-3">
  <div className="space-y-2 text-sm">
    {items.map((item) => (
      <p key={item.id} className="text-muted-foreground">{item.label}</p>
    ))}
  </div>
</ScrollArea>

Examples

Default