Carousel

import { Card, CardContent } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

const slides = [
  {
    title: "Dashboards",
    text: "Every metric in one place.",
    tone: "from-chart-1/25",
  },
  {
    title: "Alerts",
    text: "Know before your users do.",
    tone: "from-chart-2/25",
  },
  {
    title: "Reports",
    text: "Scheduled PDFs for the board.",
    tone: "from-chart-3/25",
  },
  {
    title: "Integrations",
    text: "Connect 40+ data sources.",
    tone: "from-chart-4/25",
  },
  {
    title: "Audit log",
    text: "Every change, attributed.",
    tone: "from-chart-5/25",
  },
];

export default function CarouselDemo() {
  return (
    <Carousel aria-label="Product features" className="w-full max-w-xs">
      <CarouselContent>
        {slides.map((s) => (
          <CarouselItem key={s.title}>
            <Card className={`bg-gradient-to-br ${s.tone} to-card`}>
              <CardContent className="flex aspect-square flex-col justify-end gap-1 p-6">
                <span className="font-semibold text-2xl">{s.title}</span>
                <span className="text-muted-foreground text-sm">{s.text}</span>
              </CardContent>
            </Card>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  );
}

import { Card, CardContent } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

const templates = [
  "Invoice",
  "Roadmap",
  "OKRs",
  "Retro",
  "Onboarding",
  "Changelog",
  "Postmortem",
  "Budget",
];

export default function CarouselMultiple() {
  return (
    <Carousel
      aria-label="Templates"
      opts={{ align: "start" }}
      className="w-full max-w-sm"
    >
      <CarouselContent>
        {templates.map((name) => (
          <CarouselItem key={name} className="basis-1/2 md:basis-1/3">
            <Card size="sm">
              <CardContent className="flex aspect-square items-end">
                <span className="font-medium text-sm">{name}</span>
              </CardContent>
            </Card>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  );
}

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

const colors = [
  "bg-chart-1/20",
  "bg-chart-2/20",
  "bg-chart-3/20",
  "bg-chart-4/20",
  "bg-chart-5/20",
  "bg-chart-1/20",
];

export default function CarouselSpacing() {
  return (
    <Carousel
      aria-label="Swatches"
      opts={{ align: "start" }}
      className="w-full max-w-sm"
    >
      <CarouselContent className="-ml-2">
        {colors.map((color, i) => (
          <CarouselItem
            // biome-ignore lint/suspicious/noArrayIndexKey: static swatches
            key={i}
            className="basis-1/3 pl-2"
          >
            <div
              className={`flex aspect-[3/4] items-end rounded-lg p-3 font-medium text-sm ${color}`}
            >
              {i + 1}
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  );
}

import { Card, CardContent } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

const events = [
  { time: "09:00", title: "Standup", room: "Zoom" },
  { time: "10:30", title: "Design review", room: "Room 4B" },
  { time: "13:00", title: "Lunch with Maya", room: "Café Lisboa" },
  { time: "15:00", title: "Roadmap planning", room: "Room 2A" },
  { time: "17:30", title: "1:1 with Jackson", room: "Zoom" },
];

export default function CarouselVertical() {
  return (
    <div className="py-12">
      <Carousel
        aria-label="Today's schedule"
        orientation="vertical"
        opts={{ align: "start" }}
        className="w-full max-w-xs"
      >
        <CarouselContent className="-mt-2 h-[168px]">
          {events.map((e) => (
            <CarouselItem key={e.time} className="basis-1/2 pt-2">
              <Card size="sm" className="h-full justify-center">
                <CardContent className="flex items-center gap-3">
                  <span className="font-mono text-muted-foreground text-xs tabular-nums">
                    {e.time}
                  </span>
                  <div className="flex flex-col">
                    <span className="font-medium text-sm">{e.title}</span>
                    <span className="text-muted-foreground text-xs">
                      {e.room}
                    </span>
                  </div>
                </CardContent>
              </Card>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </div>
  );
}

import { Card, CardContent } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

const cities = ["Lisbon", "Kyoto", "Oaxaca", "Tallinn", "Cape Town"];

export default function CarouselLoop() {
  return (
    <Carousel
      aria-label="Destinations"
      opts={{ loop: true }}
      className="w-full max-w-xs"
    >
      <CarouselContent>
        {cities.map((city) => (
          <CarouselItem key={city}>
            <Card>
              <CardContent className="flex aspect-[4/3] items-center justify-center">
                <span className="font-semibold text-2xl">{city}</span>
              </CardContent>
            </Card>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  );
}

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

const slides = [
  { title: "Spring collection", tone: "from-chart-2/40" },
  { title: "Linen essentials", tone: "from-chart-3/40" },
  { title: "Weekend travel", tone: "from-chart-5/40" },
];

export default function CarouselControlsInside() {
  return (
    <Carousel aria-label="Collections" className="w-full max-w-md">
      <CarouselContent>
        {slides.map((s) => (
          <CarouselItem key={s.title}>
            <div
              className={`flex aspect-[16/9] items-end rounded-xl bg-gradient-to-t ${s.tone} to-muted p-5`}
            >
              <span className="font-semibold text-lg">{s.title}</span>
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious className="left-3 bg-background/80 backdrop-blur" />
      <CarouselNext className="right-3 bg-background/80 backdrop-blur" />
    </Carousel>
  );
}

import { useEffect, useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import {
  Carousel,
  type CarouselApi,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

const photos = ["Harbor", "Old town", "Tram 28", "Sunset", "Market"];

export default function CarouselApiExample() {
  const [api, setApi] = useState<CarouselApi>();
  const [current, setCurrent] = useState(0);
  const [count, setCount] = useState(0);

  useEffect(() => {
    if (!api) return;
    const update = () => {
      setCount(api.scrollSnapList().length);
      setCurrent(api.selectedScrollSnap() + 1);
    };
    update();
    api.on("select", update);
    api.on("reInit", update);
    return () => {
      api.off("select", update);
      api.off("reInit", update);
    };
  }, [api]);

  return (
    <div className="flex w-full max-w-xs flex-col gap-3">
      <Carousel aria-label="Lisbon photos" setApi={setApi}>
        <CarouselContent>
          {photos.map((p) => (
            <CarouselItem key={p}>
              <Card>
                <CardContent className="flex aspect-square items-center justify-center">
                  <span className="font-semibold text-xl">{p}</span>
                </CardContent>
              </Card>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
      {/* Visual counter only: Carousel already announces the slide to screen readers. */}
      <p
        className="text-center text-muted-foreground text-sm tabular-nums"
        aria-hidden
      >
        Slide {current} of {count}
      </p>
    </div>
  );
}

import { useEffect, useState } from "react";
import {
  Carousel,
  type CarouselApi,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";
import { cn } from "@/lib/utils";

const slides = [
  { title: "Invite your team", tone: "bg-chart-1/15" },
  { title: "Connect a data source", tone: "bg-chart-2/15" },
  { title: "Build your first dashboard", tone: "bg-chart-3/15" },
  { title: "Share with stakeholders", tone: "bg-chart-4/15" },
];

export default function CarouselDots() {
  const [api, setApi] = useState<CarouselApi>();
  const [selected, setSelected] = useState(0);

  useEffect(() => {
    if (!api) return;
    const onSelect = () => setSelected(api.selectedScrollSnap());
    onSelect();
    api.on("select", onSelect);
    return () => {
      api.off("select", onSelect);
    };
  }, [api]);

  return (
    <Carousel
      aria-label="Getting started"
      setApi={setApi}
      className="w-full max-w-xs"
    >
      <CarouselContent>
        {slides.map((s) => (
          <CarouselItem key={s.title}>
            <div
              className={cn(
                "flex aspect-[4/3] items-end rounded-xl p-5 font-medium",
                s.tone,
              )}
            >
              {s.title}
            </div>
          </CarouselItem>
        ))}
      </CarouselContent>
      <div className="mt-3 flex justify-center gap-1.5">
        {slides.map((s, i) => (
          <button
            key={s.title}
            type="button"
            aria-label={`Go to slide ${i + 1}`}
            aria-current={i === selected ? "true" : undefined}
            onClick={() => api?.scrollTo(i)}
            className={cn(
              "h-1.5 rounded-full bg-foreground/20 outline-none transition-all focus-visible:ring-[3px] focus-visible:ring-ring/25",
              i === selected
                ? "w-5 bg-foreground"
                : "w-1.5 hover:bg-foreground/40",
            )}
          />
        ))}
      </div>
    </Carousel>
  );
}

import { PauseIcon, PlayIcon } from "lucide-react";
import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
  Carousel,
  type CarouselApi,
  CarouselContent,
  CarouselItem,
} from "@/components/ui/carousel";

const announcements = [
  {
    title: "Usage-based billing is live",
    text: "Pay only for the events you send.",
  },
  { title: "New: audit log export", text: "Download a CSV of every change." },
  { title: "SOC 2 Type II report", text: "Available to all Team customers." },
];

export default function CarouselAutoplay() {
  const [api, setApi] = useState<CarouselApi>();
  const [playing, setPlaying] = useState(true);
  const [paused, setPaused] = useState(false);

  // Start paused for people who prefer reduced motion.
  useEffect(() => {
    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      setPlaying(false);
    }
  }, []);

  useEffect(() => {
    if (!api || !playing || paused) return;
    const id = window.setInterval(() => api.scrollNext(), 4000);
    return () => window.clearInterval(id);
  }, [api, playing, paused]);

  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Carousel
        aria-label="Announcements"
        setApi={setApi}
        opts={{ loop: true }}
        // Rotating slides shouldn't interrupt; announce only when stopped.
        announce={!playing}
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}
        onFocus={() => setPaused(true)}
        onBlur={() => setPaused(false)}
      >
        <CarouselContent>
          {announcements.map((a) => (
            <CarouselItem key={a.title}>
              <Card size="sm">
                <CardContent className="flex flex-col gap-1 py-4">
                  <span className="font-medium text-sm">{a.title}</span>
                  <span className="text-muted-foreground text-xs">
                    {a.text}
                  </span>
                </CardContent>
              </Card>
            </CarouselItem>
          ))}
        </CarouselContent>
      </Carousel>
      <Button
        variant="ghost"
        size="xs"
        className="self-end"
        onPress={() => setPlaying((p) => !p)}
      >
        {playing ? <PauseIcon /> : <PlayIcon />}
        {playing ? "Pause" : "Play"}
      </Button>
    </div>
  );
}

import { QuoteIcon } from "lucide-react";
import { Avatar } from "@/components/ui/avatar";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";

const testimonials = [
  {
    quote:
      "We replaced three internal tools in a week. Our on-call rotation finally has one place to look.",
    name: "Amara Okafor",
    role: "Head of SRE, Fieldline",
    initials: "AO",
  },
  {
    quote:
      "The audit log alone paid for it. Our SOC 2 evidence collection went from days to minutes.",
    name: "Kenji Tanaka",
    role: "Security Lead, Monoform",
    initials: "KT",
  },
  {
    quote:
      "Finance and engineering look at the same dashboard now. That used to be a monthly argument.",
    name: "Sofia Davis",
    role: "VP Finance, Northwind",
    initials: "SD",
  },
  {
    quote:
      "Setup took an afternoon. The SDKs are small and the docs answered every question we had.",
    name: "Lucas Brown",
    role: "Staff Engineer, Parcelly",
    initials: "LB",
  },
];

export default function CarouselRecipeTestimonials() {
  return (
    <Carousel
      aria-label="Customer testimonials"
      opts={{ align: "start", loop: true }}
      className="w-full max-w-2xl"
    >
      <CarouselContent>
        {testimonials.map((t) => (
          <CarouselItem key={t.name} className="sm:basis-1/2">
            <Card className="h-full">
              <CardContent className="flex flex-1 flex-col gap-3">
                <QuoteIcon
                  className="size-5 text-muted-foreground"
                  aria-hidden
                />
                <blockquote className="text-sm leading-relaxed">
                  {t.quote}
                </blockquote>
              </CardContent>
              <CardFooter className="gap-3">
                <Avatar colorful alt="" fallback={t.initials} />
                <div className="flex flex-col">
                  <span className="font-medium text-sm">{t.name}</span>
                  <span className="text-muted-foreground text-xs">
                    {t.role}
                  </span>
                </div>
              </CardFooter>
            </Card>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  );
}

import { useEffect, useState } from "react";
import {
  Carousel,
  type CarouselApi,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from "@/components/ui/carousel";
import { cn } from "@/lib/utils";

const photos = [
  { seed: "chair-front", alt: "Oak lounge chair, front view" },
  { seed: "chair-side", alt: "Oak lounge chair, side view" },
  { seed: "chair-detail", alt: "Close-up of the woven seat" },
  { seed: "chair-room", alt: "Chair in a living room" },
  { seed: "chair-pair", alt: "Two chairs facing each other" },
];

export default function CarouselRecipeGallery() {
  const [main, setMain] = useState<CarouselApi>();
  const [thumbs, setThumbs] = useState<CarouselApi>();
  const [selected, setSelected] = useState(0);

  useEffect(() => {
    if (!main) return;
    const onSelect = () => {
      const index = main.selectedScrollSnap();
      setSelected(index);
      thumbs?.scrollTo(index);
    };
    onSelect();
    main.on("select", onSelect);
    return () => {
      main.off("select", onSelect);
    };
  }, [main, thumbs]);

  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Carousel aria-label="Product photos" setApi={setMain}>
        <CarouselContent>
          {photos.map((p) => (
            <CarouselItem key={p.seed}>
              {/* biome-ignore lint/performance/noImgElement: framework-agnostic example */}
              <img
                src={`https://picsum.photos/seed/${p.seed}/640/640`}
                alt={p.alt}
                className="aspect-square w-full rounded-xl bg-muted object-cover"
              />
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious className="left-3 bg-background/80 backdrop-blur" />
        <CarouselNext className="right-3 bg-background/80 backdrop-blur" />
      </Carousel>
      <Carousel
        aria-label="Thumbnails"
        setApi={setThumbs}
        // The main carousel already announces the selected photo.
        announce={false}
        opts={{ containScroll: "keepSnaps", dragFree: true }}
      >
        <CarouselContent className="-ml-2">
          {photos.map((p, i) => (
            <CarouselItem key={p.seed} className="basis-1/4 pl-2">
              <button
                type="button"
                aria-label={`Show photo ${i + 1}: ${p.alt}`}
                aria-current={i === selected ? "true" : undefined}
                onClick={() => main?.scrollTo(i)}
                className={cn(
                  "block w-full overflow-hidden rounded-lg outline-none ring-offset-2 ring-offset-background transition-opacity focus-visible:ring-[3px] focus-visible:ring-ring/25",
                  i === selected
                    ? "ring-2 ring-primary"
                    : "opacity-60 hover:opacity-100",
                )}
              >
                {/* biome-ignore lint/performance/noImgElement: framework-agnostic example */}
                <img
                  src={`https://picsum.photos/seed/${p.seed}/160/160`}
                  alt=""
                  className="aspect-square w-full bg-muted object-cover"
                />
              </button>
            </CarouselItem>
          ))}
        </CarouselContent>
      </Carousel>
    </div>
  );
}

import { BarChart3Icon, PlugIcon, UsersIcon } from "lucide-react";
import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  useCarousel,
} from "@/components/ui/carousel";

const steps = [
  {
    icon: PlugIcon,
    title: "Connect a data source",
    text: "Pick Postgres, BigQuery or one of 40 SaaS connectors. Read-only credentials are enough.",
  },
  {
    icon: BarChart3Icon,
    title: "Build a dashboard",
    text: "Start from a template or drag metrics onto a blank canvas. Everything updates live.",
  },
  {
    icon: UsersIcon,
    title: "Invite your team",
    text: "Share dashboards with a link, or add teammates with viewer, editor or admin roles.",
  },
];

/** Custom controls: any component inside <Carousel> can call useCarousel(). */
function StepControls() {
  const { api, scrollPrev, scrollNext, canScrollPrev, canScrollNext } =
    useCarousel();
  const [index, setIndex] = useState(0);

  useEffect(() => {
    if (!api) return;
    const onSelect = () => setIndex(api.selectedScrollSnap());
    onSelect();
    api.on("select", onSelect);
    return () => {
      api.off("select", onSelect);
    };
  }, [api]);

  return (
    <CardFooter className="justify-between border-t">
      <span className="text-muted-foreground text-xs" aria-live="polite">
        Step {index + 1} of {steps.length}
      </span>
      <div className="flex gap-2">
        <Button
          variant="ghost"
          size="sm"
          isDisabled={!canScrollPrev}
          onPress={scrollPrev}
        >
          Back
        </Button>
        {canScrollNext ? (
          <Button size="sm" onPress={scrollNext}>
            Continue
          </Button>
        ) : (
          <Button size="sm">Get started</Button>
        )}
      </div>
    </CardFooter>
  );
}

export default function CarouselRecipeOnboarding() {
  return (
    <Card className="w-full max-w-sm overflow-hidden">
      <Carousel
        aria-label="Getting started"
        opts={{ watchDrag: false }}
        // The footer's step counter is the live region here.
        announce={false}
        className="flex flex-col gap-4"
      >
        <CarouselContent>
          {steps.map((s, i) => (
            <CarouselItem
              key={s.title}
              aria-label={`Step ${i + 1} of ${steps.length}`}
            >
              <CardHeader>
                <span className="mb-3 flex size-10 items-center justify-center rounded-lg bg-primary/10 text-primary">
                  <s.icon className="size-5" aria-hidden />
                </span>
                <CardTitle>{s.title}</CardTitle>
                <CardDescription>{s.text}</CardDescription>
              </CardHeader>
            </CarouselItem>
          ))}
        </CarouselContent>
        <StepControls />
      </Carousel>
    </Card>
  );
}