Skip to content
Portfolio Kit

Contact Form

Project inquiry form with name, email, company, budget and project-type chips and a message with a character count. Includes inline validation and sending, success and error states.

Installation

pnpm dlx shadcn@latest add @portfolio-kit/contact-form
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

Minimal

Hide the company and budget fields and use your own reasons for reaching out, e.g. for a job search or a personal site.

In a Section

A contact page layout: intro, availability and direct email on the left, the form in a card on the right.

API Reference

Used in

Freelancer template