Getting Started

Templates

Mockups

Components

Special Animations

Buttons

Text Animations

Backgrounds

Grid

A flexible grid component with customizable columns, rows, and optional decorative plus icons for creating structured layouts.

Open in

Basic Grid

"use client"

import { Grid } from "@/registry/eldoraui/grid"

export function GridDemo() {
  return (
    <div className="bg-background relative z-10 w-full space-y-8 overflow-hidden rounded-lg border p-8">
      {/* Basic Grid */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold">Basic Grid</h3>
        <Grid columns={9} rows={2} height="h-24" />
      </div>
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add @eldoraui/grid

Examples

Basic Grid

Open in

Basic Grid

"use client"

import { Grid } from "@/registry/eldoraui/grid"

export function GridDemo() {
  return (
    <div className="bg-background relative z-10 w-full space-y-8 overflow-hidden rounded-lg border p-8">
      {/* Basic Grid */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold">Basic Grid</h3>
        <Grid columns={9} rows={2} height="h-24" />
      </div>
    </div>
  )
}

Custom Dimensions

Open in

Custom Grid (6x3)

"use client"

import { Grid } from "@/registry/eldoraui/grid"

export function GridDemo2() {
  return (
    <div className="bg-background relative z-10 w-full space-y-8 overflow-hidden rounded-lg border p-8">
      {/* Custom Grid with Different Dimensions */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold">Custom Grid (6x3)</h3>
        <Grid columns={6} rows={3} height="h-32" />
      </div>
    </div>
  )
}

Without Plus Icons

Open in

Grid without Plus Icons

"use client"

import { Grid } from "@/registry/eldoraui/grid"

export function GridDemo3() {
  return (
    <div className="bg-background relative z-10 w-full space-y-8 overflow-hidden rounded-lg border p-8">
      {/* Grid without Plus Icons */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold">Grid without Plus Icons</h3>
        <Grid columns={8} rows={2} height="h-20" showPlusIcons={false} />
      </div>
    </div>
  )
}

Large Grid

Open in

Large Grid (12x4)

"use client"

import { Grid } from "@/registry/eldoraui/grid"

export function GridDemo() {
  return (
    <div className="bg-background relative z-10 w-full space-y-8 overflow-hidden rounded-lg border p-8">
      {/* Large Grid */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold">Large Grid (12x4)</h3>
        <Grid columns={12} rows={4} height="h-40" />
      </div>
    </div>
  )
}

Custom Content

Open in

Grid with Custom Content

"use client"

import { Grid } from "@/registry/eldoraui/grid"

export function GridDemo() {
  return (
    <div className="bg-background relative z-10 w-full space-y-8 overflow-hidden rounded-lg border p-8">
      {/* Grid with Custom Content */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold">Grid with Custom Content</h3>
        <Grid columns={4} rows={2} height="h-32" className="bg-muted/20">
          {Array.from({ length: 8 }).map((_, i) => (
            <div
              key={i}
              className="text-muted-foreground flex items-center justify-center border-r border-b text-sm font-medium"
            >
              {i + 1}
            </div>
          ))}
        </Grid>
      </div>
    </div>
  )
}

Usage

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

<Grid columns={9} rows={2} height="h-24" showPlusIcons={true} />

Props

Prop	Type	Default	Description
`columns`	`number`	`9`	Number of columns in the grid
`rows`	`number`	`2`	Number of rows in the grid
`height`	`string`	`"h-24"`	Height of the grid container
`width`	`string`	`"w-full"`	Width of the grid container
`showPlusIcons`	`boolean`	`true`	Whether to show decorative plus icons at corners
`className`	`string`	`-`	Additional CSS classes for the grid container
`children`	`ReactNode`	`-`	Custom content to render inside the grid
`aria-label`	`string`	`-`	ARIA label for accessibility

Gradual Spacing Text Hacker Background

On This Page

Contribute

Join Us on Discord

Eldora UI

Get latest updates and support
and get help from our community

Join Now

Trusted by 1,000+ developers

Grid

A flexible grid component with customizable columns, rows, and optional decorative plus icons for creating structured layouts.

Open in

Basic Grid

"use client"

import { Grid } from "@/registry/eldoraui/grid"

export function GridDemo() {
  return (
    <div className="bg-background relative z-10 w-full space-y-8 overflow-hidden rounded-lg border p-8">
      {/* Basic Grid */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold">Basic Grid</h3>
        <Grid columns={9} rows={2} height="h-24" />
      </div>
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add @eldoraui/grid

Examples

Basic Grid

Open in

Basic Grid

"use client"

import { Grid } from "@/registry/eldoraui/grid"

export function GridDemo() {
  return (
    <div className="bg-background relative z-10 w-full space-y-8 overflow-hidden rounded-lg border p-8">
      {/* Basic Grid */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold">Basic Grid</h3>
        <Grid columns={9} rows={2} height="h-24" />
      </div>
    </div>
  )
}

Custom Dimensions

Open in

Custom Grid (6x3)

"use client"

import { Grid } from "@/registry/eldoraui/grid"

export function GridDemo2() {
  return (
    <div className="bg-background relative z-10 w-full space-y-8 overflow-hidden rounded-lg border p-8">
      {/* Custom Grid with Different Dimensions */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold">Custom Grid (6x3)</h3>
        <Grid columns={6} rows={3} height="h-32" />
      </div>
    </div>
  )
}

Without Plus Icons

Open in

Grid without Plus Icons

"use client"

import { Grid } from "@/registry/eldoraui/grid"

export function GridDemo3() {
  return (
    <div className="bg-background relative z-10 w-full space-y-8 overflow-hidden rounded-lg border p-8">
      {/* Grid without Plus Icons */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold">Grid without Plus Icons</h3>
        <Grid columns={8} rows={2} height="h-20" showPlusIcons={false} />
      </div>
    </div>
  )
}

Large Grid

Open in

Large Grid (12x4)

"use client"

import { Grid } from "@/registry/eldoraui/grid"

export function GridDemo() {
  return (
    <div className="bg-background relative z-10 w-full space-y-8 overflow-hidden rounded-lg border p-8">
      {/* Large Grid */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold">Large Grid (12x4)</h3>
        <Grid columns={12} rows={4} height="h-40" />
      </div>
    </div>
  )
}

Custom Content

Open in

Grid with Custom Content

"use client"

import { Grid } from "@/registry/eldoraui/grid"

export function GridDemo() {
  return (
    <div className="bg-background relative z-10 w-full space-y-8 overflow-hidden rounded-lg border p-8">
      {/* Grid with Custom Content */}
      <div className="space-y-4">
        <h3 className="text-lg font-semibold">Grid with Custom Content</h3>
        <Grid columns={4} rows={2} height="h-32" className="bg-muted/20">
          {Array.from({ length: 8 }).map((_, i) => (
            <div
              key={i}
              className="text-muted-foreground flex items-center justify-center border-r border-b text-sm font-medium"
            >
              {i + 1}
            </div>
          ))}
        </Grid>
      </div>
    </div>
  )
}

Usage

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

<Grid columns={9} rows={2} height="h-24" showPlusIcons={true} />

Props

Prop	Type	Default	Description
`columns`	`number`	`9`	Number of columns in the grid
`rows`	`number`	`2`	Number of rows in the grid
`height`	`string`	`"h-24"`	Height of the grid container
`width`	`string`	`"w-full"`	Width of the grid container
`showPlusIcons`	`boolean`	`true`	Whether to show decorative plus icons at corners
`className`	`string`	`-`	Additional CSS classes for the grid container
`children`	`ReactNode`	`-`	Custom content to render inside the grid
`aria-label`	`string`	`-`	ARIA label for accessibility