A light link-in-bio section with a spinning gradient avatar ring, availability status, pill links that fill and slide on hover, a shining featured link and a row of social icons.
@lenapark
Booking shoots for JanuaryFilm photographer and color nerd in Seoul. I make presets, shoot for small brands and post a new photo walk every Sunday.
lenapark.studio
npx shadcn@latest add https://hyperblur.dev/r/profile-creator-bio.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/profile-creator-bio.tsx.
import { ProfileCreatorBio } from "@/components/hyperblur/profile-creator-bio"
<ProfileCreatorBio name="Lena Park" links={[{ label: "Book a session", href: "/book", featured: true }]} />| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | "Lena Park" | Display name. Also gives the avatar initials. |
| handle | string | "@lenapark" | Handle under the name. |
| verified | boolean | true | Show the verified badge. |
| bio | string | "Film photographer and color nerd in Seoul..." | Short bio. Hidden when empty. |
| status | string | "Booking shoots for January" | Availability pill with a live dot. Hidden when empty. |
| links | { label: string; href: string; description?: string; featured?: boolean }[] | 5 sample links | Stacked link buttons. A featured link renders dark with a New badge and a shine. |
| socials | { network: "instagram" | "youtube" | "tiktok" | "x" | "threads" | "spotify" | "github" | "email"; href: string; label?: string }[] | Instagram, YouTube, TikTok, X, Email | Round icon links under the bio. |
| footer | string | "lenapark.studio" | Small text at the bottom. Hidden when empty. |
| onLinkClick | (link: ProfileCreatorBioLink) => void | Called when a link button is clicked, for analytics. | |
| accent | string | "#f43f5e" | Avatar ring, hover fill, badge and focus color. |
| className | string | Extra classes on the section. | |
| style | CSSProperties | Inline styles on the section. |