Buttons that move.

35 buttons with motion or a state of their own: an arrow that slides in, a ripple from the press, a glowing border, a copy that confirms itself, confetti. Each is a Button underneath, so every variant and size still works.

A plain Button has variants and sizes; these add a motion or a state to it. Each is one small component you install and read in a minute, built on shadcn.io's own Button; the groups (progress and results, controls, hover reveals, surfaces, glow and light, motion and feedback) filter the gallery by what the button does.

They are shadcn.io's own components: shadcn.io is an independent project built on @shadcn's shadcn/ui (ui.shadcn.com). They follow its copy-the-code model: the file lands in your project and is yours to edit.

Signed in, copy the button's command from its page: `npx shadcn@latest add` with the item's URL. It adds the button's file to your components folder, with the Button it builds on, and the keyframes it needs to your stylesheet.

With the CLI, nothing: it merges the item's keyframes and `animate-*` utility into your CSS. Installing by hand, the Manual tab on the button's page has a globals.css step with that CSS; paste it in or the button won't move. That CSS is code, behind the same gate as the component.

Yes: the Button it builds on comes with it, and so does any registry dependency, such as the Spinner a Loading Button uses. Nothing else is required: no animation package.

React on Base UI, React Aria, Ark UI or Radix UI, and Vue, Svelte and Solid on Ark UI. Pick the framework and the library at the top of a button's page: the demos, the code and the install command follow them.

Each is written once on Base UI and the other bases are generated from it, so a button uses only what all four Button components share: variant, size, pill, isLoading, className and the DOM events. Pressed state is `:active` on three bases and `data-pressed` on React Aria; the CSS covers both.

Yes, they are plain TypeScript with Tailwind CSS v4 classes, React, Vue, Svelte and Solid. Tailwind turns each button's `animate-*` utility into a class, and the install adds the matching theme variable, so a Tailwind v4 project is required.

Transitions and keyframes, driven by `:hover`, `:focus-visible`, `:active` and data attributes, with the keyframes added to your stylesheet. CSS runs on the compositor, needs no animation library, and keeps the button a server component where it can.

Not all of it. A button that holds a state (copied, recording, a count) keeps that state in React and writes it as one data-state attribute; CSS draws every state, and timers only change state. A pointer effect writes two CSS variables per move. Nothing re-renders while something moves.

They animate transform, opacity and clip-path, not width, margin or box-shadow, so the button does not reflow the page while it moves. Parts that grow use a grid track from 0fr to 1fr instead of animating a width.

Yes. Every loop stops and every move becomes a fade or nothing under `prefers-reduced-motion`, and the button still shows what changed: a copied check still appears. Anything directional is mirrored in right-to-left pages.

Use the Button's own `isLoading`: it sets `disabled` and `aria-busy` and draws a spinner over the label, which keeps its width. The Loading Button adds `loadingText` and `spinnerPosition`: the label rolls out while the spinner and the loading label roll in, presses are ignored while it loads, and it uses `aria-disabled` so focus stays.

Disabled looks dimmed and takes no pointer events, as the Button does. A button that must stop presses mid-state (loading, counting down) uses `aria-disabled` and returns early in its handler rather than setting `disabled`, so it stays focusable and its width does not change.

Yes: Arrow Button ships a link demo. Each base makes a link its own way: `render={<a href />}` with `nativeButton={false}` on Base UI, `asChild` on Radix UI and Ark UI, and a hand-kept twin on React Aria. Its decoration is drawn on the Button itself, as a pseudo-element, so the link keeps one child.

Every Button variant (default, destructive, outline, secondary, ghost, link) and size (xs, sm, md, lg, xl and the icon sizes) works, plus `pill`. Most buttons draw their effect on top of whichever variant you pick; a few, like Underline Button, default to the ghost variant because the effect needs it.

A status a screen reader needs (copied, done, failed) is a visually hidden `role="status"` span inside the button, never a sibling, so it works inside a ButtonGroup. The decoration is `aria-hidden` and ignores the pointer.

Colors default to theme tokens such as `var(--primary)`, so a button follows your theme and dark mode with no change. A button with a color prop (Neon Button's `glowColor`, for instance) takes any CSS color, which is written to a CSS variable.

Durations are CSS variables with a fallback in the utility, named after the button, such as `--shimmer-button-duration`; the prop sets it on the button's own span. Some buttons take `intensity` (subtle, medium, strong) or a `duration` in milliseconds. Each page's API table lists them.

Each part has a `data-slot`, such as `shimmer-button-ring`, so style it from outside with `*:data-[slot=...]:` utilities. There are no `*ClassName` props. The code is in your project, so editing it is also fine.

The decoration (glints, rings, particles) is `aria-hidden` and `pointer-events-none`, so clicks reach the Button and a screen reader reads only its label. The label is meant to stay readable on every variant in light and dark; check a custom color in both themes.

9 of the 35 buttons are free: they take a free account (Google or GitHub sign-in) to see the code and install them, and carry no mark in the gallery. The other 26, marked Pro, take a Pro plan. Every demo is free to try here, for anyone, with no account.

Seeing, copying or installing a Pro button's code takes a Pro plan; the page and its demo stay free to view. Individual is personal, non-commercial use only. Client work or anything your users pay for takes a Team (up to 5 seats in one company) or Organization license, each monthly, yearly or a one-time Lifetime.

Not on its own. Redistributing the Pro code, or building UI libraries, themes, templates, starter kits or Figma kits from it, is never allowed. Free buttons need only a free account. The full terms are on the license page.

You keep using what you installed in existing projects, but get no new downloads or updates, and the MCP answers 403. The code you copied is yours to edit and keep.

With Pro, yes: the MCP server exposes 22 tools, and its catalog serves the animated buttons. Describe what you want (a copy button that confirms, a button that asks for a long press) and your agent searches, picks one and installs it on your stack. Your personal MCP URL is at /dashboard/mcp.

No. The MCP is one-way: the agent asks for items and the server answers; your files never leave your machine. It needs a Pro plan, and answers 403 after a subscription ends.