Ejemplos: cada patrón, en vivo, con la fuente completa
Cada ejemplo es una demo funcional del paquete npm publicado más el archivo completo que la respalda: listo para copiar y pegar, y editable en vivo en Storybook. Renderizado en el servidor como todo lo demás de este sitio.
Casos de uso
Patrones completos por objetivo: demo en vivo, código e instalación shadcn.
- Fila estilo NetflixTarjetas tipo póster, flechas al pasar el cursor, degradado en los bordes, arrastre.
- Pestañas desplazablesUna tira de pestañas que desborda con elegancia y centra la pestaña activa.
- Chips de filtroUna barra de chips que desplaza los filtros nuevos a la vista sin romper los clics.
- Riel de categoríasUna fila de departamentos de tienda: flechas conscientes de los bordes, imágenes lazy, analítica.
- Carrusel de testimoniosTarjetas de reseñas que se ajustan al centro y se abren en abanico — CSS, no un motor de slider.
Básicos
- Primeros pasosEl menú mínimo: elementos, dos flechas, visibilidad lista para usar.
- Un elemento por vistaUn menú del ancho de un elemento: una tarjeta llena la fila.
- Desplazarse de un elemento en unoLas flechas avanzan un solo elemento en lugar de una página completa.
- Flechas debajo del menúLas flechas son tus componentes: colócalas donde quieras.
Posición y desplazamiento
- Centrar el elemento clicadoscrollToItem con inline: center — el patrón de pestañas desplazables.
- Desplazarse a un elemento por idLlega al menú desde fuera con apiRef.
- Guardar y restaurar la posición de desplazamientoMantén el desplazamiento entre desmontajes y recargas de página.
- Animación de desplazamiento personalizadaTrae tu propio easing y duración para los desplazamientos programáticos.
- Indicador de progreso de desplazamientoUna barra de progreso impulsada por qué elementos son visibles.
Entrada y gestos
- Arrastrar para desplazarse con el ratónArrastre con el ratón que sigue dejando funcionar los clics.
- Deslizar en escritorioDeslizamiento con inercia para usuarios de ratón.
- Ocultar las flechas en móvilDesplazamiento solo táctil en pantallas pequeñas, flechas en escritorio.
- Evitar el desplazamiento del bodyLa rueda sobre el menú desplaza el menú, no la página.
Elementos dinámicos
- Cargar más cuando aparece el finalAñadido infinito impulsado por la visibilidad del último elemento.
- Añadir un elemento y desplazarse a élEl patrón de chips de filtro: añadir y luego traer a la vista.
- Animar elementos al entrar y salirAnimaciones de añadir/eliminar con @formkit/auto-animate.
- 5.000 elementos y sigue siendo rápidoEl desplazamiento nativo escala — aquí no hace falta virtualización.
Diseño
Recetas
- Bucle infinitoBucle continuo desde la API pública — sin cambios en la biblioteca.
- AutoplayUn bucle que avanza solo con comportamiento de pausa accesible.
- Pestañas desplazables más allá de MUIMantén el contrato value/onChange de MUI; cambia la franja que hay debajo.
- Carrusel con ajuste de desplazamientoLas tarjetas se ajustan al centro y se abren en abanico con CSS — sin motor de carrusel.