Scroll Area
Augments native scroll functionality for custom, cross-browser styling.
Tags
#Installation
bunx --bun barefoot add scroll-area#Usage
Tags
1"use client"23import { ScrollArea } from "@/components/ui/scroll-area"4import { Separator } from "@/components/ui/separator"56const tags = Array.from({ length: 50 }).map(7 (_, i, a) => `v1.2.0-beta.${a.length - i}`8)910function ScrollAreaDemo() {11 return (12 <ScrollArea class="h-72 w-48 rounded-md border">13 <div className="p-4">14 <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>15 {tags.map((tag) => (16 <div>17 <div className="text-sm">{tag}</div>18 <Separator className="my-2" />19 </div>20 ))}21 </div>22 </ScrollArea>23 )24}#Examples
#Horizontal Scrolling
1"use client"23import { ScrollArea } from "@/components/ui/scroll-area"45function ScrollAreaHorizontal() {6 return (7 <ScrollArea class="w-96 whitespace-nowrap rounded-md border">8 <div className="flex w-max space-x-4 p-4">9 {works.map((work) => (10 <figure className="shrink-0">11 <div className="overflow-hidden rounded-md">12 <div className="h-[150px] w-[200px] bg-muted" />13 </div>14 <figcaption className="pt-2 text-xs text-muted-foreground">15 Photo by <span className="font-semibold text-foreground">{work.artist}</span>16 </figcaption>17 </figure>18 ))}19 </div>20 </ScrollArea>21 )22}#Both Axes
Changelog
Added new features, fixed bugs, and improved performance across multiple modules and packages.
Added new features, fixed bugs, and improved performance across multiple modules and packages.
Added new features, fixed bugs, and improved performance across multiple modules and packages.
Added new features, fixed bugs, and improved performance across multiple modules and packages.
Added new features, fixed bugs, and improved performance across multiple modules and packages.
Added new features, fixed bugs, and improved performance across multiple modules and packages.
Added new features, fixed bugs, and improved performance across multiple modules and packages.
Added new features, fixed bugs, and improved performance across multiple modules and packages.
Added new features, fixed bugs, and improved performance across multiple modules and packages.
Added new features, fixed bugs, and improved performance across multiple modules and packages.
Added new features, fixed bugs, and improved performance across multiple modules and packages.
Added new features, fixed bugs, and improved performance across multiple modules and packages.
Added new features, fixed bugs, and improved performance across multiple modules and packages.
Added new features, fixed bugs, and improved performance across multiple modules and packages.
Added new features, fixed bugs, and improved performance across multiple modules and packages.
Added new features, fixed bugs, and improved performance across multiple modules and packages.
Added new features, fixed bugs, and improved performance across multiple modules and packages.
Added new features, fixed bugs, and improved performance across multiple modules and packages.
Added new features, fixed bugs, and improved performance across multiple modules and packages.
Added new features, fixed bugs, and improved performance across multiple modules and packages.
1"use client"23import { ScrollArea } from "@/components/ui/scroll-area"45function ScrollAreaBothAxes() {6 return (7 <ScrollArea class="h-64 w-80 rounded-md border">8 <div className="p-4" style="width: 600px;">9 <h4 className="mb-4 text-sm font-medium leading-none">Changelog</h4>10 <div className="space-y-4">11 {entries.map((entry) => (12 <div className="whitespace-nowrap">13 <div className="text-sm font-medium">{entry.title}</div>14 <p className="text-sm text-muted-foreground">{entry.description}</p>15 </div>16 ))}17 </div>18 </div>19 </ScrollArea>20 )21}#API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | '' | Additional CSS classes for the root element. |
| type | 'hover' | 'scroll' | 'auto' | 'always' | 'hover' | When to show scrollbars. hover: on mouse enter; scroll: while scrolling; auto: both; always: permanent. |