ScrollArea

Custom scroll area.

Use ScrollArea for a styled scroll container with custom bars.

Line 1 — scrollable content.

Line 2 — scrollable content.

Line 3 — scrollable content.

Line 4 — scrollable content.

Line 5 — scrollable content.

Line 6 — scrollable content.

Line 7 — scrollable content.

Line 8 — scrollable content.

Line 9 — scrollable content.

Line 10 — scrollable content.

Line 11 — scrollable content.

Line 12 — scrollable content.

import { ScrollArea } from '@tile-ui/react';

export default function ScrollAreaDemo() {
	return (
		<ScrollArea style={{ maxHeight: 140 }}>
			<div style={{ paddingRight: 16 }}>

Registry install

pnpm dlx shadcn@latest add @tile-ui/scroll-area

Package usage

import { ScrollArea } from '@tile-ui/react';
 
<ScrollArea>
	<div style={{ height: 120 }}>Long content here.</div>
</ScrollArea>

Highlights

  • Viewport and scrollbar
  • Horizontal and vertical bars

Registry dependencies

ItemPurpose
scroll-areaComponent source and module styles
coreFramework-agnostic logic helpers
stylesShared SCSS tokens and globals

API reference

ScrollArea

No custom props.

ScrollBar

PropTypeDefault
orientation'vertical' | 'horizontal'