About PatternFly

What is PatternFly?

PatternFly is an open source design system that enables designers and developers to create consistent and usable software products.

A design system is a collection of software design standards and resources that facilitate more consistent and productive design processes. When you design and develop with a design system, you can reduce redundancy and enable a unified language between cross-functional teams. This means that products will be visually consistent, and will use patterns that support better usability and efficiency.

The PatternFly design system is created and maintained by Red Hat, and is used across Red Hat's product catalog, but it's open for anyone to use. Across our website, we provide code samples, clear standards, and additional resources to help designers and developers work together more efficiently. Together, we can build better user experiences.

What does PatternFly include?

Foundations

PatternFly's foundations create a strong base for the rest of the design system to be built with.

Design foundations

The most foundational elements of our design system, like color, typography, icons, and spacing.

Design tokens

Semantically named variables that represent visual attributes and design styles.

Elements

PatternFly’s core elements are what you will work directly with when building a UI.

Components

Flexible, modular, building blocks that you can mix and match to create UIs.

Layouts

Different methods for arranging components for different screen sizes and content presentations.

Charts

Different methods to present data visualizations.

Extensions

Reusable solutions that utilize multiple PatternFly components for cross-project use cases.

Guidance

We provide extensive guidelines to help you create UIs following best practices.

Patterns

Recommendations and solutions for common design problems that involve multiple components.

Accessibility

Guidelines to follow in order to create products that are usable and accessible by all users.

UX writing

Content guidelines that provide principles and best practices around writing for user experience.

Additional developer resources

We offer more complex resources to assist with the development process.

Topology

A method for modeling the arrangement of elements in a network.

Utility classes

Additional CSS classes that allow you to further customize and modify UI elements, like alignment, spacing, and shadows.

Join the community

At the core of PatternFly is our global community of designers, developers, and other UX professionals with a passion for open source—in other words, our Flyers. Whether we're contributing to PatternFly or just staying up to date on new releases, we work together to make PatternFly a vibrant community of passionate people. Together, we celebrate creativity and foster a sense of teamwork and unity.

The PatternFly community is never finished growing, and we want to keep it that way, so reach out whenever—we're always open.

Chat with us
We have a Slack workspace, where you can ask us questions and share any feedback. Just like PatternFly, our Slack channels are open for all and we encourage you to join to connect with the team.

Stay up to date
Make sure you're in the loop on important updates and discussions by signing up for PatternFly emails. We can send meeting reminders, updates, and other important information right to your inbox.

Join our meetings
Flyers may be spread all over the globe, but we make sure to come together to share updates and collect feedback. If you can't make it, all meetings are recorded and published on our YouTube channel.

Read our blog
Our team is passionate, and we have a lot to say about open source and user experience—too much to fit on our website! Our Medium publication hosts articles about PatternFly projects, industry practices, professional experience, and more.

Follow us on X
If you want to keep up with us via social media, you can find us on X. We share meeting reminders, release announcements, community messages, and links to new Medium articles that you can add to your reading list.

Request a new feature
We welcome all ideas for adding or improving features! We review all requests, taking into account scope and technical constraints. Accepted requests are placed on our feature roadmap, and we'll work with you to design and develop a solution.



New communities

Sometimes Flyers branch out and build groups of their own, creating new communities. While these communities are separate from PatternFly and not supported as part of our design system, we still love seeing our Flyers turning their visions into actions.

  • PatternFly Elements: A community created by web-based developers at Red Hat, focused on creating web components for use across Red Hat's sites and SaaS products. It offers theming options for your own brand library.

  • PatternFly Kotlin: A Kotlin implementation of PatternFly based on fritz2, targeting Kotlin/JS. The goal of this project is to provide all PatternFly components in Kotlin, matching the reactive nature of fritz2. The components use stores, handlers, and other elements from the fritz2 API. For a quick overview, view the PatternFly Kotlin showcase.

  • Ansible Component Guide and Sketch Library: An additional resource that designers can use that is built on top of existing PatternFly components. It is a rapid mockup prototyping tool that can be used to quickly put together repeatable design patterns and layouts across projects. This is specific to Ansible, but many of the components are generalized and can fit many product use cases.

  • PatternFly for Yew: Provides PatternFly components for Yew—a Rust based framework for creating web applications that can run in the browser using WASM. The project aims to create Yew components for all components and concepts found in PatternFly. For a quick demo and starter template, see the PatternFly Yew Quickstart.

Where do I start?

Now that you've been introduced to PatternFly, you're ready to start designing or start developing your product. Looking to get involved in the behind-the-scenes work? Check out our contribution guidelines for more instruction.



Release cadence

We plan to release a new major version of PatternFly every year. These major releases will be the only releases with planned "breaking changes" that alter the way your code interacts with PatternFly's code. Along with each major release, we will provide detailed upgrade guides and codemods to support the work needed to upgrade your products to the latest version of PatternFly.

Minor feature releases will be available quarterly to introduce non-breaking changes, like new features and enhancements, with interim patch releases to fix any bugs that we find.

Occasionally, a component page will contain a "React next" tab, which contains details about planned changes for the implementation of the component. This updated implementation will be promoted to the main component page as part of a major release, and will become the new recommended implementation. When this happens, the previous implementation will be deprecated. Deprecated component implementations will remain available until a following major release, but will no longer be maintained or updated.

Beta components

New PatternFly components are first released in beta. To help you identify beta components, we add a blue label beside the component in the PatternFly.org navigation menu and an informational alert at the top of the component’s documentation pages.

Beta components continue to evolve as users share feedback. As these components are tested, they are subject to breaking changes, which are changes that affect visuals, applied CSS class names, or existing React properties (including the addition of new properties). We review beta components every quarter to evaluate their stability and the degree to which they meet product requirements. Once a component is stable, it's proposed as a promotion candidate. Once promoted, breaking changes are not made to components outside of a well-advertised breaking change release.

Occasionally, after a component is promoted out of beta, subsequent enhancement requests require the introduction of new CSS class names and React properties. Whenever these enhancements are substantial enough to lead to further component updates (pending testing and feedback), then a beta label is applied to the new class names and properties, as well as relevant examples in the component’s documentation.

Learn more about beta components and view a list of current promotion candidates here.

If you are considering using a beta component, make sure to:

  1. Play with the examples in the component's documentation on the PatternFly website to determine if the current implementation meets your needs. Open issues for any missing features, enhancement requests, or bugs.
  2. Check the PatternFly Issues GitHub Project board where we have created a view to categorize most issues by component. Browse any open issues for the beta component to determine how much more the beta component could evolve in the near future.

View source on GitHub