• Stars
    star
    774
  • Rank 58,703 (Top 2 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated about 1 month ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A set of React components for the PatternFly project.

PatternFly React

lerna PatternFly npm badge

This project provides a set of React components for the PatternFly project.

Community: PatternFly website | Slack | Medium | Mailing list

Table of contents

  1. PatternFly React packages
  2. Setup
  3. Contribution guidelines
  4. License

Using PatternFly 3? Take a look at the PatternFly 3 React component information.

PatternFly React packages

Package link Description
💙 Core packages
  @patternfly/react-core Core set of components
  @patternfly/react-table Table components
  @patternfly/react-charts Chart components
  @patternfly/react-icons Icon components
  @patternfly/react-styles PatternFly CSS styles
  @patternfly/react-tokens PatternFly CSS variable tokens
💛 Extension packages
  @patternfly/react-log-viewer Virtualized log viewer component
  @patternfly/react-catalog-view-extension Catalog view extension
  @patternfly/react-topology Topology components
📂 Supporting packages
  @patternfly/react-docs Gatsby documentation site for components
  @patternfly/react-integration Cypress integration tests
Deprecated packages
  @patternfly/react-inline-edit-extension Table inline edit extension
  @patternfly/react-virtualized-extension Table and list row virtualization extension

Setup

Before you begin, check out this overview of PatternFly to get familiar with the basic elements of the design system.

Install a package manager

Install a package manager before using the PatternFly libraries.

Start with PatternFly React seed

If you want to start with your existing project, skip to Install and configure PatternFly React.

PatternFly React seed is an open source build scaffolding utility. It gives developers a jump-start when creating new projects that will use PatternFly.

  1. Fork the project
  1. Install the project

    Follow the steps outlined in the PatternFly React Seed README to install.

Install and configure PatternFly React

  • Using npm, run the following command to install:

    npm install @patternfly/react-core --save
    

    OR

  • Using yarn, run the following command to install:

    yarn add @patternfly/react-core
    

    Once the library is installed, use the specific setup instructions for that library to access the components it contains. These can be found in the readme for each library.

Contribution guidelines

All React contributors must first be PatternFly community contributors. If you're already a PatternFly community contributor, check out the React contribution guidelines to make React contributions.

License

PatternFly React is licensed under the MIT License.

More Repositories

1

patternfly-3

This repo contains the HTML, CSS, and JQuery for the PatternFly 3 project.
HTML
1,148
star
2

patternfly

This repo contains core (HTML/CSS) implementation for PatternFly. Issues related to CSS/HTML and layout should be filed here.
SCSS
697
star
3

patternfly-elements

PatternFly Elements. A set of community-created web components based on PatternFly design.
TypeScript
376
star
4

patternfly-timeline

A time based / event series interactive visualization using d3.js. Use drag and zoom to navigate in time.
JavaScript
136
star
5

angular-patternfly

This repo contains instructions and the code for a set of Angular 1 components for the PatternFly project.
JavaScript
123
star
6

patternfly-design

Use this repo to file all new feature or design change requests for the PatternFly project
HTML
114
star
7

patternfly-react-seed

A PatternFly seed for React web applications
TypeScript
88
star
8

patternfly-ng

The code for a set of Angular 6+ components for the PatternFly project. Note that the release/3.x branch supports Angular 4 and 5.
TypeScript
88
star
9

patternfly-org

Home of patternfly.org
JavaScript
69
star
10

patternfly-design-kit

The PatternFly Design Kit is a Sketch library used for creating PatternFly accurate design mockups
49
star
11

patternfly-sass

A port of Patternfly from Less to Sass
HTML
40
star
12

patternfly-demo-app

The PatternFly 3 demo app serves as a boiler for building your production app with PatternFly, Node.JS, and Webpack. Demo:
CSS
24
star
13

patternfly-react-demo-app

DEPRECATED: This project is no longer active. See https://github.com/patternfly/patternfly-react-seed for PF4 demos.
JavaScript
21
star
14

react-log-viewer

TypeScript
18
star
15

patternfly-quickstarts

Repository containing the PatternFly Quick Start extension code
TypeScript
15
star
16

patternfly-a11y

JavaScript
10
star
17

react-topology

TypeScript
10
star
18

pf-codemods

Codemods for upgrading from [email protected] to [email protected]. Uses eslint.
TypeScript
10
star
19

training-scenarios

PatternFly Developer Training
Shell
8
star
20

react-component-groups

TypeScript
8
star
21

patternfly-tutorial

This guide will help you set up PatternFly and start a PatternFly dashboard.
HTML
8
star
22

patternfly-next-react-demo-app

Demo React Application using Patternfly Next and Patternfly React
JavaScript
6
star
23

generator-pfelement

JavaScript
5
star
24

react-catalog-view

TypeScript
3
star
25

patternfly.github.io

HTML
3
star
26

patternfly-unified-design-kit

3
star
27

patternfly-code-guide

PatternFly Code Guide documents standards for developing flexible, durable, and sustainable HTML and CSS for PatternFly
HTML
3
star
28

react-console

This package provides VncConsole, SerialConsole and DesktopViewer React components
TypeScript
2
star
29

pfe-tools

TypeScript
2
star
30

angularjs-datatables

Clone of angular-datatables v0.5.6
HTML
2
star
31

angular-patternfly-demo-app

A base AngularJS application developed to create examples and samples of Angular-Patternfly components
JavaScript
2
star
32

patternfly-site

Wordpress theme for patternfly.org v1
JavaScript
2
star
33

patternfly-webcomponents

Proof of concept PatternFly design Web Components
JavaScript
2
star
34

patternfly-elements-documentation

Documentation website code for PatternFly Elements. Make documentation edits here.
CSS
2
star
35

react-data-view

TypeScript
1
star
36

patternfly-sketch-plugin

JavaScript
1
star
37

react-user-feedback

TypeScript
1
star
38

patternfly-jquery

HTML
1
star
39

patternfly-sandbox-ng

This repo contains instructions and the code for a set of Angular 6+ components for the PatternFly project. http://www.patternfly.org/patternfly-sandbox-ng
JavaScript
1
star
40

gatsby-theme-patternfly-org

Moved to https://github.com/patternfly/patternfly-org
1
star
41

design-tokens

SCSS
1
star
42

patternfly-blog

Wordpress theme for blog.patternfly.org
JavaScript
1
star