Progress

Determinate/indeterminate progress in linear and circular forms.

Group: Data Display · Import path: @orionshub/lucent/progress · Client component — ships a "use client" boundary.

Import

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

Examples

Linear & circular

Linear & circular

Show source

export function ProgressBasic() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, width: 300 }}>
      <Progress aria-label="Upload" value={64} />
      <Progress aria-label="Loading" />
      <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
        <Progress aria-label="Sync" variant="circular" value={72} />
        <Progress aria-label="Working" variant="circular" />
      </div>
    </div>
  )
}

Props

Prop	Type	Default	Description
max	number | undefined	—	Maximum value. Defaults to 100.
size	number | undefined	—	Diameter (px) of the circular variant. Defaults to 40.
thickness	number | undefined	—	Stroke width (px) of the circular variant. Defaults to 4.
value	number | null | undefined	—	Current value. `null`/`undefined` renders the indeterminate state.
variant	ProgressVariant | undefined	—	Visual form. Defaults to `linear`.

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.

Reduced motion

Animations are CSS-only and disabled under @media (prefers-reduced-motion: reduce). See Reduced Motion.

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.