{"query":"button","count":26,"results":[{"name":"kinetic-button","slug":"kinetic-button","title":"Kinetic Button","description":"A high-contrast CTA button with accessible focus and restrained motion.","category":"buttons","tier":"free","tags":["button","cta","motion","tailwind"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"collection":"motion","featured":false,"status":"stable","motion":"none","compatibility":{"react":"React 19","tailwind":"Tailwind CSS 4","registry":"shadcn registry-item.json"},"registryUrl":"/r/kinetic-button.json","componentUrl":"/components/kinetic-button","installTarget":"components/netter/kinetic-button.tsx"},{"name":"liquid-chrome-button","slug":"liquid-chrome-button","title":"Liquid Chrome Button","description":"A reflective button with chrome bands, liquid highlights, and native button semantics.","category":"buttons","tier":"free","tags":["button","chrome","liquid","hover"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"collection":"motion","featured":false,"status":"beta","motion":"motion","compatibility":{"react":"React 19","tailwind":"Tailwind CSS 4","registry":"shadcn registry-item.json"},"registryUrl":"/r/liquid-chrome-button.json","componentUrl":"/components/liquid-chrome-button","installTarget":"components/netter/liquid-chrome-button.tsx"},{"name":"choco-drip-button","slug":"choco-drip-button","title":"Choco Drip Button","description":"A playful button with chocolate layers and dripping hover details.","category":"buttons","tier":"pro","tags":["button","chocolate","drip","playful"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"collection":"motion","featured":true,"status":"beta","motion":"motion","compatibility":{"react":"React 19","tailwind":"Tailwind CSS 4","registry":"shadcn registry-item.json"},"registryUrl":"/r/choco-drip-button.json","componentUrl":"/components/choco-drip-button","installTarget":"components/netter/choco-drip-button.tsx"},{"name":"magnetic-action-dock","slug":"magnetic-action-dock","title":"Magnetic Action Dock","description":"A compact view dock with native buttons, a persistent selected state, and a magnetic hover lift.","category":"navbars","tier":"pro","tags":["dock","navigation","magnetic","actions"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"collection":"business","featured":true,"status":"beta","motion":"motion","compatibility":{"react":"React 19","tailwind":"Tailwind CSS 4","registry":"shadcn registry-item.json"},"registryUrl":"/r/magnetic-action-dock.json","componentUrl":"/components/magnetic-action-dock","installTarget":"components/netter/magnetic-action-dock.tsx"},{"name":"skeuo-icon-tile-row","slug":"skeuo-icon-tile-row","title":"Skeuo Icon Tile Row","description":"A row of tactile icon buttons with layered bevels, a ReactNode icon slot, and native keyboard support.","category":"effects","tier":"free","tags":["skeuomorphic","neomorphic","icons","motion"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"collection":"motion","featured":false,"status":"beta","motion":"motion","compatibility":{"react":"React 19","tailwind":"Tailwind CSS 4","registry":"shadcn registry-item.json"},"registryUrl":"/r/skeuo-icon-tile-row.json","componentUrl":"/components/skeuo-icon-tile-row","installTarget":"components/netter/skeuo-icon-tile-row.tsx"},{"name":"clay-pop-button","slug":"clay-pop-button","title":"Clay Pop Button","description":"A friendly claymorphism CTA with light depth, a compressing press, and accessible focus styles.","category":"buttons","tier":"free","tags":["button","claymorphism","motion","soft"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"collection":"motion","featured":false,"status":"beta","motion":"motion","compatibility":{"react":"React 19","tailwind":"Tailwind CSS 4","registry":"shadcn registry-item.json"},"registryUrl":"/r/clay-pop-button.json","componentUrl":"/components/clay-pop-button","installTarget":"components/netter/clay-pop-button.tsx"},{"name":"brutalist-slam-button","slug":"brutalist-slam-button","title":"Brutalist Slam Button","description":"A sharp brutalist action button with heavy offset shadow and Motion tap response.","category":"buttons","tier":"free","tags":["button","brutalism","motion","bold"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"collection":"motion","featured":false,"status":"beta","motion":"motion","compatibility":{"react":"React 19","tailwind":"Tailwind CSS 4","registry":"shadcn registry-item.json"},"registryUrl":"/r/brutalist-slam-button.json","componentUrl":"/components/brutalist-slam-button","installTarget":"components/netter/brutalist-slam-button.tsx"},{"name":"liquid-blob-button","slug":"liquid-blob-button","title":"Liquid Blob Button","description":"A rounded liquid CTA with a hover-driven blob fill, soft highlight, and Motion feedback.","category":"buttons","tier":"pro","tags":["button","liquid","blob","motion"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"collection":"motion","featured":true,"status":"beta","motion":"motion","compatibility":{"react":"React 19","tailwind":"Tailwind CSS 4","registry":"shadcn registry-item.json"},"registryUrl":"/r/liquid-blob-button.json","componentUrl":"/components/liquid-blob-button","installTarget":"components/netter/liquid-blob-button.tsx"},{"name":"motion-snap-carousel","slug":"motion-snap-carousel","title":"Motion Snap Carousel","description":"A compact image carousel with direction-aware enter and exit transitions, previous and next buttons, and slide picker buttons.","category":"animated-blocks","tier":"pro","tags":["carousel","slider","motion","images"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"collection":"motion","featured":true,"status":"beta","motion":"motion","compatibility":{"react":"React 19","tailwind":"Tailwind CSS 4","registry":"shadcn registry-item.json"},"registryUrl":"/r/motion-snap-carousel.json","componentUrl":"/components/motion-snap-carousel","installTarget":"components/netter/motion-snap-carousel.tsx"},{"name":"flip-reveal-image-card","slug":"flip-reveal-image-card","title":"Flip Reveal Image Card","description":"A click-to-flip card with a real image on the front and metadata on the back, built as a native toggle button.","category":"cards","tier":"pro","tags":["flip","card","image","motion"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"collection":"motion","featured":true,"status":"beta","motion":"motion","compatibility":{"react":"React 19","tailwind":"Tailwind CSS 4","registry":"shadcn registry-item.json"},"registryUrl":"/r/flip-reveal-image-card.json","componentUrl":"/components/flip-reveal-image-card","installTarget":"components/netter/flip-reveal-image-card.tsx"},{"name":"before-after-split-button","slug":"before-after-split-button","title":"Before After Split Button","description":"A layered CTA button with before and after panels that slide on hover and focus.","category":"buttons","tier":"free","tags":["button","hover","before-after","motion"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"collection":"motion","featured":false,"status":"beta","motion":"motion","compatibility":{"react":"React 19","tailwind":"Tailwind CSS 4","registry":"shadcn registry-item.json"},"registryUrl":"/r/before-after-split-button.json","componentUrl":"/components/before-after-split-button","installTarget":"components/netter/before-after-split-button.tsx"},{"name":"arrow-trail-button","slug":"arrow-trail-button","title":"Arrow Trail Button","description":"A compact CTA with a trailing SVG arrow that moves on hover and focus, plus tap feedback.","category":"buttons","tier":"free","tags":["button","arrow","hover","motion"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"collection":"motion","featured":false,"status":"beta","motion":"motion","compatibility":{"react":"React 19","tailwind":"Tailwind CSS 4","registry":"shadcn registry-item.json"},"registryUrl":"/r/arrow-trail-button.json","componentUrl":"/components/arrow-trail-button","installTarget":"components/netter/arrow-trail-button.tsx"},{"name":"timeline-fold-card","slug":"timeline-fold-card","title":"Timeline Fold Card","description":"An expandable project timeline with native buttons and measured disclosure motion.","category":"cards","tier":"pro","tags":["card","carbon-cabinet","timeline","disclosure","history"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"collection":"motion","featured":true,"status":"beta","motion":"motion","compatibility":{"react":"React 19","tailwind":"Tailwind CSS 4","registry":"shadcn registry-item.json"},"registryUrl":"/r/timeline-fold-card.json","componentUrl":"/components/timeline-fold-card","installTarget":"components/netter/timeline-fold-card.tsx"},{"name":"async-state-button","slug":"async-state-button","title":"Async State Button","description":"A state-driven action button with clear loading, success, and error feedback.","category":"buttons","tier":"free","tags":["button","async","loading","feedback","motion"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"collection":"motion","featured":true,"status":"beta","motion":"motion","compatibility":{"react":"React 19","tailwind":"Tailwind CSS 4","registry":"shadcn registry-item.json"},"registryUrl":"/r/async-state-button.json","componentUrl":"/components/async-state-button","installTarget":"components/netter/async-state-button.tsx"},{"name":"magnetic-fill-button","slug":"magnetic-fill-button","title":"Magnetic Fill Button","description":"A precise proximity button with a directional fill and coarse-pointer fallback.","category":"buttons","tier":"pro","tags":["button","magnetic","pointer","motion"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"collection":"motion","featured":true,"status":"beta","motion":"motion","compatibility":{"react":"React 19","tailwind":"Tailwind CSS 4","registry":"shadcn registry-item.json"},"registryUrl":"/r/magnetic-fill-button.json","componentUrl":"/components/magnetic-fill-button","installTarget":"components/netter/magnetic-fill-button.tsx"},{"name":"morphing-icon-button","slug":"morphing-icon-button","title":"Morphing Icon Button","description":"A controlled or uncontrolled icon toggle with clear pressed semantics.","category":"icon-buttons","tier":"free","tags":["icon","button","toggle","aria-pressed","motion"],"dependencies":["motion"],"devDependencies":[],"registryDependencies":[],"collection":"motion","featured":false,"status":"beta","motion":"motion","compatibility":{"react":"React 19","tailwind":"Tailwind CSS 4","registry":"shadcn registry-item.json"},"registryUrl":"/r/morphing-icon-button.json","componentUrl":"/components/morphing-icon-button","installTarget":"components/netter/morphing-icon-button.tsx"},{"name":"hold-confirm-icon-button","slug":"hold-confirm-icon-button","title":"Hold Confirm Icon Button","description":"A GSAP hold-to-confirm control for deliberate destructive actions.","category":"icon-buttons","tier":"pro","tags":["icon","button","confirm","hold","gsap"],"dependencies":["gsap","@gsap/react"],"devDependencies":[],"registryDependencies":[],"collection":"motion","featured":true,"status":"beta","motion":"gsap","compatibility":{"react":"React 19","tailwind":"Tailwind CSS 4","registry":"shadcn registry-item.json"},"registryUrl":"/r/hold-confirm-icon-button.json","componentUrl":"/components/hold-confirm-icon-button","installTarget":"components/netter/hold-confirm-icon-button.tsx"},{"name":"magnetic-snap-cursor","slug":"magnetic-snap-cursor","title":"Magnetic Snap Cursor","description":"A ring cursor that wraps and resizes around marked targets inside one bounded surface.","category":"cursors","tier":"pro","tags":["foundry","cursor","magnetic","pointer","gsap"],"dependencies":["gsap","@gsap/react"],"devDependencies":[],"registryDependencies":[],"collection":"motion","featured":true,"status":"beta","motion":"gsap","compatibility":{"react":"React 19","tailwind":"Tailwind CSS 4","registry":"shadcn registry-item.json"},"registryUrl":"/r/magnetic-snap-cursor.json","componentUrl":"/components/magnetic-snap-cursor","installTarget":"components/netter/magnetic-snap-cursor.tsx"},{"name":"split-action-button","slug":"split-action-button","title":"Split Action Button","description":"A primary action with a Radix menu of related actions.","category":"buttons","tier":"pro","tags":["foundry","button","dropdown","menu","radix"],"dependencies":["@radix-ui/react-dropdown-menu"],"devDependencies":[],"registryDependencies":[],"collection":"core","featured":true,"status":"beta","motion":"none","compatibility":{"react":"React 19","tailwind":"Tailwind CSS 4","registry":"shadcn registry-item.json"},"registryUrl":"/r/split-action-button.json","componentUrl":"/components/split-action-button","installTarget":"components/netter/split-action-button.tsx"},{"name":"copy-command-button","slug":"copy-command-button","title":"Copy Command Button","description":"A shell command with a copy button, a polite live region, and a clipboard fallback.","category":"buttons","tier":"free","tags":["foundry","button","copy","clipboard","command"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"collection":"core","featured":true,"status":"beta","motion":"none","compatibility":{"react":"React 19","tailwind":"Tailwind CSS 4","registry":"shadcn registry-item.json"},"registryUrl":"/r/copy-command-button.json","componentUrl":"/components/copy-command-button","installTarget":"components/netter/copy-command-button.tsx"},{"name":"confirm-inline-button","slug":"confirm-inline-button","title":"Confirm Inline Button","description":"A destructive button that asks for a second press within three seconds.","category":"buttons","tier":"free","tags":["foundry","button","destructive","confirm","two-step"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"collection":"core","featured":false,"status":"beta","motion":"css","compatibility":{"react":"React 19","tailwind":"Tailwind CSS 4","registry":"shadcn registry-item.json"},"registryUrl":"/r/confirm-inline-button.json","componentUrl":"/components/confirm-inline-button","installTarget":"components/netter/confirm-inline-button.tsx"},{"name":"segmented-control","slug":"segmented-control","title":"Segmented Control","description":"A radio group with a sliding indicator and arrow-key navigation.","category":"buttons","tier":"free","tags":["foundry","segmented","radiogroup","toggle","keyboard"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"collection":"core","featured":false,"status":"beta","motion":"css","compatibility":{"react":"React 19","tailwind":"Tailwind CSS 4","registry":"shadcn registry-item.json"},"registryUrl":"/r/segmented-control.json","componentUrl":"/components/segmented-control","installTarget":"components/netter/segmented-control.tsx"},{"name":"toggle-switch","slug":"toggle-switch","title":"Toggle Switch","description":"A labelled switch with an optional description in two sizes.","category":"buttons","tier":"free","tags":["foundry","switch","toggle","settings","form"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"collection":"core","featured":false,"status":"beta","motion":"css","compatibility":{"react":"React 19","tailwind":"Tailwind CSS 4","registry":"shadcn registry-item.json"},"registryUrl":"/r/toggle-switch.json","componentUrl":"/components/toggle-switch","installTarget":"components/netter/toggle-switch.tsx"},{"name":"pausable-logo-marquee","slug":"pausable-logo-marquee","title":"Pausable Logo Marquee","description":"A CSS logo marquee with a visible pause button that also pauses on hover and focus.","category":"logos","tier":"free","tags":["foundry","logos","marquee","pause","css"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"collection":"business","featured":false,"status":"beta","motion":"css","compatibility":{"react":"React 19","tailwind":"Tailwind CSS 4","registry":"shadcn registry-item.json"},"registryUrl":"/r/pausable-logo-marquee.json","componentUrl":"/components/pausable-logo-marquee","installTarget":"components/netter/pausable-logo-marquee.tsx"},{"name":"newsletter-inline-form","slug":"newsletter-inline-form","title":"Newsletter Inline Form","description":"A single-field signup with a honeypot, specific validation and success and error states.","category":"contact","tier":"free","tags":["newsletter","email","signup","honeypot","form"],"dependencies":[],"devDependencies":[],"registryDependencies":[],"collection":"business","featured":false,"status":"beta","motion":"none","compatibility":{"react":"React 19","tailwind":"Tailwind CSS 4","registry":"shadcn registry-item.json"},"registryUrl":"/r/newsletter-inline-form.json","componentUrl":"/components/newsletter-inline-form","installTarget":"components/netter/newsletter-inline-form.tsx"},{"name":"underline-tabs","slug":"underline-tabs","title":"Underline Tabs","description":"Radix tabs with a sliding underline, counts, and overflow scroll buttons.","category":"navigation","tier":"free","tags":["compass","tabs","radix","underline","overflow","keyboard"],"dependencies":["@radix-ui/react-tabs"],"devDependencies":[],"registryDependencies":[],"collection":"core","featured":false,"status":"beta","motion":"css","compatibility":{"react":"React 19","tailwind":"Tailwind CSS 4","registry":"shadcn registry-item.json"},"registryUrl":"/r/underline-tabs.json","componentUrl":"/components/underline-tabs","installTarget":"components/netter/underline-tabs.tsx"}]}