PatternFly core: the CSS and HTML layer under an enterprise design system

Five CSS files, and picking the wrong one breaks your build

The npm package ships several stylesheets and the README is careful about which to use. Installing with `npm install @patternfly/patternfly --save` brings in patternfly-base.css, which holds base styles, global styles, reset and normalize styles and global variables, and which the README states are required for patternfly styles to work properly. Then there is patternfly.css, which is patternfly-base.css plus all component and layout styles but does not include utility styles. Utilities live separately in patternfly-addons.css, which the README says do not come with patternfly.css and must be imported manually, and there is also a per-utility path so a project can import a single utility rather than the whole set. The last file, patternfly-charts.css, is required if using the dark theme with PatternFly charts. The README is explicit that the recommended consumption approach will vary from project to project, and that is the first thing to sort out: a project that pulls patternfly.css and then also patternfly-addons.css by accident ends up with duplicated utility rules and a specificity fight it will not enjoy debugging.

Core is the CSS layer, PF-React is the component layer

The repository description is precise about scope. This repo contains the core, the HTML and CSS implementation, for PatternFly, and issues related to CSS, HTML and layout should be filed there. That boundary matters because PatternFly ships more than one package, and the core is the substrate rather than the product a frontend team usually reaches for. The README describes the workflow between the two layers in some detail. For an issue created in Core that will affect a component in PF-React, a follow up issue must be created in PF-React once the Core pull request is merged, and it should include the Core PR number, the Core release, a link to the component and details of the change. If global variables are modified in Core, a React issue should be opened to address it. And CSS developers should ensure animation is well documented and communicated to the React developer. This is a mature multi-repository arrangement with a defined hand-off, which tells you the design system is maintained by a team with an established process rather than a set of independent contributors.

The generate script scaffolds a component and its class name

New components are not hand-created. The README describes an NPM script that creates source file scaffolding for a component, layout, utility or demo, and the naming convention is derived from the argument you pass. To create a component called Test component, producing the class .pf-v6-c-test-component, you run node generate TestComponent. For a layout the class is .pf-l-test-layout and the folder flag changes, node generate TestLayout -f layouts. Multiple names can be passed at once, node generate TestDemo TestDemo2 TestDemo3 -f demos, which creates three demos. The full option list is short:

Options:
  -f, --folder <folder>  Source folder (components, demos, layouts, or utilities) (default: "components")

The default folder is components, and the class prefix in that example carries a version marker, v6, which means the naming scheme is tied to the major generation of the library. The script itself is generate.js at the repository root, and the package.json describes itself as assets, source, tooling and content for PatternFly, which is a fair summary of what sits in this tree.

Visual regression runs across a dozen theme permutations

The package.json scripts show how heavily the visual testing matrix has grown. There are Backstop targets for the default theme and for dark, glass, high-contrast and felt variants, and then the combinations of those: dark-glass, dark-hc, felt-dark, felt-glass, felt-hc, felt-dark-hc and felt-dark-glass, plus an aggregate backstop:test:all that runs all twelve in sequence. The theme names are worth noting, because glass and felt are not generic words. They are the PatternFly surface treatments, and the fact that the regression suite has to be run across twelve combinations tells you the library renders its components differently per theme rather than swapping a colour variable. There is a backstop.config.js and a backstop.js at the root, a backstop_data/ directory holding the reference bitmaps, and a diff-images.js file for comparing them. There is also a release.config.js and a commitlint.config.js, so commit message conventions and release notes are automated.

Accessibility is a gate, not a report

PatternFly uses aXe, The Accessibility Engine, to check for accessibility violations, with the goal of meeting WCAG 2.0 AA requirements as stated in the accessibility guide. The tooling is set up so that the check runs against full page renderings of all components, layouts, utilities and demos, and it returns feedback about what the violation is together with a link to documentation about how to address it. Running it locally needs the latest chromedriver available on your PATH, and macOS users can install it with brew cask install chromedriver. Then you open a terminal and run yarn build && yarn serve, and in another terminal run yarn a11y, which is the patternfly-a11y script configured through patternfly-a11y.config.js. The same tool is available as a Chrome and Firefox browser extension. The contribution rules are strict about what counts as your responsibility: ignore violations that are not related to your contribution, fix the ones that are, and open an issue when a violation is not obvious how to fix or is not valid and needs a workspace or tooling change.

A design system with a sign-off step

Two processes in the README reveal that this is an enterprise design system with a governance layer, not an open source component library. The first is the beta requirement. When creating a brand new component, it should be released as beta in order to get feedback, which means a new component reaches consumers in a state where the API may still move. The second is the designer sign-off. Once the component or enhancement is complete it should receive sign off from a visual designer, who can then update the master sketch file with any changes. Screenshot generation is part of the workflow as well. When making visual changes to a full page example, new example preview screenshots must be generated, which the README describes as running yarn build && yarn serve in one terminal and yarn screenshots in another. The reference files that Backstop compares against are therefore reviewed artefacts, not a by-product of the build.

MIT licensed, six.x line, and a Node floor

The licence is MIT, with LICENSE.txt at the repository root, and the npm package is published as @patternfly/patternfly. The version in package.json reads 0.0.0-development, which is the in-repo placeholder for a release pipeline rather than a published version number. The published tags tell the real story: v6.7.0 on 2026-10-15, preceded by prerelease-v6.7.0-prerelease.3 on 2026-10-02 and prerelease-v6.7.0-prerelease.2 on 2026-09-30. So the project ships prereleases ahead of a major tag, and the naming of the class prefix carries the same version, which is how a consumer can tell which generation of markup they are targeting. Development requires Node v20.18.3 or greater, and the setup sequence is corepack enable, then yarn install from the project root, then yarn start, after which the site is on http://localhost:8001. The repository is not archived and the last push was on 2026-10-16, so the branch is active. Browser support is stated plainly: the latest two major versions of Chrome, Firefox, Safari and Edge.

Editorial conclusion

Adopt PatternFly core if you are building an enterprise admin interface in a framework other than React, or you want to consume the design system's styles directly rather than through a component wrapper. Do not adopt it if your team would rather own a token layer and build its own components, because you inherit the class naming, the utility class system and the a11y bar all at once. Before you commit, read the Install section and choose between patternfly.css and patternfly-base.css plus utilities, check that Node v20.18.3 or greater is available since development requires it, and plan for the fact that new components land as beta first and need designer sign-off.

Frequently asked questions

Official sources

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