freedmand / wpds-ui-kit

WPDS's UiKit coded in React using Stitches, Radix UI and more! Also home to our docs site

WPDS's UI Kit

This WPDS UI Kit repo is now a mono-repo that contains not only our UI Kit, but also our build.washingtonpost.com docs site.

Dependency Graph

An example of the dependency graph for importing Button from Kit.

flowchart LR
A["@washingtonpost/wpds-theme"] --> B["@washingtonpost/wpds-ui-kit"]
C["@washingtonpost/wpds-button"] --> B["@washingtonpost/wpds-ui-kit"]
A["@washingtonpost/wpds-theme"] --> C["@washingtonpost/wpds-button"]
click A "https://github.com/WPMedia/wpds-ui-kit/tree/main/ui/theme"
click B "https://github.com/WPMedia/wpds-ui-kit/tree/main/ui/kit"
click C "https://github.com/WPMedia/wpds-ui-kit/tree/main/ui/button"

Loading

This project structure is heavily inspired by Chakra UI, Radix UI, and others.

A single import for users, many packages imported in @washingtonpost/wpds-ui-kit.

npm i @washingtonpost/wpds-ui-kit

Additional Information

• Read about how to build a feature for your React site using our UI Kit on our React Guide.
• If you would like to contribute to you our WPDS UI Kit please refer to the contribution docs.
• Feel free to reach out to #wpds on Slack if you have any questions or run into any problems.
• Explore the Docs Site for usage examples and additional documentation on each component. You can also find additional resources under the resources, guides, and support pages.
• There is also a storybook site that is used for component development only. If you're looking for code examples or information on how to use a specific component, please refer to build.washingtonpost.com.