pitsi/ui
HomeDocsComponentsAnimationsBlocksTemplates
1
1
Sections
  • Get Started
  • Components
  • Animations
  • MCP Server
  • Forms
  • Changelog
Get Started
  • Installation
  • CLI
  • llms.txt
Components
  • Accordion
  • Alert Dialog
  • Alert
  • Aspect Ratio
  • Avatar
  • Badge
  • Breadcrumb
  • Button Group
  • Button
  • Calendar
  • Card
  • Carousel
  • Checkbox
  • Collapsible
  • Combobox
  • Command
  • Container
  • Context Menu
  • Data Table
  • Date Picker
  • Dialog
  • Drawer
  • Dropdown Menu
  • Empty
  • Field
  • Flex
  • Form
  • Grid
  • Hover Card
  • Input Group
  • Input OTP
  • Input
  • Item
  • Kbd
  • Label
  • Menubar
  • Native Select
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Resizable
  • Responsive
  • Scroll Area
  • Segmented Control
  • Select
  • Separator
  • Sheet
  • Sidebar
  • Skeleton
  • Slider
  • Sonner
  • Spacer
  • Spinner
  • Squircle
  • Switch
  • Table
  • Tabs
  • Textarea
  • Theme Toggle
  • Toggle Group
  • Toggle
  • Tooltip
  • Typography
  • Unicorn Wrapper
Animations
  • Background Image Parallax
  • Blend Mode Cursor
  • Card Swipe Carousel
  • Cards Parallax
  • Cursor Hover Mask
  • Floating Image Gallery
  • Mouse Hover Gallery
  • Nav Menu
  • Parallax Scroll
  • Perspective Carousel
  • Perspective Section Transition
  • Scroll Expand
  • Scroll Fade
  • Scroll Scale
  • Slide Down
  • Slide Up
  • Smooth Parallax Scroll
  • Smooth Scroll
  • Sticky Footer
  • Text Along Path
  • Text Gradient Opacity
  • Text Parallax
  • Transforms 3d
  • Zoom Parallax
General

Resources, guides, and helpful links.

Documentation
Introduction
Installation
CLI
llms.txt
Next.js
Vite
Laravel
React Router
Pages
Home
Docs
Components
Animations
Blocks
Templates
Templates
Application Shell
Calendar
Dashboard
Forms
Modalbox
Profile Headers
Section Headers
Table Header
Connect
GitHub
Twitter
Get Started
Changelog
Legal
Privacy
Terms
Blocks

Larger composed sections for building pages.

Application Shell
Calendar
Dashboard
Forms
Modalbox
Profile Headers
Section Headers
Table Header
Category Filter
Comment List
Incentives
Order Confirmation
Order History
Order Summaries
Order Tracking
Product List
Product Overview
Product Review
Refund Form
Refund Overview
Refund Status
Shopping Cart
404 Page
About Us Page
Blog Details
Career Pages
Coming Soon Page
Contactus Page
Legal Pages
Login Page
Maintenance Page
Otp
Pricing Page
About Us Section
Blogs News
Clients
Contact Form
Cta
Faq
Features
Footer
Gallery
Hero Section
How It Works
Integration
Portfolio
Pricing Plans
Stats
Team
Testimonial
Components

Copy and paste UI components into your apps.

Accordion
Alert Dialog
Alert
Aspect Ratio
Avatar
Badge
Breadcrumb
Button Group
Button
Calendar
Card
Carousel
Checkbox
Collapsible
Combobox
Command
Container
Context Menu
Data Table
Date Picker
Dialog
Drawer
Dropdown Menu
Empty
Field
Flex
Form
Grid
Hover Card
Input Group
Input OTP
Input
Item
Kbd
Label
Menubar
Native Select
Navigation Menu
Pagination
Popover
Progress
Radio Group
Resizable
Responsive
Scroll Area
Segmented Control
Select
Separator
Sheet
Sidebar
Skeleton
Slider
Sonner
Spacer
Spinner
Squircle
Switch
Table
Tabs
Textarea
Theme Toggle
Toggle Group
Toggle
Tooltip
Typography
Unicorn Wrapper
Animations

Beautiful animations and effects for your UI.

Background Image Parallax
Blend Mode Cursor
Card Swipe Carousel
Cards Parallax
Cursor Hover Mask
Floating Image Gallery
Mouse Hover Gallery
Nav Menu
Parallax Scroll
Perspective Carousel
Perspective Section Transition
Scroll Expand
Scroll Fade
Scroll Scale
Slide Down
Slide Up
Smooth Parallax Scroll
Smooth Scroll
Sticky Footer
Text Along Path
Text Gradient Opacity
Text Parallax
Transforms 3d
Zoom Parallax
Sign In

Grid

PreviousNext

A CSS Grid layout component with responsive configuration and variant-based styling.

Powered by
shadcn/ui

Installation

pnpm dlx pitsi@latest add grid

Usage

FormHover Card

On This Page

InstallationUsageExamplesBasic GridTwo Column LayoutResponsive GridCustom Gap SpacingCentered Grid ItemsPropsGridNotes
import Grid from "@/components/ui/grid"
<Grid cols={3} gap="md">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Grid>

Examples

Basic Grid

1
2
3
4
5
6

Two Column Layout

<Grid cols={2} gap="lg">
  <div>Left Column</div>
  <div>Right Column</div>
</Grid>

Responsive Grid

<Grid cols={4} colsMobile={2} gap="md" gapMobile="sm">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</Grid>

Custom Gap Spacing

<Grid cols={3} gapX="lg" gapY="sm">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</Grid>

Centered Grid Items

<Grid cols={3} align="center" justify="center">
  <div>Centered Item 1</div>
  <div>Centered Item 2</div>
  <div>Centered Item 3</div>
</Grid>

Props

Grid

PropTypeDefaultDescription
asReact.ElementType"div"The element to render as
cols1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12-Number of columns
rows1 | 2 | 3 | 4 | 5 | 6-Number of rows
flow"row" | "col" | "dense" | "row-dense" | "col-dense""row"Grid auto flow
gap"xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl"-Gap between items
gapXgap-Horizontal gap
gapYgap-Vertical gap
align"start" | "center" | "end" | "stretch" | "baseline""start"Align items
justify"start" | "center" | "end" | "between" | "around" | "evenly""start"Justify content
colsMobilecols-Columns on mobile
rowsMobilerows-Rows on mobile
flowMobileflow-Flow on mobile
gapMobilegap-Gap on mobile
gapXMobilegapX-Horizontal gap on mobile
gapYMobilegapY-Vertical gap on mobile
alignMobilealign-Align on mobile
justifyMobilejustify-Justify on mobile
classNamestring-Additional classes

Notes

  • The component uses the use-mobile hook to detect mobile screens and apply mobile-specific props.
  • All responsive props (ending with Mobile) will only apply when the viewport is considered mobile.
  • The component is polymorphic and can be rendered as any HTML element using the as prop.
  • You can combine gap with gapX or gapY for more granular control over spacing.
1
2
3
4
5
6
"use client"

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

export function GridDemo() {
  return (
    <div className="w-full max-w-3xl p-8">
      <Grid cols={3} gap="md" colsMobile={2}>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">1</span>
        </div>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">2</span>
        </div>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">3</span>
        </div>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">4</span>
        </div>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">5</span>
        </div>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">6</span>
        </div>
      </Grid>
    </div>
  )
}

"use client"

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

export function GridDemo() {
  return (
    <div className="w-full max-w-3xl p-8">
      <Grid cols={3} gap="md" colsMobile={2}>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">1</span>
        </div>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">2</span>
        </div>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">3</span>
        </div>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">4</span>
        </div>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">5</span>
        </div>
        <div className="bg-card border-border text-foreground flex h-20 items-center justify-center rounded-lg border shadow-sm">
          <span className="text-lg font-semibold">6</span>
        </div>
      </Grid>
    </div>
  )
}