Universal 3D button with tactile keycap shadows — pass any children (label, icon + label). Variants: solid, soft, muted. Sizes: sm, md, lg, icon. Press sinks the key in.
Free · copy & paste ready
Components / Docs
Buttons
16 components you can copy and paste into your React or Next.js project. Each includes setup steps, source code, and a live preview.
Components
16 ready to copy — open any card for full setup and source.
Square 3D icon button — pass any icon as children and a required label for accessibility. Same solid / soft / muted materials as ThreeDButton.
Free · copy & paste ready
Raised 3D add-to-cart key that sinks in while adding, with gentle label crossfades, then pops back up in a solid emerald added state before resetting.
Free · copy & paste ready
Save for later — bookmark icon fills amber and label swaps to Saved. Square-ish control for articles and products.
Free · copy & paste ready
Copies text to the clipboard and cross-fades the copy icon into a check with a Copied label. Monospace value, resets on its own.
Free · copy & paste ready
Premium outline button with layered float depth, a soft top lip, and a press-in sink — secondary CTA that still feels tactile. Pass any children.
Free · copy & paste ready
Raised 3D download key that sinks while downloading — arrow morphs to spinner to check — then pops back up as a solid emerald done state.
Free · copy & paste ready
Social follow toggle — dark Follow pill becomes a quiet Following state with a user-check icon. Tap again to unfollow.
Free · copy & paste ready
Press and hold as a fill sweeps across; release early to cancel, hold to the end to delete. Prevents accidental destructive taps.
Free · copy & paste ready
Recessed inset button — looks pressed into the surface. Light or dark variant. Pass any children.
Free · copy & paste ready
Heart toggle that pops and scatters particles on the way up, with a live count. Pill fills rose when active — no glow, no gradient.
Free · copy & paste ready
1
Inline minus / count / plus control for carts and forms. Clamps between min and max, disables at the edges.
Free · copy & paste ready
iOS segmented control — sliding white pill between Day, Week, and Month. Pass your own options array for view modes or filters.
Free · copy & paste ready
Drag the knob across the track to commit an action — snaps back if you release early, locks green when confirmed. Great for irreversible or high-intent actions.
Free · copy & paste ready
Floating rounded pill with a soft drop shadow — light or dark. Pass any children. Nudges down slightly on press.
Free · copy & paste ready
Universal soft-UI / neumorphic button — even light and dark shadows. Pass any children. Press flips to an inset look.
Free · copy & paste ready