- AccordionNew
- Alert
- Alert DialogNew
- AutocompleteNew
- AvatarNew
- Badge
- Breadcrumb
- Button
- CalendarNew
- CardNew
- Checkbox
- Checkbox GroupNew
- CollapsibleNew
- ComboboxNew
- CommandNew
- Context MenuNew
- Date PickerNew
- DialogNew
- DrawerNew
- EmptyNew
- FieldNew
- FieldsetNew
- FormNew
- FrameNew
- GroupNew
- Input
- Input GroupNew
- KbdNew
- Label
- MenuNew
- MeterNew
- Number Field
- OTP FieldNew
- Pagination
- PopoverNew
- Preview CardNew
- Progress
- Radio Group
- Scroll AreaNew
- Select
- Separator
- SheetNew
- SkeletonNew
- Slider
- Spinner
- StepperNew
- Switch
- Table
- TabsNew
- Textarea
- ToastNew
- ToggleNew
- Toggle GroupNew
- ToolbarNew
- Tooltip
Scroll Area
A native scroll container with custom scrollbars.
Tags
import { ScrollArea } from "mako-ui/components/scroll-area";
const tags = Array.from({ length: 50 }, (_, i) => `v1.0.0-alpha.${i}`);
export default function Particle() {
return (
<ScrollArea className="h-64 rounded-lg border">
<div className="px-4 py-2">
<h4 className="mb-2 font-medium text-sm">Tags</h4>
<div className="flex flex-col gap-1">
{tags.map((tag) => (
<div className="text-sm" key={tag}>
{tag}
</div>
))}
</div>
</div>
</ScrollArea>
);
}
Usage
import { ScrollArea } from "mako-ui/components/scroll-area"<ScrollArea className="h-64 rounded-md border">
<div className="p-4">
Just as suddenly as it had begun, the sensation stopped, leaving Alice
feeling slightly disoriented. She looked around and realized that the room
hadn't changed at all - it was she who had grown smaller, shrinking down to
a fraction of her previous size. Alice felt herself growing larger and
larger, filling up the entire room until she feared she might burst. The
sensation was both thrilling and terrifying, as if she were expanding beyond
the confines of her own body. She wondered if this was what it felt like to
be a balloon, swelling with air until it could hold no more.
</div>
</ScrollArea>API Reference
ScrollArea
Root component. Includes custom scrollbar styling.
| Prop | Type | Default | Description |
|---|---|---|---|
scrollFade | boolean | false | Masks viewport edges so content fades in/out as you scroll |
scrollbarGutter | boolean | false | Reserves space for the scrollbar to prevent layout shifts |
fill | boolean | false | Applies size-full to the scroll area content wrapper so flex layouts (e.g. mt-auto footers) can fill the viewport height |
clampContentMinWidth | boolean | true | Sets minWidth: 0 on the content wrapper to avoid spurious horizontal scrollbars in vertical layouts |
ScrollAreaViewport
Scrollable viewport container.
ScrollAreaScrollbar
Scrollbar track.
ScrollAreaThumb
Scrollbar thumb.
ScrollAreaCorner
Corner element when both scrollbars are visible.
Examples
Scroll Fade
Use scrollFade to mask the viewport edges so content subtly fades in and out as you scroll, hinting that more content is available without adding extra UI chrome.
Tags
import { ScrollArea } from "mako-ui/components/scroll-area";
const tags = Array.from({ length: 50 }, (_, i) => `v1.0.0-alpha.${i}`);
export default function Particle() {
return (
<ScrollArea className="h-64 rounded-lg border" scrollFade>
<div className="px-4 py-2">
<h4 className="mb-2 font-medium text-sm">Tags</h4>
<div className="flex flex-col gap-1">
{tags.map((tag) => (
<div className="text-sm" key={tag}>
{tag}
</div>
))}
</div>
</div>
</ScrollArea>
);
}
Horizontal Scroll
import { ScrollArea } from "mako-ui/components/scroll-area";
const items = Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`);
export default function Particle() {
return (
<ScrollArea className="max-w-96 rounded-lg border">
<div className="flex w-max gap-4 p-4">
{items.map((item) => (
<div
className="flex h-20 w-32 shrink-0 items-center justify-center rounded-md bg-muted"
key={item}
>
<span className="font-medium text-sm">{item}</span>
</div>
))}
</div>
</ScrollArea>
);
}
Scrollbar Gutter
Enable scrollbarGutter to reserve space for the scrollbar when overflow appears, preventing layout shifts as the bar shows or hides.
import { ScrollArea } from "mako-ui/components/scroll-area";
const items = Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`);
export default function Particle() {
return (
<ScrollArea className="max-w-96 rounded-lg border" scrollbarGutter>
<div className="flex w-max gap-4 p-4">
{items.map((item) => (
<div
className="flex h-20 w-32 shrink-0 items-center justify-center rounded-md bg-muted"
key={item}
>
<span className="font-medium text-sm">{item}</span>
</div>
))}
</div>
</ScrollArea>
);
}
Both Scrollbars
Just as suddenly as it had begun, the sensation stopped, leaving Alice feeling slightly disoriented. She looked around and realized that the room hadn't changed at all - it was she who had grown smaller, shrinking down to a fraction of her previous size. Alice felt herself growing larger and larger, filling up the entire room until she feared she might burst. The sensation was both thrilling and terrifying, as if she were expanding beyond the confines of her own body. She wondered if this was what it felt like to be a balloon, swelling with air until it could hold no more. Alice peered into the mirror, her reflection staring back at her with an air of mischief. She wondered what it would be like to step through the glass and into the world beyond, where everything seemed to be topsy-turvy and nothing was quite as it seemed. It's no use going back to yesterday, because I was a different person then, reflected Alice.
import { ScrollArea } from "mako-ui/components/scroll-area";
export default function Particle() {
return (
<ScrollArea className="h-80 max-w-80 rounded-lg border">
<p className="min-w-100 p-4">
Just as suddenly as it had begun, the sensation stopped, leaving Alice
feeling slightly disoriented. She looked around and realized that the
room hadn't changed at all - it was she who had grown smaller, shrinking
down to a fraction of her previous size. Alice felt herself growing
larger and larger, filling up the entire room until she feared she might
burst. The sensation was both thrilling and terrifying, as if she were
expanding beyond the confines of her own body. She wondered if this was
what it felt like to be a balloon, swelling with air until it could hold
no more. Alice peered into the mirror, her reflection staring back at
her with an air of mischief. She wondered what it would be like to step
through the glass and into the world beyond, where everything seemed to
be topsy-turvy and nothing was quite as it seemed. It's no use going
back to yesterday, because I was a different person then, reflected
Alice.
</p>
</ScrollArea>
);
}
Fill viewport (flex layouts)
Use fill when the scroll area wraps a flex column that should stretch to the full viewport height—for example, pinning a footer with mt-auto inside a sidebar. The built-in SidebarContent part already passes fill; opt in manually for custom layouts:
<ScrollArea className="flex-1 min-h-0" fill>
<div className="flex h-full flex-col">
<nav>{/* main items */}</nav>
<footer className="mt-auto">{/* pinned footer */}</footer>
</div>
</ScrollArea>Leave fill at the default (false) for content-sized areas such as lists, comboboxes, and dialogs where overflow should track child height.
Content min-width
The content wrapper sets min-width: fit-content by default, which often causes unwanted horizontal scroll in vertical lists and panels (dialogs, comboboxes, sidebars). clampContentMinWidth defaults to true and applies minWidth: 0 to prevent that.
Horizontal scroll still works when children define their own width (e.g. w-max, table min-width). Set clampContentMinWidth={false} only if horizontal scroll stops working and the child has no explicit width—rare cases like certain flex chains or long unbreakable inline text without overflow handling.