Shadcn.io is not affiliated with official shadcn/ui
Pill Button
Pill-shaped button with a primary-tinted ring and inset highlight that suggests a curved surface for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Pill Button preview
Confident pill button with a soft inner highlight that suggests a curved surface — like light catching the top edge of a polished button. A primary-tinted ring keeps it visually anchored without competing with the label. On hover the inner highlight retracts subtly, giving the button a pressed-but-poised feel. Perfect for prominent CTAs, navigation actions, or anywhere you want a tactile, premium feel. 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 pill-button button into my projectRelated Components
Arrow Button
Hover slides in arrow
Depth Button
Tactile 3D press
Liquid Button
Rising liquid fill
Underline Button
Growing underline
Gradient Button
Shifting gradient bg
Shine Button
Diagonal light sweep
FAQ
Was this page helpful?
Sign in to leave feedback.
Neon Button
Button with glowing neon effect and subtle flicker on hover for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Pulse Button
Attention-grabbing button with pulsing rings that radiate outward for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.