Carousel

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path ships no JavaScript, so Carousel is styled but inert: its behavior comes from carousel. For that behavior with no framework, use the node-tree path below.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class carousel, with 13 modifiers:

• .carousel
• .carousel-center
• .carousel-control
• .carousel-dot
• .carousel-dot-active
• .carousel-end
• .carousel-indicators
• .carousel-item
• .carousel-next
• .carousel-number
• .carousel-number-active
• .carousel-prev
• .carousel-root
• .carousel-vertical

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react

import { Carousel } from "@wizeworks/silicaui-react";

Props

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

import type { CSSProperties } from "react";
import { Carousel, CarouselItem } from "@wizeworks/silicaui-react";
import { Section } from "../lib/Section";

const SLIDES = ["primary", "secondary", "accent", "info", "success"] as const;

function slideStyle(color: string): CSSProperties {
    return {
        backgroundColor: `var(--color-${color})`,
        color: `var(--color-${color}-content, #fff)`,
    };
}

export function CarouselDemo() {
    return (
        <>
            <Section title="Real use · loop + autoplay">
                <Carousel loop autoplay={3000} className="max-w-lg gap-4 rounded-box">
                    {SLIDES.map((color) => (
                        <CarouselItem
                            key={color}
                            className="flex h-40 w-full shrink-0 items-center justify-center rounded-box font-semibold"
                            style={slideStyle(color)}
                        >
                            {color}
                        </CarouselItem>
                    ))}
                </Carousel>
            </Section>

            <Section title="Numbered indicators, no loop">
                <Carousel indicators="numbers" className="max-w-lg gap-4 rounded-box">
                    {SLIDES.slice(0, 3).map((color) => (
                        <CarouselItem
                            key={color}
                            className="flex h-32 w-full shrink-0 items-center justify-center rounded-box font-semibold"
                            style={slideStyle(color)}
                        >
                            {color}
                        </CarouselItem>
                    ))}
                </Carousel>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

Carousel — carousel; unlike Accordion/Tabs/Menu, Track/Prev/Next/Dot aren't part of the public React API (Carousel/CarouselItem only), so the macro builds that inner structure itself from node.children, matching what the React component does internally. Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("Carousel", "carousel", { /* props */ }, [/* children */]);
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "carousel carousel-primary" rather than passing a colour as a prop.

Takes children

yes

Hydrated by

carousel

Load @wizeworks/silicaui-behaviors on the page or this markup renders correctly and does nothing.