Details Panel Split Contact Block for React

The slug keeps shadcn.io's URL. The original made its details panel a solid primary-colour surface; here the emphasis comes from structure instead: a tinted panel, large type and ruled rows. Nothing is a fixed colour, so the panel is light in a light theme and dark in a dark one, and the primary colour stays on the one submit button.

Each copies its row's value (the email address, the phone number or the full street address) to the clipboard and swaps its icon for a check for three seconds. A screen reader hears "Copied" through a polite status inside the button, or "Couldn't copy" if the browser refuses the clipboard (a page not served over HTTPS has none). The value itself is still a link you can select: the email and phone open your mail and phone apps.

Edit PROFILES at the top of the file: a label and an href each. They are a Button Group of outline buttons, and the three are links. Each button renders the link it's given with render, with nativeButton={false}.

Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation. Replace that timer in submit with your own call: details holds the name, email, link and brief. The link field is optional and unchecked; add a rule to problems if you want to require a real URL.

No. hello@dusklight.example uses the .example domain, which is reserved for examples, and +1 (415) 555-0163 is in the 555-0100 to 555-0199 range set aside for fiction. The street is made up. Replace EMAIL, PHONE and ADDRESS at the top of the file. The phone number keeps its order in a right-to-left layout.

Below lg the parts stack: the headline in its tinted band, the form straight after it, then the contact rows and the profile links in a second tinted band. The email shrinks from text-2xl to text-lg and wraps rather than scrolling sideways at 320 pixels, and the submit button goes full width. The headline and the card fade up once on load; with reduced motion they simply appear.