Shadcn Profile Card

Profile Card is a compact freelancer profile block centered on stats and scheduling rather than visuals. It pairs a Shadcn UI avatar and name header with a four-item stats row for experience, hourly rate, projects, and success rate, followed by a bio, checkmark skill badges, and phone and email contact details. A bordered meeting card at the bottom shows the date, platform, and a start-to-end time timeline with a call-to-action button beneath. Laid out with Tailwind, it comes in React, Vuejs, and Svelte versions.

Pro

Other Profile Cards Examples

Profile Cards with Cover Image

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 Freelancer Profile Card With a Meeting Slot

This block condenses a freelancer's pitch into one max-w-md card: identity, track record, skills, contact channels, and even an upcoming meeting, all stacked in a single scannable column. The demo persona, a Berlin based product designer, shows how much hiring context fits without a full profile page. Drop it into talent marketplaces, agency rosters, booking confirmations, or anywhere a compact person summary earns its place; for lighter weight introductions the related user cards blocks cover the minimal end of the spectrum.

Stat Strip, Skill Badges, and Contact Rows

Under the Avatar and name header with its flag and location line, a divide-x separated strip surfaces four numbers: experience, hourly rate, completed projects, and success rate, each mapped from a plain stats array. The skills section renders a second array as outline variant Badge components, each prefixed with a small check icon, and the contact block pairs lucide phone and mail icons with muted text rows. Editing the card means editing those arrays, not the markup.

The Mini Meeting Timeline

The card's signature detail is a bordered sub panel that sketches a scheduled call: date and platform labels up top, then a tiny two node vertical timeline. A clock icon in a blue circle marks the 2:00 PM start, a dashed connector line drops down, and a green circled check marks the 3:30 PM end. Both node colors are declared as light and dark pairs, blue-100 with dark:bg-blue-950 and green-100 with dark:bg-green-950, so the vignette stays balanced in both themes. A Let's get acquainted Button in the footer turns the whole card into a call to action.

No State, No Effects: A Server Friendly Component

There is no use client directive, no store, and no event handler beyond the links. The entire block is presentational React that can render as a server component, which makes it cheap to repeat dozens of times in a search result grid. Layout falls entirely to Tailwind utilities, spacing through space-y scales, the stat strip through flex and divide-x, and the card surface through bg-background over a bg-muted page, so restyling is a class level exercise.

Tokens, Frameworks, and Getting the Code

The Shadcn UI pieces involved are Avatar with image and fallback, Badge, Button, and Separator, and nearly every color routes through muted-foreground and background tokens, so the card inherits your theme from globals.css without edits. React is only one of three delivery targets: the card also ships for Vuejs via the shadcn-vue port and for Svelte via shadcn-svelte, all matching the same design. As a Pro tier component, its source opens after an All Access upgrade, and once unlocked you can either run the registry command printed at the top of the page with npm, pnpm, yarn, or bun, or lift the JSX straight from the code tab.

Frequently Asked Questions

What data arrays drive the card content?

Two constants at the top of page.tsx: a stats array of label and value pairs powering the four column strip, and a skills string array powering the badge list. Contact details and the meeting panel are inline markup, so pointing everything at an API means replacing those constants and a handful of literals with props.

Does the meeting section include real scheduling logic?

No, it is a visual summary of an already booked slot: date, platform, and start and end times drawn as a miniature timeline. Wiring it to a calendar service is intentionally left to you, so the block imposes no scheduling dependency.

Will the blue and green time markers adapt to dark mode?

Yes. Each marker declares an explicit dark counterpart, for example bg-blue-100 alongside dark:bg-blue-950, and the rest of the card uses theme tokens like bg-background and text-muted-foreground, so nothing washes out when the theme flips.

How would I render many of these cards from an API?

Extract the card into a component that accepts a person object covering name, location, stats, skills, contacts, and meeting info, then map your fetched list over it. Since the block has no client state, a grid of them can stream from the server with no hydration cost.

Can I remove the meeting panel without breaking the layout?

Yes, the panel is a self contained bordered div at the end of the content stack. Deleting it leaves the space-y flow intact, and the footer button below the border keeps working as the card's single call to action.