@hashicorp/mds-next

v0.9.3

Published

2 months ago

Next.js adapter for MDS tokens (fonts, etc).

`@hashicorp/mds-next`

Next.js adapter for the Materia Design System (MDS).
This package provides typed adapters for next/link & next/image and Next Font helpers for HashiCorp’s fonts, making it easy to wire MDS into a Next.js (App Router or Pages) application.

Features

🔤 Fonts: HashiCorp Sans (variable) + DejaVu Sans Mono via next/font/local
🔗 Adapters: NextLinkAdapter and NextImageAdapter with MDS prop types
⚙️ Next.js support (Next 14+, React 18)
🧩 Plays nicely with @hashicorp/mds-react and @hashicorp/mds-tokens

Installation

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

Peer requirements

next >= 14
react ^18.2.0
react-dom ^18.2.0
@hashicorp/mds-react and @hashicorp/mds-tokens

Quickstart

1) Fonts in the App Router

Add the MDS font variables to your root layout so the CSS variables are available everywhere.

// app/layout.tsx
import { mdsFontVariables } from "@hashicorp/mds-next/fonts"

export default function RootLayout({ children }: React.PropsWithChildren) {
  return (
    <html>
      <body className={mdsFontVariables}>{children}</body>
    </html>
  )
}

What you get:

hashicorpSans.variable → --hashicorp-sans
dejavuSansMono.variable → --dejavu-sans-mono
mdsFontVariables → convenience string: "--hashicorp-sans --dejavu-sans-mono"

You can also import them individually:

import { hashicorpSans, dejavuSansMono } from "@hashicorp/mds-next/fonts"

export const fontVars = `${hashicorpSans.variable} ${dejavuSansMono.variable}`

2) Use the Next adapters (client components)

"use client"

import { MDSProvider } from '@hashicorp/mds-react/utils'
import { NextImageAdapter, NextLinkAdapter } from '@hashicorp/mds-next/adapters'

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <MDSProvider
			imageComponent={NextImageAdapter}
			linkComponent={NextLinkAdapter}
		>
			{children}
    </MDSProvider>
  )
}

MDSProvider allows any MDS component that calls useMDSImage or useMDSLink to render through the Next adapters (allowing them make use of priority, placeholder, router behaviors, etc.).
NextLinkAdapter wraps next/link and is typed with MDSLinkProps from @hashicorp/mds-react.
NextImageAdapter wraps next/image and is typed with MDSImageProps from @hashicorp/mds-react.

Note: These adapters are marked "use client". Import them only in Client Components (or a client boundary) just like you would with next/link/next/image.

API

Fonts (`@hashicorp/mds-next/fonts`)

hashicorpSans – HashiCorp Sans variable (via next/font/local)
dejavuSansMono – DejaVu Sans Mono (via next/font/local)
mdsFontVariables – "${hashicorpSans.variable} ${dejavuSansMono.variable}"

These set CSS variables:

--hashicorp-sans
--dejavu-sans-mono

Use them in your own CSS or rely on MDS components that consume these variables.

Adapters

NextLinkAdapter (from @hashicorp/mds-next/adapters/link)
NextImageAdapter (from @hashicorp/mds-next/adapters/image)

Both are thin, typed wrappers over Next primitives and are intended to align with @hashicorp/mds-react prop shapes.

Contributing (monorepo)

Inside the monorepo:

# from packages/mds-next
npm install
npm run dev      # watch build (JS + assets)
npm run build    # one-off build
npm run typecheck

This package publishes only the built dist/ plus bundled fonts.
Consumers do not need to copy fonts manually.

License

See the LICENSE file for details.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme