[Carousel component](https://ui.shadcn.com/docs/components/carousel) of shadcn/ui collection uses [Embla Carousel](https://www.embla-carousel.com) under the hood.

So luckily it has full access to the embla API. You can easily get the instance of it via `setApi` prop:

```
const [cApi, setCApi] = useState<CarouselApi>()

return (
  <Carousel setApi={setCApi}>...</Carousel>
)
```

With API you can keep track of the current slide index like this:

```
const [slideIndex, setSlideIndex] = useState(0)

useEffect(() => {
  if (!cApi) return

  setSlideIndex(cApi.selectedScrollSnap())

  cApi.on('select', () => {
    setSlideIndex(cApi.selectedScrollSnap())
  })
}, [cApi])
```

But often you need not only the index but some information from the slide. For example, product id or any other current slide data.

To archive that let’s modify a bit the Carousel layout adding some data attributes:

```
<CarouselItem data-id={product.id}>...</CarouselItem>
```

Then we can use [slideNodes](https://www.embla-carousel.com/api/methods/#slidenodes) method to get the slides containers and search for the current slide via its index:

```
const index = cApi.selectedScrollSnap()
const curProductId = Number(cApi.slideNodes()[index].dataset.id)
```

## Autoplay plugin

You can control the [autoplay feature](https://www.embla-carousel.com/plugins/autoplay/) with 2 methods via embla API:

```
cApi.plugins().autoplay?.play()
cApi.plugins().autoplay?.stop()
```

And it’s possibly a good thing to wrap these methods into the `useCallback` hook.

If you need to have the information about the play status, you can subscribe to these events:

```
const [isPlaying, setIsPlaying] = useState(true)

cApi.on('autoplay:play', () => {
  setIsPlaying(true)
})

cApi.on('autoplay:stop', () => {
  setIsPlaying(false)
})
```

There is also [isPlaying](https://www.embla-carousel.com/plugins/autoplay/#isplaying) method in the API, but after some attempts to make it work consistently, I gave up. So my recommendation here is to have the state for play status and to update it with the help of `autoplay:play` and `autoplay:stop` events.

## scrollPrev / scrollTo

shadcn/ui Carousel component already has the `CarouselPrevious` and `CarouselNext` built-in components.

But you can only use them inside the `Carousel` component.

And if you need to control the slides outside this container (e.g. with buttons placed somewhere else), you can use embla API directly.

Let’s make a button for going to the next slide:

```
<Button onClick={scrollNext}>Button</Button>
```

Then we can use API and to call the [scrollNext](https://www.embla-carousel.com/api/methods/#scrollnext) method in the `useCallback` hook:

```
const scrollNext = useCallback(() => {
  if (!cApi) return

  cApi.scrollNext()
}, [cApi])
```

Additionally, it’s a good practice to disable a button if you can’t move the slides anymore:

```
<Button
  onClick={scrollNext}
  disabled={!cApi?.canScrollNext()}
>
  Button
</Button>
```

---

Hope you’ll enjoy the Embla Carousel API as I did and have a nice day.

Using Embla API in shadcn/ui carousel component

Let me start my blog with my favorite JS tech stack (at least for 2024):

* [supabase](https://supabase.com) (postgresql + auth)

* nextjs

* [tailwindcss](https://tailwindcss.com) (using [shadcn/ui](https://ui.shadcn.com))

## Supabase

I’ve built one client project on supabase already and to be honest this is the only project that works without issues and my support. It simply works.

The second reason I’ve chosen supabase specifically for my side projects is because of the ability to focus more on the frontend part and product logic and not dive deeply into the backend part.

And the authentication for nextjs is out of the box! It’s simple (cookie-based) and secure enough I hope.

## Next.js

Not much to say here.\
Nextjs became a default choice for the react development.

[Vite](https://vitejs.dev) is a good one too, but no server-side rendering or routing.

So nextjs is more like an all-in-one solution for full stack web development. And it’s very simple to deploy to [Vercel](https://vercel.com) as well.

## shadcn/ui

It’s a collection of different UI components you don’t install via the package manager. Based on [radix primitives](https://www.radix-ui.com/primitives) and styled with tailwindcss.

You can simply initialize shadcn/ui in a project with CLI:

```
npx shadcn-ui@latest init
```

Do some configuration stuff depending on which framework is used in your project and you’re good to go.

You can then add any component to your codebase, e.g. button:

```
pnpm dlx shadcn-ui@latest add button
```

You’ll own this code and can modify this UI component as it’s not installed as a dependency but only copy-pasted to your codebase with the CLI tool.

I’m currently trying these components in my very first side project (***monoflash*** — single-sided cards for language learners) and I do like this approach a lot.

---

That’s it!\
Extremely simple (no extra API services) and so potentially powerful (you can decouple the postgres DB at any time in the future and build your very own backend if you need to).

Tech stack for my side projects

Building Monoflash as my side project — single-sided cards for language learners.

full stack js dev

Single-sided cards for language learners.

Monoflash helps you create your own flashcards, improve your vocabulary and focus on language you're learning.

Monoflash

A bunch of projects on different stacks:

adonisjs + nextjs + postgres
nextjs + supabase (DB and auth)
nestjs + prisma + postgres

And custom react admin panels with mantine UI and chakra UI.

Full Stack Engineer

I'm on project from day one.

Developing feathersjs API (both REST and graphql) for the mobile and web apps, custom react admin panel and a lot of integrations with other platforms (shopify, airtable etc.)

klimjs

2024