Email Dock
An accessible Email Dock component for React and shadcn/ui that highlights and links the username, domain, or complete email address.
Email Dock is a copy-and-paste React component for turning a plain contact address into an interactive set of username, website, and email actions. Install it through the shadcn CLI, then customize the links and accessible labels for a portfolio, profile, or contact page.
Features
- Highlights the username, domain, or full address independently.
- Activates highlights on pointer hover, keyboard focus, or button click.
- Supports links and custom accessible labels for dock actions.
Installation
pnpm dlx shadcn@latest add @tentui/email-dock
Usage
import { EmailDock } from "@/components/email-dock";const email = "hello@example.com";
<EmailDock
email={email}
highlights={[
{ segment: "local" },
{ segment: "domain", href: "https://example.com", external: true },
{ segment: "full", href: `mailto:${email}` },
]}
/>Omit highlights to render the default username, domain, and full-address
actions without links.
Accessibility
The address is exposed to assistive technology as one complete email address, while its decorative segments are hidden. Each dock action is a native button or link with an accessible label and a visible focus ring. Keyboard focus activates the corresponding highlight.
Provide label when the built-in username, domain, or email label does not
describe a custom action.
Related components
Use Copy Button when visitors also need to copy the address to their clipboard, or Animated Arrow when a single contact link needs directional hover and keyboard-focus feedback.