UIPackage
Vue React

Kpi Grid

React layout
Edit on GitHub

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

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

Or with the named registry: npx shadcn@latest add @uipkge-react/kpi-grid

Examples

Props

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

Files (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://react.uipkge.dev/r/react/kpi-grid.json