Contact section

A validated contact form that morphs into a confirmation, support channels, and office cards with local times.

$npx shadcn@latest add @silicon-ui/contact-section

Installation

$npx shadcn@latest add @silicon-ui/contact-section

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/blocks/contact-section/contact-section.tsx
- components/silicon-ui/blocks/contact-section/contact-section.module.css
- components/silicon-ui/lib/media.ts shared
- components/silicon-ui/textarea/textarea.tsx shared
- components/silicon-ui/textarea/textarea.module.css shared
- components/silicon-ui/segmented-control/segmented-control.tsx shared
- components/silicon-ui/segmented-control/segmented-control.module.css shared
- components/silicon-ui/input/input.tsx shared
- components/silicon-ui/input/input.module.css shared
- components/silicon-ui/copy-button/copy-button.tsx shared
- components/silicon-ui/copy-button/copy-button.module.css shared
- components/silicon-ui/lib/use-copy-feedback.ts shared
- components/silicon-ui/button/button.tsx shared
- components/silicon-ui/button/button.module.css shared
- components/silicon-ui/avatar/avatar.tsx shared
- components/silicon-ui/avatar/avatar.module.css shared
- components/silicon-ui/lib/silicon-provider.tsx shared
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { ContactSection } from "@/components/silicon-ui/blocks/contact-section/contact-section";

Prop	Type	Default
`variant` `form` validates and morphs into a confirmation, `channels` lists ways to reach you, `offices` shows live local times.	`ContactSectionVariant` `"form""channels""offices"`	`"form"`
`title`	`string`	—
`description`	`string`	—
`topics` Topics offered in the form.	`string[]`	`["Sales", "Support", "Partnerships", "Press"]`
`onSubmit` Called with a valid message. Reject to keep the form and show an error; resolve to show the confirmation.	`(message: ContactMessage) => void \| Promise<void>`	—
`channels`	`ContactChannel[]`	`contactExampleChannels`
`channel` Selected channel (controlled).	`string`	—
`defaultChannel`	`string`	—
`onChannelChange`	`(value: string) => void`	—
`offices`	`ContactOffice[]`	`contactExampleOffices`
`className`	`string`	—

Also accepts the props of HTMLAttributes.

Prop	Type	Default
`variant`	`ContactSectionVariant` `"form""channels""offices"`	`"form"`

npm: lucide-react motion
Registry: silicon-motion-tokens avatar button copy-button input segmented-control textarea