Grid

Component

Preview

Preview react

Usage

import { Grid } from "@/components/ui/grid"

export function GridDemo() {
return (
  <Grid columns={3} className="gap-4">
    <div className="border rounded-md p-4 text-sm">Item 1</div>
    <div className="border rounded-md p-4 text-sm">Item 2</div>
    <div className="border rounded-md p-4 text-sm">Item 3</div>
    <div className="border rounded-md p-4 text-sm">Item 4</div>
    <div className="border rounded-md p-4 text-sm">Item 5</div>
    <div className="border rounded-md p-4 text-sm">Item 6</div>
  </Grid>
)
}

Installation

CLI

npm

npx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/grid.json

pnpm

pnpm dlx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/grid.json

bun

bunx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/grid.json

Manual

components/ui/grid.tsx

import { type ComponentProps, type CSSProperties } from "react"
import { cn } from "@/lib/utils"

export interface GridProps extends ComponentProps<"div"> {
  columns?: number
  gap?: number | string
}

export function Grid({ className, columns = 1, gap, style, children, ...props }: GridProps) {
  const gridStyle: CSSProperties = {
    display: "grid",
    gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
    gap: typeof gap === "number" ? `${gap * 0.25}rem` : gap,
    ...style,
  }

  return (
    <div className={cn(className)} style={gridStyle} {...props}>
      {children}
    </div>
  )
}