Social Links
Follow row
The five networks a footer usually carries, as soft tiles that take the primary colour on hover.
links- is the only required prop:
{ network, href, label? }[]. Order is drawn as given; a network you leave out is simply not there. external- is on by default, so every link opens in a new tab with
rel="noopener noreferrer"—mailto:links are left alone. Turn it off for internal hrefs.
Installation
New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.
Install Social Links
components/ is written into your project. Copy any snippet from a Usage tab above and it runs.
Install dependencies
Nothing beyond the shared setup — Social Links needs only the cn helper and lucide-react, which the installation guide already put in place.
Examples
Expand and replace share button (Trigger hides on hover)
Share trigger button hides on hover, with social link icons revealing directly from the trigger position in 4 directions.
variant"expand-replace"- hides the trigger button on hover and expands social link icons starting directly from its exact position.
expandDirection"top" | "right" | "left" | "bottom"- controls direction of animated reveal. Defaults to "right".
Expandable 4-directional share buttons
Icon-only share button trigger that animates social icons expanding smoothly in 4 directions: top, right, left, or bottom.
variant"expand-reveal"- renders an icon-only Share trigger button that expands social link tiles on mouse hover.
expandDirection"top" | "right" | "left" | "bottom"- controls direction of animated reveal. Defaults to "right".
Every network, outlined
All nine networks at the large size on the outline surface.
variant"outline"- draws a border instead of a fill;
"ghost"draws nothing until hover."tile"is the default. size"lg"- sets the tile and mark together: sm is 32px, md 40px, lg 48px.
Author byline
Small ghost tiles under a name, with a label per link so a screen reader says whose profile it is.
label- on a link overrides the accessible name — the default is the network's name, e.g. "GitHub".
className- lands on the row, so
gap-*andjustify-*tune spacing and alignment.
Features
No icon package
Brand marks are inline SVG. Lucide dropped its brand icons, so this never breaks when an icon library updates.
Named for screen readers
Every tile carries an aria-label and title — the network's name by default, or whatever label you pass — and a visible focus ring.
Safe off-site links
External links open in a new tab with noopener noreferrer. Email links stay in place, because a new tab for mailto is just an empty tab.
Works with your router
Pass linkComponent={Link} from next/link when some hrefs are internal; a plain anchor is the default so it runs anywhere.
Props Reference
SocialLinks
| Prop | Type | Default | Description |
|---|---|---|---|
links | SocialLink[] | — | The row, in order. See the shape below. |
variant | "tile" | "outline" | "ghost" | "tile" | Soft fill, border, or nothing until hover. |
size | "sm" | "md" | "lg" | "md" | Tile and mark size: 32, 40 or 48px. |
external | boolean | true | Open links in a new tab with rel="noopener noreferrer". mailto: hrefs are exempt. |
linkComponent | React.ElementType | "a" | The element used for each link — pass next/link for internal hrefs. |
className | string | — | Applied to the row; other props are spread there too. |
SocialLink
| Field | Type | Description |
|---|---|---|
network | "x" | "github" | "linkedin" | "youtube" | "instagram" | "facebook" | "discord" | "dribbble" | "email" | Which mark to draw. |
href | string | Where it goes. |
label | string | Accessible name. Defaults to the network's name. |