Scroll Areapro

Enhanced scroll area with auto-hide scrollbars, progress indicators, and cross-directional scroll

scroll area scrollbar progress

Tags

Tag 1

Tag 2

Tag 3

Tag 4

Tag 5

Tag 6

Tag 7

Tag 8

Tag 9

Tag 10

Tag 11

Tag 12

Tag 13

Tag 14

Tag 15

Tag 16

Tag 17

Tag 18

Tag 19

Tag 20

Tag 21

Tag 22

Tag 23

Tag 24

Tag 25

Tag 26

Tag 27

Tag 28

Tag 29

Tag 30

Tag 31

Tag 32

Tag 33

Tag 34

Tag 35

Tag 36

Tag 37

Tag 38

Tag 39

Tag 40

Tag 41

Tag 42

Tag 43

Tag 44

Tag 45

Tag 46

Tag 47

Tag 48

Tag 49

Tag 50

import { ScrollAreaPro } from "@/components/vritti/scroll-areapro";

export function ScrollAreaProExample() {
  return (
    <div className="flex items-center justify-center p-8">
      <ScrollAreaPro className="h-72 w-48 rounded-md border" autoHide>
        <div className="p-4">
          <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
          {Array.from({ length: 50 }).map((_, i) => (
            <div key={i} className="text-sm py-1">
              Tag {i + 1}
            </div>
          ))}
        </div>
      </ScrollAreaPro>
    </div>
  );
}

Installation


pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/scroll-areapro"

Dependencies


pnpm add motion @radix-ui/react-scroll-area