Slim dark strip of five muted text wordmarks spread edge to edge in a wrapping row, named for screen readers by a hidden label while the row shows names only.
import { Logo, LogoGroup } from "@/components/editorial/logo"
import {
Section,
SectionContent,
} from "@/components/editorial/section"
// The copy: change text here, not in the markup.
const COPY = {
label: "Run by finance teams at",
} as const
const LOGOS = ["Enceladus", "Tethys Labs", "Iapetus", "Dione & Co", "Hyperion"]
// The label names the list for screen readers; the row shows names only.
export default function LogoCloud02() {
return (
<Section size="sm" className="dark">
<SectionContent>
<LogoGroup
aria-label={COPY.label}
variant="wrap"
className="justify-between"
>
{LOGOS.map((name) => (
<Logo key={name} variant="muted" size="lg">
{name}
</Logo>
))}
</LogoGroup>
</SectionContent>
</Section>
)
}
pnpm dlx shadcn add @01orbital/logo-cloud-02npx shadcn add @01orbital/logo-cloud-02yarn shadcn add @01orbital/logo-cloud-02bunx --bun shadcn add @01orbital/logo-cloud-02Free under the MIT license. Add the @01orbital registry to components.json once (install guide), then run the command.
It lands at components/blocks/logo-cloud/logo-cloud-02/index.tsx, as source you own and edit.
import LogoCloud02 from "@/components/blocks/logo-cloud/logo-cloud-02"
export default function Example() {
return <LogoCloud02 />
}Registry pieces it installs with it:
Mona Sans Wordmark Logo Cloud
Eight wordmarks set in Mona Sans, told apart by weight, width and tracking. Installs Mona Sans from Fontsource with its width axis.
Split Logo Cloud with Buttons
Two-column section pinned dark on a paper surface: heading, description and two link buttons on one side, six icon-and-name logos in columns on the other.