Logo Bar
Social proof logo showcase bar with grayscale-to-color hover transition.
Preview
Import
import { LogoBar } from "@sigil-ui/components";Usage
<LogoBar logos={[
{ src: "/brands/react.svg", alt: "React", monochrome: true },
{ src: "/brands/nextdotjs.svg", alt: "Next.js", monochrome: true },
{ src: "/brands/typescript.svg", alt: "TypeScript", monochrome: true },
{ src: "/brands/tailwindcss.svg", alt: "Tailwind CSS", monochrome: true },
]} />In a section
<section className="py-12 text-center">
<p className="text-sm text-[var(--s-text-muted)] mb-6">Trusted by teams at</p>
<LogoBar logos={[
{ src: "/brands/react.svg", alt: "React", monochrome: true },
{ src: "/brands/nextdotjs.svg", alt: "Next.js", monochrome: true },
{ src: "/brands/typescript.svg", alt: "TypeScript", monochrome: true },
{ src: "/brands/tailwindcss.svg", alt: "Tailwind CSS", monochrome: true },
]} />
</section>The preview uses locally hosted marks from theSVG. Set monochrome to tint a logo with the active text color. Omit it to preserve the original image colors.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
logos | LogoBarItem[] | — | Logos to display ({ src, alt }) |
className | string | — | Additional CSS classes |
LogoBarItem
| Field | Type | Description |
|---|---|---|
src | string | Image source URL |
alt | string | Alt text for accessibility |