Responsive dashboard layout with collapsible sidebar
Views
5.7K
Copies
1.7K
Likes
919
Comments
0
Copy rate
29.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.