Skip to content
Versions v3 v2 v1

Create a PatternFly Element

PatternFly Element generator

Before you begin, make sure you've followed the Prerequisites in Setup.

Then use the PatternFly Element generator to start the scaffolding process.

From the root directory of the PatternFly Elements repository, run the following command:

npm run new

The generator will then prompt you for the following:

npm run new command

After answering, your new component will be created and bootstrapped in the repository.

Once that's done, switch directories to the element you just created. We'll cd into the pf-cool-element directory.

cd elements/pf-cool-element

Open your code editor to view the structure of the element. The element's source files are located directly in it's package root, in our case:

The demo directory contains an HTML partial that you can edit to provide an interactive demo of your element.

The test directory contains unit test files for your element.

You'll also notice that the generator edited the root tsconfig.json, adding a path to our new element. This is important so that TypeScript knows where each of our packages in the monorepo are.

Next up: Structure

© 2018-2024 Red Hat, Inc. Deploys by Netlify