Components
Loading preview...
Client logos scrolling automatically with a Carousel with masked edges
@shadcnblockscom
npx shadcn@latest add https://21st.dev/r/shadcnblockscom/logos3import { Logos3 } from "@/components/blocks/logos3"
const demoData = {
heading: "Trusted by these companies",
logos: [
{
id: "logo-1",
description: "Astro",
image: "https://www.shadcnblocks.com/images/block/logos/astro.svg",
className: "h-7 w-auto",
},
{
id: "logo-2",
description: "Figma",
image: "https://www.shadcnblocks.com/images/block/logos/figma.svg",
className: "h-7 w-auto",
},
{
id: "logo-3",
description: "Next.js",
image: "https://www.shadcnblocks.com/images/block/logos/nextjs.svg",
className: "h-7 w-auto",
},
{
id: "logo-4",
description: "React",
image: "https://www.shadcnblocks.com/images/block/logos/react.png",
className: "h-7 w-auto",
},
{
id: "logo-5",
description: "shadcn/ui",
image: "https://www.shadcnblocks.com/images/block/logos/shadcn-ui.svg",
className: "h-7 w-auto",
},
{
id: "logo-6",
description: "Supabase",
image: "https://www.shadcnblocks.com/images/block/logos/supabase.svg",
className: "h-7 w-auto",
},
{
id: "logo-7",
description: "Tailwind CSS",
image: "https://www.shadcnblocks.com/images/block/logos/tailwind.svg",
className: "h-4 w-auto",
},
{
id: "logo-8",
description: "Vercel",
image: "https://www.shadcnblocks.com/images/block/logos/vercel.svg",
className: "h-7 w-auto",
},
],
};
function Logos3Demo() {
return <Logos3 {...demoData} />;
}
export { Logos3Demo };