Logo

21Dev Playground

CarouselCards

Here you can find a carousel made only of Shadcn/UI components, unlike the default one using Embla

Scrollbar

How to use it (Next.js):

Make sure you have already installed the following SHADCN/UI components:

  • Button or type npx shadcn-ui@latest add button in your terminal
  • Dialog or npx shadcn-ui@latest add dialog
  • Scroll-Area or npx shadcn-ui@latest add scroll-area
  • Skeleton or npx shadcn-ui@latest add skeleton

Another requirement is to have the images to place in the carousel

For the snippet, I used 9 images (image1, image2... image9) placed in the public/images folder

This tutorial doesn't cover how to connect images from a database

Let's create the carousel:

Open the snippet and click the Copy button

Go to your code editor and paste the snippet in a Carousel component and place it where you want

You should now see the component in your page

In order to customize some elements like the scroll bar background and thumb, you should go directly in the shadcn component

app/components/ui/

Find the scroll area component for example and open it

Find: <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-small bg-border bg-emerald-600" />

In the class name you can customize the thumb. I have already added text-emerald-500 to make it green

That's all for this tutorial!

Remember to scroll down in the footer, find your favourite social, and follow me there!