shadcn.io is not affiliated with official shadcn/ui
Compact Footer Ribbon Strip Logos Block for Solid
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 Solid with Ark 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.