Getting Started
Components
- All Components
- Animated Arrow
- Animated Save Button
- Animated Tabs
- Animated List/Grid View
- Animated Copy Button
- Email Dock
- Animated 3D Folder
- Cursor-Tracking Glow Card
- Gradient Border Button
- Inline Edit Animation
- Animated OTP Input
- Liquid Metal Border
- Animated Password Input
- Interactive Pie Chart
- Todo List
- Typewriter
- Interactive World Map
Installation
npx shadcn@latest add https://tentui.com/r/email-dock.json
Usage
Pass an email and an optional highlights array. Hover dock icons to emphasize the matching segment with a gradient and underline. Icons are picked automatically from the segment.
import { EmailDock } from "@/components/email-dock";
export function ContactCard() {
return (
<EmailDock
email="sourabh@srb.gg"
highlights={[
{ segment: "local" },
{ segment: "domain", href: "https://srb.gg", external: true },
{ segment: "full", href: "mailto:sourabh@srb.gg" }
]}
/>
);
}Omit highlights to use the default User / Link / Mail dock.
| Dock icon | segment | Highlights |
|---|---|---|
| User | local | Text before @ |
| Link | domain | Text after @ |
full | Full address |
Patterns
Trim the dock
Pass only the highlights you need.
<EmailDock email="hello@acme.com" highlights={[{ segment: "full" }]} />Props
EmailDock
| Prop | Type | Default | Description |
|---|---|---|---|
email | string | — | Full email shown in the card |
highlights | EmailHighlight[] | default dock | Dock icons and highlight rules |
className | string | — | Card container classes |
EmailHighlight
| Prop | Type | Default | Description |
|---|---|---|---|
segment | "local" | "domain" | "full" | — | Email part to emphasize on hover |
href | string | — | Optional link (e.g. mailto: or website) |
external | boolean | — | Open href in a new tab |
label | string | from segment | Accessible name for the dock control |