@playstack/app-ui

App UI sits above Chakra themes and below Admin UI. It has no mandatory Next, auth, accounts, database, router, table-engine or drag-and-drop dependency.

'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.

Install

After confirming preview access, install the package at your application's shared Playstack version:

npm install --save-exact @playstack/app-ui@0.1.0-beta.1

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

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.

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.

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.

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