Beautiful animated React button component with smooth hover slide effects. Built with Tailwind CSS and class-variance-authority for modern, customizable UI components.
npm install buttonixbash
npm install buttonix
`
Requirements
- React 18+ or 19+
- Tailwind CSS v3+
Setup
Add buttonix to your Tailwind config:
`js
// tailwind.config.js
export default {
content: [
"./src/*/.{js,ts,jsx,tsx}",
"./node_modules/buttonix/dist/*/.{js,jsx}", // Add this line
],
// ... rest of config
}
`
Usage
`tsx
import { Button } from 'buttonix';
function App() {
return (
);
}
`
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
$3
`tsx
`
$3
`tsx
`
$3
`tsx
`
$3
`tsx
``