Stalk UI

Component

Carousel

Cycles through slides of content with prev/next controls.

Install

Run the CLI to copy the source into your project.

pnpm dlx @stalk-ui/cli add @stalk-ui/carousel

Examples

Live previews render through the docs app's PandaCSS codegen.

Theme
<div style={{ paddingInline: 40, width: 320 }}>
  <Carousel>
    <Carousel.Content>
      {Array.from({ length: 5 }, (_, i) => (
        <Carousel.Item key={i}>
          <div
            style={{
              alignItems: 'center',
              background: 'var(--colors-bg-subtle)',
              border: '1px solid var(--colors-border-default)',
              borderRadius: 8,
              display: 'flex',
              height: 160,
              justifyContent: 'center',
            }}
          >
            {i + 1}
          </div>
        </Carousel.Item>
      ))}
    </Carousel.Content>
    <Carousel.Previous />
    <Carousel.Next />
  </Carousel>
</div>

Props

Public component props extracted from the source TypeScript types.

PropTypeRequiredDefaultDescription
`opts``CarouselOptions`No--
`orientation``CarouselOrientation`No--
`plugins``CarouselPlugin`No--
`setApi``(api: CarouselApi) => void`No-Receives the Embla API once initialized, for external controls.

Variants

Variant axes exposed by the underlying PandaCSS recipe or slot recipe.

VariantValues
`orientation``horizontal`, `vertical`

Registry

Files this component contributes to your registry install.

  • Manifest: `/r/carousel.json`
  • Recipe: `carousel`
  • Files: `src/components/ui/carousel.tsx`