Components
Scroll Area
ScrollArea, dressed in the paper-and-ink system: native bars give way to quiet ink lanes that surface on hover and scroll. The parts — Root, Viewport, Content, Scrollbar, Thumb, Corner.
#Basic usage
The ground rests in ambient shade, and content is laid down as ink. Hierarchy rises from light, never from boxes or heavy rules.
Surfaces keep a quiet ladder — the page, the card, the vessel — and hairlines divide where a heavier stroke would shout.
Motion obeys the same grammar: shadows settle slowly, panels dissolve in, and the hand is never hurried.
<script setup lang="ts">
import { ScrollArea } from "@bysages/vue";
</script>
<template>
<ScrollArea.Root class="h-30">
<ScrollArea.Viewport>
<ScrollArea.Content>
<p>
The ground rests in ambient shade, and content is laid down as ink. Hierarchy rises from
light, never from boxes or heavy rules.
</p>
<p>
Surfaces keep a quiet ladder — the page, the card, the vessel — and hairlines divide where
a heavier stroke would shout.
</p>
<p>
Motion obeys the same grammar: shadows settle slowly, panels dissolve in, and the hand is
never hurried.
</p>
</ScrollArea.Content>
</ScrollArea.Viewport>
<ScrollArea.Scrollbar>
<ScrollArea.Thumb />
</ScrollArea.Scrollbar>
<ScrollArea.Corner />
</ScrollArea.Root>
</template>
#Props
#Content
A styled part — no props of its own; it takes the anatomy's shared styling.
#Corner
A styled part — no props of its own; it takes the anatomy's shared styling.
#Root
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | The unique identifier of the machine. | |
ids | Partial<{ root: string; viewport: string; content: string; scrollbar: string; thumb: string; }> | The ids of the scroll area elements |
#Scrollbar
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | Orientation | — |
#Thumb
A styled part — no props of its own; it takes the anatomy's shared styling.
#Viewport
A styled part — no props of its own; it takes the anatomy's shared styling.