scroll-area

Scroll Area

Holds content that scrolls inside a fixed area, vertically, horizontally or both, with a slim bar that shows on hover.

States: Default, Focus

Parts

Part	File	Does
ScrollArea	ScrollArea.vue	Holds content that scrolls within a fixed area.
ScrollBar	ScrollBar.vue	Shows the scroll position and lets the user drag to scroll.

Anatomy

<ScrollArea>
  <ScrollBar />
</ScrollArea>

Styling

Part	Recipe
ScrollArea	scroll-area-viewport
ScrollBar	scroll-area-scrollbar
ScrollBar	scroll-area-thumb

Install

Writes 3 files into components/ui/scroll-area/. For agents, npx @frontic/ui docs scroll-area prints this reference as markdown; the MCP server serves the same.

npm packages: @vueuse/core; class-variance-authority; reka-ui

API reference

ScrollArea ScrollArea.vue

Holds content that scrolls within a fixed area.

Prop	Type	Default
type	ScrollType	'hover'
Name type Description Describes the nature of scrollbar visibility, similar to how the scrollbar preferences in MacOS control visibility of native scrollbars. `auto` - means that scrollbars are visible when content is overflowing on the corresponding orientation. `always` - means that scrollbars are always visible regardless of whether the content is overflowing. `scroll` - means that scrollbars are visible when the user is scrolling along its corresponding orientation. `hover` - when the user is scrolling along its corresponding orientation and when the user is hovering over the scroll area. `glimpse` - a hybrid approach that briefly shows scrollbars when the user enters the scroll area, then hides them until further interaction. Type `'always' \| 'auto' \| 'scroll' \| 'hover' \| 'glimpse'` Default 'hover'
dir	Direction	—

scrollHideDelay	number	600

asChild	boolean	false

as	AsTag \| Component	—
Name as Description The element or component this component should render as. Can be overwritten by `asChild`. Type ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string Default —
class	ClassValue	—

orientation	'vertical' \| 'horizontal' \| 'both'	'vertical'

CSS variable	Description
--reka-scroll-area-corner-height	The height of the corner where the two scrollbars meet, in pixels.
--reka-scroll-area-corner-width	The width of the corner where the two scrollbars meet, in pixels.

Recipe scroll-area-viewport	Sets
base: scroll-area-viewport	2 properties

ScrollBar ScrollBar.vue

Example