Components

All 51 exported components, grouped by category. Every page ships a live, runtime-controllable example, an auto-generated prop table, and notes on CSS import, portal theming, transparency, reduced motion, RTL, and SSR.

Utilities

• Slot — Merge props onto a consumer-supplied child element via asChild. The polymorphism primitive behind every Lucent component that accepts asChild.
• Visually Hidden — Hide content visually while keeping it available to assistive technology — for accessible names that shouldn’t clutter the UI.
• Accessible Icon — Give a bring-your-own decorative icon an accessible name without visible text — pairs with any icon library.
• Portal — Render children into document.body while inheriting :root-scoped theme tokens. The load-bearing dependency behind every overlay.

Theming

• LucentProvider — The runtime theming spine: seeds the initial theme/accent/density/glass axes, provides useLucent(), and wires the SSR no-flash + RTL direction. Optional — components also read defaults straight from :root.
• ThemePanel — A prebuilt accessibility/theming panel exposing all runtime axes — including the glass-opacity knob and solid/high-contrast mode — with no wiring required.
• GlassSurface — The translucent, capped-blur glass primitive with a -webkit- prefix and an @supports opaque fallback. The visual foundation every surface composes.

Primitives

• Button — Solid / soft / ghost / outline variants and sizes, a loading state exposing aria-busy, and asChild polymorphism.
• Icon Button — A square, icon-only button that enforces an accessible name at the type level (aria-label or label is required).
• Text — Polymorphic body text (as/asChild) with token-driven size, weight, and tone.
• Heading — Polymorphic display/heading type with the Grotesk system-first stack.
• Link — An anchor with an automatic external-link cue and accessible new-tab semantics.
• Separator — A horizontal or vertical divider with correct ARIA orientation.
• Avatar — An image avatar with a graceful initials/fallback after a load delay.
• Aspect Ratio — Constrain content to a fixed width-to-height ratio.
• Badge — A compact status/label chip in glass or solid tones.
• Kbd — Render keyboard shortcut keys with consistent glass key-cap styling.

Form Controls

• Label — Associates a caption with native or custom controls via htmlFor.
• Input — A glass-wrapped text input exposing aria-invalid and aria-describedby for error and description wiring.
• Textarea — A multi-line glass text control with the same ARIA wiring as Input.
• Form Field — Ties label + control + error + description together with full ARIA wiring and stack / inline / floating layouts — pairs with react-hook-form/zod, no bundled validation engine.
• Checkbox — A keyboard-operable checkbox with an indeterminate state.
• Switch — A binary on/off toggle with a sliding glass thumb.
• Toggle — A two-state pressable button exposing aria-pressed.
• Toggle Group — Single- or multi-select toggle buttons with roving focus.
• Radio Group — A set of mutually exclusive options with roving focus and RTL support.
• Slider — A single- or multi-thumb range with keyboard step, RTL, and aria-valuetext.
• Select — A typeahead select with full keyboard navigation and collision-aware glass positioning rendered through a themed portal.

Layout

• Box — The token-driven layout atom: padding/margin scale props and polymorphism.
• Flex — A flexbox container with token gap, alignment, and direction props.
• Grid — A CSS grid container with token columns and gaps.
• Card — The flagship glass surface with Header / Body / Footer sections, variants, and padding scales.
• Scroll Area — Custom glass scrollbars that preserve native scrolling.
• Accordion — A vertically stacked set of CSS-height-animated disclosure panels.
• Collapsible — A single show/hide region with CSS height animation.
• Tabs — Roving-focus tabs with orientation and RTL support.

Data Display

• Table — Semantic <table> markup with caption and scope, styled with glass row separators.
• Callout — A tinted note/alert surface; role="alert" for live tones vs a static informational note.
• Progress — Determinate/indeterminate progress in linear and circular forms.
• Avatar Group — Overlapping avatars with an overflow count label.

Overlays

• Dialog — A modal dialog that traps focus, returns focus on close, locks scroll, honors ESC, and renders a glass backdrop through a themed portal.
• Alert Dialog — A confirmation dialog that focuses the least-destructive action and requires an explicit choice.
• Popover — A collision-aware floating panel with focus management and dismissal — the gateway pattern for later composites.
• Tooltip — A hover- and focus-triggered label with an appropriate open delay.
• Hover Card — A rich preview card that opens on hover and focus.
• Dropdown Menu — A button-triggered menu with typeahead, submenus, roving focus, and collision handling.
• Context Menu — A right-click menu with a keyboard equivalent, submenus, and typeahead.

Feedback

• Toast — A provider + portalled viewport with aria-live, swipe-to-dismiss, and pause-on-hover.
• Spinner — A role="status" loading indicator with a reduced-motion fallback.
• Skeleton — A shimmering placeholder with a reduced-motion-aware animation.
• Empty State — A consistent glass placeholder for empty views with an optional action.