Skip to content
Portfolio Kit

Introduction

What Portfolio Kit is, how it's organized, and how to use it.

Portfolio Kit is a set of 133 components and 15 full-page templates for building portfolio websites with React, Tailwind CSS and shadcn/ui.

It is not an npm package. Like shadcn/ui, the shadcn CLI copies each piece into your project as source, and from then on it's your code.

npx shadcn@latest add @portfolio-kit/hero-intro

What's inside

The component list comes from a survey of 81 portfolio sites by developers, designers, photographers, studios and freelancers.

  • Layout: sections, containers, bento grids, sticky two-column layouts, headers and footers.
  • Navigation: site headers, pill navs, docks, overlay menus, a ⌘K command menu, scroll progress, table of contents, theme and language switches.
  • Hero: intros, statements, showreels, availability badges, local time, location.
  • Work: project cards, grids, lists, carousels, a draggable canvas, case-study headers and chapters, device frames, before/after sliders, galleries and a lightbox.
  • About: bio, experience, timeline, skills, tools, stats, principles, credentials, credits, a dot map, "now" pages.
  • Social proof: testimonials, logo clouds, press, awards.
  • Services: service cards and lists, pricing tables, process steps, FAQ.
  • Content: article typography, margin notes and link previews for writing; posts, talks, podcast appearances, repos, products, books, a blogroll, a contribution graph, now playing.
  • Contact: calls to action, contact and booking forms, copy-to-clipboard email, social links.
  • Effects: reveals, marquees, parallax, horizontal scroll, image trails, magnetic buttons, tilt and spotlight cards, text effects, grain, aurora, custom cursors, page transitions.
  • Utilities: arrow links, media frames, brand icons, generative art, text that fits its width, tags and other small parts.

The templates are complete pages assembled from these components. To go from nothing to a deployed site, follow Build your portfolio.

How the components are built

All components share the same typography recipes, spacing scale, radius, motion curve and color tokens. Colors, fonts, radius and heading style are CSS variables, so changing the theme changes every component at once.

Most components are compound: ProjectCard is used with ProjectCardMedia, ProjectCardTitle and so on, rather than a long list of props. Every part accepts className and passes other props through to its element. See Customization.

Shared conventions keep them consistent next to each other: the same small mono labels, pill heights, card padding, hover lift and arrow chips everywhere. Pieces from different categories sit together without adjustments.

They use semantic HTML, keyboard controls, visible focus rings and prefers-reduced-motion. Retain these behaviors when customizing installed source, and check your own page without JavaScript, with reduced motion and when printed. The native migration's checks are documented in AI & agents.

How to use these docs

  • Browse Components and Templates. Each example shows its live preview and the code to copy.
  • Read Installation to connect the registry. You only do this once.
  • New here? Build your portfolio walks through a whole site in about ten minutes.
  • Make a theme in the theme builder, or read Theming.
  • If you work with a coding agent, read AI & agents. Individual guides, components and templates have Markdown counterparts; the introduction is at /docs/introduction.md.