Dashboard Component The Dashboard component provides a two-column layout: a sidebar (for navigation) and a main content area. It uses Rizzo design tokens and BEM classes (dashboard, dashboard__sidebar, dashboard__main, dashboard__nav, dashboard__nav-link). On small screens the layout stacks vertically.
Add this component The command below includes <strong>Dashboard</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.
Choose your package manager — click a tab to select, then copy the command.
npx rizzo-css add Dashboard pnpm dlx rizzo-css add Dashboard npx rizzo-css add Dashboard bunx rizzo-css add Dashboard Basic usage Use the default sidebar (Dashboard, Items, Settings) or pass your own nav via the sidebar slot (Astro) or sidebar snippet (Svelte).
Live example
Recent activity Recent activity list Item one Done Today Item two Pending Yesterday Item three Failed Jan 15
Usage Usage Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React ---
import Dashboard from '../components/astro/Dashboard.astro';
---
<Dashboard sidebarLabel="App navigation">
<nav slot="sidebar" class="dashboard__nav">
<a href="/dashboard" class="dashboard__nav-link dashboard__nav-link--active" aria-current="page">Dashboard</a>
<a href="/items" class="dashboard__nav-link">Items</a>
<a href="/settings" class="dashboard__nav-link">Settings</a>
</nav>
<main>
<h1>Dashboard</h1>
<p>Your content here.</p>
</main>
</Dashboard> <!-- Rizzo CSS. No script needed. -->
<div class="dashboard">
<aside class="dashboard__sidebar" aria-label="App navigation">
<nav class="dashboard__nav">
<a href="/dashboard" class="dashboard__nav-link dashboard__nav-link--active" aria-current="page">Dashboard</a>
<a href="/items" class="dashboard__nav-link">Items</a>
<a href="/settings" class="dashboard__nav-link">Settings</a>
</nav>
</aside>
<main id="main-content" class="dashboard__main">
<h1>Dashboard</h1>
<p>Your content here.</p>
</main>
</div> <script>
import { Dashboard } from '$lib/rizzo';
</script>
<Dashboard sidebarLabel="App navigation">
{#snippet sidebar()}
<nav class="dashboard__nav">
<a href="/dashboard" class="dashboard__nav-link dashboard__nav-link--active" aria-current="page">Dashboard</a>
<a href="/items" class="dashboard__nav-link">Items</a>
<a href="/settings" class="dashboard__nav-link">Settings</a>
</nav>
{/snippet}
<h1>Dashboard</h1>
<p>Your content here.</p>
</Dashboard> <script setup>
import Dashboard from '@/components/rizzo/Dashboard.vue';
</script>
<template>
<Dashboard>
<template #default>
<aside class="dashboard__sidebar" aria-label="Dashboard navigation">
<nav class="dashboard__nav">
<a href="/dashboard" class="dashboard__nav-link dashboard__nav-link--active" aria-current="page">Dashboard</a>
<a href="/items" class="dashboard__nav-link">Items</a>
<a href="/settings" class="dashboard__nav-link">Settings</a>
</nav>
</aside>
<main class="dashboard__main">
<h3>Main content</h3>
<p>Put your page content here. Combine with Card, Table, and other Rizzo components.</p>
</main>
</template>
</Dashboard>
</template> import { Dashboard } from './components/react';
<Dashboard
sidebarLabel="Dashboard navigation"
sidebar={
<nav className="dashboard__nav">
<a href="/dashboard" className="dashboard__nav-link dashboard__nav-link--active" aria-current="page">Dashboard</a>
<a href="/items" className="dashboard__nav-link">Items</a>
<a href="/settings" className="dashboard__nav-link">Settings</a>
</nav>
}
>
<div>
<h3>Main content</h3>
<p>Put your page content here. Combine with Card, Table, and other Rizzo components.</p>
</div>
</Dashboard> Props (Astro) sidebarLabel — Aria-label for the sidebar (default: "Dashboard navigation").class — Optional class on the root .dashboard element. Slot sidebar: optional. If provided, replaces the default nav links. Default slot: main content.
BEM classes dashboard — Root flex container (column on mobile).dashboard__sidebar — Sidebar column.dashboard__nav — Nav container inside sidebar.dashboard__nav-link — Nav link; use dashboard__nav-link--active for current page.dashboard__main — Main content area. Other frameworks: Vanilla · Svelte · Vue · React
npm 
pnpm 
yarn 
bun