# Social links (goodtabs UI)

A row of icon links to social profiles, each with an accessible name.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/social-links.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/social-links`

## Usage

```tsx
import { SocialLinks } from "@/components/ui/social-links"

<SocialLinks
  links={[
    { name: "GitHub", href: "https://github.com/goodtabs", icon: <GitHubIcon /> },
    { name: "X", href: "https://x.com/goodtabs", icon: <XIcon /> },
  ]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| links | `{ name: string; href: string; icon: ReactNode }[]` |  | The profiles, in order. name is the accessible name. |
| size | `"sm" | "default"` | `"default"` | 28px or 32px tall. |
| showLabels | `boolean` | `false` | Show the name next to the icon. |
| variant | `"ghost" | "outline"` | `"ghost"` | Ghost for footers, outline to stand alone. |

## When to use

- In a footer or an about page, under the name or logo
- On a profile or team card where two to six networks are listed
- Next to a newsletter signup as the other way to follow along

## When not to use

- For share buttons, which need the current url and a different action
- For in-app navigation; these open new tabs
- With more than about six links, where a list with labels reads better

## Notes for agents

- It ships no icons: pass inline SVGs with fill currentColor, since lucide has no brand marks; the demos include X, GitHub, LinkedIn, YouTube and Bluesky
- Every link opens in a new tab with rel noreferrer; the name is the aria-label when labels are hidden
- Icons are muted-foreground and turn foreground on hover through the Button variant
- Server component; the nav takes any nav props, including its own aria-label

Docs: https://ui.goodtabs.co/components/social-links