Hero Section

A personal profile hero with a photo, roles, short bio, contact details, skills and social links.

Hello, I'm

Jane Smith

Product Designer • Frontend Engineer

Building beautiful and accessible web applications.

New York, NY

Figma

React

Next.js

Tailwind

Install the component automatically via Shadcn CLI.

npx shadcn@latest add https://www.grettech.com/api/registry/hero-section

Hello, I'm

Backend Specialist

I build robust, scalable, and secure APIs for the web.

Prop	Type	Default	Description
personalData	{ name?: string; email?: string; phone?: string; address?: string; imageUrl?: string }	{ name: "John Doe", email: "john@example.com", phone: "+1 234 567 890", address: "San Francisco, CA", imageUrl: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&q=80" }	Personal details. Passing this object replaces the whole sample profile, and only the fields you set are shown (name falls back to "John Doe").
professionalData	{ designations?: string[]; about?: string }	{ designations: ["Software Engineer", "UI/UX Designer"], about: "Passionate software developer specializing in creating exceptional digital experiences. With expertise in modern web technologies and a focus on clean, maintainable code." }	Roles and bio. Passing this object replaces the sample.
skills	string[]	["React", "Next.js", "TypeScript", "Tailwind CSS"]	Shown as badges. Pass an empty array to hide them.
socialLinks	{ url: string; platform: string }[]	[]	Links shown under the skills. Each opens in a new tab.
imageAs	React.ElementType	"img"	Component used for the photo, e.g. next/image's Image. It receives src, alt, width (192), height (192) and className.
className	string	-	Extra classes for the root <section>.
...props	React.HTMLAttributes<HTMLElement>	-	Any other section attributes (id, style, etc.).