---
title: "@playstack/app-ui"
description: "Controlled application shells, navigation, collections, commands, Kanban and resizable layouts."
tags: ["package","ui","react","tables","kanban","layouts","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 */}

App UI sits above [Chakra themes](/docs/packages/ui/chakra) and below [Admin UI](/docs/packages/ui/admin-ui). It has no mandatory Next, auth, accounts, database, router, table-engine or drag-and-drop dependency.

| Composition                                | Current behavior                                                                                                                                 |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
| AppShell / Sidebar / Navbar                | Sidebar or top navigation, mobile inline disclosure, host routes and active links.                                                               |
| PageHeader / PageSection / ContentState    | Heading/actions, stacked or column settings, loading/empty/error/denied presentation.                                                            |
| AccountSwitcher / AccountPicker / UserMenu | Minimal native selection or searchable dialog with avatars/initials, badges, descriptions and create/manage actions; no token/session authority. |
| DataTable / collection controls            | Semantic rows, sort intent, eligible-page selection, search, filters, pagination and bulk actions.                                               |
| ColumnSettings / table views               | Controlled visibility, numeric widths and logical pinning. Pure preference helpers at `@playstack/app-ui/table-view`.                            |
| CommandPalette                             | Local or abortable async sources, keyboard selection, scoped cancellation and safe failures.                                                     |
| KanbanBoard                                | Controlled columns/cards and explicit destination controls; serialized moves, scope checks and cancellation.                                     |
| SplitView / ResizableSplitView             | Static panes or controlled pointer/keyboard sizing, RTL behavior, bounds and narrow-container stacking.                                          |

```tsx
'use client'
import { useState, type ReactNode } from 'react'
import { ResizableSplitView } from '@playstack/app-ui'

export function MasterDetail({ list, detail }: { list: ReactNode; detail: ReactNode }) {
  const [size, setSize] = useState(60)
  return <ResizableSplitView primaryLabel="Items" secondaryLabel="Details" primary={list} secondary={detail} value={size} onValueChange={setSize} />
}
```

Compose under PlaystackUIProvider or a compatible ChakraProvider. Interactive callbacks belong in Client Components; flat layout exports can accept serializable server content. Keep query state, routes, persistent preferences, mutation idempotency and server authorization in the host. Abort stops obsolete UI work, not a server transaction.

The table is not a full ARIA grid. Pointer Kanban reordering, virtualized/editable grids, tours, a collapsed desktop rail and modal mobile navigation remain open. Resizing preserves mounted panes; account/authority changes require deliberate host state reset.

The components render under Next and React 18 and 19, including server-side rendering. Pointer geometry, touch, screen-reader behavior and your product's authorization are yours to test in the real application.

{/* 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/app-ui@0.1.0-beta.1
```

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

{/* package-install:end */}

## Account selection and localization

AccountPicker accepts host-controlled `pending` and safe `error` state, skips disabled choices in keyboard navigation and restores trigger focus on close. The host supplies authorized accounts and performs switching; the component never grants membership or changes server authority.

Package-owned visible and accessible copy now consumes `@playstack/i18n-react`, including account search, tables, commands, boards and splitter instructions. `appUICatalog` at `@playstack/app-ui/messages` is data-only; `./locales/en.json` and the `app-ui.messages.en` artifact expose editable English source. Explicit component overrides win, and no-provider usage retains English defaults. Names, actions and application data remain host-owned. See [UI localization](/docs/frameworks/ui-localization).

{/* package-reference:start */}

## API entry points and requirements

Reference snapshot: `@playstack/app-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/app-ui/playstack.integration.json` | No TypeScript declaration (asset or metadata export). |
| `@playstack/app-ui` | `./dist/index.d.ts` |
| `@playstack/app-ui/table-view` | `./dist/table-view.d.ts` |
| `@playstack/app-ui/package.json` | No TypeScript declaration (asset or metadata export). |
| `@playstack/app-ui/messages` | `./dist/messages.d.ts` |
| `@playstack/app-ui/locales/en.json` | No TypeScript declaration (asset or metadata export). |
| `@playstack/app-ui/playstack.artifacts.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/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 */}