Component

Carousel

A collapsible, expand/collapse panel set for FAQs and disclosure sections. Compose it from Carousel, CarouselItem, CarouselTrigger, and CarouselContent.

Single (collapsible)

Only one panel is open at a time. With collapsible, clicking the open panel closes it.

Orders ship within one business day and arrive in 3–5 business days.

Installation

$pnpm add @refraction-ui/react-carousel

Usage

tsx

import {
  Carousel,
  CarouselItem,
  CarouselTrigger,
  CarouselContent,
} from '@refraction-ui/react'

export function MyComponent() {
  return (
    <Carousel type="single" collapsible defaultValue="shipping">
      <CarouselItem value="shipping">
        <CarouselTrigger>How long does shipping take?</CarouselTrigger>
        <CarouselContent>Orders arrive in 3–5 business days.</CarouselContent>
      </CarouselItem>
      <CarouselItem value="returns">
        <CarouselTrigger>What is your return policy?</CarouselTrigger>
        <CarouselContent>Returns accepted within 30 days.</CarouselContent>
      </CarouselItem>
    </Carousel>
  )
}

Multiple

Set type="multiple" to let several panels stay open at once.

Orders ship within one business day and arrive in 3–5 business days.

Reach our team any time at support@example.com — we reply within a day.

Props

Prop	Type	Default	Description
`type`	`'single' \| 'multiple'`	`'single'`	`single` keeps one item open at a time; `multiple` lets any number expand independently.
`collapsible`	`boolean`	`false`	When `type="single"`, allows the open item to be toggled fully closed.
`defaultValue`	`string \| string[]`	--	Uncontrolled initial open item(s). Use a string for `single`, an array for `multiple`.
`value`	`string \| string[]`	--	Controlled open item(s). Pair with `onValueChange`.
`onValueChange`	`(value: string \| string[]) => void`	--	Called whenever the open item(s) change.

Sub-components

Prop	Type	Default	Description
`CarouselItem.value`	`string`	--	Required unique identifier used to track the item’s open state.
`CarouselTrigger`	`button`	--	Clickable header that toggles its parent item. Renders a rotating chevron.
`CarouselContent`	`div`	--	Collapsible body shown only when the item is open (hidden via the `hidden` attribute otherwise).