Scroll area

Native scrolling with a minimal scrollbar, edges that fade only where there’s more to see, and an optional peek that cuts the last item in half.

bypreet from Hextaui

Installation

terminal

pnpm dlx layro-cli add @preetsuthar17/scroll-area

npx layro-cli add @preetsuthar17/scroll-area

npx layro-cli add @preetsuthar17/scroll-area

bunx layro-cli add @preetsuthar17/scroll-area

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import * as React from "react"
import {
  DirectionProvider,
  useDirection,
} from "@base-ui/react/direction-provider"
import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
import { cva } from "class-variance-authority"
import { cn } from "cn"

type ClassName<State> =
  string | ((state: State) => string | undefined) | undefined