Overview

Every Stareezy UI package ships a minified IIFE bundle in dist/cdn/. These are served automatically by jsDelivr and unpkg once the package is published to npm. Each bundle exposes a global variable on window — no module system required.

ℹ

The CDN bundles target web only. React Native code is stubbed out, so the files are safe to load in any browser environment. React itself is not bundled — you must load it separately.

Available Bundles

@stareezy-ui/tokens~25 KB

All design tokens — colors, spacing, radius, typography, etc.

window.StareezyTokens

@stareezy-ui/components~118 KB

Full component library — includes all tokens, runtime, and stylesheet.

window.StareezyUI

@stareezy-ui/runtime~3 KB

O(1) style registry and web adapter — use if you need the runtime without components.

window.StareezyRuntime

@stareezy-ui/stylesheet~1.5 KB

Atomic CSS sheet management — low-level, rarely needed standalone.

window.StareezyStylesheet

@stareezy-ui/core~5 KB

Utilities and platform helpers — use if you need core without components.

window.StareezyCore

Quick Start

The most common use case: load tokens only (25 KB) or the full component library (118 KB). Both require React to be loaded first.

Tokens only

<!DOCTYPE html>
<html>
<head>
  <!-- 1. React (required peer dep) -->
  <script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>

  <!-- 2. Stareezy tokens -->
  <script src="https://cdn.jsdelivr.net/npm/@stareezy-ui/tokens/dist/cdn/stareezy-tokens.global.js"></script>
</head>
<body>
  <script>
    const { colors, spacing, radius } = StareezyTokens;

    console.log(colors.celurenBlue[500].value); // "#024CCE"
    console.log(spacing[4].value);              // 16
    console.log(radius.md.value);               // 8
  </script>
</body>
</html>

Full component library

<!DOCTYPE html>
<html>
<head>
  <!-- 1. React -->
  <script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>

  <!-- 2. Stareezy UI (includes tokens, runtime, stylesheet) -->
  <script src="https://cdn.jsdelivr.net/npm/@stareezy-ui/components/dist/cdn/stareezy-ui.global.js"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    const { Box, Text, Button, ThemeProvider } = StareezyUI;
    const { colors, spacing } = StareezyUI; // tokens are re-exported

    const e = React.createElement;

    ReactDOM.createRoot(document.getElementById("root")).render(
      e(ThemeProvider, { theme: "light" },
        e(Box, { bg: colors.celurenBlue[500], p: spacing[4] },
          e(Text, { type: "M-heading-bold", text: "Hello from CDN!" })
        )
      )
    );
  </script>
</body>
</html>

✦

The StareezyUI global re-exports everything from tokens, runtime, and components — so you only need the one script tag for the full library.

Step-by-Step Setup

Load React from CDN

React must be on the page before any Stareezy script. Use the UMD builds from jsDelivr or unpkg:

<!-- Development (with warnings) -->
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.development.js"></script>

<!-- Production (minified) -->
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>

Load the Stareezy bundle

Pick the bundle you need. For most use cases, one of these two:

<!-- Tokens only — 25 KB, zero component overhead -->
<script src="https://cdn.jsdelivr.net/npm/@stareezy-ui/tokens/dist/cdn/stareezy-tokens.global.js"></script>

<!-- Full library — 118 KB, includes all components -->
<script src="https://cdn.jsdelivr.net/npm/@stareezy-ui/components/dist/cdn/stareezy-ui.global.js"></script>

Pin a version (recommended for production)

Always pin to a specific version in production to avoid unexpected breaking changes:

<!-- Pinned to 0.2.3 -->
<script src="https://cdn.jsdelivr.net/npm/@stareezy-ui/tokens@0.2.3/dist/cdn/stareezy-tokens.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@stareezy-ui/components@0.2.3/dist/cdn/stareezy-ui.global.js"></script>

Use the globals

All exports are available on the global variable. Destructure what you need:

// Tokens
const { colors, spacing, radius, typography, shadow, timing } = StareezyTokens;

// Components + tokens (from the full bundle)
const { Box, Text, Button, Input, Badge, Card, ThemeProvider } = StareezyUI;
const { colors, spacing } = StareezyUI;

Global Variable Reference

Script	Global	Contains
`stareezy-tokens.global.js`	`StareezyTokens`	colors, spacing, radius, typography, shadow, timing, motion, ThemeProvider, createUi, token
`stareezy-ui.global.js`	`StareezyUI`	Everything in StareezyTokens + all components (Box, Text, Button, Input, …)
`stareezy-runtime.global.js`	`StareezyRuntime`	styleRegistry, resolve, webAdapter
`stareezy-stylesheet.global.js`	`StareezyStylesheet`	injectSheet, flushSheet
`stareezy-core.global.js`	`StareezyCore`	platform helpers, useDeviceLayout, spacing utilities

Using with JSX (Babel standalone)

If you want JSX syntax in the browser, add Babel standalone before your script and mark it type="text/babel":

<script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@stareezy-ui/components/dist/cdn/stareezy-ui.global.js"></script>

<div id="root"></div>

<script type="text/babel">
  const { Box, Text, Button, ThemeProvider } = StareezyUI;
  const { colors, spacing, radius } = StareezyUI;

  function App() {
    return (
      <ThemeProvider theme="light">
        <Box bg={colors.celurenBlue[500]} p={spacing[4]} rounded={radius.md}>
          <Text type="M-heading-bold" text="Hello from CDN + JSX!" />
          <Button variant="primary" text="Click me" onPress={() => alert("hi")} />
        </Box>
      </ThemeProvider>
    );
  }

  ReactDOM.createRoot(document.getElementById("root")).render(<App />);
</script>

⚠

Babel standalone is ~900 KB and compiles JSX in the browser at runtime. It's fine for prototyping but not recommended for production — use a bundler instead.

Tokens-only (no React)

If you only need design values (colors, spacing, etc.) and don't use React at all, the tokens bundle still works — just ignore the ThemeProvider export:

<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@stareezy-ui/tokens/dist/cdn/stareezy-tokens.global.js"></script>

<script>
  const { colors, spacing, radius } = StareezyTokens;

  // Apply token values to any DOM element
  document.querySelector(".hero").style.backgroundColor = colors.celurenBlue[500].value;
  document.querySelector(".hero").style.padding = spacing[6].value + "px";
</script>

ℹ

React is still required as a script tag even for tokens-only usage because ThemeProvider is part of the tokens bundle. A future tokens-only build without React is planned.

CDN Providers

The bundles are served from any CDN that mirrors npm. Both jsDelivr and unpkg work out of the box:

<!-- jsDelivr (recommended — global CDN, SRI support) -->
https://cdn.jsdelivr.net/npm/@stareezy-ui/tokens@{version}/dist/cdn/stareezy-tokens.global.js

<!-- unpkg -->
https://unpkg.com/@stareezy-ui/tokens@{version}/dist/cdn/stareezy-tokens.global.js

✦

jsDelivr supports Subresource Integrity (SRI) hashes. Use them in production to protect against CDN compromise:

<script
  src="https://cdn.jsdelivr.net/npm/@stareezy-ui/tokens@0.2.3/dist/cdn/stareezy-tokens.global.js"
  integrity="sha256-..."
  crossorigin="anonymous"
></script>

CDN Usage