Display

ScrollArea

Scrollable container with overlay scrollbars styled by the theme, backed by Bits UI.

<script>
  import { ScrollArea } from "@codeatlasdev/ui";
</script>

<ScrollArea maxHeight="240px">…</ScrollArea>

The area scrolls once its content exceeds maxHeight or maxWidth, so set one of them (or a height through class). Native scrolling, touch momentum and keyboard scrolling are preserved.

Vertical scroll

Capped with `maxHeight`.

Item 1: Lorem ipsum dolor sit amet

Item 2: Lorem ipsum dolor sit amet

Item 3: Lorem ipsum dolor sit amet

Item 4: Lorem ipsum dolor sit amet

Item 5: Lorem ipsum dolor sit amet

Item 6: Lorem ipsum dolor sit amet

Item 7: Lorem ipsum dolor sit amet

Item 8: Lorem ipsum dolor sit amet

Item 9: Lorem ipsum dolor sit amet

Item 10: Lorem ipsum dolor sit amet

Item 11: Lorem ipsum dolor sit amet

Item 12: Lorem ipsum dolor sit amet

Item 13: Lorem ipsum dolor sit amet

Item 14: Lorem ipsum dolor sit amet

Item 15: Lorem ipsum dolor sit amet

Item 16: Lorem ipsum dolor sit amet

Item 17: Lorem ipsum dolor sit amet

Item 18: Lorem ipsum dolor sit amet

Item 19: Lorem ipsum dolor sit amet

Item 20: Lorem ipsum dolor sit amet

Code

<script lang="ts">
  import { ScrollArea, GlassCard } from '@codeatlasdev/ui';

  const items = Array.from({ length: 20 }, (_, i) => `Item ${i + 1}: Lorem ipsum dolor sit amet`);
</script>

<GlassCard full>
  <ScrollArea maxHeight="220px">
    {#each items as item}
      <div class="item">{item}</div>
    {/each}
  </ScrollArea>
</GlassCard>

<style>
  .item {
    padding: 10px 16px;
    font-size: var(--ca-font-size-body2);
    color: var(--ca-text-secondary);
    border-bottom: 1px solid var(--ca-outline-subtle);
  }
  .item:last-child { border-bottom: none; }
</style>

Horizontal scroll

`orientation="horizontal"` with always-visible scrollbars.

Tag 1 Tag 2 Tag 3 Tag 4 Tag 5 Tag 6 Tag 7 Tag 8 Tag 9 Tag 10 Tag 11 Tag 12 Tag 13 Tag 14 Tag 15 Tag 16 Tag 17 Tag 18 Tag 19 Tag 20 Tag 21 Tag 22 Tag 23 Tag 24

Code

<script lang="ts">
  import { ScrollArea, GlassCard, Chip } from '@codeatlasdev/ui';

  const tags = Array.from({ length: 24 }, (_, i) => `Tag ${i + 1}`);
</script>

<GlassCard padding="8px" full>
  <ScrollArea orientation="horizontal" type="always">
    <div class="row">
      {#each tags as tag}<Chip label={tag} />{/each}
    </div>
  </ScrollArea>
</GlassCard>

<style>
  .row { display: flex; gap: var(--ca-space-2); padding: var(--ca-space-2) var(--ca-space-2) var(--ca-space-4); width: max-content; }
</style>

Props

Prop	Type	Default	Description
`type`	`'hover' \| 'scroll' \| 'auto' \| 'always'`	`'hover'`	When the scrollbar is visible.
`orientation`	`'vertical' \| 'horizontal' \| 'both'`	`'vertical'`	Which scrollbars to render.
`maxHeight`	`string`	`undefined`	CSS max-height of the area, for example `'240px'`.
`maxWidth`	`string`	`undefined`	CSS max-width of the area.
`class`	`string`	`''`	Extra class names.
`children`	`Snippet`	`undefined`	Scrollable content.