🦅 United States Web Design System 🦅

The United States Web Design System includes a library of open source UI components and a visual style guide for U.S. federal government websites.

This repository is a port of the original design system itself, the goal of this project is to make USWDS components viable and easy to use inside of React projects, without the need to compile the system's original SCSS, and providing a simplified development experience.

This project has taken a simplified approach to converting USWDS components to React components. While there are other React ports of the USWDS system, they are either outdated, hard to setup, or not maintained at all. We aim to become a leading USWDS react port, and look forward to the future!

Important Notes

This project tests it's components using the NextJS framework, and this component library is compatible with any React-based framework, however the current version 1.38.0 has a breaking issue with images, this will eventually be fixed but the cause is how static images are usually served differently based on the specific framework, thus using images isn't as simple as pulling them from the package itself. If you are using NextJS, you can create a images folder on the public folder and then place all of the packages assets folder under it, and update the image paths to /images/image.png. We do apologize for this, but it will be fixed in a future version, ASAP.

The project also provides default text props, for example the <Banner/> component hosts an owner prop which you can customize, but by default it will be set to "United States government" unless the prop is otherwise edited!

Roadmap

• We plan to implement more customization via the actual USWDS css.
• We plan to implement all USWDS components within the next month, but keep in mind we are a 2 man team, but we do have great contributors!

Example Component

<Banner owner="United States government" action="Here's how you know" />

Closing Notes

This project is a work-in-progress, but you should be able to start using it now, not all components are implemented however.