shadszn/ui

Data Grid

A filterable, searchable card grid with tag-based filtering, skeleton loading states, and responsive layout.

Preview

AllTemplatesComponents

Auth Flow

active

Login, signup, and password reset

authforms

Dashboard

active

Admin dashboard with stats

layoutadmin

Data Table

deprecated

Sortable, filterable table

data

Installation

npx shadcn@latest add @shadszn/data-grid

Files Installed

  • data-grid/page.tsx -- Main grid page with search and filters
  • data-grid/components/grid-card.tsx -- Individual card component and skeleton variant

Key Features

  • Full-text search across title and description fields
  • Tag-based category filtering with active state
  • Responsive 1/2/3 column grid layout
  • Skeleton loading state with GridCardSkeleton component
  • Empty state messaging when no results match
  • Uses Input, Tag, Card, and Badge components

Customization

// Replace the items array with your data
const items = [
  {
    title: "Authentication Flow",
    description: "Complete login, signup, and password reset pages.",
    tags: ["auth", "forms"],
    status: "active",
  },
  // ... add your items
]

// Customize filter categories
const filters = [
  { label: "All", active: true },
  { label: "Templates", active: false },
  { label: "Components", active: false },
]