Buttonix - react package

Beautiful animated React button component with smooth hover slide effects. Built with Tailwind CSS and class-variance-authority.

Installation

npm install buttonix

Requirements

• React 18+ or 19+
• Tailwind CSS v3+

Setup

Add buttonix to your Tailwind config:

// tailwind.config.js
export default {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/buttonix/dist/**/*.{js,jsx}", // Add this line
  ],
  // ... rest of config
}

Usage

import { Button } from 'buttonix';

function App() {
  return (
    <div>
      <Button>Go Back</Button>
      <Button direction="right" color="bg-blue-500">Next</Button>
      <Button variant="destructive">Delete</Button>
    </div>
  );
}

Props

Prop	Type	Default	Description
variant	'default' | 'destructive' | 'outline'	'default'	Button style variant
direction	'left' | 'right'	'left'	Slide animation direction
color	string	—	Custom Tailwind background class (e.g., 'bg-blue-600')
className	string	—	Additional CSS classes

Examples

Basic

<Button>Click Me</Button>

Custom Color

<Button color="bg-purple-600">Custom Color</Button>

Right Direction

<Button direction="right">Next →</Button>

Variants

<Button variant="default">Save</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Cancel</Button>

Live Demo

View Demo

License

MIT © Mahedul Islam Rohan

Links

• GitHub
• npm
• Issues