shadcn.io is not affiliated with official shadcn/ui
No Followers Empty State Block for Vue
A creator page's empty followers state: a drawn profile card ringed by three dashed circles, a handle field that builds the profile link, a Copy profile link button, and a real QR code of the same link that re-encodes as you type.
Installation
Overview
Turn "0 followers" into something to share, with this no followers empty state for Vue with Ark UI. A whole screen, split in two by a hairline band across it with a plus mark where it meets each rail. At the start sit the heading, a profile card drawn in one SVG (the avatar's initials, the name, the handle and "0 followers", with three dashed rings around the avatar for the people who are not there yet), a handle field in an Input Group that builds the whole link and ends in a Copy Button, and the Shine Button, the only colored control, which copies the link. At the end a real QR Code of that same link, re-encoded as you type the handle, with the link under it as text you can select. Copying turns the rings solid in turn and says so; the followers stay at zero. Start over puts the handle and the rings back. The band is ruled by Guides and the transitions are CSS only. For the share-your-profile state of any creator, community or portfolio product.
FAQ
What stays in the page, and how do I make it real?
The handle, the rings and the status live in the page's state and nothing is posted: the profile and its link are the demo's own, and "0 followers" is typed. What is real is what the browser does: the clipboard gets the link when you press either copy button, and the QR code is a real code of that link. To wire it, load the creator's handle and follower count from your API and build the link from the handle.
What does the handle field take?
Lowercase letters, digits and underscores, 3 to 20 of them; anything else is dropped as you type. The link and the QR code follow every valid handle. While the handle is too short the code keeps the last valid link, and the button stays in the tab order and says why instead of doing nothing, with a line under the field and focus back in it.
Will the QR code scan?
Yes: it is a real QR code of the https link, drawn in black on white with a quiet margin in every theme and in dark mode, which is what phone cameras need. Its label gives the link, and the link is also printed under it. The demo's host is a placeholder: use your own domain.
What if the browser refuses to copy?
The page says so ("Your browser would not copy. Select the link and copy it by hand.") instead of claiming success, and the link is plain text under the code. Copying needs a secure page (https) in most browsers. Both copy buttons run the same code and say the same thing.
Is the card accessible, and what about right to left?
The drawn card and its rings are decoration, hidden from assistive technology; the same facts are in the heading, the field and one polite status line. Words on the card are HTML over the drawing. The link, the handle and the card stay left to right in every language, since they are an address and a picture, and the rest follows the page's direction.