Arena brand components, the React layer

August 16, 2026 · View on GitHub

Every brand component this layer ships, under the names it binds them to. This page is an index, not a manual. How to write one is its own prompt, linked in the last column.

The rules every component below answers to are stated in ../../../../skills/design/SKILL.md before any component here, and nothing on this page restates them.

Import from the package root, never from a path inside it:

import { ArenaButton, ArenaTag } from '@dravensoft/arena-react';

A member is a prop. The main slot is children, a named slot is a prop taking a node, and an event is an on-prefixed handler. An icon is a Phosphor class-name string, never an element.

  • Every other category this layer ships: ../../INDEX.md.
  • Installing the package, declaring your skin, and what it exports besides components: ../../PACKAGE.md.
  • Takes is the members the component's API contract declares, in contract order, under this layer's own names. A member marked * is required; the prompt gives its type and its default.
  • A member whose type is an object or an enum takes one this package exports. The prompt names the type and says what it is for; the fields it holds are in the type declaration itself, which import type { … } from '@dravensoft/arena-react' brings in. That field list is in neither the prompt nor the contract, so the type is where you read it.
ComponentWhat it isTakesUsage
ArenaAppLogoBrand lock-up: a mark beside or above a product name.mark* name* dim size orientationArenaAppLogo.prompt.md

1 brand components in this layer.