Efniv0.1

Components

Scroll area

A fixed-height region with a subtle custom scrollbar. Use when native overflow would clip badly or look out of place — dense lists, sidebar palettes, chat panels.

When to usewhen a bounded region needs to scroll and the native scrollbar looks wrong (dense sidebars, tag rows, chat panels).

Import

import { ScrollArea } from "@ravnhq/efni/scroll-area"

Vertical

<ScrollArea className="h-72 w-full">
  <div className="p-3">
    {items.map(item => <div>{item}</div>)}
  </div>
</ScrollArea>

Horizontal

<ScrollArea className="w-full whitespace-nowrap">
  <div className="flex gap-2 p-3">…</div>
</ScrollArea>

Guidelines

Do
  • Set an explicit height (or max-height) — the whole point is a bounded region.
  • Use for dense internal lists where the native scrollbar's chrome would fight the design.
  • Add whitespace-nowrap on the inner content when you want horizontal scroll.
Don't
  • Don't wrap the whole page — let the browser's native scrollbar handle document scroll.
  • Don't nest scroll areas — pick one axis per surface.
  • Don't rely on the scrollbar as a visual affordance — many users only see it on hover.

Props

PropTypeDefaultDescription
…propsScrollAreaPrimitive.Root.Props—Everything ScrollArea passes to the element it renders.
classNamestring—Height/width utilities live here. The component provides no default size.
childrenReactNode—Any content — usually wrapped in a padded container.