Responsive dashboard layout with collapsible sidebar
Views
7.4K
Copies
1.8K
Likes
1.3K
Comments
0
Copy rate
25.0%
Prompt
Build a responsive dashboard layout component in React + Tailwind for a [product_type] application. Requirements:
- Collapsible sidebar (expanded: 240px, collapsed: 64px icon-only)
- Sidebar state persisted to localStorage
- Top navbar with breadcrumbs and user avatar
- Mobile: sidebar becomes a slide-over drawer with backdrop
- Breakpoint: 768px for mobile/desktop
- All colors from CSS variables (dark mode compatible)
- Smooth 200ms transitions
- Keyboard shortcut [shortcut_key] to toggle sidebarCustomise this prompt
Fill in 2 variables to personalise this prompt
Preview
Build a responsive dashboard layout component in React + Tailwind for a [product_type] application. Requirements:
- Collapsible sidebar (expanded: 240px, collapsed: 64px icon-only)
- Sidebar state persisted to localStorage
- Top navbar with breadcrumbs and user avatar
- Mobile: sidebar becomes a slide-over drawer with backdrop
- Breakpoint: 768px for mobile/desktop
- All colors from CSS variables (dark mode compatible)
- Smooth 200ms transitions
- Keyboard shortcut [shortcut_key] to toggle sidebar
Example output
UI Preview
This content is user-generated and runs in a sandboxed environment.