Scroll Area
A custom-styled scrollable container with a thin, minimal scrollbar. Replaces the browser default scrollbar with a sleek, rounded track that blends with your design system while preserving native scroll performance and accessibility.
Live Preview
A scrollable container with a custom thin scrollbar. Scroll to see it in action.
Scrollable Tag List
Installation
Install the Aidash Components package using your preferred package manager.
$ pnpm add @aidash/componentsImport
Import the ScrollArea component into your file.
import { ScrollArea } from '@/components/aidash/scroll-area';Basic Usage
A vertical scroll container displaying a list of users with a thin custom scrollbar.
Alice Chen
Frontend Engineer
Bob Martinez
Backend Developer
Carol White
Product Designer
David Kim
DevOps Engineer
Eva Schmidt
Tech Lead
Frank Johnson
QA Engineer
Grace Liu
Data Scientist
Henry Park
Mobile Developer
Iris Tanaka
UX Researcher
Jack Brown
Security Engineer
<ScrollArea className="max-h-[200px]">
{users.map(user => (
<div key={user.name} className="flex items-center gap-3 px-4 py-3">
<Avatar>{user.avatar}</Avatar>
<div>
<p>{user.name}</p>
<p>{user.role}</p>
</div>
</div>
))}
</ScrollArea>Horizontal Scroll
A horizontally scrollable area for wide content like timelines or image galleries.
React
TypeScript
Next.js
Tailwind CSS
Framer Motion
Drizzle ORM
PostgreSQL
Node.js
GraphQL
Prisma
Zustand
Redux Toolkit
Vite
Webpack
ESLint
Prettier
Jest
Vitest
Playwright
Docker
Kubernetes
AWS
Vercel
Supabase
1<ScrollArea orientation="horizontal">2 <div className="flex gap-3" style={{ width: 'max-content' }}>3 {tags.map(tag => (4 <div key={tag} className="flex-shrink-0 px-4 py-3 rounded-lg">5 {tag}6 </div>7 ))}8 </div>9</ScrollArea>Both Directions
A container that scrolls in both vertical and horizontal directions, useful for large data grids or code previews.
| ID | Name | Role | Department | Location | Status |
|---|---|---|---|---|---|
| 001 | Alice Chen | Frontend Engineer | Engineering | San Francisco, CA | Active |
| 002 | Bob Martinez | Backend Developer | Engineering | San Francisco, CA | Active |
| 003 | Carol White | Product Designer | Engineering | San Francisco, CA | Active |
| 004 | David Kim | DevOps Engineer | Engineering | San Francisco, CA | Active |
| 005 | Eva Schmidt | Tech Lead | Engineering | San Francisco, CA | Active |
| 006 | Frank Johnson | QA Engineer | Engineering | San Francisco, CA | Active |
| 007 | Grace Liu | Data Scientist | Engineering | San Francisco, CA | Active |
| 008 | Henry Park | Mobile Developer | Engineering | San Francisco, CA | Active |
| 009 | Iris Tanaka | UX Researcher | Engineering | San Francisco, CA | Active |
| 010 | Jack Brown | Security Engineer | Engineering | San Francisco, CA | Active |
1<ScrollArea orientation="both" className="max-h-[220px]">2 <table style={{ width: '800px' }}>3 <thead>4 <tr>5 <th>ID</th>6 <th>Name</th>7 <th>Role</th>8 <th>Department</th>9 <th>Location</th>10 <th>Status</th>11 </tr>12 </thead>13 <tbody>14 {users.map(user => (15 <tr key={user.name}>16 <td>{user.id}</td>17 <td>{user.name}</td>18 ...19 </tr>20 ))}21 </tbody>22 </table>23</ScrollArea>Custom Scrollbar
A styled thin scrollbar — 6px wide, rounded, semi-transparent — that feels native to the design.
Browser Default
Custom Thin (6px)
1<ScrollArea scrollbarSize={6}>2 {items.map((item, i) => (3 <div key={i} className="px-3 py-2">{item}</div>4 ))}5</ScrollArea>6 7/* The scrollbar renders as:8 - 6px wide, fully rounded9 - Semi-transparent thumb (15% opacity)10 - Transparent track11 - Hover brightens to 25% opacity */scrollbarSize prop controls the scrollbar width for vertical scrolling and height for horizontal scrolling. A value of 4-8 works best for most interfaces.Auto-hide Scrollbar
The scrollbar fades in when you hover over the container and fades out when you leave. Clean and minimal.
Hover to reveal scrollbar
Alice Chen
Frontend Engineer
Bob Martinez
Backend Developer
Carol White
Product Designer
David Kim
DevOps Engineer
Eva Schmidt
Tech Lead
Frank Johnson
QA Engineer
Grace Liu
Data Scientist
Henry Park
Mobile Developer
Iris Tanaka
UX Researcher
Jack Brown
Security Engineer
1<ScrollArea scrollbarVisible="hover" className="max-h-[200px]">2 {users.map(user => (3 <UserCard key={user.name} user={user} />4 ))}5</ScrollArea>6 7/* scrollbarVisible options:8 - "always" — scrollbar always visible9 - "hover" — fades in on container hover (default)10 - "scroll" — visible only while actively scrolling */With Shadow Indicators
Gradient shadows at the top and bottom edges hint that more content is available above or below.
Scroll to see shadows appear/disappear
1<ScrollArea showShadows className="max-h-[200px]">2 {items.map(item => (3 <div key={item.id} className="flex items-center justify-between">4 <span>{item.name}</span>5 <span>{item.version}</span>6 </div>7 ))}8</ScrollArea>9 10/* Gradient shadows appear/disappear based on scroll position:11 - Top shadow: visible when scrolled down12 - Bottom shadow: visible when more content below */Props API
Complete list of props accepted by the ScrollArea component.
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | 'vertical' | 'horizontal' | 'both' | 'vertical' | Scroll direction of the container |
| scrollbarSize | number | 6 | Width (vertical) or height (horizontal) of the scrollbar track in pixels |
| scrollbarVisible | 'always' | 'hover' | 'scroll' | 'hover' | When the scrollbar is visible |
| showShadows | boolean | false | Show gradient shadow indicators at scroll edges |
| className | string | '' | Additional CSS classes for the scroll container |
| children | ReactNode | — | Scrollable content |
scrollbarVisible prop controls when the scrollbar appears. Use 'always' for content where scroll position matters, 'hover' for a cleaner look, or 'scroll' for the most minimal approach.Accessibility
Built-in accessibility features for inclusive scroll experiences.
Focusable Container
The scroll area receives tabindex="0" so keyboard users can focus into it and scroll using arrow keys, Page Up/Down, Home, and End.
Keyboard Scrolling
When focused, the container supports all standard keyboard scroll commands: Arrow Up/Down, Arrow Left/Right (horizontal), Page Up/Down, Home/End.
ARIA Role
Uses role="region" with an accessible label so screen readers announce the scrollable area and its purpose.
Focus Indicator
A visible focus ring appears when the scroll container is focused via keyboard, following the design system focus style.
1{/* Accessible scroll area with label */}2<ScrollArea aria-label="Team members list" className="max-h-[200px]">3 {members.map(m => <MemberRow key={m.id} member={m} />)}4</ScrollArea>5 6{/* Keyboard navigation:7 Tab — focus into scroll area8 Arrow — scroll vertically/horizontally9 PageUp/Down — scroll by page10 Home/End — jump to start/end */}Related
Components that pair well with ScrollArea.