Developers

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

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

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.

npm create vite@latest

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

Use the following command:

npm install @lit-labs/react

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.

import { useState } from 'react';
import { Button } from '@rhds/elements/react/rh-button/rh-button.js';
import { Badge } from '@rhds/elements/react/rh-badge/rh-badge.js';
import { Card } from '@rhds/elements/react/rh-card/rh-card.js';
export function App() {
  const [clicks, setClicks] = useState(0);
  return (
    <Card>
      <h2 slot="header">Click Me</h2>
      <Badge slot="header" number={clicks}></Badge>
      <Button slot="footer" onClick={() => setClicks(clicks + 1)}>
        Increment!
      </Button>
    </Card>
  )
}

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.

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

import Vue from "vue";
import App from "./App.vue";

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.

import "@rhds/elements/rh-card/rh-card.js";
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};

• Red Hat Design System Wiki
• Red Hat Brand Standards