Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/washingtonpost/wpds-ui-kit
WPDS's UiKit coded in React using Stitches, Radix UI and more! Also home to our docs site
https://github.com/washingtonpost/wpds-ui-kit
components design-system styleguide wpds
Last synced: 2 days ago
JSON representation
WPDS's UiKit coded in React using Stitches, Radix UI and more! Also home to our docs site
- Host: GitHub
- URL: https://github.com/washingtonpost/wpds-ui-kit
- Owner: washingtonpost
- License: mit
- Created: 2021-10-11T12:55:03.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-01-23T19:45:16.000Z (11 days ago)
- Last Synced: 2025-01-24T01:37:36.231Z (11 days ago)
- Topics: components, design-system, styleguide, wpds
- Language: TypeScript
- Homepage: https://build.washingtonpost.com
- Size: 108 MB
- Stars: 96
- Watchers: 10
- Forks: 36
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: docs/CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
- Security: SECURITY.md
Awesome Lists containing this project
README
# WPDS's UI Kit
The Washington Post Design System (WPDS) UI Kit is a mono-repo of our UI Kit and our [documentation site](https://build.washingtonpost.com).
 [](https://github.com/WPMedia/wpds-ui-kit/actions/workflows/chromatic-prod.yml) [](https://github.com/WPMedia/wpds-ui-kit/actions/workflows/validation.yml) [](https://github.com/WPMedia/wpds-ui-kit/actions/workflows/latest-release.yml) 
## Dependency Graph
An example of the dependency graph for importing Button from Kit.
```mermaid
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`.
```bash
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](https://build.washingtonpost.com/resources/guides/react-guide).
- If you would like to contribute to our WPDS UI Kit please refer to the [contribution docs](docs/CONTRIBUTING.md).
- Feel free to reach out to [#wpds on Slack](https://washpost.slack.com/archives/C01FWHF12BG) if you have any questions or run into any problems.
- [Explore the Docs Site](https://build.washingtonpost.com) for usage examples and additional documentation on each component. You can also find additional resources under the [resources](https://build.washingtonpost.com/resources), [guides](https://build.washingtonpost.com/resources/guides), and [support](https://build.washingtonpost.com/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.
### Upgrading
- Previous to v1.5.1, the `Button` component had a default `density: "compact"`. After upgrading, the default will be `density: "default"`, so you will want to check any Buttons used in your code for regressions and manually apply the `density: "compact"` as needed.
```javascript