UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Kpi Grid

kpi-gridui
Boilerplate repo

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

Installation

$npx 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 Block

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

Explore full block
Loading interactive previews…

Props

NameType / ValuesDefaultRequired
columns2 | 3 | 44optional

Used by

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 }
  • components/ui/kpi-grid/index.ts0.1 kB

Raw manifest:https://uipkge.dev/r/react/kpi-grid.json