Pencil UI Lib

✨ Features

• 🎨 Hand-drawn aesthetic - Sketchy borders and pencil-like styling
• 🎯 Fully typed - Built with TypeScript for excellent DX
• 🚀 Smooth animations - Powered by Framer Motion
• 📱 Responsive design - Works on all screen sizes
• 🧩 Component library - All essential UI components included
• ⚡ Lightweight - Minimal bundle size
• 🎭 Multiple variants - Customizable styles and states

📦 Installation

npm install pencil-ui-lib
# or
yarn add pencil-ui-lib
# or
pnpm add pencil-ui-lib

🚀 Quick Start

import { PencilProvider, Button, Card, Input } from 'pencil-ui-lib';
import 'pencil-ui-lib/styles';

function App() {
  return (
    <PencilProvider>
      <div className="p-6 space-y-4">
        <Card title="Welcome to Pencil UI" subtitle="A hand-drawn experience">
          <Input label="Your name" placeholder="Type something..." />
          <Button className="mt-4">Get Started</Button>
        </Card>
      </div>
    </PencilProvider>
  );
}

📚 Components

Button

A sketchy button with smooth hover animations and multiple variants.

import { Button } from 'pencil-ui-lib';

// Variants
<Button variant="solid">Solid Button</Button>
<Button variant="outline">Outline Button</Button>
<Button variant="ghost">Ghost Button</Button>
<Button variant="danger">Danger Button</Button>

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

// With icons
<Button size="icon">🚀</Button>
<Button>
  <span>🎨</span>
  Custom Button
</Button>

// Custom styling
<Button className="bg-blue-500 text-white">Custom Style</Button>

Props:

• variant?: "solid" | "outline" | "ghost" | "danger" (default: "solid")
• size?: "sm" | "md" | "lg" | "icon" (default: "md")
• Extends all HTML button props

Card

A container component with title, subtitle, and footer support.

import { Card } from 'pencil-ui-lib';

// Basic card
<Card>
  <p>This is a simple card content.</p>
</Card>

// With title and subtitle
<Card 
  title="Card Title" 
  subtitle="Optional subtitle description"
>
  <p>Main content goes here.</p>
</Card>

// With footer
<Card 
  title="Complete Card"
  footer={<Button>Action</Button>}
>
  <p>Card with footer content.</p>
</Card>

// Custom styling
<Card className="bg-yellow-50">
  <p>Custom styled card.</p>
</Card>

Props:

• title?: string
• subtitle?: string
• footer?: React.ReactNode
• Extends all HTML div props

Input & Textarea

Hand-drawn input fields with labels and error states.

import { Input, Textarea } from 'pencil-ui-lib';

// Basic input
<Input placeholder="Enter text..." />

// With label
<Input label="Email Address" placeholder="[email protected]" />

// With error state
<Input 
  label="Password" 
  type="password"
  error="Password must be at least 8 characters"
/>

// Textarea
<Textarea placeholder="Enter your message..." />

// Custom styling
<Input 
  label="Custom Input"
  className="bg-blue-50"
  placeholder="Custom styled input"
/>

Props:

• label?: string
• error?: string
• Extends all HTML input/textarea props

Badge & Checkbox

Small components for status and selection.

import { Badge, Checkbox } from 'pencil-ui-lib';

// Badge variants
<Badge variant="neutral">Default</Badge>
<Badge variant="accent">Important</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>

// Checkbox
<Checkbox 
  label="I agree to the terms"
  checked={true}
  onChange={(checked) => console.log(checked)}
/>

Layout Components

Flexible layout utilities.

import { Container, Grid, Flex } from 'pencil-ui-lib';

// Container
<Container className="p-4">
  <p>Centered content with padding</p>
</Container>

// Grid
<Grid cols={3} gap={4}>
  <Card>Item 1</Card>
  <Card>Item 2</Card>
  <Card>Item 3</Card>
</Grid>

// Flex
<Flex justify="between" align="center" className="p-4">
  <Button>Left</Button>
  <Button>Right</Button>
</Flex>

Interactive Components

Advanced interactive elements.

import { Interactive } from 'pencil-ui-lib';

// Interactive hover effects
<Interactive>
  <Card>
    <p>This card has interactive hover effects!</p>
  </Card>
</Interactive>

🎨 Styling & Customization

CSS Variables

Customize the look with CSS variables:

:root {
  --pencil-border-width: 2px;
  --pencil-border-radius: 4px;
  --pencil-shadow: 2px 2px 8px rgba(0,0,0,0.1);
}

Custom Theme

Override the default styles:

// In your CSS
.pencil-border {
  border-color: #3b82f6 !important;
}

.sketchy-shadow {
  box-shadow: 4px 4px 12px rgba(59, 130, 246, 0.2) !important;
}

🛠️ Development

# Clone the repository
git clone https://github.com/Dreeam00/pencil-ui-lib.git
cd pencil-ui-lib

# Install dependencies
npm install

# Start development server
npm run dev

# Build the library
npm run build:lib

# Run type checking
npm run lint

# Clean build artifacts
npm run clean

📖 API Reference

PencilProvider

The root provider that enables the pencil theme and animations.

<PencilProvider>
  <YourApp />
</PencilProvider>

Available Exports

import {
  // Provider
  PencilProvider,
  
  // Components
  Button,
  Card,
  Input,
  Textarea,
  Badge,
  Checkbox,
  
  // Layout
  Container,
  Grid,
  Flex,
  
  // Interactive
  Interactive,
  
  // Styles
  Styles
} from 'pencil-ui-lib';

🤝 Contributing

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

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Built with React
• Styled with Tailwind CSS
• Animated with Framer Motion
• Icons from Lucide React

🔗 Links

• npm Package
• GitHub Repository
• Live Demo

Made with ❤️ and ✏️ by Dreeam00