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