A trusted by logo strip badge with grayscale logos that regain color on hover.
Powering teams at
Installation
Adds the component and everything it depends on to your project.
npx shadcn add https://ui.beste.co/component/r-base/badge20New here? Read the installation guide.
Usage
The import and the props worth knowing about, in one place.
import { Badge20 } from "@/components/beste/component/badge20";
<Badge20
label="Trusted by"
logos={[
{ src: "/logos/acme.svg", alt: "Acme" },
{ src: "/logos/globex.svg", alt: "Globex" },
{ src: "/logos/initech.svg", alt: "Initech" },
]}
/>
<Badge20
logos={[{ src: "/logos/acme.svg", alt: "Acme" }]}
height={32} // logo height in px (default 24)
grayscale={false} // full-color logos
tone="foreground" // label color: "muted" (default) | "foreground"
/>Playground
Turn the props on the right; the snippet under them is what you would write to get what you see.
Powering teams at
Usage
import { Badge20 } from "@/components/beste/component/badge20";
<Badge20
label="Powering teams at"
logos={[{"src":"https://oud.pics/sm/l/npm.svg","alt":"npm"},{"src":"https://oud.pics/sm/l/pnpm.svg","alt":"pnpm"},{"src":"https://oud.pics/sm/l/yarn.svg","alt":"Yarn"},{"src":"https://oud.pics/sm/l/bun.svg","alt":"Bun"}]}
/>Props
Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Muted intro text before the logos (e.g. "Trusted by") |
logos* | Badge20Logo[] | — | The logos |
height | number | — | Logo height in pixels |
grayscale | boolean | — | Render logos grayscale at reduced opacity (color on hover) |
tone | "muted" | "foreground" | — | Label color |
className | string | — | Additional classes merged onto the root |