Skip to content

bash
npm install @hua-labs/hua
tsx
import { ScrollArea } from "@hua-labs/hua";

Item 1 -
Item 2 -
Item 3 -
Item 4 -
Item 5 -
Item 6 -
Item 7 -
Item 8 -
Item 9 -
Item 10 -
Item 11 -
Item 12 -
Item 13 -
Item 14 -
Item 15 -
Item 16 -
Item 17 -
Item 18 -
Item 19 -
Item 20 -

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8
Card 9
Card 10
Card 11
Card 12
Card 13
Card 14
Card 15

Type: hover - Item 1
Type: hover - Item 2
Type: hover - Item 3
Type: hover - Item 4
Type: hover - Item 5
Type: hover - Item 6
Type: hover - Item 7
Type: hover - Item 8
Type: hover - Item 9
Type: hover - Item 10
Type: hover - Item 11
Type: hover - Item 12
Type: hover - Item 13
Type: hover - Item 14
Type: hover - Item 15

orientation"vertical" | "horizontal" | "both""vertical"Scroll direction
type"auto" | "always" | "scroll" | "hover""hover"Scrollbar visibility behavior
scrollHideDelaynumber600Delay before scrollbar hides (ms)
classNamestring-Additional CSS classes
children*ReactNode-Content to scroll

hover
always
auto
scroll

docs:common.basicUsagetsx
1import { ScrollArea } from "@hua-labs/hua";
2 
3function Example() {
4 return (
5 <ScrollArea className="h-48 w-full rounded-md border p-4">
6 <div className="space-y-4">
7 {Array.from({ length: 20 }).map((_, i) => (
8 <div key={i} className="text-sm">
9 Item {i + 1} - Lorem ipsum dolor sit amet
10 </div>
11 ))}
12 </div>
13 </ScrollArea>
14 );
15}
Horizontaltsx
1<ScrollArea orientation="horizontal" className="w-full rounded-md border">
2 <div className="flex gap-4 p-4">
3 {Array.from({ length: 15 }).map((_, i) => (
4 <div
5 key={i}
6 className="w-32 h-24 shrink-0 rounded-md bg-primary/20 flex items-center justify-center"
7 >
8 Card {i + 1}
9 </div>
10 ))}
11 </div>
12</ScrollArea>
Always Visibletsx
1<ScrollArea type="always" className="h-48 w-full rounded-md border p-4">
2 <div className="space-y-4">
3 {Array.from({ length: 10 }).map((_, i) => (
4 <div key={i} className="text-sm">
5 Scrollbar is always visible - Item {i + 1}
6 </div>
7 ))}
8 </div>
9</ScrollArea>

  • ScrollBar -

  • Keyboard Navigation: Arrow keys and Page Up/Down for scrolling
  • Touch Support: Native touch scrolling on mobile devices
  • Focus Management: Focusable content remains accessible within scroll area