Corpora UI
Atoms

Scroll area

A bounded content viewport with styled scrollbars.

Usage

Import the stylesheet once at the application root: @exegia/corpora-ui/index.css.

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

function ComponentPreview({ count }: { count: number }) {

  return (
    <div className="relative mx-auto w-full max-w-lg p-6">
      <ScrollArea className="h-48 rounded-lg border"><div className="space-y-3 p-4">{Array.from({ length: count }, (_, index) => <p key={index}>Passage {index + 1}</p>)}</div></ScrollArea>
    </div>
  )
}

<ComponentPreview {...{ count: 20 }} />

API notes

Set a bounded height or width with className so overflow can occur. ScrollBar is available for composing scrollbars with the primitive viewport.

Last updated on

On this page