@sky-mavis/tion-react

v0.1.0

Published

7 days ago

Tion design system — React DOM components

Downloads

141

0High
0Medium
0Low

hoangnguyentino

andy_skymavis

minhfinity

scope: "@sky-mavis/tion-react" packageVersion: "0.1.0" lastSyncedAt: "2026-07-01" summary: "Tion design system — parallel DOM React components for web."

`@sky-mavis/tion-react`

Tion design system components for web (DOM React). Parallel implementation to the React Native package — same tokens and themes, web-idiomatic rendering (semantic HTML, SCSS Modules, CSS custom properties, Radix Primitives, vaul drawer, motion animations).

Install

npm install @sky-mavis/tion-react
# or: bun add @sky-mavis/tion-react

Published on the public npm registry — no registry configuration or auth required.

Fonts

The package references Inter (body/UI) and Neulis Neue (display) but does not ship font files. Load them yourself — Google Fonts, @fontsource, or your CDN:

<!-- Inter via Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
  rel="stylesheet"
/>

The CSS variable fallback stacks (system-ui, sans-serif) ensure readable text even if the fonts are not loaded.

Setup

1 — Import the stylesheet

Import once, at your app entry point, before any component renders:

import '@sky-mavis/tion-react/styles.css'

This loads all CSS custom properties (light + dark tokens) and the component base styles.

2 — Wrap with `TionThemeProvider`

import { TionThemeProvider } from '@sky-mavis/tion-react'

export default function App() {
  return (
    <TionThemeProvider defaultTheme="light">
      <YourApp />
    </TionThemeProvider>
  )
}

TionThemeProvider sets data-theme on <html> — portal-safe, no wrapper <div>. Components never branch on color scheme; CSS variables flip automatically.

3 — Use components

import { Button, Input, Badge, Modal, useTheme } from '@sky-mavis/tion-react'

function Page() {
  return (
    <>
      <Button variant="primary" size="md" onClick={() => {}}>
        Confirm
      </Button>
      <Badge variant="success" size="sm">
        New
      </Badge>
      <Input variant="default" placeholder="Search…" />
    </>
  )
}

Theme Toggle

import { useTheme } from '@sky-mavis/tion-react'

function ThemeToggle() {
  const { theme, setTheme } = useTheme()
  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      {theme === 'light' ? 'Switch to dark' : 'Switch to light'}
    </button>
  )
}

For a controlled theme (e.g. synced to user preferences in your state store):

<TionThemeProvider
  theme={userPreference}
  onThemeChange={(t) => dispatch(setPreference(t))}
>
  <YourApp />
</TionThemeProvider>

Theme switching flips CSS variables only — no component re-render, no flash.

Components

29 components across four categories:

| Category | Components | | --- | --- | | Presentational | Badge, Tag, Chip, Avatar, Spinner, Skeleton, ProgressBar, HelperText, SectionHeader, EmptyState, Banner, Card, ListItem | | Form controls | Checkbox, Radio, RadioGroup, Switch, Select, Input, TextArea, TextFieldInput, TextFieldLabel, TextFieldHelpText, AmountField, Stepper | | Overlays & feedback | Modal, Tooltip, ToastProvider + useToast + ToastItem, Sheet | | Action & navigation | Button, ButtonGroup, TabBar |

All interactive components are keyboard-operable, have correct ARIA roles/states, and expose :focus-visible rings. Animations respect prefers-reduced-motion.

Peer Dependencies

{
  "react": ">=18",
  "react-dom": ">=18"
}

Development

bun run gen:tokens  # regenerate tokens.css + _tokens.scss from tion-tokens/tion-themes
bun run build       # gen:tokens + rollup → dist/{index.mjs,index.cjs,index.d.ts,style.css}
bun run test        # jest
bun run typecheck   # tsc --noEmit
bun run clean       # rm dist/

Verify from repo root: bun run finalize

Versioning & Publishing

This package is published to the public npm registry as @sky-mavis/tion-react, independently of the @axieinfinity GitHub Packages flow (it is listed in .changeset/config.json ignore, so changesets does not version it).

To release:

Bump version in package.json (and packageVersion + lastSyncedAt in this frontmatter).
Merge to main.
Create a GitHub Release with tag tion-react@<version> (must match package.json).

The .github/workflows/publish-react.yml workflow builds and runs npm publish --access=public. Requires the NPM_PUBLISH_TOKEN repo secret.