Moodinary/UI

Carousel

Pocas piezas del mismo peso (novedades, onboarding). Nunca para datos importantes.

Muestra una tarjeta por vez con botones e indicadores. Sin avance automático.

Instalación

shadcn
npx shadcn@latest add https://design.moodinary.com/r/carousel.json
import
import { Carousel } from "@moodinary/ui/components/carousel";

Ejemplos

Tres tarjetas cortas con badge, título y texto.

Ejemplo

Calendario de la organización

Una tarjeta para presentar eventos de una escuela o una empresa.

Código
slides.tsx
import { Badge } from "@moodinary/ui/components/badge";
import { Carousel } from "@moodinary/ui/components/carousel";

const slides = [
	{
		badge: "Ejemplo",
		text: "Una tarjeta para presentar eventos de una escuela o una empresa.",
		title: "Calendario de la organización",
	},
	{
		badge: "Tip",
		text: "Elegí mensajes breves que se puedan leer sin avanzar por todo el carrusel.",
		title: "Una cosa por tarjeta",
	},
	{
		badge: "Guía",
		text: "Usá los botones o indicadores para cambiar de tarjeta a tu ritmo.",
		title: "Sin avance automático",
	},
];

export default function CarouselSlides() {
	return (
		<Carousel
			label="Novedades de ejemplo"
			slides={slides.map((slide) => (
				<div className="px-6" key={slide.title}>
					<Badge variant="org">{slide.badge}</Badge>
					<h3 className="mt-2.5 mb-1 font-medium text-[15px]">{slide.title}</h3>
					<p className="text-ink-2">{slide.text}</p>
				</div>
			))}
		/>
	);
}

Props

Carousel

PropTipoDefaultDescripción
labelstring-Nombre del carrusel.
slidesReactNode[]-Tarjetas.
classNamestring-Clases extra.

Cuándo sí y cuándo no

Hacé
  • Usá pocas tarjetas.
  • Que cada una se entienda sola.
  • Dejá que la persona avance.
Evitá
  • No pongas información crítica en la tercera tarjeta.
  • No agregues avance automático.
  • No lo uses para datos de comparación.

Accesibilidad

  • La región lleva aria-roledescription="carrusel".
  • Flechas cambian de tarjeta.