Primitives

Scroll

A scroll region. The bound is a prop — maxHeight — because a box free to grow never overflows, so a scroll container with no height is an ordinary div. The gutter is reserved whether or not a bar is showing, so the text does not shift sideways the moment the content crosses that bound, and the region does not hand the wheel to the page behind it when it reaches its end.

plain markup — no library on the page

rendered by aura-react

rendered by aura-vue

rendered by aura-svelte

built from aura-angular's own class helpers

Row 1 — scroll to see the styled scrollbar.

Row 2 — scroll to see the styled scrollbar.

Row 3 — scroll to see the styled scrollbar.

Row 4 — scroll to see the styled scrollbar.

Row 5 — scroll to see the styled scrollbar.

Row 6 — scroll to see the styled scrollbar.

Row 7 — scroll to see the styled scrollbar.

Row 8 — scroll to see the styled scrollbar.

Row 9 — scroll to see the styled scrollbar.

Row 10 — scroll to see the styled scrollbar.

Row 11 — scroll to see the styled scrollbar.

Row 12 — scroll to see the styled scrollbar.

Row 1 — scroll to see the styled scrollbar.

Row 2 — scroll to see the styled scrollbar.

Row 3 — scroll to see the styled scrollbar.

Row 4 — scroll to see the styled scrollbar.

Row 5 — scroll to see the styled scrollbar.

Row 6 — scroll to see the styled scrollbar.

Row 7 — scroll to see the styled scrollbar.

Row 8 — scroll to see the styled scrollbar.

Row 9 — scroll to see the styled scrollbar.

Row 10 — scroll to see the styled scrollbar.

Row 11 — scroll to see the styled scrollbar.

Row 12 — scroll to see the styled scrollbar.

Row 1 — scroll to see the styled scrollbar.

Row 2 — scroll to see the styled scrollbar.

Row 3 — scroll to see the styled scrollbar.

Row 4 — scroll to see the styled scrollbar.

Row 5 — scroll to see the styled scrollbar.

Row 6 — scroll to see the styled scrollbar.

Row 7 — scroll to see the styled scrollbar.

Row 8 — scroll to see the styled scrollbar.

Row 9 — scroll to see the styled scrollbar.

Row 10 — scroll to see the styled scrollbar.

Row 11 — scroll to see the styled scrollbar.

Row 12 — scroll to see the styled scrollbar.

Row 1 — scroll to see the styled scrollbar.

Row 2 — scroll to see the styled scrollbar.

Row 3 — scroll to see the styled scrollbar.

Row 4 — scroll to see the styled scrollbar.

Row 5 — scroll to see the styled scrollbar.

Row 6 — scroll to see the styled scrollbar.

Row 7 — scroll to see the styled scrollbar.

Row 8 — scroll to see the styled scrollbar.

Row 9 — scroll to see the styled scrollbar.

Row 10 — scroll to see the styled scrollbar.

Row 11 — scroll to see the styled scrollbar.

Row 12 — scroll to see the styled scrollbar.

Row 1 — scroll to see the styled scrollbar.

Row 2 — scroll to see the styled scrollbar.

Row 3 — scroll to see the styled scrollbar.

Row 4 — scroll to see the styled scrollbar.

Row 5 — scroll to see the styled scrollbar.

Row 6 — scroll to see the styled scrollbar.

Row 7 — scroll to see the styled scrollbar.

Row 8 — scroll to see the styled scrollbar.

Row 9 — scroll to see the styled scrollbar.

Row 10 — scroll to see the styled scrollbar.

Row 11 — scroll to see the styled scrollbar.

Row 12 — scroll to see the styled scrollbar.

Code

index.html

<div class="aura-scroll" style="max-block-size:140px;">
  <p class="aura-text aura-text--body" style=""> Row 1 — scroll to see the styled scrollbar. </p>
  <p class="aura-text aura-text--body aura-text--muted" style=""> Row 2 — scroll to see the styled scrollbar. </p>
  <p class="aura-text aura-text--body" style=""> Row 3 — scroll to see the styled scrollbar. </p>
  <p class="aura-text aura-text--body aura-text--muted" style=""> Row 4 — scroll to see the styled scrollbar. </p>
  <p class="aura-text aura-text--body" style=""> Row 5 — scroll to see the styled scrollbar. </p>
  <p class="aura-text aura-text--body aura-text--muted" style=""> Row 6 — scroll to see the styled scrollbar. </p>
  <p class="aura-text aura-text--body" style=""> Row 7 — scroll to see the styled scrollbar. </p>
  <p class="aura-text aura-text--body aura-text--muted" style=""> Row 8 — scroll to see the styled scrollbar. </p>
  <p class="aura-text aura-text--body" style=""> Row 9 — scroll to see the styled scrollbar. </p>
  <p class="aura-text aura-text--body aura-text--muted" style=""> Row 10 — scroll to see the styled scrollbar. </p>
  <p class="aura-text aura-text--body" style=""> Row 11 — scroll to see the styled scrollbar. </p>
  <p class="aura-text aura-text--body aura-text--muted" style=""> Row 12 — scroll to see the styled scrollbar. </p>
</div>

Demo.tsx

import { Scroll, Typography } from '@ilomee/aura-react';

export default function Demo() {
  return (
    <Scroll maxHeight={140}>
      {Array.from({ length: 12 }, (_, i) => (
        <Typography key={i} variant="body" tone={i % 2 ? 'muted' : 'default'}>
          Row {i + 1} — scroll to see the styled scrollbar.
        </Typography>
      ))}
    </Scroll>
  );
}

Demo.vue

<script setup lang="ts">
import { Scroll } from '@ilomee/aura-vue';
</script>

<template>
  <Scroll :max-height="200">…long content…</Scroll>
</template>

Demo.svelte

<script lang="ts">
  import { Scroll } from '@ilomee/aura-svelte';
</script>

<Scroll maxHeight={200}>…long content…</Scroll>

Used as [auraScroll] — a directive you put on your own element.

demo.component.ts

import { AuraScroll } from '@ilomee/aura-angular';

@Component({
  standalone: true,
  imports: [AuraScroll],
  template: `<div auraScroll [maxHeight]="200">…long content…</div>`,
})
export class DemoComponent {}

An attribute directive — put it on the element you want to scroll, so it needs no as.

Props

Plain markup has no props — the classes below are the whole API. The four packages do nothing more than set these same classes for you.

Name	Type	Default	Notes
as	`ElementType`	`'div'`
maxHeight	`number \| string`	—	Grows with the content up to here, then scrolls. A number is pixels.
height	`number \| string`	—	A fixed height, for a pane that must not resize as its content changes.
…HTMLAttributesattrs	`HTMLAttributes<HTMLElement>`	—

Name	Type	Default
as	`string`	`'div'`
maxHeight	`number \| string`	—
height	`number \| string`	—
defaultslot	`Slot`	—

Name	Type	Default
as	`string`	`'div'`
maxHeight	`number \| string`	—
height	`number \| string`	—
childrenslot	`Snippet`	—

Name	Type	Default	Notes
maxHeight	`number \| string`	—
height	`number \| string`	—

Emitted classes

Every framework emits the same classes — that is what makes the four libraries look identical. You can use them directly, without any component library.

Class	Role	Notes
.aura-scroll	base	Required. A modifier does nothing without it.

Tokens and rules

components.css

overflow: auto
gutter: stable
overscroll: contain
scrollbar: 8px · thin
thumb: var(--border-strong)
track: transparent