goodui

A design system for personal projects, providing a minimal setup to get React working in Vite with HMR and some ESLint rules. It is designed to be lightweight, flexible, and easy to use, making it ideal for personal projects where simplicity and speed are key.

Installation

To install GoodUI, you can use the following command:

bun i -D @pppaaattt/goodui

Local dev installation:

Within this component library module:

bun link

Within the importing project:

bun link @pppaaattt/goodui

Note: You may need to link react from the project repo back to this one.

Usage

After installation, you can import and use GoodUI components in your project like so:

import { Button } from '@pppaaattt/goodui';

function App() {
  return <Button>Click me</Button>;
}

Resources

Here are some frameworks and libraries that goodui uses:

• Bun JS - A modern JavaScript bundler.
• React - A JavaScript library for building user interfaces.
• Vite - A build tool that aims to provide a faster and leaner development experience for modern web projects.
• ESLint - A tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
• Tailwind CSS - A utility-first CSS framework for rapidly building custom user interfaces.
• Radix UI - A low-level UI component library with a focus on accessibility, customization and developer experience.
• shadcn/ui - Beautifully designed components built with Radix UI and Tailwind CSS.
• clsx - A tiny utility for constructing className strings conditionally.
• Storybook JS - An open source tool for developing UI components in isolation.
• Husky - pre-commit hooks to lint code, run tests, etc to keep code clean
• Cursor - An AI-powered IDE that extends the functionality of VS Code. (Personal Note: I am practicing a lot with this IDE while building this project)