Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardTabsFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTile
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Developers

OverviewInstallationUsageTokensContributing
UsageUsing react wrappersUsing RHDS elements with VueOther resourcesUsageUsing react wrappersUsing RHDS elements with VueOther resources

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.

npm create vite@latest

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

2. Install the @lit/react library

Use the following command:

npm install @lit-labs/react

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.

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>
  );
}

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.

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

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.

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

Other resources

Designers

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

© 2021-2025 Red Hat, Inc. Deploys by Netlify