PatternFly React is the component layer of the PatternFly design system

The React implementation of an enterprise design system

PatternFly React provides a set of React components for the PatternFly project, and it is published by Red Hat, which is also the author recorded in the root package manifest.

The framing matters for anyone evaluating it. PatternFly is a design system with its own website, Slack workspace, Medium channel and mailing list, and this repository is one implementation of it, in React. It is not a general purpose React component library that happens to look like something, and it is not a port of an existing library under a new name. The components exist because the design system specifies them.

That is the appeal and the constraint. A team building an administration console, a dashboard or a cloud management interface gets components that already follow the system, with tokens behind them, instead of hand-tuning each screen. A team building a consumer product gets a visual language that was designed for dense, data-heavy, keyboard-navigable enterprise interfaces, which may or exactly the wrong register.

The project is MIT licensed, the primary language is TypeScript, and it is a lerna monorepo with a Yarn 4.7.0 workspace and a Node engine requirement of 22.17.1 or newer. Version 6.7.0 was published on 2026-10-15, after 6.6.0 in July and 6.5.0 in May, and the last push to the main branch was on 2026-10-19.

Six core packages, three extensions, two support packages

The repository is a monorepo and the README organises the packages into groups, which is the fastest way to understand what you are choosing between.

The core packages are the ones most projects need. @patternfly/react-core is the core set of components. @patternfly/react-table holds the table components, which is a large piece of the work in any administration interface. @patternfly/react-charts provides chart components, @patternfly/react-icons the icon components, @patternfly/react-styles the PatternFly CSS styles, and @patternfly/react-tokens the PatternFly CSS variable tokens.

The extension packages live in their own repositories: @patternfly/react-log-viewer, described as a virtualized log viewer component, @patternfly/react-catalog-view-extension for catalog views, and @patternfly/react-topology for topology components.

Two supporting packages stay in this repo. @patternfly/react-docs is the Gatsby documentation site for the components, and @patternfly/react-integration holds the Cypress integration tests.

One package is marked deprecated: @patternfly/react-virtualized-extension, the table and list row virtualization extension, which now points at its own repository.

That table is a useful summary of the project, because it shows the layering. Components are one layer, styles and tokens are another, and the test and documentation tooling is a third. A team that installs react-core and then imports the PatternFly CSS by hand ends up with two copies of the stylesheet, which the README warns about explicitly.

Installing react-core and pulling in the styles

The install is a single dependency, and the README gives both package managers.

With npm:

npm install @patternfly/react-core --save

Or with Yarn:

yarn add @patternfly/react-core

After that, the README says to use the specific setup instructions for that library, which live in the readme of each package, rather than assuming one import covers everything.

Styling is the step people get wrong, and the README explains why. PatternFly uses the @patternfly/react-styles package as a translation layer to reference the styles contained in the PatternFly HTML and CSS library. To pull in the styling, you import the base stylesheet at the base level of your application:

import '@patternfly/react-core/dist/styles/base.css';

The warning follows immediately. Importing CSS directly from the PatternFly HTML and CSS library while using PatternFly React may result in duplicated stylesheets in the browser, because PatternFly React already pulls in styles internally through @patternfly/react-styles.

That is a small thing that produces a very confusing symptom. The page looks right, the CSS is correct, and the browser is doing the work twice, so a rule you think you have overridden is still being applied from the other copy. The fix is to use the components package's own styles and to treat the PatternFly CSS library as the source the translation layer points at, not as something to import yourself.

Two ways in: the seed project or your own codebase

The README offers a fork-first path for new projects and a direct install for existing ones.

For a new project, PatternFly React seed is an open source build scaffolding utility that gives developers a jump-start when creating projects that will use PatternFly. The instructions are to fork the project and clone it, and there are two variants: the TypeScript project and a JavaScript branch of the same seed, so a team that has not standardised on TypeScript is not forced to adopt it along with the components.

After forking and cloning, the seed README holds the installation steps, and the PatternFly React README sends you there rather than duplicating the commands.

If you already have a project, you skip the seed entirely and install the packages into what you have, using the npm or yarn command above and then the per-package setup instructions.

Either way, the README asks you to start from an overview of PatternFly itself, at patternfly.org/get-started/about, to get familiar with the basic elements of the design system. That advice is easy to skim and it is the part that saves time. The components encode assumptions about density, hierarchy and interaction that come from the system, and a team that has not read the overview will spend its first week asking why a toolbar has four actions instead of one.

There is also a version note for anyone arriving late. If you are on PatternFly 3, the README points to the PatternFly 3 React component information on the patternfly-3 branch, which is the reference for the older generation of components.

Extension packages and the deprecated virtualization package

The distinction between core, extension and supporting packages is not cosmetic, and it tells you where the boundary of the React layer sits.

Core packages are the reference implementation of the design system's own components, and they live in this repository. Extension packages are the components that go beyond the core set but are not part of the core contract, so they are developed in their own repositories and released independently. The virtualized log viewer, the catalog view extension and the topology components are the three named examples.

The deprecated package shows what happens when an approach ages. @patternfly/react-virtualized-extension handled table and list row virtualization, and it now lives in its own repository, where it can be versioned and released on its own schedule. That is the pattern for anything that outgrows the core.

The supporting packages are the machinery that keeps the library honest. The Cypress integration tests in @patternfly/react-integration are what let a component change be checked in a real browser rather than only in unit tests, and the Gatsby documentation site in @patternfly/react-docs is where the component documentation is generated.

For an adopter, the practical question is how much of the system you are taking. A read-only dashboard might need react-core, react-icons and react-charts. A product with a lot of tables needs react-table, and probably the deprecated-in-here virtualization package from its new home. A topology view needs an extension package that is released on a different cadence from the core, which is a version management decision your build has to make.

Toolchain, contribution rules and the release line

The root package manifest tells you what the maintainers work with. The workspace is a lerna monorepo, the package manager is Yarn 4.7.0, and Node 22.17.1 or newer is required. The build runs on Rollup, with the commonjs, node-resolve, replace and terser plugins, and Babel handles the transpilation with presets for env, react and typescript. Tests run through Jest with babel-jest and the Testing Library packages for dom, jest-dom, react and user-event, and the tooling includes Prettier, ESLint 9 with the react and react-compiler plugins, husky and a plopfile for scaffolding.

The contribution rules have one gate in front of them. All React contributors must first be PatternFly community contributors, and the README links to the PatternFly contribution page for that. Once you are one, the React contribution guidelines in CONTRIBUTING.md are what you follow for React specific work. In other words, contributing to the components means joining the wider project first, which is a deliberate way of keeping the design system and its implementations in step.

The release line is regular. Versions 6.5.0, 6.6.0 and 6.7.0 arrived on 2026-05-20, 2026-07-28 and 2026-10-15, which is roughly a six to eight week cadence for a major version bump on each release.

The licence is MIT, which for a component library consumed by product teams means no obligations beyond keeping the notice, and the styling contract and the token packages are what let a Red Hat product and an internal application share one visual language.

Editorial conclusion

Adopt PatternFly React when your product is meant to look like PatternFly, which in practice means enterprise and administration interfaces built on the PatternFly design system, and when you want accessible components with the design tokens already wired in. Do not adopt it for a marketing site or a consumer product, since the visual language is specific, and do not start from the HTML and CSS library and then wrap it yourself unless you are prepared to build the component behaviour the React packages give you for free. Before you install, read the styling note in the README about the duplicated stylesheets, decide whether you want the core package only or also table, charts and icons, and check that you can meet the Node 22.17.1 requirement, since the workspace runs on Yarn 4.7.0.

Frequently asked questions

Official sources

1. License: MIT
2. patternfly/patternfly-react on GitHub
3. Project website
4. README
5. Releases