Command Palette

Search for a command to run...

Grid

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

import { GridContainer, GridRow, GridItem } from "@/registry/optics/grid";<GridContainer cols={12} rows={3} border>	<GridRow className="rounded-t-xl">		<GridItem span={4}>Column 1</GridItem>		<GridItem span={4}>Column 2</GridItem>		<GridItem span={4}>Column 3</GridItem>	</GridRow>	<GridRow>		<GridItem span={6}>Half</GridItem>		<GridItem span={6}>Half</GridItem>	</GridRow>	<GridRow>		<GridItem span={12}>Full Width</GridItem>	</GridRow>						</GridContainer>

Installation

pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/grid.json

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