Dashboard Grid

Components

Dashboard Grid

layout

static

<arc-dashboard-grid>

Overview

Guidelines

When to use

Use DashboardGrid for metric cards, stat panels, and KPI widgets at the top of dashboards
Let the default auto-fill behavior handle responsiveness unless you need a fixed column count
Set min-column-width to match the natural minimum width of your card components
Pair with ValueCard or Card components for consistent card sizing
Use spacing tokens like var(--space-md) for the gap prop to stay on the design system grid

When not to use

Use DashboardGrid for general page layout -- use PageLayout for sidebar/main structures
Set columns to a high number without testing on narrow viewports; cards will crush
Nest DashboardGrid inside another DashboardGrid -- use a single grid with appropriate min-column-width
Mix radically different card heights in the same grid without aligning their internal content
Override the grid CSS with inline flex or float styles -- let the component manage the layout

Features

Fluid auto-fill grid that wraps cards based on available width
Explicit columns mode via the columns attribute for fixed-count layouts
Configurable min-column-width for controlling when columns wrap
Gap property accepts any CSS length or spacing design token
CSS custom properties (--columns, --gap, --min-col) for external override
Built-in padding via --space-lg for comfortable card spacing
Exposes a grid CSS part for targeted ::part() styling
Zero JavaScript layout logic -- pure CSS Grid under the hood

Preview

Usage

<arc-dashboard-grid columns="3" gap="var(--space-md)">
  <arc-card>Revenue: $45,231</arc-card>
  <arc-card>Users: 2,345</arc-card>
  <arc-card>Growth: +12.5%</arc-card>
</arc-dashboard-grid>

import { Card, DashboardGrid } from '@arclux/arc-ui-react';

<DashboardGrid columns="3" gap="var(--space-md)">
  <Card>Revenue: $45,231</Card>
  <Card>Users: 2,345</Card>
  <Card>Growth: +12.5%</Card>
</DashboardGrid>

<script setup>
import { Card, DashboardGrid } from '@arclux/arc-ui-vue';
</script>

<template>
  <DashboardGrid columns="3" gap="var(--space-md)">
    <Card>Revenue: $45,231</Card>
    <Card>Users: 2,345</Card>
    <Card>Growth: +12.5%</Card>
  </DashboardGrid>
</template>

<script>
  import { Card, DashboardGrid } from '@arclux/arc-ui-svelte';
</script>

<DashboardGrid columns="3" gap="var(--space-md)">
  <Card>Revenue: $45,231</Card>
  <Card>Users: 2,345</Card>
  <Card>Growth: +12.5%</Card>
</DashboardGrid>

import { Component } from '@angular/core';
import { Card, DashboardGrid } from '@arclux/arc-ui-angular';

@Component({
  imports: [Card, DashboardGrid],
  template: `
    <DashboardGrid columns="3" gap="var(--space-md)">
      <Card>Revenue: $45,231</Card>
      <Card>Users: 2,345</Card>
      <Card>Growth: +12.5%</Card>
    </DashboardGrid>
  `,
})
export class MyComponent {}

import { Card, DashboardGrid } from '@arclux/arc-ui-solid';

<DashboardGrid columns="3" gap="var(--space-md)">
  <Card>Revenue: $45,231</Card>
  <Card>Users: 2,345</Card>
  <Card>Growth: +12.5%</Card>
</DashboardGrid>

import { Card, DashboardGrid } from '@arclux/arc-ui-preact';

<DashboardGrid columns="3" gap="var(--space-md)">
  <Card>Revenue: $45,231</Card>
  <Card>Users: 2,345</Card>
  <Card>Growth: +12.5%</Card>
</DashboardGrid>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-dashboard-grid — requires dashboard-grid.css + base.css (or arc-ui.css) -->
<div class="arc-dashboard-grid">
  <div class="dashboard-grid">
   Dashboard Grid
   </div>
</div>

<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-dashboard-grid — self-contained, no external CSS needed -->
<div class="arc-dashboard-grid" style="display: block; box-sizing: border-box">
  <div style="display: grid; grid-template-columns: repeat(
            auto-fill,
            minmax(280px, 1fr)
          ); gap: 24px; padding: 24px">
   Dashboard Grid
   </div>
</div>

API

Prop	Type	Default	Description
`columns`	`number`	`3`	Number of columns when using explicit column mode. When this attribute is set on the element, the grid switches from auto-fill to a fixed repeat(N, 1fr) layout.
`gap`	`string`	`'var(--space-lg)'`	Gap between grid cells. Accepts any CSS length value or spacing token. Maps to the --gap CSS custom property.
`min-column-width`	`string`	`'280px'`	Minimum column width in auto-fill mode. Controls the minmax() threshold at which columns wrap to the next row. Maps to the --min-col CSS custom property.

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

See Also

ARC UI

Arclight