SketchyUI ✏️

SketchyUI is a lightweight, hand-drawn design system for React, Next.js, and Vanilla JS. It embraces imperfection, using "wobbly" borders, sketch-like fonts, and high-contrast Neo-Brutalism aesthetics to give your applications a fun, human, and approachable feel.

"Make your app look like a whiteboard sketch, but in production."

🌟 Features

• 🎨 CSS-First Architecture: The core styling is pure CSS, making it compatible with any framework (Vue, Svelte, Angular, or plain HTML).
• ⚛️ React Components: First-class support for React with fully typed TypeScript components.
• 📱 Responsive: Built-in fluid containers and mobile-friendly utilities.
• ♿ Accessible: Semantic HTML and keyboard navigation support.
• 📦 Zero Dependencies: The core CSS has no runtime dependencies.
• 🪶 Lightweight: < 5KB (gzipped) CSS.

🚀 Installation

Install the package via npm, yarn, or pnpm:

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

📖 Usage

1. Import Styles

You must import the global stylesheet once in your application (e.g., in main.tsx, App.tsx, or layout.tsx).

import 'sketchy-ui/dist/style.css';

2. Use Components (React)

import { Button, Card, Input, Badge } from 'sketchy-ui';

function App() {
  return (
    <Card title="My Sketchy App" badge="Beta">
      <p>Welcome to the rough draft of the future.</p>
      
      <div style={{ margin: '20px 0' }}>
        <Input label="Email Address" placeholder="[email protected]" />
      </div>

      <Button variant="primary" onClick={() => alert('Launched!')}>
        🚀 Launch
      </Button>
    </Card>
  );
}

3. Use Utility Classes (Vanilla JS / HTML)

If you aren't using React, just use the CSS classes directly:

<div class="s-card">
  <div style="display: flex; justify-content: space-between;">
    <h3>My App</h3>
    <span class="s-badge accent">Beta</span>
  </div>
  
  <div class="s-input-group">
    <label class="s-label">Email Address</label>
    <input class="s-input" placeholder="[email protected]">
  </div>

  <button class="s-btn s-btn-primary">🚀 Launch</button>
</div>

🧩 Component API

<Button />

A clickable action element with a wobbly border.

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'primary' \| 'default' \| 'ghost' | 'default' | The visual style of the button. | | size | 'sm' \| 'md' \| 'lg' | 'md' | The size of the button. | | children | ReactNode | - | The content of the button. | | ...props | ButtonHTMLAttributes | - | Standard HTML button attributes. |

<Card />

A container with a "drawn" border and hard shadow.

| Prop | Type | Default | Description | |------|------|---------|-------------| | title | string | - | Optional header text. | | badge | string | - | Optional badge text displayed in the top right. | | children | ReactNode | - | The content of the card. | | ...props | HTMLAttributes | - | Standard HTML div attributes. |

<Input />

A text field that looks like a form box.

| Prop | Type | Default | Description | |------|------|---------|-------------| | label | string | - | Label text displayed above the input. | | ...props | InputHTMLAttributes | - | Standard HTML input attributes. |

<Checkbox />

A toggle switch styled as a hand-drawn checkbox.

| Prop | Type | Default | Description | |------|------|---------|-------------| | label | string | - | Label text displayed next to the toggle. | | checked | boolean | - | Controlled checked state. | | onChange | (checked: boolean) => void | - | Callback when state changes. |

<Badge />

A small rotated tag for status or categories.

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'default' \| 'accent' | 'default' | The color style (white or yellow). | | children | ReactNode | - | The text inside the badge. |

<Container />

A layout wrapper to center content.

| Prop | Type | Default | Description | |------|------|---------|-------------| | fluid | boolean | false | If true, width is 100%. If false, max-width is 1000px. |

🎨 Customization (Theming)

SketchyUI uses CSS Variables for all styling. You can override these in your own CSS to change the branding.

:root {
  /* Colors */
  --sketch-bg: #ffffff;       /* Card/Button background */
  --sketch-fg: #1a1a1a;       /* Text and Border color */
  --sketch-accent: #FFD54F;   /* Primary Highlight (Yellow) */
  --sketch-highlight: #ff6b6b; /* Error/Danger color */

  /* Fonts */
  --font-display: 'Architects Daughter', cursive; /* Headings */
  --font-body: 'Patrick Hand', cursive;           /* Body text */
  
  /* Shadows */
  --shadow-hard: 3px 4px 0px 0px var(--sketch-fg);
}

Changing Fonts

To use different fonts, simply include them in your project and update the variables:

:root {
  --font-display: 'Comic Sans MS', cursive;
  --font-body: 'Courier New', monospace;
}

🤝 Contributing

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

📄 License

Distributed under the MIT License. See LICENSE for more information.