kpi-griduiBare responsive grid wrapper (2 / 3 / 4 columns). Pass any children — Cards, inline charts, custom tiles. No items prop, no item rendering.
Also available for React ->$pnpm dlx shadcn-vue@latest add https://uipkge.dev/r/vue/kpi-grid.json$npx shadcn-vue@latest add https://uipkge.dev/r/vue/kpi-grid.json$yarn dlx shadcn-vue@latest add https://uipkge.dev/r/vue/kpi-grid.json$bunx shadcn-vue@latest add https://uipkge.dev/r/vue/kpi-grid.jsonnpx shadcn-vue@latest add @uipkge/kpi-gridInstalls to:app/components/ui/kpi-grid/Executive metrics grid combining KPI cards, sparkline micro-charts, trend indicators, and responsive grid geometry.
| Name | Type / Values | Default | Required |
|---|---|---|---|
columns | 2 | 3 | 4 | 4 | optional |
class | HTMLAttributes['class'] | — | optional |
<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@/lib/utils'
const props = withDefaults(
defineProps<{
columns?: 2 | 3 | 4
class?: HTMLAttributes['class']
}>(),
{ columns: 4 },
)
</script>
<template>
<div
data-uipkge
data-slot="kpi-grid"
:class="
cn(
'grid gap-4 md:grid-cols-2',
columns === 3 ? 'lg:grid-cols-3' : columns === 2 ? 'lg:grid-cols-2' : 'lg:grid-cols-4',
props.class,
)
"
>
<slot />
</div>
</template>
export { default as KpiGrid } from './KpiGrid.vue'
Raw manifest:https://uipkge.dev/r/vue/kpi-grid.json
