Design System/Atoms/Carousel

Carousel

A scrollable slide container built on Embla Carousel. Supports looping, multi-item views, and vertical orientation.

When To Use

Use Carousel when you need a reusable atoms pattern instead of rebuilding the structure from primitives.
Start from the simplest example that fits the task, then add decoration only when it clarifies meaning or hierarchy.
Review the examples below to understand the tradeoffs between density, emphasis, and behavior.

When Not To Use

Do not use Carousel just because it already exists in the catalog; choose the pattern that matches the task, not the most decorative option.
Do not keep layering options onto the pattern when a simpler component or section would be easier to understand and maintain.

Accessibility Notes

Keep headings, labels, and supporting text in the DOM before decorative chrome so the page reads well without styles or scripts.
Test the pattern with keyboard navigation and a screen reader before treating the visual layout as complete.
Use status, selection, and disabled states that remain understandable without color alone.

Key Props / API

Props

opts, plugins, orientation, setApi

Key exports

type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext

Example Code

import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@hilum/ui";

<div className="w-full px-12">
  <Carousel opts={{ loop: true }}>
    <CarouselContent>
      {slides.map((slide, i) => (
        <CarouselItem key={i}>
          <div className={\

Carousel

Image Carousel

Looping image placeholders with prev/next arrows

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Card Carousel

Three cards visible at once with content inside each

Lightning Fast

Optimised for performance

from first byte to last render.

Secure by Default

End-to-end encryption

with zero-trust architecture.

Ship Faster

Pre-built components

so your team moves at speed.

Testimonial Carousel

Full-width quote cards with author attribution

“This design system cut our front-end development time in half. Every component is thoughtfully crafted and a joy to work with.”

Sofia Andersson

Lead Designer, Nordlight

“Finally, a component library that feels truly cohesive. The visual language is consistent and beautiful across every single atom.”

Marcus Chen

CTO, Fieldwork Studio

“The Tailwind v4 integration is seamless. We dropped it into our existing project and it just worked — instantly.”

Priya Nair

Frontend Engineer, Solace Labs

“Incredible attention to detail. From shadow levels to typography utilities, everything is intentional and perfectly scaled.”

Tomás Rivera

Product Designer, Helio

Vertical Carousel

Axis-y orientation scrolling through list rows

Sofia Andersson

Lead Designer

Marcus Chen

CTO

Priya Nair

Frontend Engineer

Tomás Rivera

Product Designer

Aiko Lindqvist

Engineering Manager