Grid

A CSS grid container with token columns and gaps.

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

Import

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

Examples

Columns

Columns

Show source

export function GridBasic() {
  return (
    <Grid columns={3} gap={2} style={{ width: 280 }}>
      <Box p={3} style={cell}>1</Box>
      <Box p={3} style={cell}>2</Box>
      <Box p={3} style={cell}>3</Box>
    </Grid>
  )
}

Props

Prop	Type	Default	Description
align	Property.AlignItems | undefined	—	align-items.
as	React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined	—
asChild	boolean | undefined	—
columnGap	SpaceProp | undefined	—	Column gap override.
columns	string | number | undefined	—	Number of equal columns, or a raw grid-template-columns string.
flow	"row" | "column" | "dense" | "row dense" | "column dense" | undefined	—	grid-auto-flow.
gap	SpaceProp | undefined	—	Gap between cells.
justify	Property.JustifyItems | undefined	—	justify-items.
p	SpaceProp | undefined	—	Padding (all sides).
px	SpaceProp | undefined	—	Padding inline.
py	SpaceProp | undefined	—	Padding block.
rowGap	SpaceProp | undefined	—	Row gap override.
rows	string | number | undefined	—	Number of equal rows, or a raw grid-template-rows string.

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.