Client logos scrolling automatically with a Carousel with masked edges
import { 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://cdn.21st.dev/assets/mirror/25/25a0515c472578f5dfcfeb765be5383f6893cda1f0f1560f69d3bcabdda71693.svg",
className: "h-7 w-auto",
},
{
id: "logo-3",
description: "Next.js",
image: "https://cdn.21st.dev/assets/mirror/8f/8f4aec13fdd1bf3b6b5566a6c4f5feade1c5e5b492fa81ba32f62f3aa155220e.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://cdn.21st.dev/assets/mirror/54/5414744d341683260469fbaa9a518e0a4b3000ddd714ce5d0525f8e2cebcb064.svg",
className: "h-7 w-auto",
},
{
id: "logo-7",
description: "Tailwind CSS",
image: "https://cdn.21st.dev/assets/mirror/55/5589fa41387fa1b242345df08f610afb0e8bff0558e551a9156251c35af4be1a.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 };
Part of Shadcnblocks.com — browse the full library on 21st.dev.