PatternFly React

This project provides a set of React components for the PatternFly project.

Community: PatternFly website | Slack | Medium | Mailing list

Table of contents

1. PatternFly React packages
2. Setup
3. Contribution guidelines
4. License

Using PatternFly 3? Take a look at the PatternFly 3 React component information.

PatternFly React packages

Package link	Description
💙 Core packages
@patternfly/react-core	Core set of components
@patternfly/react-table	Table components
@patternfly/react-charts	Chart components
@patternfly/react-icons	Icon components
@patternfly/react-styles	PatternFly CSS styles
@patternfly/react-tokens	PatternFly CSS variable tokens
💛 Extension packages UXD supported
@patternfly/react-log-viewer	Virtualized log viewer component
📂 Supporting packages
@patternfly/react-docs	Gatsby documentation site for components
@patternfly/react-integration	Cypress integration tests
👪 Extension packages community supported
@patternfly/react-catalog-view-extension	Catalog view extension
@patternfly/react-virtualized-extension	Table and list row virtualization extension
@patternfly/react-topology	Topology components
@patternfly/react-console	Console components
❌ Deprecated packages
@patternfly/react-inline-edit-extension	Table inline edit extension

Setup

Before you begin, check out this overview of PatternFly to get familiar with the basic elements of the design system.

Install a package manager

Install a package manager before using the PatternFly libraries.

• Use npm
• Use Yarn

Start with PatternFly React seed

If you want to start with your existing project, skip to Install and configure PatternFly React.

PatternFly React seed is an open source build scaffolding utility. It gives developers a jump-start when creating new projects that will use PatternFly.

1. Fork the project

• TypeScript: Fork and clone the PatternFly React Seed project.

• JavaScript: Fork and clone the JavaScript branch of the PatternFly React Seed project.

  For more information about how to fork and clone a repo, view GitHub Help.

2. Install the project

   Follow the steps outlined in the PatternFly React Seed README to install.

Install and configure PatternFly React

• Using npm, run the following command to install:

  npm install @patternfly/react-core --save
  

  OR

• Using yarn, run the following command to install:

  yarn add @patternfly/react-core
  

  Once the library is installed, use the specific setup instructions for that library to access the components it contains. These can be found in the readme for each library.

Contribution guidelines

All React contributors must first be PatternFly community contributors. If you're already a PatternFly community contributor, check out the React contribution guidelines to make React contributions.

License

PatternFly React is licensed under the MIT License.