SketchUI

Getting Started

IntroductionInstallationFontsContribute

Components

ButtonCardBadgeTapePaperSketchBorderToastAvatarCalenderHoverCardLoaderSectionTitleSeparatorToggleTooltipDoodleGridBackgroundNotebookBackground

Getting Started

Contribute

Fork, clone and contribute with maintaining the rules and code of conducts.

Thank you for your interest in contributing to SketchUI.

SketchUI is an open-source collection of playful, hand-drawn React components. Whether you're fixing bugs, improving documentation, suggesting ideas, or building new components, every contribution is appreciated.

Ways To Contribute

You can contribute by:

  • Reporting bugs
  • Suggesting new components
  • Adding you own sketch component
  • Improving existing components
  • Enhancing accessibility
  • Improving documentation
  • Fixing typos and inconsistencies
  • Optimizing performance
  • Improving developer experience

Before You Start

Before opening a pull request:

  • Check existing issues and discussions
  • Make sure your idea aligns with the SketchUI design philosophy
  • Keep components flexible and reusable
  • Follow the existing code style and naming conventions

Design Principles

When contributing components, try to follow these principles:

  • Hand-drawn and playful appearance
  • Reusable and composable APIs
  • Sensible default props
  • Strong TypeScript support
  • Accessibility whenever possible
  • Minimal dependencies
  • Consistent developer experience

A component should feel like it belongs in SketchUI.

Pull Requests

When creating a pull request:

  1. Fork the repository
  2. Create a new branch
  3. Make your changes
  4. Test your changes
  5. Open a pull request with a clear description

Branch Naming

txt
feature/component-name
fix/issue-name
docs/update-name

Commit Messages

txt
feat: add sketch tooltip component
fix: resolve border rendering issue
docs: update installation guide

Component Checklist

Before submitting a new component:

  • Component is reusable
  • Props are documented
  • TypeScript types are included
  • Accessibility has been considered
  • Demo example has been added
  • Component follows SketchUI design language

Reporting Bugs

When reporting a bug, include:

  • Expected behavior
  • Actual behavior
  • Steps to reproduce
  • Browser information
  • Screenshots if applicable

The more information you provide, the easier it is to investigate.

Suggesting Components

If you'd like to suggest a component:

  • Explain the use case
  • Provide references or sketches if possible
  • Describe how it fits the SketchUI style

Not every suggestion will be implemented, but all ideas are welcome.

Code Of Conduct

Please be respectful and constructive.

By participating in this project, you agree to:

  • Be respectful toward others
  • Welcome feedback and different viewpoints
  • Avoid harassment and discriminatory behavior
  • Focus on improving the project
  • Maintain a friendly and collaborative environment

Unacceptable behavior includes:

  • Harassment
  • Personal attacks
  • Hate speech
  • Trolling
  • Any behavior that creates an unsafe environment

Questions

If you're unsure about something, feel free to open an issue or discussion before starting work.

We're always happy to help.

Thank You

SketchUI exists because of the open-source community.

Every bug report, pull request, idea, and piece of feedback helps make the project better for everyone.