Card

The flagship glass surface with Header / Body / Footer sections, variants, and padding scales.

Group: Layout · Import path: @orionshub/lucent/card · Server-safe — renders on the server without a client bundle.

Import

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

Examples

Sectioned card

Sectioned card

Show source

export function CardBasic() {
  return (
    <Card variant="elevated" padding="md" style={{ maxWidth: 320 }}>
      <Card.Header><Heading size="heading">Glass Card</Heading></Card.Header>
      <Card.Body><Text muted>Header / Body / Footer sections on the flagship glass surface.</Text></Card.Body>
      <Card.Footer><Button size="sm">Action</Button></Card.Footer>
    </Card>
  )
}

Props

Card

Prop	Type	Default	Description
as	React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined	—	Render the single child, merging props/ref (via GlassSurface `asChild` semantics through `as`).
padding	CardPadding | undefined	—	Inner padding scale. Defaults to `md`.
variant	CardVariant | undefined	—	Visual emphasis. Defaults to `elevated`.

CardSection

This component forwards native element props. It exposes no additional public props, or its props are documented inline above.

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

Server-safe — renders on the server without a client bundle. All components are safe to import in a Server Component tree; interactive ones carry their own "use client" boundary. See SSR & Next.js.