React 3D Button - Demo & Documentation

This is the official demo and documentation website for react-3d-button - a beautiful 3D button component with toggle mode for React and Next.js.

🚀 Live Demo

View Live Demo →

Or run locally: http://localhost:3000

📦 What's Inside

• Interactive Examples: Try all button variants, sizes, and states
• Toggle Mode Showcase: Interactive toggle/switch examples with controlled and uncontrolled modes
• Theme Showcase: Preview all 5 pre-built themes (Ocean, Sunset, Forest, Pirate, Neon)
• Custom Theme Builder: Live color picker to create your own theme
• Code Examples: Copy-paste ready code snippets with syntax highlighting
• Feature Documentation: Complete API reference and usage guides

🛠️ Built With

• Next.js 15 - React framework with App Router
• React 19 - UI library
• TypeScript - Type safety
• Tailwind CSS 4 - Styling
• react-3d-button - The button component library
• react-syntax-highlighter - Code syntax highlighting
• lucide-react - Beautiful icons

🏃‍♂️ Running Locally

# Install dependencies
npm install

# Start development server
npm run dev

# Open http://localhost:3000

📁 Project Structure

react-3d-button-demo/
├── app/
│   ├── page.tsx          # Home page with examples
│   ├── toggle/
│   │   └── page.tsx      # Toggle mode examples and demos
│   ├── themes/
│   │   └── page.tsx      # Theme showcase and customization
│   ├── layout.tsx        # Root layout with SEO metadata
│   ├── sitemap.ts        # Dynamic sitemap generation
│   ├── robots.ts         # SEO robots configuration
│   └── globals.css       # Global styles
├── components/
│   ├── CodeBlock.tsx     # Syntax highlighted code blocks
│   ├── FeatureCard.tsx   # Feature display cards
│   └── FAQSection.tsx    # FAQ with structured data
└── public/               # Static assets

🎨 Features

Interactive Examples

• All 9 button variants (primary, secondary, tertiary, success, error, warning, info, anchor, danger)
• 3 sizes (small, medium, large)
• Ripple effects, active states, disabled states
• Counter examples
• Toggle Mode: Comprehensive toggle/switch examples with state management demos

Toggle Mode Features

• Controlled and uncontrolled toggle modes
• Settings panel examples (notifications, dark mode, wifi)
• All button variants as toggles
• Icon integration with Lucide React
• Smooth animations without flash on mount

Theme System

• 5 pre-built themes ready to use
• Live theme switcher to preview all themes
• Interactive color picker for custom themes
• Real-time CSS variable override demonstration

Code Examples

• Syntax highlighted code blocks
• One-click copy functionality
• Examples for all use cases
• Both CSS and inline style approaches

🔗 Links

• NPM Package: https://www.npmjs.com/package/react-3d-button
• GitHub Repository: https://github.com/boranfurkan/react-3d-button

📝 License

MIT - See LICENSE

👨‍💻 Author

Furkan Boran

• GitHub: @boranfurkan
• NPM: react-3d-button

🙏 Credits

Inspired by react-awesome-button by Rafael Caferati.

---

Built with Next.js 15 and ❤️🤍