npm package: @popsticker/ui
Description: Bold, sticker-like UI components for React with Tailwind CSS
Author: Shivanshu Bhashkar
Latest version: 0.1.7

# @popsticker/ui

> A React component library with **bold, sticker-like design** featuring thick borders, offset shadows, and bright colors.

[![npm version](https://img.shields.io/npm/v/@popsticker/ui.svg)](https://www.npmjs.com/package/@popsticker/ui)
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

## 📚 Documentation

**[Visit https://popsticker-ui.vercel.app/](https://popsticker-ui.vercel.app/)** to learn more about this library!

> 🚧 **We are actively building and expanding this library day by day. Please wait for amazing updates!** 🚀


## ✨ Features

- 🎨 **37 Production-Ready Components** - Buttons, Forms, Overlays, Navigation, and more
- 🎬 **Built-in Animations** - Wiggle, bounce, shake, and pulse effects
- 💪 **PopSticker Design** - Thick 3-4px borders, bright colors, offset shadows
- 📦 **Lightweight** - Only 55KB minified
- ⚡ **Tree-Shakeable** - Import only what you need
- 🔧 **TypeScript First** - Full type definitions included
- ♿ **Accessible** - Built on Radix UI primitives
- 🎯 **Tailwind CSS** - Customizable with Tailwind

## 📦 Installation

```bash
npm install @popsticker/ui
```

**Peer Dependencies:**
```bash
npm install react react-dom tailwindcss
```

## 🚀 Quick Start

### 1. Configure Tailwind CSS

Add to your `tailwind.config.js`:

```js
module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@popsticker/ui/dist/**/*.{js,mjs}',
  ],
  theme: {
    extend: {
      colors: {
        popsticker: {
          lime: '#D4FF00',
          purple: '#A78BFA',
          orange: '#FF9D5C',
        },
      },
      borderWidth: {
        3: '3px',
        4: '4px',
      },
      boxShadow: {
        'sticker': '4px 4px 0px 0px rgba(0, 0, 0, 1)',
        'sticker-lg': '6px 6px 0px 0px rgba(0, 0, 0, 1)',
      },
    },
  },
}
```

### 2. Import Components

```tsx
"use client"
import { Button, Card, Badge } from '@popsticker/ui';

function App() {
  return (
    <Card>
      <h1>Hello PopSticker!</h1>
      <Button variant="default">Lime Green Button</Button>
      <Badge className="animate-wiggle-infinite">New!</Badge>
    </Card>
  );
}
```

## 🎨 Components

### Form Components
`Button` • `Input` • `Textarea` • `Label` • `Checkbox` • `Radio Group` • `Switch` • `Slider` • `Select`

### Display Components  
`Card` • `Badge` • `Avatar` • `Kbd` • `Separator` • `Skeleton` • `Spinner` • `Empty` • `Alert`

### Layout Components
`Tabs` • `Accordion` • `Collapsible` • `Table` • `Pagination` • `Breadcrumb` • `Aspect Ratio` • `Scroll Area`

### Overlay Components
`Dialog` • `Alert Dialog` • `Popover` • `Tooltip` • `Dropdown Menu` • `Hover Card` • `Context Menu`

### Control Components
`Toggle` • `Toggle Group` • `Button Group` • `Progress`

## 📖 Usage Examples

### Buttons with Variants

```tsx
"use client"
import { Button } from '@popsticker/ui';

<Button variant="default">Lime Green</Button>
<Button variant="secondary">Purple</Button>
<Button variant="accent">Orange</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
```

### Animated Components

```tsx
"use client"
import { Badge, Button } from '@popsticker/ui';

// Continuous wiggle animation
<Badge className="animate-wiggle-infinite">🎉 New Feature!</Badge>

// Shake on hover
<Button className="hover:animate-shake">Hover Me!</Button>

// Bounce in on mount
<Card className="animate-bounce-in">Welcome!</Card>

// Soft pulse
<Badge className="animate-pulse-soft">🔴 Live</Badge>
```

### Form Example

```tsx
"use client"
import { 
  Card, 
  CardHeader, 
  CardTitle, 
  CardContent,
  Label, 
  Input, 
  Checkbox,
  Button 
} from '@popsticker/ui';

function ContactForm() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Contact Us</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="name">Name</Label>
          <Input id="name" placeholder="Enter your name" />
        </div>
        
        <div className="flex items-center space-x-2">
          <Checkbox id="terms" />
          <Label htmlFor="terms">I accept the terms</Label>
        </div>
        
        <Button>Submit</Button>
      </CardContent>
    </Card>
  );
}
```

### Alert Messages

```tsx
"use client"
import { Alert, AlertTitle, AlertDescription } from '@popsticker/ui';
import { CheckCircle2, AlertCircle } from 'lucide-react';

// Success alert
<Alert variant="success">
  <CheckCircle2 className="h-5 w-5" />
  <AlertTitle>Success!</AlertTitle>
  <AlertDescription>
    Your changes have been saved.
  </AlertDescription>
</Alert>

// Error alert
<Alert variant="destructive">
  <AlertCircle className="h-5 w-5" />
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>
    Something went wrong.
  </AlertDescription>
</Alert>
```

### Dialog Example

```tsx
"use client"
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  Button
} from '@popsticker/ui';

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Welcome!</DialogTitle>
      <DialogDescription>
        This is a PopSticker dialog.
      </DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>
```

## 🎬 Available Animations

```tsx
// Single animations
animate-wiggle          // Single wiggle (0.5s)
animate-bounce-in       // Entrance with scale
animate-shake           // Attention shake

// Continuous animations
animate-wiggle-infinite // Continuous wiggle
animate-pulse-soft      // Gentle opacity pulse

// Use with hover
hover:animate-shake
hover:animate-wiggle
```

## 🎨 Design Philosophy

PopSticker UI embraces a bold, playful aesthetic inspired by stickers and street art:

- **Thick Borders** - 3-4px black borders for strong separation
- **Offset Shadows** - 4px offset shadows for depth
- **Bright Colors** - Lime green, vibrant purple, and energetic orange
- **Bold Typography** - Strong font weights for emphasis
- **Playful Animations** - Wiggle, bounce, and shake effects

## 🔧 TypeScript

Full TypeScript support included with type definitions for all components:

```tsx
import type { ButtonProps } from '@popsticker/ui';

const CustomButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};
```

## 📝 License

MIT © [Shivanshu Bhashkar](mailto:shivanshulovescoding@gmail.com)

## 🤝 Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.

## 🔗 Links

- [📚 Documentation](https://popsticker-ui.vercel.app/)
- [📦 npm Package](https://www.npmjs.com/package/@popsticker/ui)
- [🐛 Report Bug](mailto:shivanshulovescoding@gmail.com)

---

Made with 💜 by [Shivanshu Bhashkar](mailto:shivanshulovescoding@gmail.com)