Welcome to our UI Components Library - a comprehensive collection of UI components crafted for React, Angular, and Vue. This library is designed to accelerate your application development by providing easy-to-use, customizable, and well-documented components. Each component is showcased through Storybook, allowing you to visualize and interact with the components before integrating them into your projects.
This project is still in development to include more UI components for the framework. React is the most complete when it comes to components.
- Comprehensive Collection: Includes a wide range of UI components for React, Angular, and Vue.
- Easy Integration: Components are designed for easy copy and paste, speeding up your development process.
- Storybook Integration: Visualize and interact with components through Storybook, making it easier to choose the right components for your application.
- Monorepo Setup: Utilizes a monorepo structure for easy management and isolation of framework-specific components.
- PNPM for Package Management: Leverages PNPM for efficient and reliable package management across the monorepo.
- Turborepo for Task Orchestration: Uses Turborepo to run builds in parallel with caching and correct build ordering.
The design system is built with the following principles in mind:
-
Opt-out: The design system should be easy to use and opt-out. Components are designed to be used out of the box, but also easy to customize. This means that the code for the component can be easily copied and pasted into the consuming application and modified as needed.
-
Consistency: The design system should provide a consistent look and feel across all applications. This is done using the design tokens declared as CSS variables.
-
Accessibility: The design system should be accessible by default. This means that all components should be designed with accessibility in mind. This includes things like keyboard navigation, screen reader support, and color contrast.
Follow these steps to get started with our UI Components Library:
- Node.js 20.19+ (required by Storybook 10). If you use nvm, run
nvm usefrom the repo root (see.nvmrc). - PNPM for package management. If not installed:
npm install -g pnpmInstall dependencies from the repository root:
pnpm installStart all Storybooks in parallel:
pnpm dev| Package | URL |
|---|---|
| Vue | http://localhost:6006 |
| React | http://localhost:6007 |
| Angular | http://localhost:6008 |
| Host | http://localhost:6009 |
Or open one at a time with pnpm vue dev, pnpm react dev, pnpm angular dev, or pnpm host dev.
Host Storybook holds the shared docs (readme, contribution, design system, handbook, technical design) and connects the framework Storybooks for deployment.
Build all Storybook sites for deployment (framework packages build in parallel, then the host shell):
pnpm buildTurborepo caches build outputs, so subsequent runs are faster when nothing has changed.
To get started with the design system there are a few things you need to do:
- Configure Design Tokens: Import the shared tokens from
@quido-ui/styles(canonical source:packages/styles/tokens.css):
@import "@quido-ui/styles/tokens.css";If you prefer to copy the tokens into your app, paste the contents of packages/styles/tokens.css.
That's it! You should now be able to use the design system in your application.
Work in progress. We are currently working on a Figma file that will include all the components and design tokens.
The design system is inspired by a number of other design systems, including: