Person Form

A comprehensive contact form component inspired by Attio's design, featuring drag-and-drop sortable email and phone fields, company selection with search, and popover-based field editing.

Preview

Name

Description

Company

Title

Phone

Location

Installation

Open in

Install the person-form

npx shadcn@latest add https://jt-components.vercel.app/r/person-form.json

pnpm dlx shadcn@latest add https://jt-components.vercel.app/r/person-form.json

yarn dlx shadcn@latest add https://jt-components.vercel.app/r/person-form.json

bunx --bun shadcn@latest add https://jt-components.vercel.app/r/person-form.json

Usage

import PersonForm from "@/components/person-form"

<PersonForm />

Props

Prop	Type	Default
`className?`	`string`	-
`onChange?`	`((data: { firstName: string; lastName: string; emails: string[]; phones: string[]; city: string; state: string; company: string; description: string; linkedin: string; jobTitle: string; }) => void)`	-
`availableCompanies?`	`string[]`	-
`initialJobTitle?`	`string`	-
`initialLinkedin?`	`string`	-
`initialDescription?`	`string`	-
`initialCompany?`	`string`	-
`initialState?`	`string`	-
`initialCity?`	`string`	-
`initialPhones?`	`string[]`	-
`initialEmails?`	`string[]`	-
`initialLastName?`	`string`	-
`initialFirstName?`	`string`	-

Source Code

Loading component...