Dashboard Shell
A dashboard shell with a collapsible rail and real routing between views.
- Category
- Templates
- Added
- 2026-09-01
- Deps
- 1
- Updated
- 2026-09-01
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Props
// Full, shippable page — real size at normal type scale. The registry
// preview above is a scaled-down miniature of this same composition, not
// a different component.
"use client";
import { useState } from "react";
import { LayoutDashboard, Users, CreditCard, Settings, Search, Bell, PanelLeft } from "lucide-react";
const NAV = [
{ icon: LayoutDashboard, label: "Overview" },
{ icon: Users, label: "Customers" },
{ icon: CreditCard, label: "Billing" },
{ icon: Settings, label: "Settings" },
];
const STATS = [
{ label: "Revenue", value: "$48.2k" },
{ label: "Users", value: "2,318" },
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this template
A shell's entire job is navigation state: which view is active, whether the rail is collapsed, and how the content region reflows when it changes. A static mockup of a dashboard demonstrates none of that, which is why this was rewritten to actually navigate. Two details are worth copying. The rail collapses by transitioning its width rather than by unmounting its labels — a mount/unmount swap makes the content region jump, while a width transition lets everything beside it reflow continuously. And each nav item keeps its icon in the same position at both widths, so collapsing reads as the labels sliding away rather than as the whole rail being rebuilt; the labels are conditionally rendered but the icon never moves. Every view swaps both the KPI row and the activity list, so switching sections changes real content rather than just a highlight. The collapse control carries aria-expanded and each item carries aria-current, because a rail that communicates state only through background color is unusable in high-contrast mode.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Documentation Page
templatesA docs shell where the sidebar routes, search filters the tree and the ToC tracks the article.
Auth Screens
templatesSign in, sign up and reset as one component — layout and mode switching only, with no submit logic.
Waitlist Page
templatesA single-purpose pre-launch page: headline, email capture form, and a joined-count signal.