@popsticker/ui

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

✨ 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

npm install @popsticker/ui

Peer Dependencies:

npm install react react-dom tailwindcss

🚀 Quick Start

1. Configure Tailwind CSS

Add to your tailwind.config.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

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

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

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

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

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

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

// 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:

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

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

📝 License

MIT © Shivanshu Bhashkar

🤝 Contributing

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

🔗 Links

• npm Package
• Documentation (coming soon)
• Report Bug

Made with 💜 by Shivanshu Bhashkar