# Social Profile Tabs

> A social profile card with a verified avatar, a stateful Follow toggle (outlined fills on hover, plus rotates, a destructive unfollow state), a four-stat count-up row animated on scroll, an about block with socials and location, and a tabbed Experience/Skills/Reviews panel with a sliding active-tab indicator.

- Category: Profile
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Aperture
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: card, tabs, social
- Page: https://builder.atheros.ai/components/profile-tabs-social
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_profile_tabs_social/preview-5df820d424af.webp

## Features

- The verified-badge cutout remains visible across host-supplied light and dark themes.
- Cover photo header with an overlapping rounded avatar and an animated verified badge (pop-in)
- Name row with a stateful Follow toggle: outlined base, indigo fill slides in on hover, plus icon rotates, follow/following/unfollow with a red destructive hover state
- Four-stat highlights row (Followers, Following, Posts, Hourly Rate) with count-up numbers animated via IntersectionObserver
- About block with a bio, social links (GitHub, LinkedIn, X) and a location link
- Tabbed panel (Experience / Skills / Reviews) with a CSS `:has()`-driven sliding active-tab indicator
- Staggered fade-and-slide entrance for the name, stats, about, tabs, and CTA blocks
- Shimmer-sweep primary CTA driven by a transform-based highlight overlay
- Dark mode is supplied by the host/browser

## Accessibility

- **ARIA labels** — All buttons and icon links carry `aria-label` or visible text
- **Follow toggle** — `<button>` with `aria-pressed` reflecting follow state
- **Tabs** — `role="tablist"` / `role="tab"` / `role="tabpanel"` with `aria-selected` and `aria-controls`
- **Keyboard nav** — ArrowLeft/ArrowRight/Home/End navigation moves between tabs
- **Focus indicators** — `:focus-visible` with `--ring` outline on all elements
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations
- **Viewport** — `100dvh` for mobile-safe viewport height

## Keyboard shortcuts

- `ArrowLeft / ArrowRight / Home / End` — Move focus and selection between tabs

## Common questions

**Which frameworks is Social Profile Tabs available in?**

Social Profile Tabs ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Social Profile Tabs free?**

Social Profile Tabs is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Social Profile Tabs support dark mode?**

Yes. Social Profile Tabs ships light and dark themes, both drawn from the Aperture design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Social Profile Tabs live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/profile-tabs-social

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt