PatternDisponible

Carousel

Diapositivas desplazables con controles anterior y siguiente.

Build

Customize

Ship

Loading example…

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/carousel.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

'use client';

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
} from '@/components/ui/carousel';

export default function Demo() {
  return (
    <Carousel
      className="mx-12 w-[calc(100%-6rem)] max-w-sm"
      aria-label="Component highlights"
    >
      <CarouselContent>
        {['Build', 'Customize', 'Ship'].map((title, index) => (
          <CarouselItem key={title}>
            <div className="grid min-h-48 place-content-center gap-3 rounded-lg border-2 border-ink bg-card text-card-foreground p-6 text-center">
              <p className="bl-type-eyebrow">0{index + 1}</p>
              <h3 className="bl-type-section-title">{title}</h3>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

La composición hereda los estados de sus controles. Prueba valores vacíos, contenido, carga y error cuando correspondan a la aplicación.
Los ejemplos de esta página son ejecutables; el código mostrado usa los mismos componentes. La lógica de negocio pertenece al consumidor.
Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

Prop	Tipo	Default	Descripción
orientation	horizontal / vertical	horizontal	Scrolling axis.
opts	EmblaOptionsType	—	Options passed to Embla.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Conserva las etiquetas visibles y el HTML semántico del ejemplo.

Mantén el foco visible y comprueba la composición mediante el teclado.

Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.

Las flechas respetan el eje y RTL; los controles anidados conservan sus teclas. El movimiento reducido cambia de diapositiva sin animación.