# Radial Share

> A radial share speed-dial — a central share FAB fans four social spokes (Instagram, LinkedIn, Threads, YouTube) out along a springy clockwise arc, framed by a connecting accent ring and soft halo, closes on Escape or outside click, fully token-driven and design-system agnostic.

- Category: Social
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Sienna
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: radial
- Page: https://builder.atheros.ai/components/radial-share
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_radial_share/preview-264d3b00ca09.webp

## Features

- Central circular share FAB that fans four social spokes out on open — Instagram, LinkedIn, Threads, and YouTube using Tabler Icons (inline SVGs, 24x24, stroke-width 2)
- Spokes sweep to four cardinal points along a clockwise arc — a per-item rotation plus a counter-rotated `translateX` on the spoke keeps every glyph upright through the springy overshoot flight
- Staggered per-spoke `transition-delay` cascades items outward on open and retracts them in reverse order on close, with a faster ease-in exit curve
- A hairline accent ring scales in to connect the open spokes and a soft radial halo glows behind the fan, both fading out on close
- FAB icon morphs between the share glyph and a close glyph with a rotate-and-scale cross-fade; the FAB lifts on hover, compresses on press, and lights up in the accent with a tinted elevation shadow while open
- Unified accent hover on every spoke: the fill takes `--primary` with a subtle sheen gradient and the glyph takes the derived on-primary color, so legibility retones across design systems
- Hover/focus tooltips label each spoke (Instagram, LinkedIn, Threads, YouTube) in an inverse `--text`/`--bg` pill
- Spokes are `visibility: hidden` and non-tabbable while closed; Escape closes and returns focus to the FAB
- All colors, shadows, and motion driven by CSS custom properties for easy theming, with dark-tuned elevation swapped in by `body.dark`

## Accessibility

- **ARIA expanded** — FAB is a `<button aria-expanded aria-controls="rsh-menu" aria-label="Share">` toggled on open
- **Focus management** — Escape closes the dial and returns focus to the FAB
- **Tab order** — Spokes are `visibility: hidden` and non-tabbable while closed
- **Social links** — Real `<a>` with `target="_blank"` and `rel="noopener noreferrer"` and `aria-label`
- **Focus indicators** — `:focus-visible` with `--ring` outline on all elements
- **Reduced motion** — `prefers-reduced-motion: reduce` opens the dial instantly, still functional

## Keyboard shortcuts

- `Enter` — Activate the focused FAB to open or close the dial
- `Space` — Activate the focused FAB to open or close the dial
- `Escape` — Close the dial and return focus to the FAB

## Common questions

**Which frameworks is Radial Share available in?**

Radial Share 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 the Radial Share social component free?**

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

**Does Radial Share support dark mode?**

Yes. Radial Share ships light and dark themes, both drawn from the Sienna design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Radial Share 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/radial-share

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