Magnified Doc
A dock of icons that magnify near the pointer and switch the content of the stage above them.
Examples
Workspace
Each icon is a tab. The stage shows live content per app, and the dot under the icon marks the open one.
- ILCabin list for the coast tripInes Laurent09:12
- TRFerry times changed on FridayTomas Reyes08:40
- ADPhotos from the north ridgeAmara DialloMon
- 08:30Leave the harbour
- 12:00Lunch at the ridge hut
- 18:45Sunset at the dunes
Two warm layers for the ridge, the evenings drop to 9 degrees. The last ferry leaves at 20:10, so dinner stays near the harbour. Bring the long lens for the dunes.
Wallpapers
Images work as icons too. The stage wipes to the chosen wallpaper with transition='clip'.
Installation
npx shadcn@latest add https://ui.ndekocode.dev/r/motion-magnified-doc.jsonComponent API
MagnifiedDoc
Takes the props of ImageTabs except orientation, which is always horizontal: defaultValue, value, onValueChange, className and children.
MagnifiedDocDock
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | The MagnifiedDocItem elements. | |
magnification | number | 1.6 | The scale of the icon right under the pointer. |
distance | number | 120 | How far from the pointer, in pixels, the icons still grow. |
aria-label | string | The name of the dock. | |
className | string | Classes of the dock, laid over the bottom of the stage by default. |
MagnifiedDocItem
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | The value of the panel it opens. | |
label | string | The name shown above the icon and read by assistive technology. | |
children | ReactNode | An icon or an image. | |
className | string | Optional classes of the icon tile. |
MagnifiedDocStage, MagnifiedDocPanel, MagnifiedDocImage
The same parts as ImageTabsFrame, ImageTabsPanel and ImageTabsImage: the stage takes transition ('fade' or 'clip'), a panel takes a value and any content, an image takes value, src and alt.