Hero Intro

The main portfolio hero: eyebrow, display title, lead, actions, optional media and a bottom meta row, with a staggered CSS entrance. Stacked, split or centered.

UsesSection

Installation

pnpm dlx shadcn@latest add @portfolio-kit/hero-intro

First time? Add the @portfolio-kit registry to components.json

components.json

{
  "registries": {
    "@portfolio-kit": "https://www.parthjadhav.com/products/portfolio-kit/r/{name}.json"
  }
}

Usage

Examples

Split

layout="split" puts copy on the left and a portrait or visual on the right; on phones the media stacks underneath.

Centered

layout="center" for personal, link-in-bio style pages: an avatar, a short hello, and socials beside the main action.

Full Height

fullHeight fills the viewport and anchors the statement to the bottom, above a meta row with location, local time and a scroll cue.

API Reference

Used in

Freelancer template Speaker template