Shadcn.io is not affiliated with official shadcn/ui
Gradient Button
Button with a vibrant animated linear-gradient background that shifts colors continuously for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Gradient Button preview
Colors in motion. This button's gradient background smoothly rotates through a vibrant palette—like oil on water or a mood ring coming to life. The default is intentionally bold (violet → pink → blue) because gradient-button exists for impact; theme-pure shadcn buttons live elsewhere in the registry. Pass your own colors array — including theme tokens like var(--primary) — for full brand control. White text + text-shadow for legibility on any gradient position. Built on top of the shadcn Button so every variant and size you already use just works.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this button for you — no copy-paste, no CLI:
use shadcnio to install the gradient-button button into my projectRelated Components
Shimmer Button
Animated shimmer ring
Shine Button
Diagonal light sweep
Glow Border Button
Continuous rotating glow
Neon Button
Glowing neon halo
Pill Button
Pill with inset highlight
Flow Button
Hover rotating border
FAQ
Was this page helpful?
Sign in to leave feedback.
Glow Border Button
Animated gradient glow border button with rotating light effect for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Icon Button
Animated icon button with active state glow, particles, and color customization for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.