Globals

The numbers every screen repeats, in one place. Pick spacing, radius, type size and shadow from a scale instead of typing a value, and the whole app stays consistent when you change one. One file that works unchanged in React and in React Native, with no extra packages.

Installation

CLI

npx @modus-ui/cli add theme-globals

Manual

1. Copy the code from the code tab.
2. Create a file at components/ui/theme-globals.ts.
3. Paste the code.

The same file serves React and React Native, so the CLI installs it unchanged in either.

Usage

import { Text, View } from "react-native";
import { fontSize, radius, shadow, spacing } from "@/components/ui/theme-globals";

export default function Card() {
  return (
    <View style={{ padding: spacing.lg, borderRadius: radius.lg, boxShadow: shadow.md }}>
      <Text style={fontSize.title}>Title</Text>
    </View>
  );
}

API