Components / Foundations

Horizontal Scroll Box

Component

A horizontally scrollable container with optional left and right scroll arrows. Supports dynamic content and smooth scrolling interactions.

Preview

Usage

API reference

Live preview

Interactive example

Project stages

Scroll horizontally, or use the edge controls to see each stage.

Usage

Import the component, then make it your own.

ComponentHorizScrollBox

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { HorizScrollBox } from "sveltekit-ui"
</script>

<div style="max-width: 40rem;">
  <HorizScrollBox aria_label="Project stages">
    <div style="display: flex; gap: 1rem;">
      {#each ["Plan", "Design", "Build", "Test", "Launch"] as stage}
        <div class="card" style="min-width: 14rem; padding: 2rem;">{stage}</div>
      {/each}
    </div>
  </HorizScrollBox>
</div>

API reference

Props accepted by the component.

10 entries in properties

Property	Type	Default	Description
`children`	`snippet`	`null`	Content to be displayed within the scrollable area.
`container_width`	`number`	`null`	Width of the container. Automatically bound to the container's offsetWidth.
`content_width`	`number`	`null`	Width of the scrollable content. Automatically bound to the content's clientWidth.
`show_left_arrow`	`boolean`	`false`	Indicates whether the left scroll arrow is visible. Automatically calculated based on scroll position.
`show_right_arrow`	`boolean`	`false`	Indicates whether the right scroll arrow is visible. Automatically calculated based on scroll position and content width.
`left_arrow_color`	`CSS color`	`var(--g8-t)`	Base color of the left arrow icon. Changes to `var(--g4-t)` when hovered or active.
`right_arrow_color`	`CSS color`	`var(--g8-t)`	Base color of the right arrow icon. Changes to `var(--g4-t)` when hovered or active.
`arrow_icon_size`	`number`	`1.2`	Size of the left and right arrow icons in rem.
`arrow_icon_stroke_width`	`number`	`50`	Stroke width of the left and right arrow icons.
`scroll_speed`	`number`	`0.5`	Speed of the continuous scroll when holding down an arrow.