Chain Carousel

A dual-rail icon chain with a searchable center picker. Pass items with Lucide icons (or logos). Built with motion.

Default

Mirrored rails auto-advance around a searchable center card. Hover or search pauses rotation; pick a result to jump.

Loading…

Installation

CLI

npx @sonojs/ui@latest add chain-carousel

Also needsnpx @sonojs/ui@latest add input && npm i lucide-react motion

Usage

Defaults ship nine demo features. Pass your own items with id, name, icon, and optional details / logo.

page.tsx

"use client"

import { ChainCarousel } from "@/components/carousels/chain-carousel"

export default function Page() {
  return (
    <ChainCarousel
      scrollSpeedMs={1500}
      visibleItemCount={7}
      className="w-full"
    />
  )
}

Props

Prop	Type	Default	Description
items	ChainCarouselItem[]	bundled demos	Chain entries with Lucide `icon` (or `logo` URL), `name`, and optional `details`.
scrollSpeedMs	number	1500	Auto-advance interval in milliseconds.
visibleItemCount	number	9	How many rail cards are visible (even values are bumped to the next odd).
onChainSelect	(id, name) => void	-	Called when a search result is chosen.
className	string	-	Extra classes on the outer section.