dashboard-shell-setup

Community

Responsive dashboard shell, personalized for every user.

Authornathanonn
Version1.0.0
Installs0

System Documentation

What problem does it solves? Building a flexible, responsive, and user-friendly dashboard layout from scratch is time-consuming. This skill provides a complete, production-ready dashboard shell with a resizable sidebar, two-level navigation, and mobile support, saving development effort and ensuring a polished user experience.

Core Features & Use Cases:

  • Resizable & Collapsible Sidebar: Implement a desktop-friendly sidebar with drag-to-resize and collapse-to-icon modes, persisting user preferences.
  • Mobile-Responsive Navigation: Provide seamless navigation on mobile devices via a drawer (Sheet component).
  • Use Case: Quickly set up the main protected layout for a new SaaS application, complete with user-specific UI preferences and support for multi-tenant organization switching.

Quick Start: Set up a dashboard shell with a resizable sidebar and two-level navigation for my Next.js application.

Dependency Matrix

Required Modules

react-resizable-panelslucide-reactshadcn/ui

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: dashboard-shell-setup
Download link: https://github.com/nathanonn/next-sololedger/archive/main.zip#dashboard-shell-setup

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository