Tile UISolid
Source code

Tile UI · SolidJS

CSR · SSR · SSG

ScrollArea

A native SolidJS scroll viewport with optional custom scrollbars.

Scrollable registry row 1

Scrollable registry row 2

Scrollable registry row 3

Scrollable registry row 4

Scrollable registry row 5

Scrollable registry row 6

Scrollable registry row 7

Scrollable registry row 8

Scrollable registry row 9

Scrollable registry row 10

Scrollable registry row 11

Scrollable registry row 12

Scrollable registry row 13

Scrollable registry row 14

Scrollable registry row 15

Scrollable registry row 16

Scrollable registry row 17

Scrollable registry row 18

import { For } from 'solid-js';
import { ScrollArea, ScrollBar } from '@tile-ui/solid';

export default function ScrollAreaDemo() {
	return (
		<ScrollArea style={{ height: '12rem', width: '100%' }}>

Use ScrollArea with one or more ScrollBar primitives when custom controls should augment native scrolling.

Registry install

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

Package usage

import { ScrollArea, ScrollBar } from '@tile-ui/solid';

<ScrollArea>
	<div style={{ height: "20rem" }}>Long content.</div>
	<ScrollBar />
</ScrollArea>

Highlights

  • Native scroll viewport
  • Vertical and horizontal ScrollBar primitives
  • Keyboard and pointer scrollbar control

Registry dependencies

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

API reference

ScrollArea

No custom props.

ScrollBar

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