Scroll Area

Custom glass scrollbars that preserve native scrolling.

Group: Layout · Import path: @orionshub/lucent/scroll-area · Client component — ships a "use client" boundary.

Import

tsx

import { ScrollArea } from '@orionshub/lucent'
import '@orionshub/lucent/styles.css' // once, at your app root

Examples

Scrollable panel

Show source

tsx

export function ScrollAreaBasic() {
  return (
    <ScrollArea style={{ blockSize: 120, width: 300, borderRadius: 10, border: '1px solid hsl(var(--lucent-border))' }}>
      <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 6 }}>
        {Array.from({ length: 12 }, (_, i) => (
          <Text key={i} muted>Row {i + 1} — native scrolling, custom glass scrollbar.</Text>
        ))}
      </div>
    </ScrollArea>
  )
}

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	—
`orientation`	`ScrollAreaOrientation \| undefined`	—	Which scrollbars to show. Defaults to `vertical`.
`viewportClassName`	`string \| undefined`	—	Viewport className passthrough.

Guidance

One-time CSS import

Import the compiled stylesheet once at your app root: import '@orionshub/lucent/styles.css'. Components ship stable class names and read design tokens from CSS custom properties — there is no style runtime. See CSS Import.

Transparency & solid mode

Every glass surface reads --lucent-glass-opacity (0.60–1.0). Dial it at runtime with setGlassOpacity(), or switch to setContrast('solid') for a fully opaque, high-contrast rendering. See Transparency & Solid Mode.

RTL

Authored with CSS logical properties — set dir="rtl" on a parent (or the document) and layout mirrors with no JS. Toggle RTL from the glass-controls panel to preview. See RTL Support.

SSR / Next.js

Client component — ships a "use client" boundary. All components are safe to import in a Server Component tree; interactive ones carry their own "use client" boundary. See SSR & Next.js.

Scroll Area ​

Import ​

Examples ​

Scrollable panel ​

Props ​

Guidance ​