https://github.com/patternfly/patternfly-react
A set of React components for the PatternFly project.
https://github.com/patternfly/patternfly-react
bootstrap3 hacktoberfest patternfly react-components reactjs
Last synced: 14 days ago
JSON representation
A set of React components for the PatternFly project.
- Host: GitHub
- URL: https://github.com/patternfly/patternfly-react
- Owner: patternfly
- License: mit
- Created: 2017-03-08T22:31:12.000Z (about 8 years ago)
- Default Branch: main
- Last Pushed: 2025-04-01T20:49:39.000Z (21 days ago)
- Last Synced: 2025-04-02T03:46:54.758Z (21 days ago)
- Topics: bootstrap3, hacktoberfest, patternfly, react-components, reactjs
- Language: TypeScript
- Homepage: https://react-staging.patternfly.org/
- Size: 308 MB
- Stars: 816
- Watchers: 26
- Forks: 362
- Open Issues: 251
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# PatternFly React
[](https://lernajs.io/)
[](https://www.npmjs.com/package/@patternfly/react-core)
This project provides a set of React components for the [PatternFly project](https://patternfly.org).
**Community:** [PatternFly website](https://www.patternfly.org) | [Slack](https://slack.patternfly.org) | [Medium](https://medium.com/patternfly) | [Mailing list](https://www.redhat.com/mailman/listinfo/patternfly)
### Table of contents
1. [PatternFly React packages](#patternfly-react-packages)
2. [Setup](#Setup)
3. [Contribution guidelines](#Contribution-guidelines)
4. [License](#License)
Using PatternFly 3? Take a look at the [PatternFly 3 React component information](https://github.com/patternfly/patternfly-react/blob/patternfly-3/README.md).
### PatternFly React packages
| Package link | Description |
| --- | --- |
| **:blue_heart: Core packages** |
| [@patternfly/react-core](./packages/react-core/README.md) | Core set of components |
| [@patternfly/react-table](./packages/react-table/README.md) | Table components |
| [@patternfly/react-charts](./packages/react-charts/README.md) | Chart components
| [@patternfly/react-icons](./packages/react-icons/README.md) | Icon components |
| [@patternfly/react-styles](./packages/react-styles/README.md) | PatternFly CSS styles |
| [@patternfly/react-tokens](./packages/react-tokens/README.md) | PatternFly CSS variable tokens |
| **:yellow_heart: Extension packages** |
| [@patternfly/react-log-viewer](https://github.com/patternfly/react-log-viewer/blob/main/README.md) | Virtualized log viewer component |
| [@patternfly/react-catalog-view-extension](https://github.com/patternfly/react-catalog-view/blob/main/README.md) | Catalog view extension |
| [@patternfly/react-topology](https://github.com/patternfly/react-topology/blob/main/README.md) | Topology components |
| **:open_file_folder: Supporting packages** |
| [@patternfly/react-docs](./packages/react-docs/README.md) | Gatsby documentation site for components |
| [@patternfly/react-integration](./packages/react-integration/README.md) | Cypress integration tests |
| **:x: Deprecated packages** |
| [@patternfly/react-virtualized-extension](https://github.com/patternfly/react-virtualized-extension/blob/main/README.md) | Table and list row virtualization extension |
### Setup
Before you begin, check out this [overview of PatternFly](http://patternfly.org/get-started/about) 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](https://nodejs.org/en/download/package-manager)
* [Use Yarn](https://yarnpkg.com/getting-started/install)
#### Start with PatternFly React seed
If you want to start with your existing project, skip to [Install and configure PatternFly React](#install-and-configure-patternfly-react).
[PatternFly React seed](https://github.com/patternfly/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](https://github.com/patternfly/patternfly-react-seed).
* JavaScript: [Fork and clone the JavaScript branch of the PatternFly React Seed project](https://github.com/patternfly/patternfly-react-seed/tree/javascript).
For more information about how to fork and clone a repo, [view GitHub Help](https://help.github.com/articles/fork-a-repo/).
2. **Install the project**
Follow the steps outlined in the [PatternFly React Seed README](https://github.com/patternfly/patternfly-react-seed#quick-start) 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](#patternfly-react-packages).
### Contribution guidelines
All React contributors must first be [PatternFly community contributors](https://www.patternfly.org/get-started/contribute/contributing-to-patternfly). If you're already a PatternFly community contributor, check out the [React contribution guidelines](https://github.com/patternfly/patternfly-react/tree/main/CONTRIBUTING.md) to make React contributions.
### License
PatternFly React is licensed under the [MIT License](https://github.com/patternfly/patternfly-react/tree/main/LICENSE).