S
shadcnblocks/shadcn-ui-blocks
Async Button - Async status buttonasync-buttonA button that shows idle, loading spinner, success, and error states, with an optional progress bar.
Aurora Button - Aurora gradient buttonaurora-buttonA button filled with a slowly shifting multi-color aurora gradient, or an aurora outline with a solid inner fill.
Avatar Group - Overlapping avatar groupavatar-groupA horizontal row of overlapping circular avatars with spacing variants, hover spread, and an overflow count badge.
Background - Layered section backgroundbackgroundA section wrapper with editorial borders, patterns, and mesh gradients that sit behind content using named presets.
Background Beams - Animated background beamsbackground-beamsAn absolute SVG layer of curved light beams with traveling gradients for decorative page backgrounds.
Border Button - Corner accent border buttonborder-buttonA square-cornered button with L-shaped SVG accents at all four edges, using standard Button variants.
Button Link - Button-styled linkbutton-linkA native anchor styled with shadcn/ui button variants for navigation that should look like a button.
Copy Button - Copy to clipboard buttoncopy-buttonA button that copies a string to the clipboard and swaps to a check icon for two seconds.
Counter Button - Animated count steppercounter-buttonA minus and plus control that increments a number with a vertical slide animation between min and max.
Cover - Hover sparkle covercoverAn inline highlight that darkens on hover, sweeps beams, and fills the box with sparkle particles.
Emoji Picker - Searchable emoji pickeremoji-pickerA popover emoji grid with search, category tabs, recent history, and keyboard navigation.
Expand Button - Hover-expand icon buttonexpand-buttonAn icon button that springs wider on hover to reveal additional label text.
Fold Button - Fold-over hover buttonfold-buttonA button whose background folds upward on hover, inverting label color, with an optional loading spinner.
Form Star Rating - Interactive form star ratingform-star-ratingAn interactive RadioGroup rating with hover fill, optional labels, and star or custom icon options.
Github Stars - GitHub stars badgegithub-starsAn outline button that links to a GitHub repository and can show an optional star count.
Gleam Button - Gleam sweep buttongleam-buttonA button with a brief diagonal gleam that passes across the surface on a repeating interval.
Glow Button - Soft glow buttonglow-buttonA button with a soft drop-shadow glow that intensifies on hover in light and dark themes.
Iphoneiphone
Link Preview - Hover link preview cardlink-previewAn inline link with a hover card that shows a screenshot of the destination URL from Microlink or a static image.
Login Button - Login CTA buttonlogin-buttonA login action button with an optional icon and default Log in label, matching shadcn/ui button variants.
Logo - Responsive logo with wordmarklogoA linked brand mark and wordmark with breakpoint-aware image and text slots plus an optional asset download menu.
Marquee Button - Marquee text buttonmarquee-buttonA button that scrolls its label in a looping marquee on hover or automatically.
Morph Button - Loading morph buttonmorph-buttonA button that shrinks into a spinner while loading, then expands back to its label when idle.
Moving Border Button - Animated moving border buttonmoving-border-buttonA button with animated gradient borders including spin, beam, pulse, shimmer, dash, meteor, glow, and wave.
Pattern Placeholder - Centered pattern previewpattern-placeholderA centered hero scaffold with badge, heading, copy, and buttons for previewing patterns behind content.
Pattern Template - Two-column pattern previewpattern-templateA split layout scaffold with badge, headline, buttons, and SVG placeholder for testing background patterns.
Pinlight Button - Pointer-follow spotlight buttonpinlight-buttonA button with a radial spotlight that follows the pointer across the surface on hover.
Price - Product price with salepriceA currency display that pairs regular and sale amounts with strikethrough styling and locale-aware formatting.
Quantity Input - Quantity stepper inputquantity-inputA pill-shaped minus and plus stepper with a centered number field for cart and checkout counts.
Rating - Five-star rating displayratingA five-star score with full, half, and empty icons plus optional numeric label and caption.
Scrollable Tabslist - Horizontally scrollable tab listscrollable-tabslistA pill-shaped TabsList wrapper that scrolls horizontally so long tab strips stay usable on narrow viewports.
Shimmer Button - Rotating shimmer buttonshimmer-buttonA button with a spinning conic border glow and a sliding surface shimmer over the fill.
Shine Button - Animated shine buttonshine-buttonA button with a repeating diagonal light sweep that travels across the surface.
Slide Text Button - Sliding label buttonslide-text-buttonA button whose label slides out and a hover label slides in from up, left, or right.
Social Button - Social sign-in buttonsocial-buttonA provider-branded OAuth button with Google, GitHub, Apple, Microsoft, X, Discord, Facebook, and LinkedIn icons.
Sparkles - Canvas particle sparklessparklesA canvas particle field that drifts, wraps, and twinkles as a decorative background behind heroes and highlights.
Theme Toggle - Light and dark theme toggletheme-toggleA sun and moon icon button that switches between light and dark mode, with optional text labels.
Trace Button - SVG border trace buttontrace-buttonA button whose outline draws itself on hover with SVG stroke effects including draw, loop, dual, dash, and glow.
Typewriter Button - Typewriter text buttontypewriter-buttonA button that types its label character by character on hover or automatically, with a blinking cursor.