Patternfly Elements
Patternfly Elements is a free, open-source design system built with HTML. PatternFly Elements. A set of community-created web components based on PatternFly design. It has 395 GitHub stars and is released under the MIT license. A live demo is linked from this page.
github.com/patternfly/patternfly-elements (opens in a new tab)
Data as of from the GitHub API; description from the project's repository. Report an error
Get started
Copy the files into a new folder with degit (no git history), or clone the repository with git.
npx degit patternfly/patternfly-elements my-ui
cd my-uigit clone --depth 1 https://github.com/patternfly/patternfly-elements.git my-uiSources: GitHub docs on template repositories, degit.
About Patternfly Elements
[PatternFly Elements][home] is a work-in-progress collection of flexible and lightweight Web Components based on the Unified Design Kit. The repo also includes a generator to build new components.
Built with
- HTML
- TypeScript
Similar templates
More design systems
Primitives
primer/primitives
Color, typography, and spacing primitives in json.
Active · last commit Oct 21, 2026
Design systemsTypeScriptSiemens Ix
siemens/ix
Siemens Industrial Experience is a design system for designers and developers, to consistently create the perfect digital experience for industrial software products.
Active · last commit Oct 27, 2026
OfficialDesign systemsTypeScriptPaste
twilio-labs/paste
Paste is a design system for designing and building consistent experiences at Twilio.
Maintained · last commit Aug 20, 2026
OfficialDesign systemsTypeScriptCharcoal
pixiv/charcoal
Design system library by pixiv.
Active · last commit Oct 22, 2026
Design systemsTypeScriptReact Dsfr
codegouvfr/react-dsfr
🇫🇷 The French Government Design system React toolkit.
Active · last commit Oct 15, 2026
Design systemsTypeScriptCanvas Kit
Workday/canvas-kit
Development kits to implement UI following the Workday Sana Canvas Design System (https://design.workday.com/design-system).
Active · last commit Oct 27, 2026
Design systemsTypeScript
How do I use Patternfly Elements?
Copy the files into a new folder with npx degit patternfly/patternfly-elements my-ui (no git history), or fork the repository on GitHub. Then follow the README for the install and dev commands.
Can I use Patternfly Elements for commercial projects?
Yes. Patternfly Elements is released under the MIT license, a permissive license that allows commercial use as long as you keep the copyright and license notice. Third-party assets bundled with it (images, fonts, icons) may have their own terms.
Is Patternfly Elements maintained?
The repository's most recent commit was on May 5, 2026. Its latest release is @patternfly/pfe-core@6.0.0. appsgit only lists templates from repositories with a commit in the last six months.