Kpi Grid

kpi-grid ui

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-grid Installs to: components/ui/kpi-grid/

Examples

Props

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

Files installed (2)

components/ui/kpi-grid/kpi-grid.tsx 0.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}
      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.ts 0.1 kB

export { KpiGrid, type KpiGridProps } from './kpi-grid'

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