PatternFly’s major release: Everything you need to know

Check out what PatternFly 5 has in store for you

Allison Wolfe
Published in
3 min readJun 26


5 components are shown, including a list of events, status of objects, a list, and percentage graph
A sneak peek at what PatternFly 5 will look like
PatternFly’s branded divider, our logo centered between two lighter lines.

PatternFly might look different soon. No, it’s not getting a haircut, but it is getting new highlights. The new and improved version of PatternFly is about to be released: PatternFly 5.

You’ll be able to choose whether to adopt the new version or continue using the current version, PatternFly 4.

What’s new with PatternFly 5?

Component updates

Some of our key components will be rewritten to make them easier to maintain and use. These components will now be composable and their APIs will be easier to configure, creating more flexibility for you. These include:

  • Select
  • Dropdown
  • Wizard
  • Table

Refactored components

We’re retiring some of our components in favor of newer, more composable solutions. With PatternFly 5, we’ll offer new implementations for:

Have no fear, we’ve created demos to show you exactly how to rebuild these components using our new recommendations.

Dark theme

Call us Darth Vader because we’ve joined the dark side. Don’t worry, we’ll still be working for good, but we’re excited to offer a dark theme with PatternFly 5. With our new dark theme, our UI will be composed of dark gray and black backgrounds with lighter text and UI elements. We’ve ensured that our colors will be accessible and beautiful, regardless of which theme you use.

The dark theme has been tested and vetted in several products over the past year and now will be documented on the website and made available for anyone.

The words “Design and build better product expereiences in the open with PatternFly” are written in white on a black background
PatternFly 5’s homepage header in dark theme

Full support of React 18

Currently, we offer experimental support for React 18. With the new update, we’ll perform the required dependency updates, rolling updates, and necessary testing to validate the support. PatternFly 5 will be compatible with both React 17 and React 18.

Consistent callback API

We’re making improvements so that all callbacks are passing back the event as the first parameter. This will help provide consistency and align with industry best practices.

What does the future hold?

PatternFly 5 may be bringing a lot of exciting changes, but we’re already brainstorming for our next release. We have a few secrets to share about what’s next for PatternFly.

Be on the lookout for our new look and feel, Penta. We’re actively developing the beta version, which will eventually become the default for new project work. Penta will support both light and dark themes, though the dark theme implementation process will work a little differently than PatternFly 5’s. When the time comes we’ll be sure to offer support and assistance throughout the adoption process.

We can’t share too much about this new look yet, but we can say that it’ll include updated colors, better spacing, and rounded edges. A new design token system will replace our current CSS variable system to create a common language between design to development and enable better theming capabilities in the future.

Ready for the release?

We’re excited for you to adopt PatternFly 5! You can expect this release in the next coming weeks. With the release, we’ll be publishing even more details about changes and highlights. Keep an eye out for more information soon.

In the meantime, let us know what you think. If you have any feedback or questions about the changes to come, leave us a comment here. We hope you’re as excited as we are to take this next step with PatternFly.

PatternFly’s branded divider, our logo centered between two lighter lines.

Have a story of your own? Write with us! Our community thrives on diverse voices — let’s hear yours.



Allison Wolfe

Content Designer at Red Hat