@hashicorp/mds-react

Materia Design System (MDS) React components.
This package provides the React layer of the design system, offering reusable UI building blocks, patterns, and utilities consistent with HashiCorp’s brand and accessibility standards.

Features

• ⚛️ React components implementing MDS tokens and styles
• 🧩 Patterns for common UI layouts and interactions
• 🎨 Built on top of @hashicorp/mds-tokens for visual consistency
• 🔗 Works with @hashicorp/mds-next for Next.js integration
• ♿ Accessibility and internationalization baked in

Installation

npm install @hashicorp/mds-react @hashicorp/mds-tokens

This package has peer dependencies on:

• react ^18.2.0
• react-dom ^18.2.0
• @tippyjs/react ^4.2.6
• tippy.js ^6.3.1

Usage

Import from the package root, or from subpaths (subpath importing is recommended):

// Full bundle
import { Button, Modal } from "@hashicorp/mds-react"

// Granular subpaths
import { Button } from "@hashicorp/mds-react/components"
import { useScreenSize } from "@hashicorp/mds-react/utils"

Import all component styles after @hashicorp/mds-tokens/style.css in your app's global stylesheet:

@import '@hashicorp/mds-tokens/style.css';
@import '@hashicorp/mds-react/style.css';

Or, in a JavaScript/TypeScript entry point:

import "@hashicorp/mds-tokens/style.css"
import "@hashicorp/mds-react/style.css"

Exports

• Components → @hashicorp/mds-react/components
• Patterns → @hashicorp/mds-react/patterns
• Utils → @hashicorp/mds-react/utils
• Global stylesheet → @hashicorp/mds-react/style.css

All exports are typed and tree-shakeable.

Development

Clone the repo, then:

# inside packages/mds-react
npm install
npm run build

Watch mode during development:

npm run dev

Run tests:

npm test

Relationship to other packages

• @hashicorp/mds-tokens — Base design tokens and CSS custom properties
• @hashicorp/mds-next — Next.js adapters and font integration

License

Copyright (c) HashiCorp, Inc.
SPDX-License-Identifier: MPL-2.0

See the LICENSE file for details.