affectUI › Screens › App screens

App Shell Workspace Inset

App Shell Inset with a resizable work area on the right – tools, browser and suggested sources next to the page, like Claude or Codex.

Part of affectUI Pro. Install: npx shadcn@latest add https://www.affectui.com/r/app-shell-workspace.json · Import from @/components/ui/app-shell-workspace

When to use

  • AI assistants and agent tools that keep a terminal, browser or sources next to the conversation
  • Editors and dashboards with a detail or preview pane beside the page

When not to use

  • When the page needs the full width – use App Shell Inset without the work area
  • Marketing pages – use a block or a plain layout

Usage

import { AppShellWorkspace } from "@/components/ui/app-shell-workspace";

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <AppShellWorkspace active="New chat" onNavigate={(label) => router.push(routes[label])} onOpen={(id) => openTool(id)}>
      <div className="ui-as-page">{children}</div>
    </AppShellWorkspace>
  );
}

Props

NameTypeDefaultDescription
childrenReactNodeThe page shown between the sidebar and the work area
toolsWorkspaceTool[]Terminal, Browser, NotesRows under Tools, each { id, label, icon, shortcut? }
sourcesWorkspaceSource[]Rows under Suggested, each { id, title, source, mark? }
onOpen(id: string) => voidA tool or a suggestion was clicked
panelReactNodeYour own content for the work area instead of tools and suggestions
panelTitlestring"Workspace"Heading of the work area
panelWidth{ default?: number; min?: number; max?: number }{ default: 360, min: 280, max: 560 }Work area width in px – drag its edge between min and max
sidebarWidth{ default?: number; min?: number; max?: number }{ default: 272, min: 220, max: 380 }Sidebar width in px, the same way
…AppShellPropsEverything App Shell takes: active, onNavigate, workspace, user, nav, projects, groups, setup, className

Accessibility

  • Both edges are separators you can focus: arrow keys resize (Shift for bigger steps), Home and End jump to the minimum and maximum, double-click resets
  • The work area is a labelled landmark; while it's folded away it's inert, and its icon in the top right brings it back

Responsive

  • Below 900px the work area becomes a drawer from the right, like the sidebar from the left; Escape or a tap beside it closes it
  • Dark mode built in, from the App Shell tokens

Requirements

  • React 19
  • @hugeicons/react
  • @hugeicons/core-free-icons
  • App Shell Inset (installed with it)

Guides