UI Design System

This project is an experimental monorepo for research and development in a UI design system.

Why

A UI design system codifies existing UI components into a central repository. It is built to address having to paste the same components into multiple projects again and again.

Intro

Modern user interfaces are assembled from hundreds of modular UI components that are rearranged to deliver different user experiences.

Design systems contain reusable UI components that help teams build complex, durable, and accessible user interfaces across projects. Since both designers and developers contribute to the UI components, the design system serves as a bridge between disciplines. It is also the “source of truth” for an organization’s common components.

A design system consolidates common UI components in a central well-maintained repository that gets distributed via a package manager. Developers import standardized UI components instead of pasting the same UI code in multiple projects.

You can think of a design system as another component library, but it serves an entire organization instead of servicing one app. A design system focuses on UI primitives, while project-specific component libraries can contain anything from composite components to screens.

For more information, see Design Systems Intro.

Dev Stack

🫙 Devcontainer - Develop inside a dev container using the file .devcontainer/devcontainer.json in Visual Studio Code.
🏎 Turborepo — High-performance build system for Monorepos
🚀 React — JavaScript library for user interfaces
🛠 Tsup — TypeScript bundler powered by esbuild
📖 Storybook — UI component environment powered by Vite
🤘 TypeScript for static type checking
🧻 ESLint for code linting
💅 Prettier for code formatting
🤬 Changesets for managing versioning and changelogs
🤖 GitHub Actions for fully automated package publishing

Resources

Introduction to design systems - Storybook intro to design systems

UI - Demo for curol/ui