System 42 is a collection of principles, components, and utilities that are designed to work together to make it easier to build consistent, accessible, and performant UIs for web applications.
The component library @sys42/ui can be used right out of the box or serve as a foundation for building your own component library.
You can find a deployed list of components at: https://receter.github.io/sys42/
This is a monorepo managed with PNPM. It contains the following packages:
@sys42/ui: React component library@sys42/utils: Utility library@sys42/copilot: A collection of markdown files that serve as instructions for AI assistants
Further the monorepo includes an example project that uses the component library: example-consumer.
To avoid overly complex setups and reduce maintenance overhead, I chose the following technologies with minimal configuration:
- Vite (library mode)
- TypeScript
- React
- CSS Modules
- CSS Custom Properties
The project uses Prettier for code formatting and ESLint for linting and import sorting.
Work in progress. This section will be updated once the project is in a more mature state.
- How to add components
- How to build a System 42 component
When building components, prefer to use existing HTML elements and attributes over custom solutions. Most of that stuff has been well designed and thought through by the Web community and is accessible by default.
https://github.com/css-modules/css-modules
https://dev.to/receter/why-i-fell-in-love-with-margin-top-3flg
Feel free to open issues, submit pull requests, or discuss ideas in the GitHub repository.
If you encounter any problems or have questions, please create an issues.
- https://github.com/receter/focus-log-extension
- https://github.com/receter/gym-tracker
- https://stl.parts
This project is licensed under the MIT License. Please read the LICENSE file for more details.