Scroll Area
Styled scrollable container with custom scrollbars that match the design system.
@/components/ui/scroll-areaVertical — notification feed
Scroll to see more — 12 items
T7A3901 was assigned to you
2m ago
Comment on T7A3898 by Marko K.
14m ago
T7A3880 moved to In Review
1h ago
T7A3875 is due in 2 days
2h ago
T7A3870 escalated to Critical
3h ago
T7A3855 was closed by Jovana B.
4h ago
T7A3840 re-opened after merge
5h ago
T7A3820 moved to Blocked
6h ago
T7A3810 comment thread resolved
7h ago
T7A3801 assigned to Stefan V.
8h ago
T7A3790 SLA breach warning
9h ago
T7A3763 priority changed to High
10h ago
Horizontal — wide data table
Scroll right to see all 10 columns
| ID | Title | Status | Priority | Assignee | Department | Process Step | Business Partner | Created | Updated |
|---|---|---|---|---|---|---|---|---|---|
| T7A3763 | Fix login redirect | Open | High | DA | Support | Intake | Acme Corp | 13.5.2026 | 14.5.2026 |
| T7A3801 | Update ticket filters | In Progress | Normal | DA | Support | Intake | Acme Corp | 13.5.2026 | 14.5.2026 |
| T7A3820 | Export to CSV | In Review | Low | DA | Support | Intake | Acme Corp | 13.5.2026 | 14.5.2026 |
Sub-components
| Component | Role |
|---|---|
| ScrollArea | Root — wraps content with overflow hidden and positions the scrollbar |
| ScrollBar | Custom scrollbar track + thumb. orientation: "vertical" | "horizontal" |
Props — ScrollArea
| Prop | Type | Description |
|---|---|---|
| className | string | Apply fixed height (h-72) or width (w-48) — required for scroll to activate |
| type | "auto" | "always" | "scroll" | "hover" | When scrollbar appears. Default: "hover" |
| scrollHideDelay | number | ms before scrollbar hides after scroll (default: 600) |
Always set a fixed height (or max-height) on ScrollArea — without it the area will expand to fit content and scroll will never trigger.
On this page