Scroll Area

Augments native scroll functionality with custom, styled scrollbars. Built on Base UI ScrollArea primitives.

Usage

import {
  ScrollAreaRoot,
  ScrollAreaViewport,
  ScrollAreaScrollbar,
  ScrollAreaThumb,
} from "@/components/ui/static/scroll-area"

<ScrollAreaRoot className="h-72 w-48 rounded-md border">
  <ScrollAreaViewport className="h-full w-full p-4">
    {/* Content */}
  </ScrollAreaViewport>
  <ScrollAreaScrollbar orientation="vertical">
    <ScrollAreaThumb />
  </ScrollAreaScrollbar>
</ScrollAreaRoot>

Installation

Install dependencies

TypeScript

npm install @base-ui/react

Examples

Chat Messages

Team Chat

A

Alice10:00 AM

Hey, how are you?

B

Bob10:02 AM

I'm good! Working on the project.

A

Alice10:03 AM

Nice! Need any help?

B

Bob10:05 AM

Actually, yes! Can you review the PR?

A

Alice10:06 AM

Sure, I'll take a look now.

B

Bob10:07 AM

Thanks! Let me know if you have questions.

A

Alice10:08 AM

Will do!

B

Bob10:10 AM

By the way, the meeting is at 3pm.

A

Alice10:11 AM

Got it, I'll be there.

B

Bob10:12 AM

Perfect! See you then.

Horizontal Scroll

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

API Reference

orientation"vertical" | "horizontal"

="vertical"

The scrollbar orientation.

forceMountboolean

Force mount the scrollbar.

Scroll Area

Augments native scroll functionality with custom, styled scrollbars. Built on Base UI ScrollArea primitives.

Usage

import {
  ScrollAreaRoot,
  ScrollAreaViewport,
  ScrollAreaScrollbar,
  ScrollAreaThumb,
} from "@/components/ui/static/scroll-area"

<ScrollAreaRoot className="h-72 w-48 rounded-md border">
  <ScrollAreaViewport className="h-full w-full p-4">
    {/* Content */}
  </ScrollAreaViewport>
  <ScrollAreaScrollbar orientation="vertical">
    <ScrollAreaThumb />
  </ScrollAreaScrollbar>
</ScrollAreaRoot>

Installation

Install dependencies

TypeScript

npm install @base-ui/react

Examples

Chat Messages

Team Chat

A

Alice10:00 AM

Hey, how are you?

B

Bob10:02 AM

I'm good! Working on the project.

A

Alice10:03 AM

Nice! Need any help?

B

Bob10:05 AM

Actually, yes! Can you review the PR?

A

Alice10:06 AM

Sure, I'll take a look now.

B

Bob10:07 AM

Thanks! Let me know if you have questions.

A

Alice10:08 AM

Will do!

B

Bob10:10 AM

By the way, the meeting is at 3pm.

A

Alice10:11 AM

Got it, I'll be there.

B

Bob10:12 AM

Perfect! See you then.

Horizontal Scroll

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

API Reference

orientation"vertical" | "horizontal"

="vertical"

The scrollbar orientation.

forceMountboolean

Force mount the scrollbar.

Scroll Area

Tags

Usage

Installation

Install dependencies

Examples

Chat Messages

Team Chat

Horizontal Scroll

API Reference

Scroll Area

Tags

Usage

Installation

Install dependencies

Examples

Chat Messages

Team Chat

Horizontal Scroll

API Reference