Stareezy UI

Requirements

⬡Node.js 18+

◈pnpm 9+ (recommended)

⚛React 18+

TSTypeScript 5+

Install Packages

Install only what you need — each package is independently tree-shakeable.

# Tokens only (zero dependencies)
pnpm add @stareezy-ui/tokens

# Full component library
pnpm add @stareezy-ui/tokens @stareezy-ui/components @stareezy-ui/runtime

# Build-time compiler (Vite or Babel)
pnpm add -D @stareezy-ui/compiler

Setup Guide

Vite Setup

Add the Vite plugin to your vite.config.ts:

import { stareezyVitePlugin } from '@stareezy-ui/compiler'

export default {
  plugins: [stareezyVitePlugin()],
}

Metro Setup (React Native)

Add the Babel plugin to your babel.config.js:

module.exports = {
  plugins: ['@stareezy-ui/compiler/babel'],
}

Wrap Your App

Wrap your root component with ThemeProvider:

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

export default function App() {
  return (
    <ThemeProvider theme="light">
      {/* your app */}
    </ThemeProvider>
  )
}

✦

You can use createUi() to register custom tokens and breakpoints at startup — see the Usage guide for details.

Verify Installation

import { colors, spacing } from '@stareezy-ui/tokens'
import { Box, Text } from '@stareezy-ui/components'

// If this renders without errors, you're good to go!
function Test() {
  return (
    <Box bg={colors.celurenBlue[500]} p={spacing[4]}>
      <Text text="Stareezy UI is working!" />
    </Box>
  )
}

ℹ

The compiler is optional — components work without it using the runtime adapter. The compiler just gives you better performance by extracting atomic CSS at build time.