Tile UI Vue
Source code

Components

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/vue';
 
export default function ScrollAreaDemo() {
	return (
		<ScrollArea style={{ maxHeight: '140px' }}>
			<div style={{ paddingRight: '16px' }}>

Registry install

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

Package usage

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

Highlights

  • Viewport and scrollbar
  • Horizontal and vertical bars

Registry dependencies

Item Purpose
scroll-area Component source and module styles
core Framework-agnostic logic helpers
styles Shared SCSS tokens and globals

API reference

ScrollArea

No custom props.

ScrollBar

Prop Type Default
orientation 'vertical' | 'horizontal' —
PreviousResizableNextSelect