Skip to content
Synchronicity

Installation

Synchronicity will be distributed as npm packages. You will be able to install just the tokens, or the complete React Native package.

Tokens Only

Section titled “Tokens Only”

If you want to use the design tokens with your own components:

Terminal window
pnpm add @synchronicity/tokens

React Native Package

Section titled “React Native Package”

For the complete experience with components and hooks:

Terminal window
pnpm add @synchronicity/react-native

Peer Dependencies

Section titled “Peer Dependencies”

The React Native package requires:

{
  "peerDependencies": {
    "react": ">=18.0.0",
    "react-native": ">=0.72.0",
    "react-native-reanimated": ">=3.0.0"
  }
}

Local Development (Monorepo)

Section titled “Local Development (Monorepo)”

If you’re developing locally or in a monorepo, you can reference the packages directly:

{
  "dependencies": {
    "@synchronicity/tokens": "file:../synchronicity-design-system/packages/tokens",
    "@synchronicity/react-native": "file:../synchronicity-design-system/packages/react-native"
  }
}

Or with pnpm workspaces:

{
  "dependencies": {
    "@synchronicity/tokens": "workspace:*"
  }
}

TypeScript Support

Section titled “TypeScript Support”

Both packages include full TypeScript definitions. No additional @types packages needed.

import { createTheme, type Theme, type ThemeObject } from '@synchronicity/tokens';


const theme: ThemeObject = createTheme('dark');

Next Steps

Section titled “Next Steps”

Now that you have Synchronicity installed, check out the Quick Start guide to set up theming.