This project provides a set of React components for the PatternFly project.
Community: PatternFly website | Slack | Medium | Mailing list
Using PatternFly 3? Take a look at the PatternFly 3 React component information.
| 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 | |
| @patternfly/react-log-viewer | Virtualized log viewer component |
| @patternfly/react-catalog-view-extension | Catalog view extension |
| @patternfly/react-topology | Topology components |
| 📂 Supporting packages | |
| @patternfly/react-docs | Gatsby documentation site for components |
| @patternfly/react-integration | Cypress integration tests |
| ❌ Deprecated packages | |
| @patternfly/react-virtualized-extension | Table and list row virtualization extension |
Before you begin, check out this overview of PatternFly to get familiar with the basic elements of the design system.
Install a package manager before using the PatternFly libraries.
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.
- 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.
-
Install the project
Follow the steps outlined in the PatternFly React Seed README to install.
-
Using npm, run the following command to install:
npm install @patternfly/react-core --saveOR
-
Using yarn, run the following command to install:
yarn add @patternfly/react-coreOnce 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.
PatternFly uses the @patternfly/react-styles package as a translation layer to reference the styles contained in the PatternFly HTML/CSS library. When developing with Patternfly React, include the following import at the base level of your application to pull in PatternFly's styling:
import '@patternfly/react-core/dist/styles/base.css';
Importing CSS directly from the PatternFly HTML/CSS library while using PatternFly React may result in duplicated stylesheets in the browser as PatternFly React already pulls in styles internally via @patternfly/react-styles.
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.
PatternFly React is licensed under the MIT License.