EA DESIGN SYSTEM

Esport Arena Design System

Arena Noir — et mørkt, premium design for esport og turneringsplattformer. Denne appen viser de gjenbrukbare komponentene fra @esportarena/react og det per-spill temasystemet.

Components

Button, StatusBadge og InfoTip med varianter og tilstander.

Cards

GlassCard, StatCard, SectionHeading og AccentButton.

Badges

StatusPill, RoleBadges og MembershipBadge.

Shared

CountryFlag, SocialLinksIconRow, SsoProviderIcon og GenericModal.

Games

Per-spill visuell identitet og hub-maler — bytt spill og se temaet endres.

Tokens

Farger, radier, skygger og typografi i Arena Noir-paletten.

How to use this design system

  1. 1Install the package — add @esportarena/react to your project via GitHub Packages and import the Tailwind preset from @esportarena/tailwind-preset.
  2. 2Browse this preview app — find the component you need in the nav above (Components, Cards, Badges, Games, etc.) and copy the import path and props.
  3. 3Import from the right entry point — server-safe components come from @esportarena/react; client-only components (TabBar, GenericModal) come from @esportarena/react/client.
  4. 4Need to change a component? — clone this repo, create a branch, edit the component in packages/react/src/, add a preview page to verify visually, then open a PR with a changeset (pnpm changeset).
  5. 5Merge → publish → bump — once merged, the Changesets bot opens a version PR. After that merges, the package publishes automatically and you can bump the version in the consuming app.