React App Shell Bootstrap

Build an entry point that mounts a branded application shell using the modern concurrent root API of the UI library.

Capabilities

Mounts into DOM root

• Calling initAppShell with brand and tagline renders them inside the container with id "root" by default. The container is cleared before rendering. @test
• When a custom containerId is provided, the shell renders inside that element instead of "root". @test

App shell layout

• The rendered shell includes a header with brand, tagline, and an optional status badge when status is set to "beta" or "stable"; the badge is omitted otherwise. @test
• A navigation region lists the provided links in order as anchors with href attributes, and highlights the active link when active is true. @test

Action wiring

• The primary action button labeled from config triggers the provided callback when clicked and is disabled when disablePrimary is true. @test

Implementation

@generates

API

export interface NavLink {
  label: string;
  href: string;
  active?: boolean;
}

export interface AppShellConfig {
  containerId?: string;
  brand: string;
  tagline: string;
  status?: "beta" | "stable";
  links: NavLink[];
  primaryAction: {
    label: string;
    onClick: () => void;
    disablePrimary?: boolean;
  };
}

export function initAppShell(config: AppShellConfig): void;

Dependencies { .dependencies }

react { .dependency }

UI library for components and strict mode wrapper.

@satisfied-by

react-dom { .dependency }

DOM renderer that provides the concurrent root mounting API used to attach the app.

@satisfied-by