Adaptive Density
AI-powered layout density controller that learns from user behavior patterns. Offers three density levels with visual confidence indicators and contextual AI insights.
Preview
AI-adaptive layout spacing control with learning simulation
Adaptive Density
AI-optimized layout spacing
AI Insight: Based on your usage patterns, you prefer denser layouts during morning hours and spacious layouts in the afternoon. Auto-adjustment is enabled.
Density Levels
Different pre-selected density states
Custom AI Insight
Override the default AI insight message
Adaptive Density
AI-optimized layout spacing
AI Insight: Your morning workflow benefits from compact layouts. Auto-adjustment to spacious mode at 2pm is enabled.
Props
AdaptiveDensity component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | 'compact' | 'comfortable' | 'spacious' | 'comfortable' | Default density level when uncontrolled |
value | 'compact' | 'comfortable' | 'spacious' | — | Controlled density value |
onValueChange | (density: DensityLevel) => void | — | Callback when density changes |
options | DensityOption[] | Default options | Custom density options array |
confidence | number | 72 | AI confidence percentage (0-100) |
aiInsight | string | Default message | Custom AI insight message |
enableLearning | boolean | true | Enable learning simulation animation |
className | string | — | Additional CSS classes |
DensityOption Type
interface DensityOption {
id: DensityLevel
label: string
icon: LucideIcon
spacing: string
description: string
}
type DensityLevel = 'compact' | 'comfortable' | 'spacious'Usage
Import and implementation example
import { AdaptiveDensity, type DensityLevel } from '@/blocks/adaptive-ui/adaptive-density'
export default function Example() {
const [density, setDensity] = useState<DensityLevel>('comfortable')
return (
<>
{/* Basic usage with defaults */}
<AdaptiveDensity />
{/* Pre-selected density */}
<AdaptiveDensity defaultValue="compact" />
{/* Controlled mode */}
<AdaptiveDensity
value={density}
onValueChange={setDensity}
/>
{/* High confidence with custom insight */}
<AdaptiveDensity
confidence={92}
aiInsight="Your usage shows preference for spacious layouts during focused work."
/>
{/* Disable learning animation */}
<AdaptiveDensity enableLearning={false} />
</>
)
}Features
Built-in functionality
- Three density levels: Compact, Comfortable, and Spacious options with distinct spacing
- AI learning simulation: Visual feedback with spinning icon when preferences are being learned
- Confidence indicator: Shows AI confidence percentage in recommendations
- Contextual AI insights: Display personalized recommendations based on usage patterns
- Controlled & uncontrolled modes: Flexible state management for integration
- Visual feedback: Active state highlighting with smooth transitions
- Customizable options: Override default density configurations
- Dark mode: Full dark mode support with proper color contrast
Accessibility
ARIA support and keyboard navigation
ARIA Attributes
role="radiogroup" on options containerrole="radio" on each density optionaria-checked for selected optionKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate to density options |
| Arrow Keys | Move between density options |
| Enter / Space | Select the focused option |
Notes
- Options behave as a radio group for screen readers
- Active option is visually distinct with indigo styling
- Learning state is announced with spinning icon
- AI insight section is properly labeled