A light editorial contact section with a huge serif Let's talk headline, a fill-in-the-blanks sentence form with suggestion chips, and studio details on the side.
npx shadcn@latest add https://hyperblur.dev/r/contact-minimal-light.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/contact-minimal-light.tsx.
import { ContactMinimalLight } from "@/components/hyperblur/contact-minimal-light"
<ContactMinimalLight studio="Studio Halden" onSubmit={async (values) => sendNote(values)} />| Prop | Type | Default | Description |
|---|---|---|---|
| studio | string | "Studio Halden" | Name in the top bar. |
| availability | string | "Booking projects from January 2027" | Status next to the green dot in the top bar. Pass an empty string to hide it. |
| title | string | "Let's" | First part of the headline. |
| highlight | string | "talk." | Italic accent part of the headline. |
| suggestions | string[] | 4 suggestions | Chips that fill the I'd like to blank. Pass an empty array to hide them. |
| details | { label: string; lines: string[]; link?: { label: string; href: string } }[] | Email, Studio, Phone, Elsewhere | Contact details listed beside the form. |
| responseNote | string | "We reply within two working days." | Note next to the send button. |
| onSubmit | (values: { name: string; company: string; intent: string; email: string }) => void | Promise<unknown> | Called with the filled blanks after validation. Company is optional. A returned promise keeps the loading state until it settles. | |
| accent | string | "#e5532d" | Headline accent, filled text and button hover color. |