Grid Layout

This is a Grid Layout component.

Normal Card

This is a simple card.

Wide Card

This card spans multiple columns and is great for larger content.

Full-Width Card

This card spans the entire width of the grid.

Installation

1. Dependencies

npm install clsx tailwind-merge

2. Paste inside @/lib/utils.ts

import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: Parameters<typeof clsx>) {
  return twMerge(clsx(...inputs));
}

3. Copy Grid Layout Code

Copy Grid Layout Code

Grid Props

Name	Type	Required	Default	Description
children	ReactNode	Yes	undefined	The child elements to be rendered inside the grid.
className	string	No	""	Additional class names for styling.
cols	string	No	1 to 4	Number of columns in the grid.
gap	string	No	"gap-6"	Gap between grid items.

GridCol Props

Name	Type	Required	Default	Description
children	ReactNode	Yes	undefined	The child elements to be rendered inside the grid column.
className	string	No	""	Additional class names for styling.
colSpan	string	No	"col-span-1"	Custom col-span if needed.
variant	"card" \| "wide" \| "full"	No	"card"	Predefined variant options for col-span.