Carousel

Layout

A horizontally scrolling container that cycles through a set of items, one at a time.

Loading component...

Run the following command to add this component to your project:

$pnpm dlx static-ui add carousel

Import the component directly from the package:

import { Carousel } from "@static-ui/ui"

Common props available for this component:

Prop	Type	Description
className	string	Additional CSS classes to apply.

Requires `aria-roledescription="carousel"` and `aria-label` on the container. Each slide uses `role="group"` with `aria-roledescription="slide"`.

AccordionVertically stacked interactive headings with reveal panels.

Aspect RatioContent-sized to a desired ratio.

CardBounded content container.

CollapsibleExpandable content sections.

Scroll AreaCustom styled scroll container.

SeparatorVisual content divider.

TabsTabbed content panels.