MiHCM
layout/@mihcm/ui·v0.21.0·stable

Carousel

Composable carousel powered by Embla. Supports horizontal/vertical orientation, loop, and prev/next controls.

ConfiguratorExamplesUsageAccessibilityApi

Live preview

Adjust the controls on the right; the preview and code update in real time.

Configurator

Step-by-step content carousel

Configure visible slides, reveal spacing, rewind, pagination, and slide content.

Payroll

Payroll readiness

Validate approvals, exceptions, and country rules before cutoff.

Recruiting

Hiring pipeline

Track open roles, interview load, and pending scorecards by team.

Insights

People analytics

Compare retention, engagement, and manager actions in one view.

Growth

Learning progress

Surface mandatory learning, completions, and overdue courses.

Benefits

Benefits review

Preview enrolment windows, eligibility, and pending employee changes.

carousel-example.tsxtsx
StackBlitz
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
  useCarousel,
} from '@mihcm/ui/Carousel';

export function Example() {
  return (
    <Carousel opts={{ align: 'start', loop: true }} aria-label="Related HR workflows">
      <CarouselContent>
        {slides.map((slide) => (
          <CarouselItem key={slide.title} className="sm:basis-1/2 pr-2">
            <WorkflowCard {...slide} />
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
      <CarouselPagination />
    </Carousel>
  );
}

Install

Both paths are valid. CLI ships the source into your repo (you own it). Install pins via npm.

npx @mihcm/cli add Carousel
Copies the source into components/ds/Carousel.tsx. You own the file. Use --out to override the directory or --force to overwrite.