Components
Loading preview...
An animated, interactive, customizable ruler style carousel perfect for showing off logos of brands you have worked with.
npx shadcn@latest add https://21st.dev/r/isaiahbjork/ruler-carousel"use client";
import { RulerCarousel, type CarouselItem } from "@/components/ui/ruler-carousel";
export function Demo() {
const originalItems: CarouselItem[] = [
{ id: 1, title: "NIKE" },
{ id: 2, title: "ALO" },
{ id: 3, title: "CONVERSE" },
{ id: 4, title: "UNIQLO" },
{ id: 5, title: "ON CLOUD" },
{ id: 6, title: "SKIMS" },
{ id: 7, title: "ADIDAS" },
{ id: 8, title: "PUMA" },
{ id: 9, title: "REEBOK" },
];
return (
<div className="min-h-screen overflow-hidden flex items-center justify-center">
<RulerCarousel originalItems={originalItems} />
</div>
);
}