Dashboard Shell
An app starter: a sidebar that morphs into an icon rail, breadcrumbs, KPI cards, a live area chart and an activity feed.
- Zero dependencies
- React + Tailwind
- Accessible
- Reduced-motion aware
Preview
Animated · Full motion: idle animation, physics and effects. animated (default)
The sidebar collapses to an icon rail with a gliding active indicator and becomes a drawer on mobile. The area chart draws itself and has a hover crosshair with a tooltip. Clean slots for your real data.
Installation
$ npx shadcn@latest add https://guetix.com/r/dashboard-shell.json
Uses the shadcn CLI. It creates components/guetix/dashboard-shell.tsx and installs nothing else.
Usage
example.tsx
import { DashboardShell } from "@/components/guetix/dashboard-shell";
export default function Example() {
return <DashboardShell />;
}
SaaS dashboardsAdmin panelsInternal tools
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| brand | string | — | Brand. |
| animated | boolean | true | false = the calm “Regular” version (no idle or ambient motion). |
Accessibility
- Landmarks (nav, header, main), aria-current on the active page, labelled chart.