GRID

Responsive dashboard layout wrapper. Pre-baked column presets for common layouts. Accepts a custom columns string for full CSS grid-template-columns control.

PREVIEW

REACTOR OUTPUT

94.7%

NOMINAL

HULL INTEGRITY

61%

DEGRADED

CREW MANIFEST

312

ABOARD

CORE TEMP

4820°K

CRITICAL

INSTALLATION

BASH

npx shadcn@latest add @scificn/grid

USAGE

TSX

import { Grid } from '@/ui/grid'

// Pre-baked preset
<Grid preset="3-col" gap="1rem">
  <Panel>...</Panel>
  <Panel>...</Panel>
  <Panel>...</Panel>
</Grid>

// sidebar + main layout
<Grid preset="sidebar-main" gap="1rem">
  <nav>...</nav>
  <main>...</main>
</Grid>

// Custom template
<Grid columns="2fr 1fr 1fr" gap="0.75rem">
  ...
</Grid>

PRESETS

preset="2-col"

COLUMN A

COLUMN B

preset="3-col"

COLUMN A

COLUMN B

COLUMN C

preset="4-col"

COL A

COL B

COL C

COL D

preset="sidebar-main"

SIDEBAR 240px

MAIN CONTENT 1fr

preset="main-sidebar"

MAIN CONTENT 1fr

SIDEBAR 240px

PROPS

PROP	TYPE	DEFAULT	DESCRIPTION
preset	2-col \| 3-col \| 4-col \| sidebar-main \| main-sidebar	"2-col"	Pre-baked grid-template-columns value.
columns	string	undefined	Custom CSS grid-template-columns. Overrides preset.
gap	string \| number	"1rem"	CSS gap between grid cells.
rows	string	undefined	Custom CSS grid-template-rows.
className	string	—	Additional classes merged via cn().