◉ v0.2.0 — Aurora Release

Design tokens,
fully typed.

Cross-platform token system and component library for React Native and web. Four themes, O(1) runtime, build-time compiler — all tree-shakeable. Theme-reactive props via the t accessor.

300+

Tokens

17+

Components

Themes

O(1)

Runtime

Get Started →◉ Token Explorer

app.tsx

import { createUi, t, themes } from '@stareezy-ui/tokens'
import { Box, Text, Button } from '@stareezy-ui/components'

// 1. Configure once at app startup
const ui = createUi({
  themes: {
    aurora:        themes.aurora,
    dark:          themes.dark,
    light:         themes.light,
    'steins-gate': themes['steins-gate'],
  },
})

// 2. Wrap your app
<ThemeProvider theme="aurora">
  <App />
</ThemeProvider>

// 3. Use t.* for theme-reactive props — auto-switches with theme
function Card() {
  return (
    <Box
      bg={t.backgrounds.primary}
      borderColor={t.border.primaryBrand}
      rounded={8}
      p={16}
    >
      <Text color={t.text.primary.value} type="M-heading-bold">
        Switches with theme automatically
      </Text>
      <Button
        bg={t.backgrounds.primary}
        text="Click me"
      />
    </Box>
  )
}

Four built-in themes

Theming guide →

aurora

Deep space dark

dark

GitHub-style dark

light

Clean light

steins-gate

Midnight navy

New in v0.2

Theme-reactive props with `t`

The t accessor returns ThemeToken references — pass them directly as component props and they resolve to the current theme's value at render time. Switch themes, every component updates automatically.

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

// These resolve to the CURRENT theme's value at render time
<Box bg={t.backgrounds.primary} color={t.text.primary} />
<Box borderColor={t.border.primaryBrand} />

// Switch theme → all components update, no re-wiring needed
const { setTheme } = useThemeSwitch()
setTheme('steins-gate') // → ibmBlue, ivoryText, labNight