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