MetaMask Design System

The MetaMask Design System monorepo

Modules

This repository contains the following packages ¹:

• @metamask/design-system-react
• @metamask/design-system-react-native
• @metamask/design-system-shared
• @metamask/design-system-tailwind-preset
• @metamask/design-system-twrnc-preset
• @metamask/design-tokens

Or, in graph form ¹:

%%{ init: { 'flowchart': { 'curve': 'bumpX' } } }%%
graph LR;
linkStyle default opacity:0.5
  design_system_react(["@metamask/design-system-react"]);
  design_system_react_native(["@metamask/design-system-react-native"]);
  design_system_shared(["@metamask/design-system-shared"]);
  design_system_tailwind_preset(["@metamask/design-system-tailwind-preset"]);
  design_system_twrnc_preset(["@metamask/design-system-twrnc-preset"]);
  design_tokens(["@metamask/design-tokens"]);
  design_system_react --> design_system_tailwind_preset;
  design_system_react --> design_tokens;
  design_system_react_native --> design_system_twrnc_preset;
  design_system_react_native --> design_tokens;
  design_system_tailwind_preset --> design_tokens;
  design_system_twrnc_preset --> design_tokens;

Loading

Refer to individual packages for usage instructions.

Learn more

For instructions on performing common development-related tasks, see contributing to the monorepo.

Footnotes

1. The package list and dependency graph should be programmatically generated by running yarn update-readme-content. ↩ ↩²