This block combines the Dashboard layout (sidebar + main), Card components for stats, and a Table for data. Use it as a starting point for app dashboards. You get the same structure when you scaffold with npx rizzo-css init --template dashboard.
Preview Below is the block rendered with Rizzo components. In your app this would be your root layout and page content.
Recent activity Recent activity list Item one Done Today Item two Pending Yesterday Item three Failed Jan 15
Usage Copy the snippet for your framework. Astro uses the Dashboard component; others use the same BEM structure (sidebar + main, stats grid, table).
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';
import Card from '../components/astro/Card.astro';
---
<Dashboard sidebarLabel="Dashboard 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="#" class="dashboard__nav-link">Items</a>
<a href="#" class="dashboard__nav-link">Settings</a>
</nav>
<div class="dashboard-page">
<header class="dashboard-page__header">
<h1 class="dashboard-page__title">Dashboard</h1>
<p class="dashboard-page__subtitle">Overview.</p>
</header>
<section class="dashboard-page__stats" aria-labelledby="stats-heading">
<h2 id="stats-heading" class="sr-only">Key metrics</h2>
<div class="dashboard-page__stats-grid">
<Card class="dashboard-page__stat">
<div class="card__body">
<span class="card__label">Total users</span>
<span class="card__value">1,234</span>
</div>
</Card>
<Card class="dashboard-page__stat">
<div class="card__body">
<span class="card__label">Revenue</span>
<span class="card__value">$12,345</span>
</div>
</Card>
</div>
</section>
</div>
</Dashboard> <!-- Sidebar + main. Use Dashboard component in Astro/Svelte or this structure in React/Vue/Vanilla. -->
<div class="dashboard">
<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="#" class="dashboard__nav-link">Items</a>
<a href="#" class="dashboard__nav-link">Settings</a>
</nav>
</aside>
<main class="dashboard__main">
<div class="dashboard-page">
<header class="dashboard-page__header">
<h1 class="dashboard-page__title">Dashboard</h1>
<p class="dashboard-page__subtitle">Overview.</p>
</header>
<section class="dashboard-page__stats" aria-labelledby="stats-heading">
<h2 id="stats-heading" class="sr-only">Key metrics</h2>
<div class="dashboard-page__stats-grid">
<div class="card dashboard-page__stat">
<div class="card__body">
<span class="card__label">Total users</span>
<span class="card__value">1,234</span>
</div>
</div>
<div class="card dashboard-page__stat">
<div class="card__body">
<span class="card__label">Revenue</span>
<span class="card__value">$12,345</span>
</div>
</div>
</div>
</section>
</div>
</main>
</div> <script>
import { Dashboard, Card } from '$lib/rizzo';
</script>
<Dashboard sidebarLabel="Dashboard 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="#" class="dashboard__nav-link">Items</a>
<a href="#" class="dashboard__nav-link">Settings</a>
</nav>
{/snippet}
{#snippet children()}
<div class="dashboard-page">
<header class="dashboard-page__header">
<h1 class="dashboard-page__title">Dashboard</h1>
<p class="dashboard-page__subtitle">Overview.</p>
</header>
<section class="dashboard-page__stats" aria-labelledby="stats-heading">
<h2 id="stats-heading" class="sr-only">Key metrics</h2>
<div class="dashboard-page__stats-grid">
<Card class="dashboard-page__stat">
<div class="card__body">
<span class="card__label">Total users</span>
<span class="card__value">1,234</span>
</div>
</Card>
<Card class="dashboard-page__stat">
<div class="card__body">
<span class="card__label">Revenue</span>
<span class="card__value">$12,345</span>
</div>
</Card>
</div>
</section>
</div>
{/snippet}
</Dashboard> <script setup>
import Dashboard from '@/components/rizzo/Dashboard.vue';
import Card from '@/components/rizzo/Card.vue';
</script>
<template>
<Dashboard>
<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="#" class="dashboard__nav-link">Items</a>
<a href="#" class="dashboard__nav-link">Settings</a>
</nav>
</aside>
<main class="dashboard__main">
<div class="dashboard-page">
<header class="dashboard-page__header">
<h1 class="dashboard-page__title">Dashboard</h1>
<p class="dashboard-page__subtitle">Overview.</p>
</header>
<section class="dashboard-page__stats" aria-labelledby="stats-heading">
<h2 id="stats-heading" class="sr-only">Key metrics</h2>
<div class="dashboard-page__stats-grid">
<Card class="dashboard-page__stat">
<div class="card__body">
<span class="card__label">Total users</span>
<span class="card__value">1,234</span>
</div>
</Card>
<Card class="dashboard-page__stat">
<div class="card__body">
<span class="card__label">Revenue</span>
<span class="card__value">$12,345</span>
</div>
</Card>
</div>
</section>
</div>
</main>
</Dashboard>
</template> import { Dashboard, Card } from './components/react';
export function DashboardBlock() {
const sidebar = (
<nav className="dashboard__nav">
<a href="/dashboard" className="dashboard__nav-link dashboard__nav-link--active" aria-current="page">Dashboard</a>
<a href="#" className="dashboard__nav-link">Items</a>
<a href="#" className="dashboard__nav-link">Settings</a>
</nav>
);
return (
<Dashboard sidebar={sidebar}>
<div className="dashboard-page">
<header className="dashboard-page__header">
<h1 className="dashboard-page__title">Dashboard</h1>
<p className="dashboard-page__subtitle">Overview.</p>
</header>
<section className="dashboard-page__stats" aria-labelledby="stats-heading">
<h2 id="stats-heading" className="sr-only">Key metrics</h2>
<div className="dashboard-page__stats-grid">
<Card className="dashboard-page__stat">
<div className="card__body">
<span className="card__label">Total users</span>
<span className="card__value">1,234</span>
</div>
</Card>
<Card className="dashboard-page__stat">
<div className="card__body">
<span className="card__label">Revenue</span>
<span className="card__value">$12,345</span>
</div>
</Card>
</div>
</section>
</div>
</Dashboard>
);
} Get this block via CLI Scaffold a new project with the Dashboard template (Vanilla, Astro, Svelte, React, or Vue):
npx rizzo-css init --framework astro --template dashboard --yes Or add to an existing project:
npx rizzo-css add --framework astro --template dashboard Components used Dashboard — layout with sidebar + mainCard — stat cardsTable — data table (with Badge for status)