Getting Started
Foundations
Components
Search for a command to run...
ScrollArea provides a consistent, cross-browser scrolling experience with customizable scrollbars that match your design system. It's useful when you need to create scrollable regions with custom-styled scrollbars, such as in sidebars, chat windows, code blocks, or any container where content may overflow. The component automatically hides scrollbars when not in use and shows them on hover or scroll.
Built on top of Radix UI's ScrollArea primitive with smooth scrolling, customizable scrollbar appearance, and proper accessibility support.
"use client"
import { ScrollArea } from "@strongtie/design-system/scroll-area"
import { Separator } from "@strongtie/design-system/separator"
export function ScrollAreaDefault() {
const tags = Array.from({ length: 50 }).map(
(_, i, a) => `v1.2.0-beta.${a.length - i}`
)
return (
<ScrollArea className="h-72 w-48 rounded-md border">
<div className="p-4">
<h4 className="mb-4 text-sm leading-none font-medium">Tags</h4>
{tags.map((tag) => (
<div key={tag}>
<div className="text-sm">{tag}</div>
<Separator className="my-2" />
</div>
))}
</div>
</ScrollArea>
)
}
npm install @strongtie/design-system
import { ScrollArea } from "@strongtie/design-system/scroll-area"This module exports the following components:
ScrollAreaScrollBarAll components extend Radix UI primitives. See the Radix UI documentation for all available props.
"use client"
import { ScrollArea } from "@strongtie/design-system/scroll-area"
import { Separator } from "@strongtie/design-system/separator"
export function ScrollAreaDefault() {
const tags = Array.from({ length: 50 }).map(
(_, i, a) => `v1.2.0-beta.${a.length - i}`
)
return (
<ScrollArea className="h-72 w-48 rounded-md border">
<div className="p-4">
<h4 className="mb-4 text-sm leading-none font-medium">Tags</h4>
{tags.map((tag) => (
<div key={tag}>
<div className="text-sm">{tag}</div>
<Separator className="my-2" />
</div>
))}
</div>
</ScrollArea>
)
}
"use client"
import { ScrollArea, ScrollBar } from "@strongtie/design-system/scroll-area"
const artworks = Array.from({ length: 20 }).map((_, i) => ({
artist: `Artist ${i + 1}`,
art: `Art piece ${i + 1}`,
}))
export function ScrollAreaHorizontal() {
return (
<ScrollArea className="w-96 rounded-md border whitespace-nowrap">
<div className="flex w-max space-x-4 p-4">
{artworks.map((artwork) => (
<figure key={artwork.artist} className="shrink-0">
<div className="overflow-hidden rounded-md">
<div className="bg-muted flex h-[150px] w-[150px] items-center justify-center">
<span className="text-muted-foreground text-sm">
{artwork.art}
</span>
</div>
</div>
<figcaption className="text-muted-foreground pt-2 text-xs">
{artwork.artist}
</figcaption>
</figure>
))}
</div>
<ScrollBar orientation="horizontal" />
</ScrollArea>
)
}
This scroll area contains a lot of content that extends beyond the visible area, demonstrating the scrolling functionality.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
"use client"
import { ScrollArea } from "@strongtie/design-system/scroll-area"
import { Separator } from "@strongtie/design-system/separator"
export function ScrollAreaLongContent() {
return (
<ScrollArea className="h-96 w-96 rounded-md border">
<div className="p-4">
<h4 className="mb-4 text-lg font-semibold">Long Content Example</h4>
<p className="mb-4">
This scroll area contains a lot of content that extends beyond the
visible area, demonstrating the scrolling functionality.
</p>
<Separator className="my-4" />
{Array.from({ length: 20 }).map((_, i) => (
<div key={i}>
<div className="mb-4">
<h5 className="font-medium">Section {i + 1}</h5>
<p className="text-muted-foreground text-sm">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
{i < 19 && <Separator className="my-4" />}
</div>
))}
</div>
</ScrollArea>
)
}
"use client"
import { ScrollArea } from "@strongtie/design-system/scroll-area"
import { Separator } from "@strongtie/design-system/separator"
const categories = [
{
name: "Fruits",
items: ["Apple", "Banana", "Orange", "Mango", "Pineapple"],
},
{
name: "Vegetables",
items: ["Carrot", "Broccoli", "Spinach", "Tomato", "Cucumber"],
},
{
name: "Grains",
items: ["Rice", "Wheat", "Oats", "Barley", "Quinoa"],
},
{
name: "Dairy",
items: ["Milk", "Cheese", "Yogurt", "Butter", "Cream"],
},
{
name: "Proteins",
items: ["Chicken", "Beef", "Fish", "Eggs", "Tofu"],
},
]
export function ScrollAreaWithNestedContent() {
return (
<ScrollArea className="h-[400px] w-[300px] rounded-md border">
<div className="p-4">
<h4 className="mb-4 text-lg font-semibold">Nested Categories</h4>
{categories.map((category, index) => (
<div key={category.name}>
<div className="mb-4">
<h5 className="text-primary mb-2 font-medium">{category.name}</h5>
<div className="ml-4 space-y-1">
{category.items.map((item) => (
<div
key={item}
className="hover:bg-muted rounded-sm px-2 py-1 text-sm"
>
{item}
</div>
))}
</div>
</div>
{index < categories.length - 1 && <Separator className="my-4" />}
</div>
))}
</div>
</ScrollArea>
)
}
Components can be styled using the className prop. The design system uses Tailwind CSS for styling.
The following data attributes are used to identify component parts:
scroll-areascroll-area-scrollbarscroll-area-thumbscroll-area-viewportOther CSS classes used by this component:
scroll-areascroll-area-scrollbarscroll-area-thumbscroll-area-viewportThis component inherits accessibility features from Radix UI, including: