Dashboard Shell
NewComplete dashboard layout with sidebar, header, and content area. Fully responsive with RTL support.
Preview
Dashboard Content
This is the main content area. Add your dashboard content here.
Usage
Reacttsx
Features
Responsive Sidebar
Desktop sidebar and mobile sheet with smooth animations
Bilingual Navigation
Support for English and Arabic navigation labels
User Menu Integration
Built-in user menu with profile and logout actions
Notification Center
Integrated notification system with unread badges
RTL Support
Automatic layout flip for right-to-left languages
Sticky Header
Fixed header with backdrop blur for modern look
Examples
With Notifications
Dashboard with Notifications
tsx
Full Featured
Full Featured Dashboard
Complete dashboard with all features enabled
tsx
NavItem Type
Props
| Name | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | Content to display in the main area |
navItems | NavItem[] | — | Navigation menu items with bilingual titles |
user | { name?: string; email?: string; image?: string; initials?: string } | — | User information for the user menu |
notifications | Notification[] | — | Notifications for the notification center |
logo | React.ReactNode | — | Custom logo component |
logoHref | string | — | URL for the logo link |
sidebarWidth | string | — | Width of the sidebar |
onProfileClick | () => void | — | Callback when profile is clicked |
onSettingsClick | () => void | — | Callback when settings is clicked |
onLogout | () => void | — | Callback when logout is clicked |
relative | boolean | — | Use relative positioning instead of fixed (useful for embedded examples) |
Accessibility
- ✓Keyboard navigation with Tab and Enter keys
- ✓ARIA current="page" on active navigation items
- ✓Proper semantic HTML with nav, main, and header elements
- ✓Focus management in mobile sheet
- ✓Screen reader friendly labels for all interactive elements
Use Cases
Admin panel layouts
SaaS application shells
Analytics dashboard frames
Content management systems