dryui — Svelte 5 Component Library

Vertical Scroll Area

Line 1 — scrollable content inside a fixed-height area.

Line 2 — scrollable content inside a fixed-height area.

Line 3 — scrollable content inside a fixed-height area.

Line 4 — scrollable content inside a fixed-height area.

Line 5 — scrollable content inside a fixed-height area.

Line 6 — scrollable content inside a fixed-height area.

Line 7 — scrollable content inside a fixed-height area.

Line 8 — scrollable content inside a fixed-height area.

Line 9 — scrollable content inside a fixed-height area.

Line 10 — scrollable content inside a fixed-height area.

Line 11 — scrollable content inside a fixed-height area.

Line 12 — scrollable content inside a fixed-height area.

Line 13 — scrollable content inside a fixed-height area.

Line 14 — scrollable content inside a fixed-height area.

Line 15 — scrollable content inside a fixed-height area.

Line 16 — scrollable content inside a fixed-height area.

Line 17 — scrollable content inside a fixed-height area.

Line 18 — scrollable content inside a fixed-height area.

Line 19 — scrollable content inside a fixed-height area.

Line 20 — scrollable content inside a fixed-height area.

svelte

<div class="scroll-frame scroll-frame--vertical">
  <ScrollArea>
    <div class="scroll-content">
      Long content that scrolls vertically...
    </div>
  </ScrollArea>
</div>

Horizontal Scroll Area

Item 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8Item 9Item 10Item 11Item 12Item 13Item 14Item 15Item 16Item 17Item 18Item 19Item 20

svelte

<div class="scroll-frame scroll-frame--horizontal">
  <ScrollArea orientation="horizontal">
    <div class="scroll-content scroll-content--nowrap">
      Long horizontal content that scrolls...
    </div>
  </ScrollArea>
</div>

Start Here

Start from the smallest working snippet, then move to interactive examples and the full API contract below.

Styled quick start

Copy this entrypoint first. It includes the imports required to get the component on screen.

svelte

<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { ScrollArea } from '@dryui/ui';
</script>

<ScrollArea>Content</ScrollArea>

Import options

Root package

import { ScrollArea } from '@dryui/ui'

Per-component subpath

import { ScrollArea } from '@dryui/ui/scroll-area'

Customize

Use the interactive examples to see common variants, states, and composition patterns before building your own.

Vertical Scroll Area

Line 1 — scrollable content inside a fixed-height area.

Line 2 — scrollable content inside a fixed-height area.

Line 3 — scrollable content inside a fixed-height area.

Line 4 — scrollable content inside a fixed-height area.

Line 5 — scrollable content inside a fixed-height area.

Line 6 — scrollable content inside a fixed-height area.

Line 7 — scrollable content inside a fixed-height area.

Line 8 — scrollable content inside a fixed-height area.

Line 9 — scrollable content inside a fixed-height area.

Line 10 — scrollable content inside a fixed-height area.

Line 11 — scrollable content inside a fixed-height area.

Line 12 — scrollable content inside a fixed-height area.

Line 13 — scrollable content inside a fixed-height area.

Line 14 — scrollable content inside a fixed-height area.

Line 15 — scrollable content inside a fixed-height area.

Line 16 — scrollable content inside a fixed-height area.

Line 17 — scrollable content inside a fixed-height area.

Line 18 — scrollable content inside a fixed-height area.

Line 19 — scrollable content inside a fixed-height area.

Line 20 — scrollable content inside a fixed-height area.

svelte

<div class="scroll-frame scroll-frame--vertical">
  <ScrollArea>
    <div class="scroll-content">
      Long content that scrolls vertically...
    </div>
  </ScrollArea>
</div>

Horizontal Scroll Area

Item 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8Item 9Item 10Item 11Item 12Item 13Item 14Item 15Item 16Item 17Item 18Item 19Item 20

svelte

<div class="scroll-frame scroll-frame--horizontal">
  <ScrollArea orientation="horizontal">
    <div class="scroll-content scroll-content--nowrap">
      Long horizontal content that scrolls...
    </div>
  </ScrollArea>
</div>

Compose

The full API contract lives here: props, CSS variables, and the public data attributes you can target when styling.

Prop	Type	Default	Required	Bindable
`orientation`	verticalhorizontalboth	—	—	—
`children`	`Snippet`	—	✓	—

Forwards <div> attributes via rest props. Common examples: id, style, role.