The Washington Post Design System (WPDS) UI Kit is a mono-repo of our UI Kit and our documentation site.
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"
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
- 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 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.
- Previous to v1.5.1, the
Button
component had a defaultdensity: "compact"
. After upgrading, the default will bedensity: "default"
, so you will want to check any Buttons used in your code for regressions and manually apply thedensity: "compact"
as needed.<Button density="compact" ...
- Previous to v0.12,
globalStyles
contained a globally applied transition to all CSS properties on all elements. After upgrading any component element that relied on that transition will need to apply one locally using wpds theme variables.transition: theme.transitions.allFast, // or transition: `background ${theme.transitions.fast} ${theme.transitions.inOut`
- Previous to v0.15,
globalStyles
contained a global removal of margin and padding for all elements. After upgrading any component element that relied on having that spacing removed will need to add spacing rules with styles local to the component.
This project is developed under a MIT License.