@dravensoft/arena-react

Arena is Dravensoft's design system. This package is its React layer: 73 components whose every value traces to a design token, with one stylesheet to import and no theme provider to wrap your tree in.

This package ships the components and not the language

See it before you install it: https://arena.dravensoft.org has the guidelines, a kitchen sink and a playground for every component. Source and full documentation: https://github.com/dravensoft-dev/arena

An agent building with Arena needs the language, and this tarball does not carry it. Not the rules every component answers to, not the usage document of each one, and not the style kernel that makes Arena look like a project's own product. What is in here is the code, and what markup of your own is held to: contracts/behaviour/, one file per accessibility pattern, and arena.tokens.json.

Reach the language before you ask for the first screen, by any one of these routes. Install @dravensoft/arena-mcp and configure it in your editor. The server carries the whole corpus, both halves of it, and serves the one your project installed a document at a time. The server says so when its version and this package's differ. Install the Claude Code plugin. Clone the repository and point your agent at skills/design/SKILL.md. Or work over HTTP, starting at https://arena.dravensoft.org/llms.txt.

Without one of them an agent guesses. arena audit reads your own sources for the rules a source text can show, and nothing reports the rest. The screen renders, and the rules it breaks are the ones only a reader notices.

The package is the code. The server, the plugin and the repository are the language.

Install

| Question | Answer | | --- | --- | | How do I install the package? | install.md → How do I install a package? | | What comes down with the package? | install.md → What comes down with the React package? | | What is an icon in Arena, and what do I install for it? | install.md → What is an icon in Arena? | | How do I import the stylesheets? | install.md → How do I import the stylesheets in React? | | Why does TypeScript report TS2307 on a stylesheet import? | install.md → Why does TypeScript report TS2307 on a stylesheet import in React? | | How do I pass a logo to ArenaAppLogo? | install.md → How do I pass a logo to ArenaAppLogo in React? | | What is a component, its class and its stylesheet called? | install.md → One name everywhere in React | | Why do class names and stylesheet names carry the component name? | install.md | | Which bundlers, runtimes and framework versions does it work with? | stack.md → The repertoire |

Declare your skin

| Question | Answer | | --- | --- | | How do I declare a palette, a font or a style plugin in arena.config.json, and which colour keys does a palette take? | config.md → Declare your skin | | How do I make Arena look like my product and not like Dravensoft? | style-kernel.md → Making Arena look like your product | | Where does the appearance come from, and what does a palette leave undecided? | style-kernel.md → Where the appearance actually comes from |

Build to production

| Question | Answer | | --- | --- | | How do I send only the component stylesheets my screens render? | config.md → Build to production | | What counts as drawn when I send only some component stylesheets? | config.md → What counts as drawn in React? | | What can the component stylesheet scan not send? | config.md → What can a scan not send? | | What does the arena command write? | cli.md → What does arena build write? | | Which commands and flags does arena take? | cli.md → Which commands are there? | | What does --strict hold? | cli.md → What does --strict hold? | | What does an exit code of arena mean? | cli.md → What does an exit code mean? | | How do I run arena build before every build? | cli.md → How do I wire it into a React build? | | What does arena audit read in my sources? | cli.md → What does the audit read? |

The page and the layout

| Question | Answer | | --- | --- | | Where does my spacing and sizing go? | style.md | | How do I size and space a component in React? | style.md | | What do I do when I wrap a component to size it? | style.md | | How wide is the page column, and how much air goes between components? | style.md → The column the page sits in | | What do I paint the page and my own markup with? | page.md → Which colour your own markup takes | | Why is my page white under a dark palette? | page.md → The floor, and Arena does not paint it | | Which class makes a component wider, smaller, filled or quieter? | VOCABULARY.md → The vocabulary | | Which screens is Arena for, and which markup is mine? | media-register.md → When the markup is yours |

At runtime: theme, locale and confirmations

| Question | Answer | | --- | --- | | How do I switch palettes? | theme.md → How do I switch palettes in React? | | How do I avoid a flash of the wrong palette on first paint? | theme.md → How do I avoid a flash on first paint? | | Why does the first-paint snippet read the media query? | theme.md → Why does the snippet read the media query? | | Which words does Arena draw itself? | locale.md | | In what order does a word resolve? | locale.md | | How do I set the locale? | locale.md → How do I set the locale in React? | | How do I raise a confirmation from code? | exports.md → How do I raise a confirmation from code in React? |

What else the package ships

| Question | Answer | | --- | --- | | Does every export carry a compatibility promise? | exports.md | | What does the package export besides components? | exports.md → What does the React package export besides components? | | Does the package write my head? | seo.md → Which layer writes the head, and why is it a separate entry point? | | Which stylesheets does the package ship? | stylesheets.md → The stylesheets each package ships | | In which order do the token layer and the component sheets import? | stylesheets.md → Which order do the token layer and the component sheets import in? | | What does Arena ship at all, and how much of it do I take? | surface.md → Everything Arena ships | | Where does Arena stop shipping, and what is left to me? | surface.md → Where Arena stops |

Building with an agent

| Question | Answer | | --- | --- | | How does an agent start on Arena? | SKILL.md → Which job is this? | | Where does each question go? | SKILL.md → Where each question is answered | | What does an agent decide before the first screen? | cold-start.md → Before the first screen | | What may I build this with, and how sure is Arena about each answer? | stack.md → What you may choose | | What does each layer require? | stack.md → What each layer requires | | How do I serve Arena to my editor? | mcp.md → Serving Arena to your editor over MCP |

Versions and licence

| Question | Answer | | --- | --- | | Why might a package version differ from the Arena version? | versioning.md → Why might a package's latest version not match Arena's latest version? | | Which licence does Arena carry? | versioning.md |