UIPackage
Vue React

Kpi Grid

Vue 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 React ->

Installation

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

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

Examples

Props

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

Files (2)

  • app/components/ui/kpi-grid/KpiGrid.vue 0.3 kB 
    <script setup lang="ts">
withDefaults(defineProps<{ columns?: 2 | 3 | 4 }>(), { columns: 4 })
</script>

<template>
  <div
    :class="[
      'grid gap-4 md:grid-cols-2',
      columns === 3 ? 'lg:grid-cols-3' : columns === 2 ? 'lg:grid-cols-2' : 'lg:grid-cols-4',
    ]"
  >
    <slot />
  </div>
</template>
  • app/components/ui/kpi-grid/index.ts 0 kB 
    export { default as KpiGrid } from './KpiGrid.vue'

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