UIPackage
Menu

Framework

VueReactAngularSvelteWeb Components

Change language

GitHub repo

Kpi Grid

kpi-gridui
Boilerplate repo

Bare responsive grid wrapper (2 / 3 / 4 columns). Pass any children — Cards, inline charts, custom tiles. No items prop, no item rendering.

Installation

$npx shadcn-svelte@latest add https://uipkge.dev/r/svelte/kpi-grid.json
Manifest:https://uipkge.dev/r/svelte/kpi-grid.jsonInstalls to:src/lib/components/ui/kpi-grid/

Variants

Loading interactive previews…

Examples in Use

Full Block

Executive metrics grid combining KPI cards, sparkline micro-charts, trend indicators, and responsive grid geometry.

Explore full block

Props

NameType / ValuesDefaultRequired
columns2 | 3 | 44optional
childrenSnippet—optional
refHTMLDivElement | null—optional

Used by

Files installed (2)

  • src/lib/components/ui/kpi-grid/KpiGrid.svelte0.7 kB
    <script lang="ts" module>
  import type { Snippet } from 'svelte'
  import type { HTMLAttributes } from 'svelte/elements'

  export interface KpiGridProps extends HTMLAttributes<HTMLDivElement> {
    columns?: 2 | 3 | 4
    children?: Snippet
    ref?: HTMLDivElement | null
  }
</script>

<script lang="ts">
  import { cn } from '$lib/utils'

  let { class: className, columns = 4, children, ref = $bindable(null), ...restProps }: KpiGridProps = $props()
</script>

<div
  bind:this={ref}
  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',
    className,
  )}
  {...restProps}
>
  {@render children?.()}
</div>
  • src/lib/components/ui/kpi-grid/index.ts0.1 kB

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