shadcn.io is an independent project built on shadcn/ui
Installation
Overview
A tiny social-proof strip for Vue with Ark UI. Seven customer icons sit in circles that overlap like an avatar stack, a last circle counts the rest ("+4,000"), and one sentence beside them says what the product does for them. The strip sits on the page's top rule and has no other lines. Hovering a circle lifts it above its neighbours and names the shop in a small label under it; every name is also text for screen readers. On a phone the circles shrink to size-10 and the sentence drops under the stack. Built from Guides and Lucide icons, with CSS for the entrance and hover, and your theme's tokens for every colour. For a footer, a signup page or any place with room for one line of proof.
FAQ
How do I change the shops?
Edit FLORISTS at the top of the file: a name and a Lucide icon. Later items sit over earlier ones. Keep the stack to about seven, so the strip stays one line from sm, and update the "+4,000" circle and its screen-reader text.
How does the name label work?
It is plain CSS: a small label under each circle that is invisible until the circle is hovered, then fades in. It is not a tooltip component, so nothing is focusable and there are no extra tab stops. The same name is sr-only text in the list item, so touch and keyboard visitors lose nothing but the label.
How do the circles overlap?
Each item after the first has a negative start margin, and each circle carries a hairline edge plus a two-pixel ring in the page colour that cuts it out from the circle beneath. The margins are logical, so the stack runs from the start side on a right-to-left page.
