---
title: "@playstack/admin-ui"
description: "An initial account-admin shell and scoped member workflows composed from App UI."
tags: ["package","ui","admin","nextjs","members","pro"]
---

{/* package-access:start */}

> **Pro.** Covered by the Playstack Pro License. Registry access is required; check preview availability before installing. See [package access](/docs/packages#access-policy).

{/* package-access:end */}

Available exports are `AdminShell`, `MembersSection` and standalone `MembersTable`. This is an initial account-administration composition, not a complete admin app or global staff console.

AdminShell accepts explicit loading, denied, error or ready access, trusted navigation entries, a host link renderer and slots for branding, notices and account/user controls. Non-ready states do not mount private content. Server authorization still runs before returning private data.

MembersSection accepts token-free member views, including nullable email, allowed-role hints and removal hints. A ready response must match its account/authority scope key. Role/removal callbacks serialize, receive cancellation signals and ignore stale completion; the server must revalidate current authority. Member removal includes confirmation and safe failure handling.

{/* package-install:start */}

## Install

After confirming [preview access](/docs/packages#access-policy), install the package at your application's shared Playstack version:

```sh
npm install --save-exact @playstack/admin-ui@0.1.0-beta.1
```

Check the peer requirements below before choosing a runtime or provider.

{/* package-install:end */}

## Prebuilt and custom Next routes

Use an application-owned client shell in a Next layout. Put MembersSection on a members route and ordinary App UI/product components on custom routes. Next Link, active-route matching, data clients and the composition root remain in that application; the package does not install a second router or discover plugins.

The reference composition combines a members route, a read-only members view, custom publishing routes and localized routes under one shell, on Chakra 3 with React 18 or 19 and server-side rendering.

Global staff access, impersonation, audit browsing, billing panels and other prebuilt sections are not shipped yet; the host Next application owns those routes and the services behind them.

## Shared localization

Shell states, navigation labels, member controls and portal confirmation/error copy use the shared `@playstack/i18n-react` provider. Compose `adminUICatalog` from `@playstack/admin-ui/messages` with `appUICatalog` from `@playstack/app-ui/messages`; both namespaces are required.

`./locales/en.json` and `admin-ui.messages.en` provide English source artifacts. Existing message overrides retain precedence and English works without a provider. Account/member names, roles and custom navigation remain host-owned. See [UI localization](/docs/frameworks/ui-localization); translations never change authorization or mutation ordering.

{/* package-reference:start */}

## API entry points and requirements

Reference snapshot: `@playstack/admin-ui@0.1.0-beta.1`. Import only the entry point your runtime needs. Paths below are relative to the installed package; use **Go to Definition** in your editor to inspect exact parameters, return types and overloads. Do not import the declaration-file paths directly.

| Public entry point | Declaration file |
| --- | --- |
| `@playstack/admin-ui` | `./dist/index.d.ts` |
| `@playstack/admin-ui/package.json` | No TypeScript declaration (asset or metadata export). |
| `@playstack/admin-ui/messages` | `./dist/messages.d.ts` |
| `@playstack/admin-ui/locales/en.json` | No TypeScript declaration (asset or metadata export). |
| `@playstack/admin-ui/playstack.artifacts.json` | No TypeScript declaration (asset or metadata export). |
| `@playstack/admin-ui/playstack.integration.json` | No TypeScript declaration (asset or metadata export). |

Node.js engine requirement: `>=20`. This is not a claim that every entry point works in browsers or Workers.

### Peer dependencies

Keep existing framework versions that satisfy these ranges. Install optional peers only when using the corresponding adapter. The package manager resolves ordinary dependencies separately.

| Peer | Compatible range | When needed |
| --- | --- | --- |
| `@chakra-ui/react` | `^3.0.0` | Required by the package. |
| `@emotion/react` | `^11.0.0` | Required by the package. |
| `@playstack/chakra` | `0.1.0-beta.1` | Required by the package. |
| `react` | `^18.2.0 \|\| ^19.0.0` | Required by the package. |
| `react-dom` | `^18.2.0 \|\| ^19.0.0` | Required by the package. |
| `@playstack/app-ui` | `0.1.0-beta.1` | Required by the package. |
| `@playstack/i18n-react` | `0.1.0-beta.1` | Required by the package. |

For a complete first program, start with [Getting started](/docs/getting-started). For API lookup and partial-example conventions, see [Reading the reference](/docs/packages#reading-the-reference). Provider failures, lifecycle requirements and application responsibilities remain described in the guide above; types alone do not establish production safety.

{/* package-reference:end */}