Skip to content
Portfolio Kit

Installation

Connect the registry once, then add components and templates with the shadcn CLI.

1. Start from a shadcn/ui project

Any React + Tailwind CSS v4 project set up with shadcn/ui works: Vite, Next.js, React Router, Astro and others. Both Radix and Base UI styles are supported. If you're starting fresh:

npx shadcn@latest init --template vite --name my-portfolio

The --template flag also takes next, react-router and astro. It creates the app with Tailwind CSS v4 and the @/ alias ready.

Follow the shadcn/ui installation guide for your framework.

2. Add the registry

Add the @portfolio-kit namespace to components.json:

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

Now anything in the kit installs by name.

3. Add components

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

Components land in components/portfolio/. Shared hooks go in hooks/ and helpers in lib/. Anything a component depends on (other kit components, shadcn/ui primitives, npm packages) is installed with it.

import { ProjectCard, ProjectCardTitle } from "@/components/portfolio/project-card"

4. Make a theme (optional)

Components work with your existing shadcn/ui colors. The kit adds defaults for its few extra tokens. To change the accent, fonts, radius and shadows, make a theme in the theme builder and paste its CSS into your stylesheet. See Theming.

Or start from a template

A template is a complete page built from the kit. Install one, edit the content object at the top of the file, and render it:

npx shadcn@latest add @portfolio-kit/template-developer
import TemplateDeveloper from "@/components/template-developer"

export default function Page() {
  return <TemplateDeveloper />
}

Build your portfolio walks through this end to end, from theming to deploying.

Next.js and server components

Kit files don't include "use client". Components that use hooks or event handlers (most interactive and animated ones, and every template) need it in the App Router: add "use client" as the first line of the installed file, or render it from a file that has it.

<img> lint warnings

In a create-next-app project, next lint / eslint warns @next/next/no-img-element on the kit components that render images (profile-card, post-card, lightbox, media and a few others). The kit uses plain <img> on purpose: the same files install into Vite, React Router and Astro, where next/image doesn't exist. The warnings don't affect the build.

To use Next's image optimisation, swap the <img> in the installed file for next/image. Keep its alt and className, give it width and height (or fill with sizes inside a sized box), and allow remote hosts in images.remotePatterns. To keep <img> instead, turn the rule off for the kit's folder in eslint.config.mjs:

const eslintConfig = defineConfig([
  ...nextVitals,
  ...nextTs,
  {
    files: ["components/portfolio/**"], // "src/components/portfolio/**" with a src/ directory
    rules: { "@next/next/no-img-element": "off" },
  },
])

Without the namespace

You can also install any item straight from its URL, with no components.json changes:

npx shadcn@latest add https://www.parthjadhav.com/products/portfolio-kit/r/project-card.json

Manual installation

Every component page has a Manual tab with its full source, the npm packages it needs and the kit files it imports. Copy the files to the paths shown and fix the import aliases if yours differ from @/.

Every component also needs the kit's base tokens (highlight, success, border-hover, the card shadow, the font-heading utility and motion keyframes). The CLI installs them automatically as @portfolio-kit/base. When copying by hand, copy them from base.json.

Hosting the registry yourself

The registry files are static JSON in website/private-products/portfolio-kit/assets/r/. A separate host can serve that directory at /r/; point the consumer's components.json at the host's /r/{name}.json. Preserve every dependency item, including base.json.

The public registry is served by the website at https://www.parthjadhav.com/products/portfolio-kit/r/{name}.json, built from the same files. bun run build does not export Portfolio Kit to dist/.

Updating installed components

The CLI copies source into your application. Registry changes do not update those files automatically. Before reinstalling a component, commit or back up your customizations and review the incoming diff. The project is currently at version 0.x; component APIs can change.

Requirements

  • React 19 (the tested baseline; React 18 compatibility is not guaranteed)
  • Tailwind CSS v4
  • lucide-react for icons (installed with components that use it)