Shadcn Profile Cards with Cover Image

Profile Card with Cover Image is a visual-first profile block that leads with a full-width cover photo and an avatar overlapping its lower edge. Next to the avatar sit social buttons for Dribbble, Behance, and a personal site, and the body groups color-coded Shadcn UI badges into Skills, Tools, and Rate sections before an experience entry with a company logo. A two-button footer offers View Profile and Get in Touch actions, all arranged with Tailwind inside a rounded card. Use it in React, or grab the Vuejs or Svelte edition of the same card.

Pro

Other Profile Cards Examples

Profile Card

Product Lists

Get Unlimited Access to All Examples & Blocks.

Unlock everything with a single payment. Get lifetime access to all content. You will also receive free access to all new examples.

Buy Now

A Cover Photo Card for Designers and Creators

Profile Card with Cover Image leads with a full width landscape photo before a single word of text, giving the block the feel of a portfolio piece rather than a database record. A designer persona, complete with Dribbble and Behance links, sets the tone: this is the card for creator marketplaces, community directories, and social media style products where personality sells. The demo page even sits on a conic gradient backdrop to show how the rounded-3xl card pops against expressive backgrounds.

Floating the Avatar With a Ring

The transition between cover and content is handled by a classic trick executed with Tailwind utilities: the size-20 Avatar gets a negative -mt-10 margin so it straddles the photo's bottom edge, and a ring-4 ring-background halo carves a clean gap between portrait and cover. Because the ring color is the background token rather than white, the cutout effect survives dark mode without any extra classes.

Social Buttons Drawn as Inline SVGs

Three blue rounded-xl buttons line up opposite the avatar, and two of their icons, Dribbble and Behance, are hand written inline SVG components rather than library imports, with a lucide GlobeIcon covering the personal site. Further down, the experience row includes a tiny four square Microsoft logo built from four SVG rects. These embedded vectors keep the block dependency free while still carrying recognizable brand marks.

Pastel Badge Palettes for Skills, Tools, and Rates

Skills, tools, and rates are three arrays of label and className pairs, each rendered as a borderless secondary Badge. Every entry carries a matched pair from the Tailwind color scale, such as bg-green-100 text-green-700 with dark:bg-green-950 dark:text-green-300, so the pastel coding stays legible when the theme darkens. The tools array adds emoji glyphs for Figma, Framer, and Blender, a zero asset way to give each badge an icon.

Sections That Tell a Story: Bio, Rate, Experience

Between the badges the card walks through a narrative: name with role in muted parentheses, a map pin location, a short bio, then the experience block pairing a Product Design title with the Microsoft logo and a 2020-2024 span. Two footer buttons close the pitch, an outline View Profile and a solid Get in touch, both rounded-2xl to echo the card's soft geometry. Reordering the sections is trivial since each is an independent space-y group.

Access, Theming, and Install Paths

The structural components come from Shadcn UI, Avatar, Badge, and Button, and the neutral surfaces use bg-background and text-muted-foreground, so global theming changes flow straight in; only the deliberate pastel accents are opt in literals you can retune or tokenize. The card is gated at the Pro level, so grab All Access once and the code tab along with the registry install becomes available. Two integration paths exist after that: the one line shadcn CLI install, with npm, pnpm, yarn, and bun variants shown in the page header, or a plain copy paste from the code view.

Frequently Asked Questions

Where does the cover photo come from and can I change it?

The demo loads an Unsplash landscape through next/image with the fill prop inside a fixed h-40 container. Swap the src for any image URL or local asset; keeping the container height fixed means portraits, patterns, or brand artwork all crop cleanly with object-cover.

How does the avatar overlap the cover image?

A negative top margin, -mt-10, pulls the avatar upward over the photo, and a ring-4 in the background token color creates the punched out border. No absolute positioning is involved, so the row still flows normally next to the social buttons.

Why are the badge colors hard coded instead of using theme tokens?

The pastel palette is the point of this variant: green, blue, purple, pink, and slate distinguish skills, tools, and rates at a glance, and each color ships with an explicit dark mode pair. If you prefer strict token discipline, replace the className strings with secondary or outline Badge variants and the layout is untouched.

Which frameworks besides React can run this card?

Vuejs and Svelte are both covered. Teams on Vuejs get a build based on the shadcn-vue port and Svelte teams get one based on shadcn-svelte, so nobody has to translate the React source by hand to keep the same cover photo layout.

What do the two footer buttons represent?

They model the two intents a visitor usually has: View Profile, an outline Button for browsing deeper, and Get in touch, a solid blue primary action for starting a conversation. Both are plain Shadcn UI Buttons, so wiring them to routes or dialogs is a one line change each.