Developers

Usage

Now that you've installed the Red Hat Design System, here's more information about how to use the web components.

Using react wrappers

React wrappers make it possible to use web components within React JSX files. Follow the steps below to learn how.

1. Initial setup

We'll bootstrap our React app using Vite. It's possible to use other tools for this, but that is out of the scope of this tutorial.

This command will ask you to provide the project name, framework, and variant.

2. Install the @lit/react library

Use the following command:

3. Import elements and patterns

After installing the @lit/react library, you can import elements and patterns to your file. Below is an example of importing <rh-button> and <rh-card>, and managing app state between them using react.

Using RHDS elements with Vue

To get web components to work with Vue, it’s pretty easy and straightforward. Follow the steps below to use web components in a Vue app.

1. Initial setup

Add these two lines at the top of the main.js file in the /src/ directory.

2. Import elements and patterns

Add the import statements to the top of the <script> tag in the file in which you're using web components. Below is an example of importing <rh-card> to a file called HelloWorld.vue.

Other resources

• Red Hat Design System Wiki
• Red Hat Brand Standards

Designers

To get started using our design system as a designer, go to the Designers page.