shadcn-preact
Components

Scroll Area

Augments native scroll functionality for custom, cross-browser styling.

PreviewSource
Example requirements

Also uses: Separator.

Installation

Complete the project setup first, including Tailwind CSS v4, theme tokens, and Preact compatibility aliases.

1. Install dependencies

bun add --exact cn@0.4.0 preact@11.0.0 tw-animate-css@1.4.0

2. Copy the component with degit

Run this from your project root. It selects scroll-area.tsx, its local dependencies, and both licenses directly from the repository, then copies them into src/components/ui.

bunx degit@3.10.0 https://github.com/LiasCode/shadcn-preact#main ./.cache/shadcn-preact/scroll-area --files LICENSE.md,registry/ui/lib/utils.ts,registry/ui/primitives/LICENSE,registry/ui/primitives/direction-provider/index.tsx,registry/ui/primitives/internals/direction-context.ts,registry/ui/primitives/internals/empty.ts,registry/ui/primitives/internals/getReactElementRef.ts,registry/ui/primitives/internals/getStateAttributesProps.ts,registry/ui/primitives/internals/mergeObjects.ts,registry/ui/primitives/internals/popups/getElementProps.ts,registry/ui/primitives/internals/resolveClassName.ts,registry/ui/primitives/internals/resolveStyle.ts,registry/ui/primitives/internals/types.ts,registry/ui/primitives/internals/useId.ts,registry/ui/primitives/internals/useIsoLayoutEffect.ts,registry/ui/primitives/internals/useMergedRefs.ts,registry/ui/primitives/internals/useRefWithInit.ts,registry/ui/primitives/internals/useRenderElement.ts,registry/ui/primitives/internals/useStableCallback.ts,registry/ui/primitives/merge-props/index.ts,registry/ui/primitives/scroll-area/index.ts,registry/ui/primitives/scroll-area/parts.tsx,registry/ui/scroll-area.tsx --force
mkdir -p ./src/components/ui
cp -R ./.cache/shadcn-preact/scroll-area/registry/ui/. ./src/components/ui/
cp ./.cache/shadcn-preact/scroll-area/LICENSE.md ./src/components/ui/LICENSE.md

The temporary copy lives in .cache/shadcn-preact/scroll-area. Existing components stay in place; shared source files are updated from main.

Selected source files (22)

Usage

import { ScrollArea, ScrollBar } from "./components/ui/scroll-area"
<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
  Your scrollable content here.
</ScrollArea>

Examples

Horizontal

Use ScrollBar with orientation="horizontal" for horizontal scrolling.

HorizontalSource
Preview

Reference

See the official Scroll Area documentation for composition patterns and API details. This page uses the Preact port and examples from the pinned upstream revision.

Component source