UIPackage
Menu

Framework

Vue React

Change language

Boilerplate repo

Kpi Grid

kpi-grid ui
Boilerplate repo

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
Named registry: npx shadcn-vue@latest add @uipkge/kpi-grid Installs to: app/components/ui/kpi-grid/

Examples

Loading interactive previews…

Props

Name Type / Values Default Required
columns 2 | 3 | 4 4 optional
class HTMLAttributes['class'] — optional

Files installed (2)

  • app/components/ui/kpi-grid/KpiGrid.vue 0.5 kB 
    <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>
  • 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