Beautiful 3D buttons for React & Next.js
A beautiful, customizable 3D button component for React with realistic press effects, toggle mode, 5 pre-built themes, TypeScript support, and mobile optimization. Perfect for modern web applications and Next.js 13+ projects.
Install the package using npm, yarn, or pnpm:
npm install react-3d-button
# or
yarn add react-3d-button
# or
pnpm add react-3d-buttonImport and use in your React components:
import { Button3D } from 'react-3d-button';
import 'react-3d-button/styles';
function App() {
return (
<Button3D type="primary" onPress={() => console.log('Clicked!')}>
Click Me!
</Button3D>
);
}Choose from 8 semantic button variants to match your UI needs.
Primary
Secondary
Tertiary
Success
Error
Warning
Info
Danger
Three predefined sizes to fit your design system.
Small (32px)
Medium (48px)
Large (64px)
Explore the rich interactive capabilities with ripple effects, active states, and toggles.
Add visual feedback with built-in ripple animations.
Build interactive counters with disabled state logic.
Prevent interaction with the disabled prop.
5 pre-built themes included: Ocean, Sunset, Forest, Pirate, and Neon. Easily customize with CSS variables.
Enhanced touch support with fixed mobile interaction issues. Works perfectly on all devices and screen sizes.
Works seamlessly with Next.js 13+ App Router and server components. Zero configuration needed.
Built with TypeScript. Includes full type definitions and IntelliSense support out of the box.
Built-in ripple effects, 3D press animations, hover states, and smooth transitions for better UX.
Small bundle size with zero runtime dependencies. Only ~24KB for the entire package.
React 3D Button is a customizable button component library for React and Next.js that provides realistic 3D press effects, multiple themes, and easy customization through CSS variables.
You can install React 3D Button using npm, yarn, or pnpm: `npm install react-3d-button`. Then import the component and styles in your React application.
Yes! React 3D Button is fully compatible with Next.js 13+ and the App Router. Just add the "use client" directive at the top of your component file.
Absolutely! React 3D Button comes with 5 pre-built themes (Ocean, Sunset, Forest, Pirate, Neon) and supports full customization through CSS variables. You can easily override colors to match your brand.
Yes, React 3D Button is optimized for mobile devices with enhanced touch support. It works perfectly on all screen sizes and handles touch events correctly.
Yes! React 3D Button is built with TypeScript and includes full type definitions. You'll get excellent IntelliSense and autocomplete support in your IDE.
React 3D Button provides 9 variants: Primary, Secondary, Tertiary, Success, Error, Warning, Info, Anchor, and Danger. Each variant has its own color scheme and can be customized.
The package is lightweight at approximately 24KB with zero runtime dependencies, making it perfect for performance-conscious applications.
React 3D Button is a powerful, easy-to-use button component library for React and Next.js applications. It provides beautiful 3D press effects, realistic animations, and a delightful user experience that makes your web applications stand out.
Whether you're building a landing page, SaaS dashboard, e-commerce site, or any modern web application, React 3D Button provides the interactive elements you need. With full TypeScript support, mobile optimization, and Next.js 13+ compatibility, it integrates seamlessly into your existing React projects.
React 3D Button is ideal for call-to-action buttons, form submissions, navigation elements, interactive dashboards, gaming interfaces, and any application where you want to provide tactile, engaging user interactions. The realistic 3D press effect gives users immediate visual feedback, improving the overall user experience.