Getting Started
Components
Search for a command to run...
Scroll areas provide a consistent scrolling experience across different browsers and operating systems by replacing native scrollbars with custom-styled ones. They handle both vertical and horizontal scrolling, automatically showing or hiding scrollbars based on content overflow.
"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 accept standard HTML attributes and React 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.
CSS classes used by this component:
scroll-areaEnsure proper accessibility attributes are added when implementing this component.