shadcn/ui Button Components

Dev Design Library indexes 191 shadcn/ui button components from 21 open-source UI libraries, with the most coming from Watermelon UI, sv-particles, FLX UI, Shadcn Space and Kokonut UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. They follow the shadcn/ui conventions, so most install with the shadcn CLI and drop into a Tailwind project. Button components belong to the Actions group.

Showing 120 of 191, a mix from every library. Open a library to see all of its components.

• Border Beam ButtonCult UI · ReactShadcn Button wrapped in Border Beam: animated border glow with compact icon and text variants
• AI Input SearchKokonut UI · ReactAI composer with a Tools menu (browse, investigate, draft, run code, reason), a model picker and a live trace that…
• show-moreIntent UI · Reactshow-more
• Circular NavbarSpectrum UI · Reactcomponent for the Circular Navbar
• Alert 11 - Hold to ConfirmShadcn Space · ReactCompact alert dialog where the user presses and holds the revoke button until it fills, preventing accidental clicks
• Border Gradient ButtonPixel Perfect · ReactA button with a gradient border effect.
• Save Buttonuselayouts · ReactA button with animated states for idle, loading, and success.
• Open In ChatAI Elements (Svelte) · SvelteA provider menu for opening prompts in external chat and AI tools.
• Glowing ButtonBadtz UI · ReactA visually distinct button component featuring a configurable, animated glow effect to highlight calls to action or…
• Playground ButtonObsidianUI · React
• ChatGPT ActionsNotra · ReactCopy, share, redo and more buttons, built on shadcn Button and Tooltip.
• Action ButtonNexvyn UI · ReactAn async-aware button with an idle → pending → success/error state machine, promise tracking, abort support, and live…
• Sound Padaudiocn · ReactA trigger pad with one-shot, toggle, hold and loop modes, a hotkey, playback progress and an accent colour, plus a…
• Button 01Watermelon UI · React
• Data Table Column Headersv-table · SvelteA table heading with sorting, pinning, ordering, and visibility actions.
• ButtonHextaUI · ReactButtons in every variant and size, with a built-in loading, success and error flow that skips the spinner for fast…
• ButtonCojeev UI · ReactTriggers an action with native button behavior and an optional busy indicator.
• BasicFLX UI · ReactDefault button with text label.
• Split login pageVelora UI · ReactLogin form with password reveal, remember-me and social sign-in beside an aurora testimonial panel.
• Outline Like With Countsv-particles · SvelteOutlined like button with a heart and the number of likes next to it.
• Buttonark-cn · ReactA shadcn-style button component built with Ark UI primitives.
• Copy ButtonCult UI · ReactButton that copies content to clipboard with feedback
• Gradient ButtonKokonut UI · ReactLayered gradient button with emerald, purple and orange variants, a gradient border, a soft inner glow, press feedback…
• snippetIntent UI · Reactsnippet
• Invite TeammatesSpectrum UI · ReactA one-seat team with an avatar rail, live invite field and copyable join link.
• Button 03 - Shine HoverShadcn Space · ReactShine Hover button component
• Liquid Gradient ButtonPixel Perfect · ReactPremium gradient button with image overlay, loading animation, and 8 color variants: pink, cyan, emerald, amber…
• Claude ActionsNotra · ReactCopy, feedback and retry actions built on shadcn Button and Tooltip.
• Icon BarNexvyn UI · ReactA horizontal toolbar of icon buttons with bloom-open label reveal on hover/selection, accent dot indicator, and roving…
• Soundboardaudiocn · ReactA grid of sound pads with global hotkeys, per-pad mode and volume in a context menu, master volume, stop all, and…
• Button 02Watermelon UI · React
• Data Table Exportsv-table · SvelteDownload typed table rows and columns as a safe CSV file.
• ToggleCojeev UI · ReactA small action with a lasting state: a toolbar tool, a paper bookmark or a descriptive preference. Native targets stay…
• VariantsFLX UI · ReactAll six variants side-by-side: default, secondary, outline, ghost, destructive, link.
• Sign-up cardVelora UI · ReactCentered sign-up card over a grid and light beams, with live password rules, terms and social sign-up.
• Animated Status Dotsv-particles · Svelte
• Download Triggerark-cn · ReactA shadcn-style download trigger utility built with Ark UI primitives.
• Metal ButtonCult UI · ReactShadcn Button wrapped in MetalFx: animated liquid metal ring with text and icon variants
• Now PlayingKokonut UI · ReactMusic card with a spinning disc you can grab and turn to scrub, built with React and Tailwind CSS.
• Loading Button UsageSpectrum UI · Reactcomponent for the Loading Button Usage
• Button 05 - Get Figma FileShadcn Space · ReactGet Figma File button component
• Morph Image ButtonPixel Perfect · ReactA button that morphs an image mask on hover using GSAP.
• Gemini ActionsNotra · ReactFeedback, share, copy and more buttons built on shadcn Button and Tooltip.
• Button 03Watermelon UI · React
• Pagination Arrowsv-table · SvelteCompact arrow pagination for table footers.
• SizesFLX UI · ReactExtra small, small, default, and large sizes.
• Back Link Chevronsv-particles · Svelte
• Particle ButtonKokonut UI · ReactA status button for async actions, with a spinner, a drawn check and a particle burst on success.
• Button CollectionSpectrum UI · React
• Button 06 - Animated BorderShadcn Space · ReactAnimated Border button component
• Mouse Follower ButtonPixel Perfect · ReactA button that follows the mouse cursor with hover effects.
• ButtonNotra · ReactA Base UI button with Depth primary, secondary, outline and destructive variants, squircle corners, and loading and…
• Button 04Watermelon UI · React
• With leading iconFLX UI · ReactButton with an icon placed before the text label.
• Button With Iconsv-particles · Svelte
• Social ButtonKokonut UI · ReactShare button that expands into a row of social icon buttons with staggered Motion animations on hover, built with…
• Button 10 - SaveShadcn Space · ReactSave button component
• Radial Gradient ButtonPixel Perfect · ReactRadial gradient button with inset glow and 8 color variants: blue, purple, emerald, crimson, amber, cyan, violet, rose.
• Perplexity ActionsNotra · ReactThe answer action bar with share, copy, rewrite, feedback and a sources button, built on shadcn Button and Tooltip.
• Button 05Watermelon UI · React
• With trailing iconFLX UI · ReactButton with an icon placed after the text label.
• Cancel Savesv-particles · Svelte
• V0 ButtonKokonut UI · ReactOpen in v0 button that sends a component registry JSON to v0.dev for instant editing, built with React, the shadcn…
• Button 11 - CancelShadcn Space · ReactCancel button component
• Shiny ButtonPixel Perfect · ReactA shiny button with hover effects.
• Perplexity User ActionsNotra · ReactThe time, edit and copy controls beside a user message.
• Button 06Watermelon UI · React
• Icon onlyFLX UI · ReactSquare icon-only buttons in every icon size.
• Card Style Buttonsv-particles · Svelte
• Button 12 - DefaultShadcn Space · ReactDefault button component
• Button 07Watermelon UI · React
• DisabledFLX UI · ReactButton in the disabled state, visually dimmed and non-interactive.
• Chat Input With Voice And Send Buttonsv-particles · Svelte
• Button 13 - Size xsShadcn Space · ReactSize xs button component
• Button 08Watermelon UI · React
• LoadingFLX UI · ReactButton with a spinning loader icon and label, indicating an in-progress async action.
• Copy Buttonsv-particles · Svelte
• Button 14 - Size smShadcn Space · ReactSize sm button component
• Button 1Watermelon UI · React
• As linkFLX UI · ReactLink-styled button that navigates to an external URL, rendered as an anchor with a trailing external-link icon.
• Copy With Feedbacksv-particles · Svelte
• Button 15 - Size lgShadcn Space · ReactSize lg button component
• Button 10Watermelon UI · React
• With avatarFLX UI · ReactUser picker style button with a small avatar image leading the text label.
• Default Buttonsv-particles · Svelte
• Button 17 - Blob FillShadcn Space · ReactCircle blob expands from bottom center on hover to fill the button
• Button 11Watermelon UI · React
• Hover slide arrowFLX UI · ReactCTA arrow nudges right on hover.
• Destructive Buttonsv-particles · Svelte
• Button 19 - Interactive HoverShadcn Space · ReactInteractive Hover button
• Button 12Watermelon UI · React
• With badgeFLX UI · ReactNotification count badge overlapping an icon button.
• Direction Pad Controlssv-particles · Svelte
• Button 22 - Loading ButtonShadcn Space · ReactLoading button component
• Button 13Watermelon UI · React
• Copy to clipboardFLX UI · ReactIcon and label swap to a check on copy.
• Disabled Buttonsv-particles · Svelte
• Button 23 - Permissions ButtonShadcn Space · ReactAnimated Permissions button component
• Button 14Watermelon UI · React
• Hover rotate refreshFLX UI · ReactRefresh button whose icon rotates a full 360° on each click.
• Extra Smallsv-particles · Svelte
• Button 24 - Copy ButtonShadcn Space · ReactAnimated copy button component with spring transitions
• Button 15Watermelon UI · React
• Hamburger toggleFLX UI · ReactThree bars morph into an X on press.
• Get Startedsv-particles · Svelte
• Button 25 - Ripple ButtonShadcn Space · ReactAnimated ripple button component with mouse-click tracking
• Button 16Watermelon UI · React
• Basic groupFLX UI · ReactHorizontal row of buttons with merged borders, used for segmented controls like date range pickers.
• Ghost Buttonsv-particles · Svelte
• Button 31 - Emoji BurstShadcn Space · ReactLike/react button that launches emoji particles that arc, collide with the button, and settle on top, built with a…
• Button 17Watermelon UI · React
• Vertical groupFLX UI · ReactStacked column of buttons with merged borders, used for vertical navigation menus.
• Hamburger Menusv-particles · Svelte
• Button 32 - Generate AIShadcn Space · ReactAI generate button with a continuously spinning conic-gradient border
• Button 18Watermelon UI · React
• Icon toolbarFLX UI · ReactCompact toolbar of icon-only buttons with merged borders, used for text formatting actions.
• Iconsv-particles · Svelte
• Button 33 - Liquid MetalShadcn Space · ReactPill button with an animated liquid metal shader border that flows faster on hover
• Button 19Watermelon UI · React
• With label prefixFLX UI · ReactStatic text label leading a group of action buttons, useful for labelled sort or filter controls.

Libraries with shadcn/ui button components

• Watermelon UI
• sv-particles
• FLX UI
• Shadcn Space
• Kokonut UI

Related categories

• Button Components
• React Button Components
• Tailwind CSS Button Components
• Svelte Button Components
• React Native Button Components
• Animated Button Components
• shadcn/ui Action Components
• shadcn/ui Button Group Components
• shadcn/ui Icon Button Components
• shadcn/ui CTA Button Components
• shadcn/ui Copy Button Components
• shadcn/ui Toggle Button Components