@axieinfinity/dango

React UI component library for Axie Infinity products. Dark-first design with a CSS custom property theming system.

Install

From npmjs.org — no .npmrc required:

npm install @axieinfinity/dango @axieinfinity/dango-icons

SCSS partials for build-time theming ship in dist/styles/scss/. Import @axieinfinity/dango/dist/bundle.css for runtime CSS.

Required (install in your app)

| Kind | Packages | |------|----------| | Peers (you install) | react ^17.0.2 \|\| ^18.0.0 \|\| ^19.0.0, @axieinfinity/dango-icons >=1.0.4 \|\| >=1.0.17-0 | | Dev (SCSS only) | sass@^1.64.2 when using build-time SCSS customization |

Included automatically (no separate install)

npm install @axieinfinity/dango also installs runtime dependencies used by components:

| Package | Used by | |---------|---------| | dayjs | DatePicker, RangePicker | | framer-motion | animated components | | rc-dialog, rc-drawer, rc-tabs, rc-picker, … | overlay / form primitives |

You only need these in your own package.json if you import them directly — not for normal Dango component usage.

Troubleshooting

ERESOLVE: @axieinfinity/dango-icons peer conflict

npm error ERESOLVE unable to resolve dependency tree
npm error peer @axieinfinity/dango-icons@">=1.0.4" from @axieinfinity/[email protected]
npm error Found: @axieinfinity/[email protected]

npm excludes prerelease icons from plain >=1.0.4 peers on older dango betas. From @axieinfinity/[email protected] onward, the peer range is >=1.0.4 || >=1.0.17-0.

| Fix | Command / action | |-----|------------------| | Upgrade dango (recommended) | npm install @axieinfinity/[email protected] @axieinfinity/[email protected] | | Pin stable icons | @axieinfinity/[email protected] | | Quick workaround | npm install ... --legacy-peer-deps or .npmrc: legacy-peer-deps=true |

Vite: Could not resolve dayjs

Upgrade to @axieinfinity/[email protected] or later — dayjs installs transitively when using DatePicker / RangePicker. No separate npm install dayjs needed.

Full guide: dist/docs/troubleshooting.md

Usage

import { Button, Input, Intent, Size } from '@axieinfinity/dango';
import '@axieinfinity/dango/dist/bundle.css';

function MyForm() {
  return (
    <>
      <Input placeholder="Enter value" />
      <Button text="Submit" intent={Intent.Primary} size={Size.Default} />
    </>
  );
}

Documentation

Guides ship in the published package:

node_modules/@axieinfinity/dango/dist/docs/

Start at dist/docs/README.md for the full index.

| Case | Guide | |------|-------| | 1 — Basic | dist/docs/basic-usage.md — install, bundle.css, components | | 2 — Customize | dist/docs/customization.md — CSS variables, scoped themes | | 3 — Vite + SCSS | dist/docs/vite-scss-customization.md — build-time tokens, Vite config | | Troubleshooting | dist/docs/troubleshooting.md — ERESOLVE peers, dayjs errors, workarounds |

Reference: dist/docs/scss-integration.md · dist/docs/colors.md

Starters: dist/docs/vite-starter/ · dist/docs/next-15-starter/ (App Router) · dist/docs/next-14-starter/ (Pages Router)

Style imports

| Import | When to use | |--------|-------------| | @axieinfinity/dango/dist/bundle.css | Recommended. Global reset, :root CSS variables, and all component styles. | | @axieinfinity/dango/dist/styles/css/dango.css | Component styles only — use when your app already has its own CSS reset and you manage :root variables yourself. | | @axieinfinity/dango/dist/styles/scss/* | SCSS source tokens for build-time customization (see Theming below). |

Vite setup

For Vite + SCSS theme customization, see dist/docs/vite-scss-customization.md and copy-paste starters in dist/docs/vite-starter/.

yarn add -D sass@^1.64.2

Minimal Vite entry (CSS only)

import '@axieinfinity/dango/dist/bundle.css';

Full SCSS entry (build-time customization)

import './styles/index.scss';

Create src/styles/ using the vite-starter templates in dist/docs/vite-starter/.

Theming

Dango uses a --dg-* CSS custom property system. All design tokens are generated from SCSS maps at build time and exposed as CSS variables on :root.

Default theme

• Background: #13161B (--dg-color-background)
• Text: #FFFFFF (--dg-color-text)
• Primary: Kam orange #FF9345 (--dg-color-primary) — not blue
• Border radius: 4px (--dg-border-radius)
• Font: Work Sans (--dg-font-family)

Each intent (primary, danger, success, info, secondary, default) has a full state set: base, hover, active, focus, gradient, outlined-background, text, box-shadow, hover-light.

1. CSS variable override (recommended)

Override tokens globally or on a scoped container. No build tooling required.

/* Global brand override */
:root {
  --dg-color-primary: #0066ff;
  --dg-color-primary-hover: #0052cc;
  --dg-color-primary-active: #004099;
  --dg-color-primary-gradient: linear-gradient(104deg, #3399ff 0%, #0066ff 100%);
  --dg-border-radius: 6px;
  --dg-font-family: 'Inter', sans-serif;
}

/* Scoped light theme */
.light-theme {
  --dg-color-background: #ffffff;
  --dg-color-text: #13161b;
  --dg-color-box-background: #f5f5f5;
  --dg-color-default: #e8eaed;
}

<div className="light-theme">
  <Button text="Light mode" intent={Intent.Primary} />
</div>

Common semantic variables to override:

| Variable | Purpose | |----------|---------| | --dg-color-primary | Primary intent base color | | --dg-color-primary-hover | Primary hover state | | --dg-color-danger | Danger/error color | | --dg-color-success | Success color | | --dg-color-info | Info color | | --dg-color-secondary | Secondary intent | | --dg-color-background | App background | | --dg-color-text | Default text color | | --dg-color-box-background | Surface/card background | | --dg-border-radius | Global border radius | | --dg-font-family | Global font stack |

See dist/docs/colors.md for the full palette mapped to variable names.

2. className prop

Every component accepts className for targeted CSS overrides:

<Button text="Custom" className="my-button" />

.my-button {
  min-width: 200px;
}

Prefer documented CSS variables and className over targeting hashed CSS-module class names — those can change between releases.

3. SCSS source import (advanced)

Use this when you need build-time control over $theme or component token maps ($button-variant-*, $checkbox-*, etc.). Requires sass and Vite SCSS configuration.

3a. When to use SCSS vs CSS variables

| Need | Use | |------|-----| | Change brand colors, radius, font | CSS variables (section 1) — simpler | | Remap semantic intents at build time | SCSS $theme merge | | Override button/checkbox/switch variant maps | SCSS component maps | | Use get-color() / get-theme-value() in your *.module.scss | Full SCSS setup + Vite additionalData |

3b. File structure after install

src/styles/
├── variables.scss      # App palette, fonts, breakpoints
├── dango-tokens.scss   # Token pipeline + $theme merge
├── dango.scss          # tokens → root → reboot
├── index.scss          # Entry: dango.css + dango chain
└── components/         # Optional per-component map overrides
    └── button.scss

Copy from dist/docs/vite-starter/.

3c. Token pipeline (dango-tokens.scss)

Import order is fixed — do not reorder:

@forward './variables';

// Step 1: Dango base tokens
@import '@axieinfinity/dango/dist/styles/scss/common';
@import '@axieinfinity/dango/dist/styles/scss/colors/index';
@import '@axieinfinity/dango/dist/styles/scss/theme';

// Step 2: Override before utilities — all variables use !default
$color-kam-5: #0066ff;
$border-radius: 6px;

$extend: (
  'color-primary': $color-kam-5,
  'color-primary-hover': #0052cc,
  'font-family': 'Inter', sans-serif,
);
$theme: map-merge($theme, $extend);

// Step 3: Utilities — provides get-theme-value(), get-color(), mixins
@import '@axieinfinity/dango/dist/styles/scss/utilities';

// Step 4 (optional): Component overrides — after utilities, before root
// @import './components/button';

3d. Generate variables and load component CSS

dango.scss:

@import './dango-tokens';
@import '@axieinfinity/dango/dist/styles/scss/root';
@import '@axieinfinity/dango/dist/styles/scss/reboot';

index.scss (import once in main.tsx):

@use '@axieinfinity/dango/dist/styles/css/dango.css';
@import './dango';

3e. Component map override example

src/styles/components/button.scss:

$button-variant-background: (
  'default': get-color('color-neutral-3'),
  'primary': #0066ff,
  'secondary': get-theme-value('color-secondary-gradient'),
);

$button-variant-hover: (
  'primary': #0052cc,
);

Import in dango-tokens.scss after utilities. Variable names match Dango source under dist/styles/scss/button/.

3f. Vite configuration

Prepend tokens to every *.module.scss so get-color() works without manual @use:

// vite.config.ts — see dist/docs/vite-starter/vite.config.snippet.ts
scss: {
  additionalData(source, filename) {
    // Skip dango-tokens.scss, dango.scss, index.scss (avoid circular imports)
    return `@use "${pathToDangoTokens}" as *;\n${source}`;
  },
  quietDeps: true,
  silenceDeprecations: ['import', 'global-builtin'],
}

3g. Common mistakes

| Mistake | Result | Fix | |---------|--------|-----| | Import bundle.css + SCSS root/reboot | Duplicate reset and :root vars | Use dango.css + SCSS chain only | | Import root before utilities | Undefined mixin errors | Follow order in 3c | | Component overrides before utilities | Maps ignored or errors | Import overrides after utilities | | Missing Vite skip list | Circular @use in entry files | Skip tokens/dango/index in additionalData | | Target hashed CSS-module classes | Breaks on Dango upgrade | Use --dg-* vars or .dango-* hooks |

See dist/docs/scss-integration.md for the full partials table and Sass API.

Shared API

Intent

enum Intent {
  Default = 'default',
  Primary = 'primary',
  Success = 'success',
  Info = 'info',
  Danger = 'danger',
  Secondary = 'secondary',
}

Size

enum Size {
  XSmall = 'x-small',
  Small = 'small',
  Default = 'default',
  Large = 'large',
}

ButtonVariant

enum ButtonVariant {
  Default = 'default',
  Outlined = 'outlined',
  Plain = 'plain',
}

Components

| Component | Key exports | |-----------|-------------| | Alert | Alert | | Badge | Badge | | Box | Box | | Breadcrumb | Breadcrumb, BreadcrumbItem, BreadcrumbSeparator | | Button | Button, IconButton | | Calendar | DatePicker, RangePicker — requires dayjs (installed with @axieinfinity/dango) | | Checkbox | Checkbox | | Collapse | Collapse | | Dialog | Dialog | | Drawer | Drawer | | Dropdown | Dropdown, DropdownMenu | | Input | Input, Search, TextArea | | Loader | Loader.Circle, Loader.Dot, Loader.Linear, Loader.ProgressCircle, Loader.Skeleton | | Menu | Menu, MenuItem, MenuDivider | | Pagination | Pagination | | Popover | Popover | | Progress | Progress.ProgressBar, Progress.ProgressCircle | | Radio | Radio, RadioGroup | | Slider | Slider | | Space | Space | | Stepper | Stepper, Step, StepIndicator* | | Switch | Switch | | Table | Table | | Tabs | Tabs | | Tag | Tag, SpecialTag | | Toast | useToast | | Tooltip | Tooltip | | Typography | Typography.Heading, Typography.Text |

License

MIT