Dock
Dock estilo macOS con magnificación por proximidad.
- Código: RODD·CP·015
- Familia: Componentes
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/Dock-TS-TW
Cuándo usarlo
Sustituyen a un componente estándar cuando la experiencia es parte del producto.
Props para personalizarlo
| Prop | Tipo | Por defecto |
|---|
| items | DockItemData[] | [] |
| className | string | "" |
| distance | number | 200 |
| panelHeight | number | 68 |
| baseItemSize | number | 50 |
| dockHeight | number | 256 |
| magnification | number | 70 |
| spring | SpringOptions | { mass: 0.1, stiffness: 150, damping: 12 } |
Otros efectos de componentes
- FlowingMenu — Menú con marquesina que entra por el borde más cercano.
- GooeyNav — Navegación cuyo indicador se deforma como una gota.
- MagicBento — Bento grid con partículas, foco de luz y borde brillante.
- MediaBetweenText — Una imagen o vídeo que se abre entre dos palabras.
- PillNav — Navegación en píldora con resaltado deslizante.
- ScrollStack — Tarjetas que se apilan con profundidad al hacer scroll.