Grid
Component
Section titled “Component” Preview react
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
Section titled “Installation”npx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/grid.jsonpnpm dlx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/grid.jsonbunx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/r/grid.jsonimport { 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> )}