Other platforms

The same tokens and class names work without React. Pick the row that matches the project, then follow its notes.

Platform	Use
Claude artifacts, mockups, static pages	`enma.css` plus the class recipes. See Plain HTML and Claude artifacts
Vue, Svelte, Astro, Solid	Same CSS; port components with the same props and class names
Chrome extensions	Same CSS, local fonts, Shadow DOM for injected UI. See Chrome extensions
VS Code extension webviews	Enma structure mapped onto VS Code's theme colors. See VS Code webviews
CLIs	Enma's rules translated to the terminal. See CLIs
SwiftUI, Jetpack Compose	Colors and sizes generated from `tokens.json`

Vue, Svelte, Astro and others

Load enma/css and your theme's fonts and set the same root attributes. Port components with the props from the API contract (packages/react/src/types.ts) and the same class names, so the CSS needs no changes. Motion (count-up, bar growth) is a small script per component that adds is-in or animates the number once on first view.

vue

<!-- Stat.vue: same props and markup as the React component -->
<script setup lang="ts">
defineProps<{ label?: string; value: string; unit?: string; size?: 'hero' | 'kpi' | 'inline' }>();
</script>

<template>
  <div :class="['e-stat', `e-stat--${size ?? 'kpi'}`]">
    <div v-if="label" class="e-stat__label">{{ label }}</div>
    <div class="e-stat__row">
      <span class="e-stat__value">{{ value }}</span>
      <span v-if="unit" class="e-stat__unit">{{ unit }}</span>
    </div>
  </div>
</template>

SwiftUI and Jetpack Compose

Generate platform files from tokens.json with the same approach as the React Native themes (@enma/tokens/native-themes is the model): one color set per theme with light and dark appearances (Asset Catalog colors on iOS, a ColorScheme pair in Compose), spacing and radius as constants. Use continuous corners (.rect(cornerRadius: r, style: .continuous) in SwiftUI), tabular numbers (.monospacedDigit()), and the platform's own sheets, menus and navigation, styled with Enma colors.

swift

// Generated from tokens.json: Ember, dark
extension Color {
    static let enmaBg = Color(red: 0.051, green: 0.039, blue: 0.035)
    static let enmaAccent = Color(red: 1.0, green: 0.541, blue: 0.239)
}

Text("12,480")
    .font(.system(size: 56, weight: .semibold))
    .monospacedDigit()