Command Palette

Search for a command to run...

Grid

A flexible grid system for building complex layouts with rows and columns.

Grid

import { GridContainer, GridItem, GridRow } from "@/components/optics/grid";<GridContainer  border  className="w-full max-w-2xl"  cols={12}  rows={3}>  <GridRow className="rounded-t-xl">    <GridItem      className="aspect-square"      decorationTopLeft      span={4}    />    <GridItem      className="aspect-square"      span={4}    />    <GridItem      className="aspect-square"      span={4}    />  </GridRow>  <GridRow>    <GridItem      className="aspect-square"      span={4}    />    <GridItem      className="aspect-square"      span={4}    />    <GridItem      className="aspect-square"      span={4}    />  </GridRow>  <GridRow>    <GridItem      className="aspect-square"      span={4}    />    <GridItem      className="aspect-square"      span={4}    />    <GridItem      className="aspect-square"      decorationBottomRight      span={4}    />  </GridRow></GridContainer>

Installation

pnpm dlx shadcn@latest add @optics/grid

Props

<GridContainer />
Name
Type
className
string
cols
number (default: 12)
rows
number (default: 1)
gap
number (default: 0)
border
boolean (default: true)

<GridRow />
Name
Type
className
string
span
number (default: 0, uses cols if 0)
gap
number (default: 0)
overrideStyles
boolean (default: false)
borderTop
boolean (default: true)
borderBottom
boolean (default: true)
<GridItem />
Name
Type
className
string
span
number (default: 1)
borderLeft
boolean (default: true)
borderRight
boolean (default: true)
borderTop
boolean (default: false)
borderBottom
boolean (default: false)
decorationTopLeft
boolean (default: false)
decorationTopRight
boolean (default: false)
decorationBottomLeft
boolean (default: false)
decorationBottomRight
boolean (default: false)
FormGuided Tour