Logo Bar
Arrange brand marks in a compact horizontal row.
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 },
]} />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[] | — | Logo images to display. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-duration-normal | Duration normal |