Contact with pill fields

Contact section with service chips.

Usage

import { ContactPillForm } from '@/components/blocks/contact-05'


<ContactPillForm />


// Your own copy, contact items and handler
<ContactPillForm
  title={['Talk to ', { accent: 'sales' }]}
  items={[{ icon: 'mail', label: 'sales@oakbury.example', href: 'mailto:sales@oakbury.example' }]}
  onSubmit={async (values) => {
    await fetch('/api/contact', { method: 'POST', body: JSON.stringify(values) })
  }}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/contact-05

npx shadcn@latest add @pastaui-pro/contact-05

yarn dlx shadcn@latest add @pastaui-pro/contact-05

bunx --bun shadcn@latest add @pastaui-pro/contact-05

Source

Props

Contact with pill fields props
Prop	Type	Default	Description
eyebrow	string	= 'Get in touch'	Small label with a blue dot above the heading. Pass an empty string to hide it.
title	ContactTitlePart[]	= ['Let’s make ', { accent: 'something good' }]	Heading parts. Strings render as-is, { accent } parts render in italic blue.
description	string	= A line about who replies and when	Supporting text under the heading.
items	ContactItem[]	= Email, phone and address	Contact items with an icon ('mail' \| 'phone' \| 'pin' \| 'clock'), a label and an optional href. Pass an empty array to hide the row.
fields	ContactFormField[]	= Name, email, phone, service and project details	Form fields with a name, label, type ('text' \| 'email' \| 'tel' \| 'textarea' \| 'choice'), placeholder, autoComplete, required, minLength, options for choice fields, and half to sit two per row.
submitLabel	string	= 'Send details'	Submit button label.
submitNote	string	= 'We never add you to a mailing list.'	Small note beside the submit button. Pass an empty string to hide it.
successTitle	string	= 'Thanks, we have your details'	Heading of the success panel, also announced to screen readers.
successDescription	string	= A note about the reply time	Text under the success heading.
onSubmit	(values: ContactFormValues) => void \| Promise<void>	= —	Called with the field values once the form is valid. Throw to show your error message. Without it, success is simulated after a short delay.
className	string	= —	Additional classes for the section.
style	CSSProperties	= —	Inline styles, handy for overriding the --pp-* theme variables.