design-system-twrnc-preset

@metamask/design-system-twrnc-preset

Design System twrnc preset

Installation

First, install the package:

yarn add @metamask/design-system-twrnc-preset

or

npm install @metamask/design-system-twrnc-preset

Peer Dependencies

This package requires the following peer dependencies to be installed in your project:

yarn add react@^18.2.0 react-native@0.72.15 twrnc@^4.5.1

or

npm install react@^18.2.0 react-native@0.72.15 twrnc@^4.5.1

Usage

Using the Theme Provider

import {
  ThemeProvider,
  Theme,
  useTailwind,
} from '@metamask/design-system-twrnc-preset';

function App() {
  return (
    <ThemeProvider theme={Theme.Light}>
      <MyComponent />
    </ThemeProvider>
  );
}

function MyComponent() {
  const tw = useTailwind();

  return (
    <View style={tw`p-4 bg-background-default`}>
      <Text style={tw`text-text-default text-heading-lg`}>
        Hello MetaMask Design System!
      </Text>
    </View>
  );
}

Tailwind Config for IntelliSense

To get Tailwind IntelliSense and ESLint plugin support, use the config generator:

TypeScript:

// tailwind.config.ts
import {
  generateTailwindConfig,
  Theme,
} from '@metamask/design-system-twrnc-preset/tailwind.config';

export default {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  ...generateTailwindConfig(Theme.Light),
};

JavaScript:

// tailwind.config.js
const {
  generateTailwindConfig,
  Theme,
} = require('@metamask/design-system-twrnc-preset/tailwind.config');

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  ...generateTailwindConfig(Theme.Light),
};

Custom content paths:

// tailwind.config.ts
import {
  generateTailwindConfig,
  Theme,
} from '@metamask/design-system-twrnc-preset/tailwind.config';

export default {
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './app/**/*.{js,jsx,ts,tsx}',
    './components/**/*.{js,jsx,ts,tsx}',
    './screens/**/*.{js,jsx,ts,tsx}',
    './lib/**/*.{js,jsx,ts,tsx}',
  ],
  ...generateTailwindConfig(Theme.Light),
};

This provides:

• 🎨 Full IntelliSense support - Auto-completion for all design system classes
• 🔍 ESLint integration - Works with eslint-plugin-tailwindcss
• 🌙 Theme agnostic - Classnames work with both light and dark themes
• 📝 Type safety - TypeScript definitions for all design tokens
• ⚡ Actual Design System Config - Uses the same configuration as the TWRNC preset

Contributing

This package is part of a monorepo. Instructions for contributing can be found in the monorepo README.