Docs·Carousel 001

Carousel 001

Hero carousel with pill timer pagination, arrow controls, and blur-fade slide transitions.

Installation

$pnpm dlx shadcn@latest add @spiderui/carousel-001

Usage

Centered hero carousel with title, subtitle, arrow controls, and pill pagination where the active dot expands and fills on a timer. Slides auto-advance every 4 seconds by default — current content exits left with blur while the next enters from the right.

Carousel layout, pill timer pagination, and blur-fade slide transitions inspired by Dia Browser.

API Reference

PropTypeDefault
titleMain heading above the carousel.
string—
subtitleSupporting text below the title.
string—
slidesSlide data with image subtitle, src, and optional alt text.
Carousel001Slide[]DEFAULT_CAROUSEL_001_SLIDES
intervalAuto-advance interval in milliseconds.
number4000
classNameClasses on the root section.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x

Stories in motion

Editorial highlights for launches, moods, and moments

Across dimensions, same spark

Vivid multiverse artwork
import { Carousel001 } from "@/components/ui/carousel-001"
export default function Page() {
  return (
    <Carousel001
      title="Stories in motion"
      subtitle="Editorial highlights for launches, moods, and moments"
      slides={[
        {
          id: "one",
          imageSubtitle: "Light cuts through the noise",
          imageSrc:
            "https://cdn.cosmos.so/ef24a640-42da-4133-96a0-4572d2b0ccbe?format=webp&w=1200",
          imageAlt: "Neon signal in darkness",
        },
        {
          id: "two",
          imageSubtitle: "Where color meets atmosphere",
          imageSrc:
            "https://cdn.cosmos.so/6d05ef91-722e-4fcc-83c5-765e348ec644?format=webp&w=1200",
          imageAlt: "Atmospheric horizon scene",
        },
      ]}
    />
  )
}