Scroll Area

A layout component that replaces browser defaults with sleek, custom-designed viewport scrollbars.
For more information on this component configuration, visit Radix UI

Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do; once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, “and what is the use of a book,” thought Alice ...

Sizes

Use the scroll-area-{size} class to control the component size.

Size values can include:xssmmdlgxl.

For more information on all available sizing utilities, visit Tailwind

Palette

Use the palette-{color} class to control the component color. Refer to the Colors documentation to see all available color and shade options.

For more information on all available color utilities, visit Tailwind .

Customizing

globals.css


:root {
  --ex-scroll-area-scrollbar-size-xs: calc(var(--spacing) * 0.5);
  --ex-scroll-area-scrollbar-size-sm: calc(var(--spacing) * 1);
  --ex-scroll-area-scrollbar-size-md: calc(var(--spacing) * 1.5);
  --ex-scroll-area-scrollbar-size-lg: calc(var(--spacing) * 2);
  --ex-scroll-area-scrollbar-size-xl: calc(var(--spacing) * 2.5);
}

API

For more information on this component configuration, visit Radix UI

Scroll Area

Element	Selector
`ScrollArea`	`.ex-scroll-area`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`scrollHideDelay`	`number`	`600`
`type`	`enum of ["auto", "always", "hover", "scroll"]`	`hover`

Scroll Area Viewport

Element	Selector
`ScrollArea.Viewport`	`.ex-scroll-area-viewport`

Prop	Type	Default
`asChild`	`boolean`	`false`

Scroll Area Content

Element	Selector
`ScrollArea.Content`	`.ex-scroll-area-content`

Prop	Type	Default
`asChild`	`boolean`	`false`

Scroll Area Scrollbar

Element	Selector
`ScrollArea.Scrollbar`	`.ex-scroll-area-scrollbar`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	`false`

Scroll Area Thumb

Element	Selector
`ScrollArea.Thumb`	`.ex-scroll-area-thumb`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Scroll Area Corner

Element	Selector
`ScrollArea.Corner`	`.ex-scroll-area-corner`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`