PillNav
Navegación en píldora con resaltado deslizante.
- Código: RODD·CP·035
- Familia: Componentes
- Origen: React Bits (David Haz) · Licencia MIT + Commons Clause
Cómo instalarlo
npx shadcn@latest add https://reactbits.dev/r/PillNav-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 |
|---|
| logo | string | - |
| logoAlt | string | Logo |
| items | PillNavItem[] | - |
| activeHref | string | undefined |
| className | string | '' |
| ease | string | power3.easeOut |
| baseColor | string | #fff |
| pillColor | string | #120F17 |
| hoveredPillTextColor | string | #120F17 |
| pillTextColor | string | baseColor |
| onMobileMenuClick | () => void | undefined |
| initialLoadAnimation | boolean | true |
Otros efectos de componentes
- SpecularButton — Botón de cristal con luz especular que recorre su borde.
- Terminal — Terminal animado que escribe comandos.
- AnimatedList — Lista con entrada escalonada y navegación con teclado.
- CardNav — Barra de navegación que se expande en paneles de tarjetas.
- Counter — Contador de rodillos animado con easing.
- Dock — Dock estilo macOS con magnificación por proximidad.