Design System & Component Library
Browse our categorized collection of handcrafted React, Tailwind CSS, and Framer Motion components. Engineered with 3D tactile physics, glassmorphism, and pixel precision.
18+
Master Components
100%
Copy-Paste Code
0
Compromises
Explore Component Categories
Select a category to view specialized live studios, props tables, and drop-in code.
Buttons & CTAs
High-conversion buttons engineered with 3D tactile elevation, optical underglow flares, skeuomorphic leather, liquid gel glass, and phosphor LED matrices.
Interactive Controls & Toggles
Photorealistic 3D neumorphic switches, 90° radial arc corner toggles, swipe-to-unlock capsule sliders, and tactile smash buttons.
Badges, Status & Beacons
Multi-layer glassmorphic header badges, deterministic hash-gradient avatars, and pulsing radiant beacon indicators.
Surfaces & Glass Containers
Frosted glassmorphism container cards with hardware-accelerated Gaussian blur, specular highlight sheens, and noise overlays.
Peer Dependencies & Setup
Install peer dependencies to run any component in your Next.js or React application:
npm install framer-motion clsx lucide-react tailwind-mergeComponent Catalog
Explore every individual component, inspect props, and copy drop-in snippets.
Frosted Gel Download Button
Dual-pill neumorphic split button with elevated ceramic pill, frosted glass gel download tile, optical refraction rings, and volumetric blue underglow flare.
- ✓Elevated ceramic pill
- ✓Frosted glass cloud tile
- ✓Volumetric blue underglow
Isometric 3D Revive Button
Authentic 30° isometric 3D extruded button featuring dynamic spring depression, obsidian bevel walls, amber indicator flare, and blinding optical neon underglow.
- ✓30° Isometric matrix
- ✓Multi-layer 3D extrusion
- ✓Optical neon underglow
Elevated Underglow 3D Button
Interactive 3D tactile pill button that elevates 13px on hover to reveal a glowing electric blue extruded sub-chassis, bottom reflection rim, and realistic clay elevation physics.
- ✓13px Spring lift
- ✓Electric blue 3D underlayer
- ✓Interactive states
Tactile Neumorphic Dual-Dome Switch
Photorealistic 3D neumorphic toggle switch with an outer recessed bevel cavity, deep carved shadow trench, illuminated emerald photon channel, and dual-dome sculpted tactile thumb.
- ✓Pixel-accurate OFF & ON states
- ✓Dual-dome tactile thumb
- ✓Illuminated emerald trench
Glossy Gel Glass Button
High-gloss skeuomorphic gel glass CTA button directly from Figma node 2:2. Multi-layer inner shadow depth, organic specular blurred highlight capsule, and crisp text drop shadow.
- ✓1:1 Figma fidelity
- ✓4-layer optical drop & inner shadow
- ✓Curved blurred top specular capsule
Tactile Neumorphic Pill Toggle
Ultra-tactile debossed neumorphic pill switch with a 5-layer inset shadow groove, brushed metallic sliding thumb with specular bevels, and etched status glyphs.
- ✓Pixel-accurate debossed geometry
- ✓5-layer optical inset groove
- ✓Brushed metallic knob
LED Dot Matrix Chevron Button
Cyberpunk carbon-fiber squircle button with an expandable 7×7 LED dot matrix screen that stretches across the entire chassis on hover/click revealing 5 cascading pixel chevrons.
- ✓Expandable LED screen
- ✓7x7 Dot matrix chevrons
- ✓Cascading marquee wave
Swipe to Grow / Slide Button
Interactive metallic capsule slider button with draggable glowing electric blue knob, illuminated neon channel fill, and dynamic masked text reveal.
- ✓Draggable knob physics
- ✓Neon channel beam fill
- ✓Masked text reveal
Vintage Leather & Brass Button
Luxury embossed heritage leather & brass button with 6px bottom tactile bevel lip, recessed enclosure tray, and filigree scrollwork corner flourishes.
- ✓3D Tactile bevel lip
- ✓Filigree corner ornaments
- ✓Recessed enclosure tray
Neumorphic Glow CTA
Authentic claymorphic and neumorphic elevated CTA button pair with glowing neon green badge depth, multi-tier elevation drop shadows, and plus-lighter bloom.
- ✓Pill & Squircle variants
- ✓Neon green glow badge
- ✓Multi-tier clay shadows
Arc Corner Slider Toggle
Interactive corner arc slider toggle with light and dark mode states, rotating capsule knob along a 90° circular track, sunken sunburst dial, and glowing magenta laser beam.
- ✓90° Corner arc track
- ✓Sunburst dial loader
- ✓Light & Dark dual mode
Tactile 'Smash' Button
Neo-brutalist tech button with outer enclosure frame, cushion cooling tray, obsidian core slab, and glowing neon reactor underglow.
- ✓Tech enclosure frame
- ✓Cushion cooling tray
- ✓Obsidian core slab
Scaling Capsule Tactile Button
Recessed capsule button featuring a frosted translucent glass tray, obsidian cap with multi-tiered elevation drop shadows, and circular apex emblem badge.
- ✓Frosted outer glass tray
- ✓Multi-tier shadow stack
- ✓26px Black circle
Tactile 3D Pill Button
Hyper-realistic 3D tactile button with recessed cavity slot, spring tilt physics, specular bevels, and glowing status beacon.
- ✓Recessed tray depth
- ✓Spring lift & tilt
- ✓Radiant status glow
Animated Slide-Up Button
Interactive dual-label CTA button with smooth vertical translate animations on hover. Designed for conversion cards and primary service actions.
- ✓Dual text roll-up
- ✓Smooth ease transition
- ✓Primary & secondary styles
Glassmorphic Badge
Frosted glass pill badge with multi-layer backdrop filter blur, subtle border sheen, and glowing typography for section headers and status chips.
- ✓Backdrop blur glass
- ✓Cyan & gradient variants
- ✓Specular top highlight
Glass Surface Container
Deep frosted glassmorphic card container with dynamic specular sheen, rounded corners, noise texture support, and ambient light reflection.
- ✓Gaussian blur backdrop
- ✓Dynamic border sheen
- ✓Hardware accelerated
Magnetic Pulsing CTA
High-energy glowing action button with ambient radiant pulse effect, click audio trigger hook, and 3D depth press feedback.
- ✓Ambient ring pulse
- ✓Sound effects integration
- ✓Tactile spring scale
Personalized Help
Struggling with custom UI components or design systems? Let's talk about your product.
UI Pirate is a product design & development agency trusted by 50+ SaaS founders and enterprise teams across the US, UK & beyond. Tell us what you need.