shadcn.io is not affiliated with official shadcn/ui
Compact Footer Ribbon Strip Logos Block for React
A slim ribbon for the foot of a page, above the footer: a label at the start and eight tiny customer wordmarks along one line, under the page column's top rule.
Installation
Overview
A footer ribbon for React with Base UI: one slim line made to sit above a site footer. At the start, a label, "Sent with Thistledown by 3,800 writers"; spread along the rest of the line, eight tiny customer wordmarks, each real text in its own lettering with a small icon beside it, in a ring or knocked out of a badge, muted until hovered. The only line is the page column's top rule with + marks on the rails, and the ribbon draws none at its foot: the footer's own top rule closes it. From xl the label and the eight marks share one line; below it the label sits above the marks, which fall into two rows of four, and on a phone each icon sits over its name. It's built from Guides and Lucide icons, with your theme's tokens for every colour. Nothing moves. For any page that wants a last line of social proof before the footer, in about seventy pixels.
FAQ
How do I change the customers?
Edit CUSTOMERS at the top of the file: each entry is a name, an icon (any Lucide icon), a lettering and a mark (inline, badge or ring). Keep eight, and keep each name to eight letters or fewer: on a phone four marks share one row, so a longer name no longer fits at 320 pixels.
Can I use real logos?
Yes: replace the icon and the name with the company's artwork at about the same height (h-4 to h-5). One-colour artwork in currentColor keeps the muted colour and the hover; a coloured logo stops the ribbon being quiet in light and dark mode.
Why is there no rule under the ribbon?
The ribbon is meant to sit above a footer, and the footer draws its own top rule along the ribbon's foot. A second line here would double it.
Is the ribbon accessible?
Yes. The label is a paragraph and the logos are a list named "Customers": a screen reader reads each company's name and never the icon. The count in the label is wrapped in a bdi element so it keeps its place in a right-to-left layout, and each wordmark keeps its own direction, as a logo would. Nothing is focusable.
Related
- Pro
Compact Five Logo Strip
StripsThe quietest logo strip: one whisper line for a restaurant-reservation product and five large wordmarks in five equal columns, with no heading, no cells and no lines but the page's top rule.
- Pro
Split Label Strip Logos
StripsA split logo strip for a tutoring marketplace: a short label at the start, one hairline that drops from the top rule, and six open ring-mark wordmarks at the end.
- Pro
A strip of eight customer names of a design-handoff product set as type alone, each in its own typeface treatment, with no icons, cells or lines but the page's top rule.
- Pro
Six open wordmarks for a rowing-club rota tool in one centred row, with a short vertical tick between neighbours and no cells or heading.
- Pro
Under Hero Strip Logos
StripsA quiet strip for directly under a hero: one sentence for a job board on its own line and six open wordmarks beneath it, with no cells, no heading and no lines but the page's top rule.
- Pro
The calmest logo loop: fourteen customer wordmarks of outdoor shops drift past in one row in sixty seconds, with wide gaps, no heading and only a pause button.