Kpi Grid

kpi-gridui

Bare responsive grid wrapper (2 / 3 / 4 columns). Pass any children — Cards, inline charts, custom tiles. No items prop, no item rendering.

Also available for Vue ->

Installation

$pnpm dlx shadcn@latest add https://uipkge.dev/r/react/kpi-grid.json

$npx shadcn@latest add https://uipkge.dev/r/react/kpi-grid.json

$yarn dlx shadcn@latest add https://uipkge.dev/r/react/kpi-grid.json

$bunx shadcn@latest add https://uipkge.dev/r/react/kpi-grid.json

Named registry:npx shadcn@latest add @uipkge-react/kpi-gridInstalls to:components/ui/kpi-grid/

Variants

Loading interactive previews…

Examples in Use

Full BlockKpiGrid + Sparkline + Badge

Executive metrics grid combining KPI cards, sparkline micro-charts, trend indicators, and responsive grid geometry.

Explore full block

Loading interactive previews…

Props

Name	Type / Values	Default	Required
`columns`	`2 \| 3 \| 4`	`4`	optional

Used by

dashboard-kpis

[data-used-by-list] { max-height: none !important; overflow: visible !important; } [data-used-by-toggle] { display: none !important; }

Files installed (2)

components/ui/kpi-grid/kpi-grid.tsx0.6 kB

import * as React from 'react'
import { cn } from '@/lib/utils'

export interface KpiGridProps extends React.HTMLAttributes<HTMLDivElement> {
  columns?: 2 | 3 | 4
}

const KpiGrid = React.forwardRef<HTMLDivElement, KpiGridProps>(
  ({ columns = 4, className, children, ...props }, ref) => (
    <div
      ref={ref}
      data-uipkge=""
      data-slot="kpi-grid"
      className={cn(
        'grid gap-4 md:grid-cols-2',
        columns === 3 ? 'lg:grid-cols-3' : columns === 2 ? 'lg:grid-cols-2' : 'lg:grid-cols-4',
        className,
      )}
      {...props}
    >
      {children}
    </div>
  ),
)
KpiGrid.displayName = 'KpiGrid'

export { KpiGrid }