bash
npm install @hua-labs/huatsx
import { Scrollbar } from "@hua-labs/hua";default / glass / minimal / neon
default
glass
minimal
neon
sm / md / lg / xl
sm
md
lg
xl
Orientation
vertical / horizontal / both
vertical
horizontal
both
Props
variant | "default" | "glass" | "colorful" | "minimal" | "neon" | "default" | Scrollbar visual style |
size | "sm" | "md" | "lg" | "xl" | "md" | Scrollbar thumb width |
orientation | "vertical" | "horizontal" | "both" | "both" | Scroll direction |
autoHide | boolean | true | Auto-hide scrollbar when not scrolling |
smooth | boolean | true | Enable smooth scrolling behavior |
children* | ReactNode | - | Scrollable content |
docs:common.basicUsage
tsx
import { Scrollbar } from '@hua-labs/hua';
export function BasicScrollbar() {
return (
<Scrollbar className="h-48">
<div className="p-4 space-y-4">
{Array.from({ length: 20 }).map((_, i) => (
<p key={i}>Scrollable content item {i + 1}</p>
))}
</div>
</Scrollbar>
);
}docs:common.variants
tsx
import { Scrollbar } from '@hua-labs/hua';
export function ScrollbarVariants() {
return (
<div className="grid grid-cols-2 gap-4">
<Scrollbar variant="default" className="h-32 border rounded">
<div className="p-4">Default variant</div>
</Scrollbar>
<Scrollbar variant="glass" className="h-32 border rounded">
<div className="p-4">Glass variant</div>
</Scrollbar>
<Scrollbar variant="minimal" className="h-32 border rounded">
<div className="p-4">Minimal variant</div>
</Scrollbar>
<Scrollbar variant="neon" className="h-32 border rounded">
<div className="p-4">Neon variant</div>
</Scrollbar>
</div>
);
}docs:common.sizes
tsx
import { Scrollbar } from '@hua-labs/hua';
export function ScrollbarSizes() {
return (
<div className="grid grid-cols-4 gap-4">
<Scrollbar size="sm" className="h-32 border rounded">
<div className="p-4">Small</div>
</Scrollbar>
<Scrollbar size="md" className="h-32 border rounded">
<div className="p-4">Medium</div>
</Scrollbar>
<Scrollbar size="lg" className="h-32 border rounded">
<div className="p-4">Large</div>
</Scrollbar>
<Scrollbar size="xl" className="h-32 border rounded">
<div className="p-4">XL</div>
</Scrollbar>
</div>
);
}- •Keyboard: Standard keyboard scrolling with arrow keys, Page Up/Down, Home/End
- •Focus: Scrollable area is focusable for keyboard users
- •Smooth: Respects prefers-reduced-motion for users who prefer less motion