Stareezy UI is a fully typed, object-based design token system and cross-platform component library for React Native and web. Every design value — color, spacing, radius, typography, shadow, motion — is a typed Token object. Theme switching is pure CSS variables with zero JavaScript re-renders.

Does Stareezy UI work with React Native and Expo?

Yes. Stareezy UI works identically on web (React 18/19, Next.js 14–16, Vite 4–7) and React Native (0.81–0.86) including Expo SDK 54, 55, and 56. The same component code renders on all platforms without modification.

How do I get started with Stareezy UI?

The fastest way is the CLI: run `npx stareezy create my-app --template next` for Next.js, `--template vite` for Vite, or `--template expo` for Expo. Each template ships pre-wired with stareezy.config.ts, compiler setup, and ThemeProvider.

Is Stareezy UI free and open source?

Yes, Stareezy UI is MIT licensed and completely free. All packages are published to npm under the @stareezy-ui scope.

What makes Stareezy UI different from other component libraries?

Stareezy UI uniquely combines: (1) a fully typed Token object system for every design value, (2) true cross-platform parity between React Native and web with zero platform-specific code, (3) O(1) runtime token resolution via a Map-based registry, (4) a build-time Babel/Vite/Metro compiler that extracts tokens to atomic CSS, and (5) a config-driven responsive type system where BoxLayoutProps flow through every component automatically.

API Reference | Stareezy UI

ℹ

All packages are written in TypeScript with strict mode. Type definitions are bundled in each package's dist/ output — no separate @types/* packages are needed.

@stareezy-ui/tokens

Zero-dependency token definitions and the createUi() configuration factory. This package builds first in the dependency chain.

import { createUi, t, token, colors, spacing, radius, themes } from '@stareezy-ui/tokens'

Export	Kind	Description
`createUi(config)`	function	Configuration factory. Returns a typed UiConfig with t, tokens, shorthands, breakpoints, and helper methods.
`token(value, id?)`	function	Create a typed Token<T> object. Used to define custom token values.
`t`	constant	Global ThemeToken accessor. Access semantic color slots (t.text.primary, t.backgrounds.primary, etc.).
`themes`	constant	Built-in theme maps: themes.aurora, themes.dark, themes.light, themes['steins-gate'], themes.quasar.
`colors`	constant	Color palette tokens. Access via colors.celurenBlue[500].value.
`spacing`	constant	Spacing scale tokens. Access via spacing[4].value.
`radius`	constant	Border radius tokens. Access via radius.md.value.
`typography`	constant	Typography scale tokens for font sizes, weights, and line heights.
`motion`	constant	Animation tokens for duration, easing, and delay values.
`ThemeProvider`	component	"use client" provider that supplies the active theme to all descendant components.
`useTheme()`	hook	Returns the full resolved theme object for the nearest ThemeProvider.
`useThemeSwitch()`	hook	Returns { theme, setTheme, toggleTheme, isDark } for controlling the active theme.
`useThemeTokens()`	hook	Returns the raw ThemeTokenMap (same as useTheme but returns token objects, not values).
`Token<T>`	type	The base token type: { __token: true, value: T, id?: string }.
`ThemeToken`	type	A theme-reactive token reference — resolves at render time via the Theme_Accessor.
`SzrCustomConfig`	type	Module-augmentation interface. Extend with typeof ui to inject custom media/shorthands into the type system.
`ConfigBreakpointKey`	type	The derived BreakpointKey union — 'base' plus your declared media keys (or defaults if unaugmented).
`DefaultBreakpointKey`	type	"base" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" — the fallback when SzrCustomConfig is unaugmented.
`Responsive<T>`	type	T \| Partial<Record<BreakpointKey, T>> — the union type for responsive prop values.
`MediaConfig`	type	Record<string, number> — breakpoint name to min-width pixel mapping.

@stareezy-ui/components

31 cross-platform UI components (26 existing + 6 new in v0.4) plus layout primitives and shared types.

import { Box, Button, Input, Modal, Breadcrumb, Drawer } from '@stareezy-ui/components'
// RSC-safe primitives:
import { Box, Stack, Text } from '@stareezy-ui/components/server'

Export	Kind	Description
`Box`	component	The core layout and styling primitive. Accepts BoxProps including responsive layout and shorthand props.
`View`	component	Alias for Box with React Native semantics.
`Stack`	component	Flex column container — convenience wrapper around Box.
`HStack`	component	Flex row container with gap support.
`VStack`	component	Flex column container with gap support.
`Text`	component	Theme-reactive text primitive with typography token support.
`Divider`	component	Horizontal or vertical separator with optional label.
`Button`	component	Cross-platform button — 12 variants, 5 sizes, loading and disabled states.
`Input`	component	Text input with focus ring, error state, icons, and prefix/suffix slots.
`Accordion`	component	Collapsible content sections with smooth animation.
`Avatar`	component	User avatar with image, initials fallback, and status indicator.
`Badge`	component	Status badge with variants and size options.
`Breadcrumb`	component	Hierarchical navigation trail with separator customization.
`Checkbox`	component	Animated checkbox with indeterminate state and label.
`CircularProgress`	component	SVG circular progress with animated stroke-dashoffset.
`Clipboard`	component	Copy-to-clipboard with visual feedback.
`Dropdown`	component	Select with search, option groups, and multi-select.
`Drawer`	component	Side-panel overlay with placement variants and focus trap.
`Modal`	component	Overlay dialog with backdrop blur and size variants.
`NavBar`	component	Top navigation bar with left/center/right slot layout.
`Pagination`	component	Page navigation with smart range display and keyboard support.
`Progress`	component	Linear progress bar with label, percentage, and gradient variants.
`ProgressPanel`	component	Multi-step progress panel with labeled steps.
`Resizer`	component	Resizable container with drag handle.
`Skeleton`	component	Shimmer loading placeholder in text, circular, and rectangular variants.
`Slider`	component	Range input with custom styling and value display.
`Spinner`	component	Animated loading indicator — ring, dots, and pulse variants.
`Switch`	component	Animated toggle switch with label and size variants.
`Table`	component	Data table with sortable columns, striped rows, and sticky header.
`Tabs`	component	Tab navigation with animated indicator — underline, pills, and card variants.
`Tag`	component	Compact label chip with variants and removable support.
`Tooltip`	component	Contextual hint overlay with placement and delay options.
`CommandPalette`	component	Keyboard-driven command search palette.
`BoxLayoutProps`	type	Shared layout prop type extended by every component — spacing, sizing, flex, custom shorthands, $-props.
`extractBoxLayoutProps(props)`	function	Splits BoxLayoutProps from component-specific props. Returns { layout, rest }.
`useThemedColors()`	hook	Returns the active theme's resolved color values. Use in component render to be Theme_Reactive.

@stareezy-ui/components/server

Hook-free, RSC-safe primitives. Safe to use in Next.js App Router Server Components without a "use client" boundary.

Export	Kind	Description
`Box`	component	Server-safe Box — resolves tokens via CSS custom properties, no hooks.
`View`	component	Server-safe View.
`Stack`	component	Server-safe Stack.
`Text`	component	Server-safe Text.
`Divider`	component	Server-safe Divider.

@stareezy-ui/compiler

Build-time transforms for Vite, Babel, and Metro. Reads stareezy.config.ts automatically.

import { stareezyVitePlugin } from '@stareezy-ui/compiler'
const { stareezyBabelPlugin } = require('@stareezy-ui/compiler')
// Metro: require.resolve('@stareezy-ui/compiler/metro')

Export	Kind	Description
`stareezyVitePlugin(options?)`	function	Vite plugin — emits the virtual:stareezy-ui/styles module. Reads stareezy.config.ts automatically.
`stareezyBabelPlugin(options?)`	function	Babel plugin — transforms token prop values to atomic CSS class names at build time.
`stareezyMetroTransformer`	constant	Metro transformer for React Native / Expo. Point babelTransformerPath at this module.

@stareezy-ui/cli

First-party scaffolding CLI. Invoke via npx Stareezy or install globally as @stareezy-ui/cli.

npx stareezy create my-app --template next
npx stareezy init
npx stareezy add button input card

Export	Kind	Description
`create <name> [--template]`	function	Scaffold a new pre-wired project (next \| vite \| expo).
`init`	function	Add stareezy.config.ts, compiler wiring, and ThemeProvider to an existing project (idempotent).
`add <component...>`	function	Install one or more components with transitive dependency resolution.

@stareezy-ui/runtime

O(1) style registry with web and React Native adapters. Used internally by the Components_Package — not typically imported directly.

import { configureBreakpoints, getBreakpoints, applyRuntimeBreakpoints } from '@stareezy-ui/runtime'

@stareezy-ui/core

Utilities, platform helpers, and hooks shared across packages. Used internally — only import from this package if you are building on top of Stareezy-ui internals.

@stareezy-ui/stylesheet

Atomic CSS sheet management using @stitches/core under the hood. Used internally by the runtime. Not imported directly in application code.