Make the UI Hit Different.

Small Pieces. Big Energy.

Details That Do the Heavy Lifting.

Drop in polished buttons, effects, interactions, and UI details that make every build feel custom.

86 components

Detailed product specs...
21st.dev

Basic Accordion

expand x collapse

Clean expandable accordion with smooth height transitions. From Bundui.

accordionexpandcollapse+1
Accordion1 / 86
Content for product information goes here with smooth height animation.
21st.dev

Plus Icon Accordion

plus x rotate

Accordion with animated plus/minus icon rotation. From Bundui.

accordioniconrotate+1
Accordion2 / 86
21st.dev

FAQ Accordion

faq x chevron

FAQ-styled accordion with chevron animation. From Syntax UI.

faqaccordionchevron+1
Accordion3 / 86
Changes saved successfully!
21st.dev

Success Alert

success x dismiss

Green success alert with dismiss button. From Bundui.

alertsuccessgreen+1
Alert4 / 86
⚠️ Something went wrong. Please try again.
21st.dev

Destructive Alert

error x icon

Red destructive alert with warning icon. From Bundui.

alerterrordestructive+1
Alert5 / 86
🎉 New feature: Dark mode is here!
21st.dev

Announcement Banner

banner x sticky

Top-of-page announcement banner with link. From Animata.

bannerannouncementribbon+1
Alert6 / 86
A
B
C
D
E
+3
21st.dev

Avatar Group

stack x overlap

Stacked avatar group with overlap and +N overflow. From Bundui.

avatargroupstack+1
Avatar7 / 86
AK
online
JD
away
MR
offline
21st.dev

Avatar Ring

ring x status

Avatar with coloured status ring (online/offline). From Animate UI.

avatarringstatus+1
Avatar8 / 86
DesignReactNew
21st.dev

Outline Badge

outline x pill

Minimal outline-styled badge with rounded pill shape. From Bundui.

badgeoutlinepill+1
Badge9 / 86
PremiumActive
21st.dev

Gradient Badge

gradient x glow

Gradient badge with subtle glow effect. From Magic UI.

badgegradientglow+1
Badge10 / 86
21st.dev

Slash Breadcrumb

slash x muted

Simple breadcrumb with slash separators. From Bundui.

breadcrumbslashnav+1
Breadcrumb11 / 86
Website OS

Magnetic Button

spring x magnetic

Pill button that leans toward the cursor with tactile press. From Aceternity.

buttonmagneticspring+2
Button12 / 86
21st.dev

Rainbow Button

animated x gradient

Button with animated rainbow gradient border. From Magic UI.

buttonrainbowgradient+1
Button13 / 86
21st.dev

Shimmer Button

shimmer x pulse

Button with shimmer sweep animation on hover. From Magic UI.

buttonshimmersweep+1
Button14 / 86
21st.dev

Ripple Button

ripple x click

Button with material ripple effect on click. From Animata.

buttonripplematerial+1
Button15 / 86
21st.dev

Shining Button

shine x beam

Button with animated shine/beam sweep across surface. From Animata.

buttonshinebeam+1
Button16 / 86
21st.dev

Slide Arrow Button

arrow x slide

Button with arrow that slides on hover. From Animata.

buttonarrowslide+1
Button17 / 86
21st.dev

Liquid Button

liquid x blob

Button with liquid morphing hover effect. From Animate UI.

buttonliquidblob+1
Button18 / 86
21st.dev

Neumorph Button

neumorphic x shadow

Neumorphic button with soft pressed/raised shadows. From Cult UI.

buttonneumorphicshadow+1
Button19 / 86
21st.dev

Cosmic Button

cosmic x orbit

Button with orbiting particles and cosmic glow. From Cult UI.

buttoncosmicorbit+1
Button20 / 86

3D Card

Hover over this card to see the 3D tilt effect in action.

21st.dev

Card Hover Effect

3d x tilt

Card with 3D perspective tilt on mouse hover. From Aceternity.

cardhover3d+2
Card21 / 86

Spotlight Card

Move your cursor to reveal the spotlight.

21st.dev

Card Spotlight

spotlight x radial

Card with radial spotlight following the cursor. From Aceternity.

cardspotlightradial+1
Card22 / 86

Glowing Card

Animated gradient border glow

21st.dev

Glowing Card

glow x border

Card with animated glowing border gradient. From Animata.

cardglowborder+1
Card23 / 86

Click to flip

21st.dev

Flip Card

flip x backface

Card that flips to reveal content on the back. From Animata.

cardflip3d+1
Card24 / 86

Magic Card

Animated gradient border

21st.dev

Magic Card

gradient x border

Card with animated gradient border rotation. From Magic UI.

cardmagicgradient+1
Card25 / 86

Card 1

Card 2

Card 3

21st.dev

Card Stack

stack x fan

Stacked cards with fan-out on hover. From Animata.

cardstackfan+1
Card26 / 86
Aurora
Meridian
Ember
21st.dev

Image Carousel

swipe x dots

Horizontal image carousel with dot indicators. From Bundui.

carouselimageswipe+1
Carousel27 / 86
21st.dev

Apple Cards Carousel

cards x parallax

Apple-style card carousel with scaling parallax. From Aceternity.

carouselapplecards+1
Carousel28 / 86
1
2
3
4
5
21st.dev

3D Carousel

3d x rotate

3D rotating carousel with perspective transforms. From Cult UI.

carousel3drotate+1
Carousel29 / 86
21st.dev

Animated Checkbox

check x spring

Checkbox with spring-animated check mark. From Animate UI.

checkboxanimatedspring+1
Checkbox30 / 86

The row animates from 0fr to 1fr, so the panel reveals smoothly without measuring the content or hard-coding a pixel height.

21st.dev

Collapsible Reveal

reveal x height

Smooth height-reveal collapsible section. From Bundui.

collapsiblerevealheight+1
Collapsible31 / 86
⌘K|Search...
21st.dev

Command Palette

cmd+k x overlay

Apple Spotlight-style command palette with search. From Bundui.

commandpalettesearch+1
Command32 / 86
21st.dev

Context Menu

right-click x popover

Right-click context menu with icons and shortcuts. From Bundui.

contextmenuright-click+1
Context Menu33 / 86
NameRoleStatus
AliceAdminActive
BobEditorAway
21st.dev

Data Table

sort x filter

Sortable, filterable data table with striped rows. From Bundui.

tabledatasort+1
Data Table34 / 86
21st.dev

Animated Dialog

scale x fade

Dialog with scale+fade enter animation and backdrop. From Animate UI.

dialogmodalanimate+1
Dialog35 / 86
21st.dev

Bottom Drawer

slide-up x sheet

Bottom sheet drawer with drag handle. From Cult UI.

drawersheetbottom+1
Dialog36 / 86
21st.dev

Gradient Divider

gradient x fade

Horizontal divider with gradient fade to transparent. From Bundui.

dividergradientfade+1
Divider37 / 86
21st.dev

Dropdown Menu

radix x animated

Animated dropdown menu with enter/exit transitions. From Animate UI.

dropdownmenuanimated+1
Dropdown Menu38 / 86

Hover Card

Rich preview on hover with delay.

21st.dev

Hover Card

pop x delay

Card that pops up on hover with content preview. From Bundui.

hovercardpop+1
Hover Card39 / 86
Website OS

Glow Input

focus x glow

Text input with accent focus glow and animated ring. From Website OS.

inputglowfocus+1
Input40 / 86
🔍
21st.dev

Gooey Input

gooey x expand

Search input that expands with gooey SVG filter. From Aceternity.

inputgooeyexpand+1
Input41 / 86
21st.dev

Vanish Input

vanish x placeholder

Input with animated vanishing placeholder text. From Aceternity.

inputvanishplaceholder+1
Input42 / 86
21st.dev

OTP Input

otp x digit

One-time-password input with individual digit boxes. From Bundui.

otpinputdigit+1
Input OTP43 / 86
21st.dev

Dot Pagination

dots x swipe

Dot-indicator pagination for carousels and sliders. From Bundui.

paginationdotsswipe+1
Pagination44 / 86
21st.dev

Info Popover

tooltip x card

Rich popover with title, description, and image. From Animate UI.

popovertooltipinfo+1
Popover45 / 86
0%
21st.dev

Animated Progress

fill x spring

Progress bar with spring-animated fill width. From Animata.

progressbarspring+1
Progress46 / 86
21st.dev

Circular Progress

circle x stroke

SVG circular progress indicator with animated stroke. From Magic UI.

progresscirclesvg+1
Progress47 / 86
21st.dev

Radio Group Cards

cards x select

Radio group styled as selectable cards. From Bundui.

radiogroupcards+1
Radio Group48 / 86
21st.dev

Animated Select

dropdown x spring

Select dropdown with spring-animated chevron rotation. From Bundui.

selectdropdownspring+1
Select49 / 86
21st.dev

Side Sheet

slide x overlay

Side sheet panel sliding from the right edge. From Bundui.

sheetsideslide+1
Sheet50 / 86
21st.dev

Collapsible Sidebar

collapse x icons

Sidebar that collapses to icon-only mode. From Bundui.

sidebarcollapsenav+1
Sidebar51 / 86
21st.dev

Card Skeleton

pulse x shimmer

Card skeleton loader with shimmer pulse animation. From Animata.

skeletoncardshimmer+1
Skeleton52 / 86
50%
21st.dev

Range Slider

dual x thumb

Dual-thumb range slider with coloured track fill. From Bundui.

sliderrangedual+1
Slider53 / 86
21st.dev

Animated Switch

toggle x spring

Toggle switch with spring-animated thumb slide. From Animate UI.

switchtogglespring+1
Switch54 / 86
21st.dev

Underline Tabs

underline x slide

Tabs with sliding underline indicator. From Bundui.

tabsunderlineslide+1
Tabs55 / 86
21st.dev

Fluid Tabs

fluid x morph

Tabs with fluid morphing pill indicator. From Animata.

tabsfluidmorph+1
Tabs56 / 86
21st.dev

Gooey Tabs

gooey x filter

Tabs with gooey SVG filter pill indicator. From Animata.

tabsgooeyfilter+1
Tabs57 / 86
21st.dev

Toggle Group

group x multi

Multi-select toggle group with highlighted active items. From Bundui.

togglegroupmulti+1
Toggle Group58 / 86
21st.dev

Animated Tooltip

scale x fade

Tooltip with scale+fade animation on hover. From Aceternity.

tooltipanimatedscale+1
Tooltip59 / 86
Website OS

Gradient Orb

volumetric x spring

Soft volumetric gradient sphere that slowly breathes — a signature hero accent.

conic-gradientinfiniteblur+1
Motion60 / 86
Website OS

Scramble Text

hover x decode

Letters scramble through glyphs on hover, then resolve. From Website OS.

hoverdecodemonospace
Text61 / 86
MeridianAuroraBroadsheetAtelierNorthwindCogniMeridianAuroraBroadsheetAtelierNorthwindCogni
Website OS

Logo Marquee

infinite x loop

Endless, reduced-motion-aware marquee for logos or tag rows.

infinitelogosloop
Motion62 / 86
0.0%
avg. conversion lift
Website OS

Count-up Stat

count x on-view

Stat that counts up once when scrolled into view.

statin-viewnumbers
Data63 / 86
✦ Build Faster ✦✦ Ship Beautiful ✦✦ Build Faster ✦✦ Ship Beautiful ✦
21st.dev

Marquee Text

scroll x repeat

Horizontally scrolling text marquee with pause on hover. From Magic UI.

marqueescrolltext+1
Motion64 / 86

Build beautiful websites

21st.dev

Text Animate

word x crossfade

Crossfading word animation cycling through options. From Magic UI.

textanimatecrossfade+1
Text65 / 86

Aurora Effect

21st.dev

Aurora Text

aurora x gradient

Text with animated aurora borealis gradient effect. From Magic UI.

textauroragradient+1
Text66 / 86

Gradient Text

21st.dev

Animated Gradient Text

gradient x scroll

Text with animated background gradient. From Animata.

textgradientanimated+1
Text67 / 86

|

21st.dev

Typewriter Text

type x cursor

Typewriter effect with blinking cursor. From Cult UI.

texttypewritercursor+1
Text68 / 86

Shimmer TextShimmer Text

21st.dev

Shimmer Text

shimmer x sweep

Text with animated shimmer sweep effect. From Animata.

textshimmersweep+1
Text69 / 86

GLITCH

21st.dev

Glitch Text

glitch x rgb

Text with RGB split glitch animation on hover. From Animata.

textglitchrgb+1
Text70 / 86
0
21st.dev

Number Counter

roll x digit

Animated number counter with rolling digit effect. From Animata.

textcounternumber+1
Text71 / 86
21st.dev

Spinner Loader

spin x orbit

Classic spinning loader with orbit animation. From Syntax UI.

loaderspinnerorbit+1
Loader72 / 86
●●●
21st.dev

Dots Loader

bounce x stagger

Three bouncing dots loader with staggered animation. From Syntax UI.

loaderdotsbounce+1
Loader73 / 86
21st.dev

Loading Bar

bar x indeterminate

Indeterminate loading bar with slide animation. From Aceternity.

loaderbarloading+1
Loader74 / 86

Grid Background

Subtle dot-grid pattern

21st.dev

Grid Background

grid x pattern

CSS grid pattern background with optional animation. From Magic UI.

backgroundgridpattern+1
Backgrounds75 / 86

Dot Pattern

Clean radial dot background

21st.dev

Dot Pattern Background

dots x radial

Repeating dot pattern background. From Magic UI.

backgrounddotspattern+1
Backgrounds76 / 86

Meteor Shower

21st.dev

Meteors Background

meteors x trail

Animated meteors/shooting stars background effect. From Aceternity.

backgroundmeteorsstars+1
Backgrounds77 / 86

Aurora Glow

21st.dev

Aurora Background

aurora x blend

Animated aurora borealis gradient background. From Aceternity.

backgroundauroragradient+1
Backgrounds78 / 86

Noise Texture

21st.dev

Noise Texture

noise x grain

CSS noise/grain texture overlay background. From Magic UI.

backgroundnoisetexture+1
Backgrounds79 / 86

Stars

21st.dev

Stars Background

stars x twinkle

Animated twinkling stars background. From Animate UI.

backgroundstarstwinkle+1
Backgrounds80 / 86

Fireworks

21st.dev

Fireworks Background

fireworks x burst

Fireworks particle background animation. From Animate UI.

backgroundfireworksparticles+1
Backgrounds81 / 86
21st.dev

Hero Color Panels

shader x split

Split-layout hero with WebGL shader visuals. From Cult UI.

heroshadersplit+1
Hero82 / 86
21st.dev

Hero Dithering

dither x pixel

Hero section with ordered dithering shader effect. From Cult UI.

herodithershader+1
Hero83 / 86
21st.dev

MacOS Dock

dock x magnify

macOS-style dock with magnification on hover. From Cult UI.

dockmacosmagnify+1
Navigation Menu84 / 86
21st.dev

Floating Dock

float x dock

Floating navigation dock with animated hover states. From Magic UI.

dockfloatingnav+1
Navigation Menu85 / 86
21st.dev

Notch Navigation

notch x pill

Floating notch navigation with animated active pill. From Aceternity.

notchnavpill+1
Navigation Menu86 / 86