The CBP Design System (1.0) exists to provide a unifying user experience and reduce redundant front-end code within the US Customs and Border Protection enterprise suite of applications and websites. This is the next evolution of our first effort, the CBP Theme (1.X).
⚠️ The CBP Design System (1.0) is still in active development. As such, breaking changes may be introduced but will be documented as such. While we encourage you to explore our offerings, please do so with the knowledge that the codebase in these repositories may change. Use at your own risk. We will communicate when a stable release will be made available.
This project is set up as a monorepo, containing multiple packages. Current efforts are focused on the web components package as the single source of truth from which the React components are generated during the build process.
npm install should be run within each of the packages subdirectories you wish to run locally.
| Package Name | Description |
|---|---|
| @cbpds/vanilla (deprecated) | HTML patterns, css/scss styles and vanilla js |
| @cbpds/web-components (WIP) | Web components library |
| @cbpds/react-components (WIP) | React components library (for React 18 and lower) |
| ux-guidelines (WIP) | Guidance for patterns, components and design tokens |
We welcome contributions, please see our Contribution Policy
Read and follow the steps in the Project Setup Wiki to fork the repo and start contributing!