https://github.com/metamask/metamask-design-system
The design system for MetaMask products
https://github.com/metamask/metamask-design-system
Last synced: about 1 month ago
JSON representation
The design system for MetaMask products
- Host: GitHub
- URL: https://github.com/metamask/metamask-design-system
- Owner: MetaMask
- Created: 2024-09-17T00:32:55.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2026-05-08T10:58:27.000Z (about 1 month ago)
- Last Synced: 2026-05-08T12:06:38.922Z (about 1 month ago)
- Language: TypeScript
- Homepage: https://metamask.github.io/metamask-design-system/?path=/docs/getting-started-introduction--docs
- Size: 36.3 MB
- Stars: 32
- Watchers: 49
- Forks: 12
- Open Issues: 215
-
Metadata Files:
- Readme: README.md
- Contributing: docs/contributing.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# MetaMask Design System
The MetaMask Design System monorepo
## Modules
This repository contains the following packages [^fn1]:
- [`@metamask/design-system-react`](packages/design-system-react)
- [`@metamask/design-system-react-native`](packages/design-system-react-native)
- [`@metamask/design-system-shared`](packages/design-system-shared)
- [`@metamask/design-system-tailwind-preset`](packages/design-system-tailwind-preset)
- [`@metamask/design-system-twrnc-preset`](packages/design-system-twrnc-preset)
- [`@metamask/design-tokens`](packages/design-tokens)
Or, in graph form [^fn1]:
```mermaid
%%{ 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;
```
Refer to individual packages for usage instructions.
## Learn more
For instructions on performing common development-related tasks, see [contributing to the monorepo](./docs/contributing.md).
[^fn1]: The package list and dependency graph should be programmatically generated by running `yarn update-readme-content`.