Focus Mode
An atmospheric focus-mode interaction that isolates selected cards or sections by smoothly dimming surrounding distractions with zero layout shift, tactile spring scaling, and Escape key dismissal.
Loading preview…
Installation
Add the component directly to your repository using shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/focus-mode
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| items | FocusModeItem[] | [...] | List of dashboard cards or sections |
| focusedId | string | null | null | Controlled focused card ID |
| onFocusChange | (id: string | null) => void | undefined | Callback fired when focused element changes |
| dimOpacity | number | 0.2 | Opacity applied to unfocused background cards |