Carousel

A carousel with motion and swipe built using a tiny island.

tsx

1
2
3
4
5
6
7
8<Carousel>
  <CarouselContent>
    <CarouselItem>1</CarouselItem>
    <CarouselItem>2</CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Carousel — slider horizontal ou vertical. Chaque CarouselItem est un slide, snap sur le scroll. Boutons Previous/Next pour navigation, plus le scroll natif (drag/wheel) et le swipe tactile.

Installation

Terminal

$ bext ui add carousel

Usage

tsx

1
2
3
4
5
6
7
8
9
10import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "@bext-stack/ui/primitives"

<Carousel>
  <CarouselContent>
    <CarouselItem><Card>Slide 1</Card></CarouselItem>
    <CarouselItem><Card>Slide 2</Card></CarouselItem>
  </CarouselContent>
  <CarouselPrevious />
  <CarouselNext />
</Carousel>

Anatomy

<Carousel>
  ├── <CarouselContent>
  │   ├── <CarouselItem>slide 1</CarouselItem>
  │   ├── <CarouselItem>slide 2</CarouselItem>
  │   └── <CarouselItem>slide 3</CarouselItem>
  ├── <CarouselPrevious />
  └── <CarouselNext />
</Carousel>

API Reference

Carousel

Prop	Type	Default	Description
orientation	"horizontal" \| "vertical"	"horizontal"	undefined
children	ReactNode	—	undefined

CarouselContent

Prop	Type	Default	Description
children	ReactNode	—	undefined

CarouselItem

Prop	Type	Default	Description
children	ReactNode	—	Un slide. Par défaut basis-full. Pour multi-slide visible : basis-1/2 md:basis-1/3 …

CarouselPrevious / CarouselNext

Prop	Type	Default	Description
className	string	—	undefined

Data Attributes

Attributs qu'on peut cibler en CSS custom pour override le style par état.

Attribute	On	Values	Description
data-ui="carousel"	Carousel root	undefined	undefined
data-orientation	Carousel root	"horizontal" \| "vertical"	undefined

Keyboard

Key	Action
`Arrow Left / Right`	Slide précédent / suivant.
`Home / End`	Premier / dernier slide.

Accessibility

role="region" aria-roledescription="carousel". Chaque slide porte role="group" aria-roledescription="slide" aria-label="N of M".

Try it live

Open in play

Edit this component live in the bext playground. The PRISM + signals version is the bext-native idiom — fine-grained reactivity, no virtual DOM.

src/app/page.tsx 2 files · signals · runs in your browser

import { signalsIsland } from "@bext-stack/framework/signals";
import Showcase from "../islands/Showcase";

// A normal PRISM server page. The island below is rendered to HTML on the
// server, then hydrated on the client - only the signal-bound nodes update.
export default function Page() {
  return (
    <main style="max-width:680px;margin:0 auto;padding:48px 20px;font-family:Inter,system-ui,sans-serif;color:#0a0a0a">
      <h1 style="letter-spacing:-0.02em;margin-bottom:4px">Carousel</h1>
      <p style="color:#64748b;margin-top:0">Prev/next move an index signal; the track translateX is a reactive style.</p>
      {signalsIsland("Showcase", Showcase, {})}
    </main>
  );
}

Pure PRISM + real bext signals — fine-grained, no re-render.

src/app/page.tsx 2 files · react · runs in your browser

import Showcase from "../components/Showcase";

// A horizontal slide track. Prev/next buttons change the active index,
// which translates the track. State lives in the "use client" island.
export default function Page() {
  return (
    <main style={{ maxWidth: 640, margin: "0 auto", padding: "48px 20px", fontFamily: "Inter, system-ui, sans-serif" }}>
      <h1 style={{ letterSpacing: "-0.02em", marginBottom: 4 }}>Carousel</h1>
      <p style={{ color: "#64748b", marginTop: 0 }}>A scrollable set of slides with prev/next controls.</p>
      <Showcase />
    </main>
  );
}

The React idiom — same UI, for comparison.

← Card Checkbox →

On This Page