Installation
↗

CDN Usage

Use Stareezy UI directly from a CDN — no bundler, no build step, just a script tag.

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

1
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>
2
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>
3
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>
4
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

ScriptGlobalContains
Stareezy-tokens.global.jsStareezyTokenscolors, spacing, radius, typography, shadow, timing, motion, ThemeProvider, createUi, token
Stareezy-ui.global.jsStareezyUIEverything in StareezyTokens + all components (Box, Text, Button, Input, …)
Stareezy-runtime.global.jsStareezyRuntimestyleRegistry, resolve, webAdapter
Stareezy-stylesheet.global.jsStareezyStylesheetinjectSheet, flushSheet
Stareezy-core.global.jsStareezyCoreplatform 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>