Shimmer Button
A dark pill CTA with a conic-gradient spark that sweeps around its edge: a rotating cone inside a sliding container, masked by an inset panel that redraws the fill and leaves only the rim glowing.
Preview
Rendered from the story the storybook (a11y) CI gate runs axe against — the preview can't show something that hasn't been verified.
Install
Two equivalent paths — the URL works in any shadcn-CLI setup; the alias works once you've registered @interlace in your components.json.
npx shadcn@latest add https://ds.interlace.tools/r/shimmer-button.jsonnpx shadcn@latest add @interlace/shimmer-buttonBehavior
What this component does — the keyboard path, the measured colour, the text equivalent and the states it can be in. Every figure below is read out of the test or the source that enforces it by scripts/build-behavior-map.mjs, so nothing here can outlive the gate that keeps it true.
3 steps, 3 key presses — replayed on every PR by the play function of KeyboardActivation. Axe cannot press a key, so this — not the a11y scan — is what proves the component is operable without a mouse.
- 1Tab focuses the buttonTab
- 2Enter activates the buttonEnter
- 3Space activates the buttonSpace
Runtime contract
packages/ui/vitest.config.ts ↗Where it renders, how narrow it survives, and whether its lines are inside the coverage gate — three answers a consumer needs before the paste, not after the bug.
- Render boundary
server componentRenders during SSR / RSC with no hydration cost. It can be imported from a server component without pulling the page into the client.
- Minimum viewport
none declaredNo width floor: it takes the width it is given. Its container owns the layout question.
- Coverage gate
not in the gateThe 100% gate currently covers
src/charts/**/*.{ts,tsx}andsrc/lib/**/*.{ts,tsx}andsrc/primitives/{button-variants,data-state-model,meter-scale,skeleton-variants}.tsandsrc/primitives/{alert,aspect-ratio,avatar,badge,box,breadcrumb,button,callout,card,checkbox,container,data-state,focus-ring,grade-badge,grid,input,label,meter,pagination,published-date,reading-time,section,section-boundary,separator,skip-link,stack,stat-strip,tag,textarea,typography,visually-hidden}.tsx. This file is outside it — the glob widens in phase 7.2.
History
This component is at v1.1.0, first shipped in @interlace/ui 1.0.0. The version is stamped as a banner into the file the install writes, so the copy in your tree says which one you have — compare it with the number above before deciding whether to re-run the install.
No release note names this component yet. It shipped with the release above and has not changed since — see the full changelog for what moved elsewhere in the DS.
Import
Single named export.
import { ShimmerButton } from '@/components/ui/magicui/shimmer-button';Anatomy
Extracted from the primitive's JSDoc header. The source is the only documentation that can't drift.
ShimmerButton (button | as — data-slot="shimmer-button",
data-shimmer / data-highlight)
├─ div[data-shimmer-spark] (container-type:size, -z-30, blur)
│ └─ div.animate-shimmer-slide
│ └─ div.animate-spin-around (the conic gradient)
├─ children
├─ div[data-shimmer-highlight] (inset bottom-edge box-shadow glow)
└─ div (inset:var(--cut) panel that re-paints
--bg over the spark, leaving the rim)
All tuning arrives as CSS custom properties on the root: `--spread`,
`--shimmer-color`, `--radius`, `--speed`, `--cut`, `--bg`, plus
`--shimmer-glow` / `--shimmer-glow-strong`, which are `--shimmer-color` at
12% and 25% — the inset highlight is the same light source as the spark, so
it is derived rather than being a second colour to keep in sync.Accessibility
Every story for this component is rendered headlessly and checked with axe-core (wcag2aa, wcag22aa, best-practice, ACT) on every PR. That gate has no continue-on-error, so what ships has zero known violations.
What follows is what static analysis can see. Axe cannot press a key and never sees an overlay open, so the operable-without-a-mouse claim lives in Behavior instead, where the keyboard path is replayed step by step.
- Focus + keyboard behaviour
- Native element semantics — no interaction layer to get wrong.
- Focus ring (WCAG 2.2 SC 2.4.13)
- Not focusable — no focus indicator required.
- Reduced motion
- Animation is gated on prefers-reduced-motion.
- ARIA in the source
- None — semantics come from the element or the Base UI primitive rather than hand-written ARIA.
Examples
11 more states from the same story file.
Dependencies
- Base UI primitive
- Native / no Base UI dependency
- Lucide icons
- none
- NPM dependencies
- none
- Registry dependencies
Source
The full implementation — components/ui/magicui/shimmer-button.tsx once installed.
import React, { ComponentPropsWithoutRef, CSSProperties } from "react"
// @interlace/shimmer-button v1.1.0 — Interlace design system.
// Docs, props and live preview: https://ds.interlace.tools/c/shimmer-button
// What changed since: https://ds.interlace.tools/c/shimmer-button#history
// Generated banner — keep it, the upgrade diff reads this version.
/**
* @interlace/ui — ShimmerButton
*
* A dark pill CTA with a conic-gradient spark that sweeps around its edge: a
* rotating cone inside a sliding container, masked by an inset panel that
* redraws the fill and leaves only the rim glowing.
*
* `shimmer` (the spark) and `highlight` (the inset white glow at the bottom
* edge) toggle independently, so a secondary CTA can share the geometry
* without inheriting either effect.
*
…187 more lines…Registry JSON
The raw registry record — what the shadcn CLI fetches.