Carousel

Layout

Image/content carousel with pixel styling.

Installation

npm install embla-carousel-react

Import

import { PixelCarousel, PixelCarouselContent, PixelCarouselItem, PixelCarouselNext, PixelCarouselPrevious } from "@/components/ui/pixel-carousel"

Usage

Interactive preview available - see usage code below

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel-carousel.tsx

"use client";

import useEmblaCarousel, {
  type UseEmblaCarouselType,
} from "embla-carousel-react";
import { ArrowLeft, ArrowRight } from "lucide-react";
import * as React from "react";
import { cn } from "@/lib/utils";
import { pixelButtonVariants } from "./pixel-button";

type CarouselApi = UseEmblaCarouselType[1];
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
type CarouselOptions = UseCarouselParameters[0];
type CarouselPlugin = UseCarouselParameters[1];

type CarouselProps = {
  opts?: CarouselOptions;
  plugins?: CarouselPlugin;
  orientation?: "horizontal" | "vertical";
  setApi?: (api: CarouselApi) => void;
};

type CarouselContextProps = {
  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
  api: ReturnType<typeof useEmblaCarousel>[1];
  scrollPrev: () => void;
  scrollNext: () => void;
  canScrollPrev: boolean;
  canScrollNext: boolean;
} & CarouselProps;

const CarouselContext = React.createContext<CarouselContextProps | null>(null);

function useCarousel() {
  const context = React.useContext(CarouselContext);

  if (!context) {
    throw new Error("useCarousel must be used within a <Carousel />");
  }

  return context;
}

function PixelCarousel({
  orientation = "horizontal",
  opts,
  setApi,
  plugins,
  className,
  children,

// ... (more code below)

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.