A delightful React UI library inspired by Wired.js, bringing a hand-drawn aesthetic to your web applications. It's paired with Google's 'Schoolbell' font for that perfect sketchy look!
It's a rewrite version of rough-stuff/wired-elements-react with some improvements. Will keep introducing new components and improving the existing ones, add handy props and types for the components.
Visit Storybook for live demos and documentation.
- 🖌️ Hand-drawn UI components
- 📝 Integration with 'Schoolbell' Google Font
- 🚀 Built with React and TypeScript
- 📚 Comprehensive Storybook documentation
- 🎭 Easily customizable themes
Before you begin, ensure you have the following installed:
-
Clone the repository:
git clone https://github.com/recklyss/hand-drawn-ui.git cd hand-drawn-ui -
Set up the correct Node.js version:
nvm install 20 nvm use
-
Install dependencies:
npm install
-
Start the Storybook development server:
npm run storybook
-
Open your browser and navigate to
http://localhost:6688/to view the Storybook.
For detailed documentation on how to use Hand Drawing UI components, please refer to our Storybook when running locally.
We use several tools to ensure code quality and consistency:
- Storybook for component development and documentation
- CommitLint for standardized commit messages
- Husky for Git hooks
- semantic-release for automated versioning and package publishing
- yosay for fun CLI output
We follow the Conventional Commits specification. Please format your commit messages accordingly:
<type>[optional scope]: <description>
[optional body]
[optional footer(s)]
We welcome contributions! Please see our Contributing Guide for more details.
This project is licensed under the MIT License - see the LICENSE file for details.
- Wired.js for inspiration
- Google Fonts for the Schoolbell font
- All our amazing contributors!
For questions, suggestions, or just to say hi, open an issue or reach out to us at zhangjiahengpoping@gmail.com.
Made with ❤️ by a Recklyss engineer