Why Migrate?

⬡

Type safety

Autocomplete and compile-time errors for invalid values

⚡

Performance

O(1) style lookups, no string parsing at render time

◈

Tree shaking

Import only the tokens you use

◑

Cross-platform

Same token API on web and React Native

Migration Steps

Install Packages

pnpm add @stareezy-ui/tokens @stareezy-ui/components @stareezy-ui/runtime
pnpm add -D @stareezy-ui/compiler

Replace Color References

Before

import { color } from 'rekosistem-components/styles'

style={{
  backgroundColor: color.raisinBlack[800]
}}

After

import { colors } from '@stareezy-ui/tokens'

bg={colors.raisinBlack[800]}

Replace Spacing References

Before

style={{ padding: spacing.extraMedium }}

After

p={spacing.extraMedium}
// or numeric:
p={spacing[16]}

Replace Tamagui Props

Before (Tamagui)

<Stack
  backgroundColor="$primary500"
  padding="$4"
  borderRadius="$md"
/>

After

<Box
  bg={colors.celurenBlue[500]}
  p={spacing[4]}
  rounded={radius.md}
/>

Update Disabled States

Before

style={{
  backgroundColor: color.neutral[200],
  color: color.neutral[500]
}}

After

bg={semanticColors.backgrounds.disabled}
color={semanticColors.text.secondary}

✦

All component APIs are backward compatible — the same props work, with token-typed alternatives available. You can migrate incrementally, one component at a time.

Component Name Mapping

rekosistem-components	@stareezy-ui/components
`Button`	`Button`
`Text`	`Text`
`Input`	`Input`
`BaseModal`	`BaseModal`
`BottomSheets`	`BottomSheets`
`Card`	`Card`
`Topbar`	`Topbar`
`All others`	`Same name`

Migration Guide

Why Migrate?

Migration Steps

Component Name Mapping