https://github.com/metamask/metamask-design-system
The design system for MetaMask products
https://github.com/metamask/metamask-design-system
Last synced: 6 months 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: 2025-06-18T12:16:39.000Z (7 months ago)
- Last Synced: 2025-06-18T13:15:53.611Z (7 months ago)
- Language: TypeScript
- Homepage: https://metamask.github.io/metamask-design-system/?path=/docs/getting-started-introduction--docs
- Size: 15.9 MB
- Stars: 11
- Watchers: 56
- Forks: 4
- Open Issues: 148
-
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-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_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_tailwind_preset --> design_tokens;
design_system_twrnc_preset --> design_tokens;
design_tokens --> design_system_react;
```
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`.