Aspect Ratio

Constrain content to a fixed width-to-height ratio.

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

Import

tsx

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

Examples

16 : 9 media

Show source

tsx

export function AspectRatioBasic() {
  return (
    <div style={{ width: 280 }}>
      <AspectRatio ratio={16 / 9}>
        <img
          src="https://picsum.photos/480/270"
          alt="Sample"
          style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 10 }}
        />
      </AspectRatio>
    </div>
  )
}

Props

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.

Aspect Ratio ​

Import ​

Examples ​

16 : 9 media ​

Props ​

Guidance ​