docs / patterns / feature-carousel

FeatureCarousel

an auto-advancing showcase for a handful of features. one large card cross-fades between entries, and a rail lets you jump straight to any of them.

intensity · structuresrsc · client

provenance

shaped from sisu-plus

layer

core / patterns

intensity

structures · organizes a region, stays out of the content

composition

landing and marketing sections that sell three to six featuresa sentence or two per body, the card is a headline surfacenot for content someone must read, anything critical lives outside the rotationno interactive content inside a card, the selectors are the only targets

a11y

each selector is a labelled button with aria-current · the progress line is aria-hidden · reduced motion stops the auto-advancejest-axe

dependencies

motion
live demo · try it out
01

Owns your data

Everything stays local, nothing phones home.

customize
cardsthe feature set on show
autoAdvanceMshold per card before the next
4600
usagecopy
import { FeatureCarousel } from "@usva-ui/react/patterns/feature-carousel";

<FeatureCarousel
  cards={[
    { title: "Owns your data", body: "Everything stays local, nothing phones home." },
    { title: "Reads at a glance", body: "Dense dashboards that still breathe." },
    { title: "Yours to fork", body: "Copy the source in, or install the package." },
    { title: "Fast by default", body: "The 20ms most people skip, and everyone feels." },
  ]}
/>

props

proptypedefaultnotes
cardsFeatureCard[]—the features: { title, body?, id? }. give each an id when titles can repeat.
autoAdvanceMsnumber4600how long each card holds before the next.

get it

bun add @usva-ui/reactcopy
usagecopy
import { FeatureCarousel } from "@usva-ui/react/patterns/feature-carousel";

<FeatureCarousel
  cards={[
    { title: "Owns your data", body: "Everything stays local." },
    { title: "Reads at a glance", body: "Dense, but it breathes." },
    { title: "Yours to fork", body: "Copy the source, or install it." },
  ]}
/>