Display

Carousel

A row of slides that scrolls sideways. No autoplay.

import { Carousel } from "@flinbu/seed";

Theme presets

Seed

Meadow

Dusk

Ember

Tide

Rose

import { Card, Carousel } from "@flinbu/seed";

<Carousel className="w-full max-w-xl" aria-label="Theme presets" slidesPerView={2.5} items={PRESETS.map((p) => (
  <Card key={p.name} className="flex flex-col gap-sm p-sm">
    <div className="flex h-(--size-5xl) overflow-hidden rounded-md">{p.colors.map((c) => <span key={c} className="flex-1" style={{ background: c }} />)}</div>
    <span className="text-primary label-label-2-medium">{p.name}</span>
  </Card>
))} />

Use it for

Theme presets, templates, screenshots.

Use something else for

Anything people must see: put it first, not on slide 4.

Props

Prop	Type	Default	Description
`items / children`	`ReactNode[]`	–	Slides.
`slidesPerView`	`number`	`1`	Fractions hint at more.
`loop`	`boolean`	`false`	Wrap around.
`showDots`	`boolean`	`true`	Dots or '2 / 6'.

Accessibility

Each slide is a group named '3 of 6'; the track moves with arrow keys.
Previous and Next disable at the ends unless loop.