Split contact

Dark split contact section with a form card.

Usage

import { ContactSplit } from '@/components/blocks/contact-01'


<ContactSplit />


// Send the form to your own endpoint
<ContactSplit
  email="studio@halcyon.example"
  onSubmit={async (values) => {
    const response = await fetch('/api/contact', {
      method: 'POST',
      body: JSON.stringify(values),
    })
    if (!response.ok) throw new Error('We could not send your message. Please try again.')
  }}
/>


// Your own copy, socials and fields
<ContactSplit
  headline={['Need a hand?', 'Talk to us.']}
  availability="Online now"
  socials={[
    { label: 'Halcyon on X', href: '#', icon: 'x' },
    { label: 'Halcyon on YouTube', href: '#', icon: 'youtube' },
  ]}
  fields={[
    { name: 'name', label: 'Your name', autoComplete: 'name', required: true },
    { name: 'email', label: 'Work email', type: 'email', autoComplete: 'email', required: true },
    { name: 'budget', label: 'Budget', type: 'select', options: ['Under $10k', '$10k to $50k', 'Over $50k'] },
    { name: 'message', label: 'How can we help?', type: 'textarea', required: true, minLength: 10 },
  ]}
/>

Install

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

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

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

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

Source

Props

Split contact props
Prop	Type	Default	Description
headline	string[]	= ['Have something in mind?', 'Tell us.']	Headline lines, each on its own line.
email	string	= 'studio@corvane.example'	Email address shown as a mailto link. Pass an empty string to hide it.
emailLabel	string	= 'Prefer email? Write to us at'	Text before the email link.
socials	ContactSocial[]	= Instagram, LinkedIn and X	Round social buttons, each with a label (used as the accessible name), an href and an icon: 'instagram', 'linkedin', 'x', 'youtube' or your own node.
availability	string	= 'Booking projects for spring'	Text beside the live dot. Pass an empty string to hide the badge.
formTitle	string	= 'Tell us about the project and we'll come back with a plan'	Heading inside the form card.
fields	ContactField[]	= Name, email, project type and details	Form fields, each with a name, label, type ('text', 'email', 'textarea' or 'select'), autoComplete, required, minLength and select options.
submitLabel	string	= 'Start the conversation'	Submit button text.
successTitle	string	= 'Got it, thank you'	Heading of the success panel, which receives focus after sending.
successDescription	string	= 'Someone from the studio will read your note…'	Text under the success heading.
onSubmit	(values: Record<string, string>) => void \| Promise<void>	= Simulated success after 1.2s	Called with the field values once the form is valid. Throw an Error to show its message in the card.
className	string	= —	Additional classes for the section.
style	CSSProperties	= —	Inline styles, handy for overriding the --pp-* color variables.