Personalized Dashboard
Layout
AI
Dashboard
AI-personalized widget layout that adapts based on user role and usage patterns. Toggle between AI-recommended layouts and custom arrangements.
Preview
AI-optimized widget layout with priority scoring
Smart Dashboard
AI-personalized widget layout
1
Tasks Overview
95%
2
Team Activity
88%
3
Recent Tasks
82%
4
Upcoming Deadlines
75%
5
Team Messages
70%
6
Focus Time
65%
Layout optimized for your role as Product Manager
Custom Layout Mode
Switch to custom mode for manual arrangement
Smart Dashboard
AI-personalized widget layout
Tasks Overview
Team Activity
Recent Tasks
Upcoming Deadlines
Team Messages
Focus Time
Props
PersonalizedDashboard component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
widgets | Widget[] | Default widgets | Array of widgets to display in the dashboard |
defaultLayoutMode | 'ai-recommended' | 'custom' | 'ai-recommended' | Initial layout mode |
userRole | string | 'Product Manager' | User's role for AI optimization message |
columns | number | 3 | Number of columns in the grid |
onLayoutModeChange | (mode: LayoutMode) => void | — | Callback when layout mode changes |
onWidgetReorder | (widgets: Widget[]) => void | — | Callback when widget order changes |
onCustomize | () => void | — | Callback when customize button is clicked |
className | string | — | Additional CSS classes |
Widget Type
interface Widget {
id: number | string
name: string
icon: LucideIcon
priority: number // 0-100, used for AI sorting
category: string
}
type LayoutMode = 'ai-recommended' | 'custom'Usage
Import and implementation example
import { PersonalizedDashboard, type Widget } from '@/blocks/adaptive-ui/personalized-dashboard'
import { BarChart3, Users, Calendar } from 'lucide-react'
const customWidgets: Widget[] = [
{ id: 1, name: 'Analytics', icon: BarChart3, priority: 95, category: 'data' },
{ id: 2, name: 'Team', icon: Users, priority: 85, category: 'collaboration' },
{ id: 3, name: 'Schedule', icon: Calendar, priority: 75, category: 'time' },
]
export default function Example() {
const handleLayoutChange = (mode: LayoutMode) => {
console.log('Layout mode:', mode)
}
return (
<>
{/* Basic usage */}
<PersonalizedDashboard />
{/* Custom widgets and role */}
<PersonalizedDashboard
widgets={customWidgets}
userRole="Engineering Manager"
columns={3}
/>
{/* With callbacks */}
<PersonalizedDashboard
onLayoutModeChange={handleLayoutChange}
onCustomize={() => console.log('Opening customization')}
/>
</>
)
}Built With
2 componentsThis block uses the following UI components from the design system:
Features
Built-in functionality
- AI-powered sorting: Widgets sorted by priority score in AI mode
- Role-based optimization: Layout optimized for user role with banner message
- Two layout modes: AI-recommended and Custom manual arrangement
- Priority indicators: Visual progress bars showing widget priority scores
- Position badges: Numbered badges showing widget order in AI mode
- Configurable grid: Adjustable number of columns
- Customize action: Call-to-action button for further customization
- Dark mode: Full dark mode support with proper color contrast
Accessibility
ARIA support and keyboard navigation
ARIA Attributes
role="region" on dashboard containeraria-label for layout mode tabsaria-pressed on active tabKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between mode tabs and widgets |
| Enter / Space | Activate tab or customize button |
Notes
- Layout mode tabs are keyboard accessible
- Widget cards display priority visually and numerically
- Role-based banner clearly states the optimization context