# Futuristic Button Library

> Neomorphism Button Library  Overview A modern, comprehensive button component library featuring neomorphism design - the soft UI aesthetic that creates depth through subtle shadows and gradients. Perfect for contemporary applications that need elegant, tactile-feeling interfaces. Key Features  9 Color Variants: default, primary, secondary, success, warning, destructive, ghost, accent, muted 7 Size Options: xs, sm, md, lg, xl, icon, wide (full-width) 6 Shape Styles: rounded, pill, square, circle, soft, sharp 5 Visual Effects: standard (with hover lift), flat, deep, concave, convex Dual Theme Support: Complete light and dark mode variants Interactive States: Smooth hover, press, focus, and disabled states Accessibility: Full keyboard navigation and screen reader support  Technical Details  Framework: React with hooks (useState) Styling: Tailwind CSS utility classes Dependencies: None (fully self-contained) shadcn/ui Compatible: Uses standard prop patterns and className merging TypeScript Ready: Accepts all standard button HTML props  Design Philosophy This component implements authentic neomorphism through:  Dual-direction shadows creating the signature "soft extrusion" effect Gradient backgrounds for enhanced depth perception Contextual shadow adjustments for different effects and themes Smooth micro-interactions that respond to user input Consistent visual hierarchy across all variants  Use Cases Perfect for:  Modern web applications requiring sophisticated UI Dashboard interfaces with professional aesthetics Mobile-first designs where tactile feedback is important Design systems needing consistent, scalable button components Creative projects where visual impact matters  Component Props typescriptinterface NeoButtonProps {   variant?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'destructive' | 'ghost' | 'accent' | 'muted'   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'icon' | 'wide'   shape?: 'rounded' | 'pill' | 'square' | 'circle' | 'soft' | 'sharp'   effect?: 'standard' | 'flat' | 'deep' | 'concave' | 'convex'   dark?: boolean   disabled?: boolean   className?: string   children: React.ReactNode } Example Usage jsx// Basic usage <NeoButton variant="primary" size="md">   Click me </NeoButton>  // Advanced styling <NeoButton    variant="success"   size="lg"    shape="pill"   effect="deep"   dark={isDarkMode} >   🚀 Launch App </NeoButton>  // Icon button <NeoButton    size="icon"   shape="circle"    effect="concave" >   ⚙️ </NeoButton> Visual Effects Explained  Standard: Classic neomorphism with subtle lift on hover Flat: Minimal shadows for understated elegance Deep: Dramatic shadows for high visual impact Concave: Inset appearance suggesting pressed surface Convex: Mixed shadows creating complex depth illusion  Browser Support  Modern browsers with CSS shadow support Mobile optimized for touch interactions High DPI displays with crisp shadow rendering Reduced motion respects user accessibility preferences  Installation & Integration Simply copy the component code - no additional dependencies required. Works seamlessly with existing React projects and design systems. AI Integration Notes This component is ideal for AI-assisted development because:  Self-contained: No external dependencies to manage Highly configurable: Multiple props allow for diverse styling needs Pattern-based: Consistent API makes it easy for AI to understand and recommend Example-rich: Comprehensive demo shows all possible combinations Documentation-friendly: Clear prop types and usage patterns  Performance  Lightweight: Pure CSS shadows, no JavaScript animations Efficient: Uses CSS transforms for smooth interactions Scalable: Utility-first approach allows easy customization Memory-friendly: Stateless design with minimal re-renders

- Author: [Sonu](https://21st.dev/@uniquesonu)
- License: unknown
- Live preview: https://21st.dev/@uniquesonu/components/button-library

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/uniquesonu/button-library?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt