CarouselPRO
Carousel forma parte del apartado «Layout y marca» del kit. Cards, contenedores, stacks, carruseles y las piezas de identidad del kit (Logo, Sello, olas).
Instalación#
bash
pnpm add @tsukira/uiUso#
tsx
import { Carousel } from "@tsukira/ui"; export function Ejemplo() { return <Carousel />;}Ejemplos#
Los ejemplos detallados de Carousel están en camino. Mientras tanto, su demo interactiva vive en la página del grupo.
Ver demo en Layout y marcaAPI#
CarouselPropsextends Omit<HTMLAttributes<HTMLDivElement>, 'role'>| Prop | Tipo | Default | Descripción |
|---|---|---|---|
children* | ReactNode | — | Slides como hijos (un div por slide es lo más común). |
options | CarouselOptions | — | Opciones del carrusel (loop, axis). |
showArrows | boolean | — | Mostrar flechas prev/next. |
showDots | boolean | — | Mostrar puntos de paginación. |
showCounter | boolean | — | Mostrar contador "1 / 5". |
autoplay | number | — | Auto-play en ms (0 = off). |
gap | number | — | Gap entre slides (px). |
duration | number | 25 | Velocidad de la animación. Default 25. |
CarouselSlidePropsextends Omit<HTMLAttributes<HTMLDivElement>, 'title'>| Prop | Tipo | Default | Descripción |
|---|---|---|---|
cover | string | ReactNode | — | Imagen de fondo (string url) o cualquier ReactNode como cover. |
title | ReactNode | — | Título sobre la slide. |
description | ReactNode | — | Descripción / caption. |
eyebrow | ReactNode | — | Eyebrow (etiqueta superior). |
action | ReactNode | — | Acción CTA. |
captionPosition | 'bottom' | 'top' | 'left' | 'right' | 'center' | — | Posición del bloque de texto. |
overlay | boolean | — | Overlay gradiente sobre la cover (para que el texto se lea). |
height | number | string | — | Altura del slide (px o string CSS). |