A phone-sized link page for a local business: cover, avatar, verified name, open status, bio, an Order now button, a list of icon links, native share with a copy fallback, a QR toggle and a Save contact button that downloads a vCard.
@cornerkitchen
Open now · until 10 pmSmash burgers, crispy fries and thick shakes on Maple Avenue since 2016. Pickup, delivery and late-night bites.
npx shadcn@latest add https://hyperblur.dev/r/link-in-bio-card.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/link-in-bio-card.tsx.
import { LinkInBioCard } from "@/components/hyperblur/link-in-bio-card"
<LinkInBioCard name="Corner Kitchen" appearance="dark" status={{ tone: "open", label: "Open now · until 10 pm" }} />| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | "Corner Kitchen" | Business name under the avatar. |
| handle | string | "@cornerkitchen" | Line under the name. Empty hides it. |
| initials | string | Text in the avatar. The first letters of name when omitted. | |
| verified | boolean | true | Shows the verified tick after the name. |
| status | { tone: "open" | "closing" | "closed"; label: string } | null | { tone: "open", label: "Open now · until 10 pm" } | Status pill. Compute it on your side; the card never reads the clock. null hides it. |
| bio | string | "Smash burgers, crispy fries ..." | Short paragraph under the status. |
| primary | { label: string; href: string } | null | { label: "Order now", href: "https://cornerkitchen.example/order" } | Main button. null hides it. |
| links | { id: string; label: string; href: string; icon?: "menu" | "delivery" | "location" | "chat" | "camera" | "reviews" | "link"; hint?: string }[] | 6 links | Stacked link buttons. Each opens in a new tab. |
| contact | { name; phone?; email?; url?; street?; city?; region?; postalCode?; country? } | null | Corner Kitchen contact | Data of the downloaded vCard. null hides the Save contact button. |
| shareUrl | string | "https://cornerkitchen.example/links" | Link shared by the Share button and shown in the QR panel. |
| shareTitle | string | Title passed to the native share sheet. Defaults to name. | |
| appearance | "light" | "dark" | "light" | Color scheme. |
| accent | string | "#ff5a36" | Primary button, icons and the verified tick. |
| labels | Partial<{ share; copied; showQr; hideQr; qrCaption; saveContact; verified; footer }> | { share: "Share", copied: "Link copied", saveContact: "Save contact", ... } | Every visible and accessible string. An empty footer hides it. |
| onShare | (method: "native" | "copy") => void | Called after a successful share or copy. | |
| onLinkClick | (link) => void | Called when a link button is clicked. | |
| className | string | Extra classes on the root element. | |
| style | React.CSSProperties | Inline styles on the root element. |