Carousel

A horizontally scrollable carousel with snap points — built on Embla Carousel (web) with touch/mouse drag support.

1. Alpha

2. Bravo

3. Charlie

4. Delta

5. Echo

Installation

npm

npx @galaxy-stack/nebula-cli@latest add carousel

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add carousel

bun

bunx @galaxy-stack/nebula-cli@latest add carousel

Features

• ✅ Embla Carousel — performant, dependency-light (web)
• ✅ Snap points — snap-x mandatory scrolling
• ✅ Prev/Next controls — arrow buttons included
• ✅ Responsive — configurable slide width
• ✅ Mobile & web — React Native + Flutter implementations available

Usage

Vue

<script setup>
import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from '@/components/ui/carousel'
</script>

<template>
  <Carousel>
    <CarouselContent>
      <CarouselItem v-for="i in 5" :key="i">…</CarouselItem>
    </CarouselContent>
    <CarouselPrevious />
    <CarouselNext />
  </Carousel>
</template>

React

import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "@/components/ui/carousel"

export default function App() {
  return (
    <Carousel>
      <CarouselContent>
        {[1, 2, 3, 4, 5].map((i) => <CarouselItem key={i}>…</CarouselItem>)}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  )
}

Platform Availability

Framework	Status
React	✅ Complete (embla-carousel-react)
Vue	✅ Complete (embla-carousel-vue)
Angular	✅ Complete
React Native	✅ Complete
Flutter	✅ Complete