React Blueberry

A modern, customizable React component library with beautiful animations and Tailwind CSS integration. Built with developer experience in mind, offering pre-styled components with extensive customization options.

Features

• 🎨 Pre-styled components with beautiful animations
• 🎯 Built with Tailwind CSS for easy customization
• ⚡️ Powered by Framer Motion for smooth animations
• 📦 Tree-shakeable exports
• 🔧 Extensive customization options
• 📱 Fully responsive
• ♿️ Accessible by default
• 📝 Written in TypeScript

Installation

npm install react-blueberry
# or
yarn add react-blueberry
# or
pnpm add react-blueberry

Quick Start

import { Button } from 'react-blueberry';

function App() {
  return (
    <Button variant="default" animation="scale">
      Click me
    </Button>
  );
}

Button Component

The Button component comes with multiple variants, sizes, and animation options.

Variants

<Button variant="default">Default Button</Button>
<Button variant="outline">Outline Button</Button>
<Button variant="ghost">Ghost Button</Button>
<Button variant="filled">Filled Button</Button>
<Button variant="destructive">Delete</Button>
<Button variant="success">Save</Button>
<Button variant="warning">Warning</Button>
<Button variant="info">Info</Button>

Sizes

<Button size="sm">Small Button</Button>
<Button size="md">Medium Button</Button>
<Button size="lg">Large Button</Button>

Animations

<Button animation="bounce">Bounce Button</Button>
<Button animation="pulse">Pulse Button</Button>
<Button animation="scale">Scale Button</Button>
<Button animation="lift">Lift Button</Button>

Loading States

<Button isLoading>Loading...</Button>
<Button isLoading loaderType="dots">Loading...</Button>
<Button isLoading loaderType="pulse">Loading...</Button>

Custom Styling

<Button 
  className="bg-gradient-to-r from-purple-500 to-pink-500"
  customStyles={{
    button: 'shadow-lg hover:shadow-xl',
    loader: 'text-white'
  }}
>
  Custom Button
</Button>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'default' | 'outline' | 'ghost' | 'filled' | 'destructive' | 'success' | 'warning' | 'info' | 'default' | The visual style of the button | | size | 'sm' | 'md' | 'lg' | 'md' | The size of the button | | rounded | 'none' | 'sm' | 'md' | 'lg' | 'full' | 'md' | The border radius of the button | | shadow | 'none' | 'sm' | 'md' | 'lg' | 'sm' | The shadow level of the button | | animation | 'none' | 'bounce' | 'pulse' | 'scale' | 'lift' | 'scale' | The hover animation of the button | | isLoading | boolean | false | Whether the button is in a loading state | | loaderType | 'spinner' | 'dots' | 'pulse' | 'spinner' | The type of loading indicator | | fullWidth | boolean | false | Whether the button should take full width | | leftIcon | ReactNode | - | Icon to display on the left side | | rightIcon | ReactNode | - | Icon to display on the right side | | customStyles | object | - | Custom styles for different parts of the button |

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © Swapnil Gupta