Wpds UI Kit

Overview

The Washington Post Design System (WPDS) UI Kit is a mono-repo of UI Kit and documentation site. It is heavily inspired by Chakra UI, Radix UI, and others. The UI Kit provides a collection of components and resources for building a React site.

Features

• Dependency Graph: Provides a visual representation of the dependencies for importing components from the UI Kit.
• React Guide: Offers guidance on building features for a React site using the UI Kit.
• Contribution Docs: Provides information on how to contribute to the WPDS UI Kit.
• Slack Support: Users can reach out to the #wpds channel on Slack for any questions or problems.
• Docs Site: Offers usage examples, additional documentation, and resources for each component.
• Storybook Site: Used for component development only.

Installation

To install the WPDS UI Kit, follow these steps:

1. Open the terminal and navigate to the root directory of your project.
2. Run the following command to install the UI Kit package:

   npm install @washingtonpost/wpds-ui-kit
   

3. Import the desired components into your React code using the following syntax:

   import { Button, Input, Card } from '@washingtonpost/wpds-ui-kit';
   

4. Use the imported components in your React application.

Summary

The WPDS UI Kit is a comprehensive collection of components and resources for building a React site. It is developed under the MIT License and offers features such as a dependency graph, React guide, contribution instructions, Slack support, documentation site, and a storybook site for component development. Installing the UI Kit involves adding the package to your project and importing the desired components into your code.