missiondesign-react

React components for Mission Design System: the banner, identifier, lockup, agency marks, mission picker, theme toggle, dialog and design notes, and the combo box, date and time pickers, file input, character count, data table, modal, tooltip and language selector.

npm install missiondesign missiondesign-react

import 'missiondesign/mds.css'
import { PrefsProvider, Banner, Lockup, ThemeToggle } from 'missiondesign-react'

export function Shell() {
  return (
    <PrefsProvider>
      <Banner />
      <header>
        <Lockup />
        <ThemeToggle />
      </header>
    </PrefsProvider>
  )
}

PrefsProvider keeps theme, mission, mark, typeface, shape and density in attributes on <html>, where the missiondesign stylesheets read them. Agency seals and logos load from /seals/ and /logos/; copy them from missiondesign/assets/ into your public folder.

The package also exports the data and helpers behind the components: missions, deriveTheme, themeFailures, contrastRatio, heroPhotos, components and tokens.

Documentation: https://missiondesign.us

License

Protoware License v1.0. Built by MetaPhase.