ScrollArea

Provides a styled scroll container.

View preview API reference View in Figma

FrameworksAstro · React · Elements

Registry commandlumen add ScrollArea

InteractionNative markup

Design sourceLinked component node

See it in context

Preview

Semantic markup stays portable across Astro, React, and Web Components.

Tokenized styles keep color, spacing, and radius decisions consistent.

Progressive enhancement adds behavior without a framework runtime.

Standalone CSS works without requiring Tailwind configuration from consumers.

Accessible focus states and keyboard paths are part of every primitive.

Component metadata powers the documentation and package map.

The Astro package remains the reference implementation.

Adapters share the same ui-* class contract.

Copy a working example

Usage

---
import { ScrollArea } from '@santi020k/lumen-astro'

const updates = [
  'Semantic markup stays portable across Astro, React, and Web Components.',
  'Tokenized styles keep color, spacing, and radius decisions consistent.',
  'Progressive enhancement adds behavior without a framework runtime.',
  'Standalone CSS works without requiring Tailwind configuration from consumers.',
  'Accessible focus states and keyboard paths are part of every primitive.',
  'Component metadata powers the documentation and package map.',
  'The Astro package remains the reference implementation.',
  'Adapters share the same ui-* class contract.'
]
---

<ScrollArea aria-label="Release notes" style="max-height: 10rem;">
  {updates.map(update => <p>{update}</p>)}
</ScrollArea>

---
import { ScrollArea } from '@santi020k/lumen-astro'

const updates = [
  'Semantic markup stays portable across Astro, React, and Web Components.',
  'Tokenized styles keep color, spacing, and radius decisions consistent.',
  'Progressive enhancement adds behavior without a framework runtime.',
  'Standalone CSS works without requiring Tailwind configuration from consumers.',
  'Accessible focus states and keyboard paths are part of every primitive.',
  'Component metadata powers the documentation and package map.',
  'The Astro package remains the reference implementation.',
  'Adapters share the same ui-* class contract.'
]
---

<ScrollArea aria-label="Release notes" style="max-height: 10rem;">
  {updates.map(update => <p>{update}</p>)}
</ScrollArea>

import { ScrollArea } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <ScrollArea aria-label="Release notes" style={{ maxHeight: '10rem' }}>
      {updates.map(update => <p>{update}</p>)}
    </ScrollArea>
  </>
)

import { ScrollArea } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <ScrollArea aria-label="Release notes" style={{ maxHeight: '10rem' }}>
      {updates.map(update => <p>{update}</p>)}
    </ScrollArea>
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<lumen-scroll-area aria-label="Release notes" style="max-height: 10rem;">
  {updates.map(update => <p>{update}</p>)}
</lumen-scroll-area>

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<lumen-scroll-area aria-label="Release notes" style="max-height: 10rem;">
  {updates.map(update => <p>{update}</p>)}
</lumen-scroll-area>

Choose your target

Add this component

Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.

pnpm add @santi020k/lumen-astro

pnpm add @santi020k/lumen-astro

lumen add ScrollArea

lumen add ScrollArea

pnpm add @santi020k/lumen-react

pnpm add @santi020k/lumen-react

lumen add ScrollArea --target react

lumen add ScrollArea --target react

pnpm add @santi020k/lumen-elements

pnpm add @santi020k/lumen-elements

lumen add ScrollArea --target elements

lumen add ScrollArea --target elements

Glass

Add the glass prop to apply the shared blur, saturation, border, and highlight tokens. Glass reads best over vivid content, so place the surface above imagery or color.

Glass scroll areas keep long content contained while preserving the backdrop treatment.

The frosted frame stays fixed while the content scrolls beneath its specular top edge.

Use the same glass prop across Astro, React, and Elements.

---
import { ScrollArea } from '@santi020k/lumen-astro'
---

<div class="docs-glass-demo">
  <ScrollArea glass style="max-height: 10rem;">
    <p>Glass scroll areas keep long content contained while preserving the backdrop treatment.</p>
    <p>The frosted frame stays fixed while the content scrolls beneath its specular top edge.</p>
    <p>Use the same glass prop across Astro, React, and Elements.</p>
  </ScrollArea>
</div>

---
import { ScrollArea } from '@santi020k/lumen-astro'
---

<div class="docs-glass-demo">
  <ScrollArea glass style="max-height: 10rem;">
    <p>Glass scroll areas keep long content contained while preserving the backdrop treatment.</p>
    <p>The frosted frame stays fixed while the content scrolls beneath its specular top edge.</p>
    <p>Use the same glass prop across Astro, React, and Elements.</p>
  </ScrollArea>
</div>

import { ScrollArea } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <div className="docs-glass-demo">
      <ScrollArea glass style={{ maxHeight: '10rem' }}>
        <p>Glass scroll areas keep long content contained while preserving the backdrop treatment.</p>
        <p>The frosted frame stays fixed while the content scrolls beneath its specular top edge.</p>
        <p>Use the same glass prop across Astro, React, and Elements.</p>
      </ScrollArea>
    </div>
  </>
)

import { ScrollArea } from '@santi020k/lumen-react'

export const Example = () => (
  <>
    <div className="docs-glass-demo">
      <ScrollArea glass style={{ maxHeight: '10rem' }}>
        <p>Glass scroll areas keep long content contained while preserving the backdrop treatment.</p>
        <p>The frosted frame stays fixed while the content scrolls beneath its specular top edge.</p>
        <p>Use the same glass prop across Astro, React, and Elements.</p>
      </ScrollArea>
    </div>
  </>
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<div class="docs-glass-demo">
  <lumen-scroll-area glass style="max-height: 10rem;">
    <p>Glass scroll areas keep long content contained while preserving the backdrop treatment.</p>
    <p>The frosted frame stays fixed while the content scrolls beneath its specular top edge.</p>
    <p>Use the same glass prop across Astro, React, and Elements.</p>
  </lumen-scroll-area>
</div>

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<div class="docs-glass-demo">
  <lumen-scroll-area glass style="max-height: 10rem;">
    <p>Glass scroll areas keep long content contained while preserving the backdrop treatment.</p>
    <p>The frosted frame stays fixed while the content scrolls beneath its specular top edge.</p>
    <p>Use the same glass prop across Astro, React, and Elements.</p>
  </lumen-scroll-area>
</div>

API reference

Lumen-specific props and runtime attributes for the Astro primitive. React props follow the same names; Elements use equivalent kebab-case attributes where custom elements expose them.

Attribute	Values	Default	Description
glass	boolean \| "subtle" \| "strong"	false	Applies the tokenized liquid-glass surface treatment with backdrop-filter fallbacks; "subtle" and "strong" adjust the fill intensity.
class, className	string	""	Merges custom classes with the generated ui-* root classes.
...native attributes	HTML attributes	-	Forwards standard attributes to the root element unless the component consumes them.