Scroll Area
Custom-styled scroll container.
Import
tsx
import { ScrollArea } from "@cronus-ui/ui";
bash
npx cronus-ui add scroll-area
Examples
.cronus
The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.
default.cronus
app "audit-fixtures" {
port 5176
}
style {
preset aurora
theme dark
}
component ScrollAreaDefault layout:inline style:scroll-area {
aria-label:"Release notes"
label "Release notes"
text "v1.2.0-beta.12"
text "v1.2.0-beta.11"
text "v1.2.0-beta.10"
text "v1.2.0-beta.9"
text "v1.2.0-beta.8"
text "v1.2.0-beta.7"
text "v1.2.0-beta.6"
text "v1.2.0-beta.5"
text "v1.2.0-beta.4"
text "v1.2.0-beta.3"
text "v1.2.0-beta.2"
text "v1.2.0-beta.1"
}
page "/audit/scroll-area/default" type:custom {
use ScrollAreaDefault
}
API Reference
Generated from the component's exported types.
ScrollAreaProps
Extends ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
| Prop | Type | Default | Description |
|---|---|---|---|
aria-label | string | — | Accessible name for the scrollable viewport. Supply this when the content warrants a distinct name (e.g. "Release notes"); the viewport is always keyboard-focusable so it can be scrolled with the arrow keys regardless. |
type | "auto" | "always" | "scroll" | "hover" | — | When scrollbars are visible. |
scrollHideDelay | number | — | — |
dir | "ltr" | "rtl" | — | Reading direction. Inherits from the document when omitted. |
asChild | boolean | — | Render as the child element via Slot. |
children | ReactNode | — | Contents of the component. |
ScrollBarProps
Extends ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "horizontal" | "vertical" | — | — |
forceMount | boolean | — | Keep the node mounted when closed, for exit animation. |
asChild | boolean | — | Render as the child element via Slot. |