App shell

Layout is the frame around protected Hyperflow pages. It places the sidebar, top bar, active route, and background-task drawer; HyperflowApp uses it by default.

Usage

Use HyperflowApp without a custom layout when the default application frame is suitable.

import { HyperflowApp } from '@hyperflow/chakra-ui'

export function App() {
  return (
    <HyperflowApp
      config={{ apiUrl: '/api/v1', wsUrl: '/api/v1/ws' }}
    />
  )
}

The default shell includes the session sidebar, top bar, routed page area, and background-task drawer.

Examples

Replace the sidebar

Pass a custom sidebar to Layout when the default frame is right for your app but its navigation needs a different presentation.

import { HyperflowApp, Layout } from '@hyperflow/chakra-ui'

function ProjectSidebar() {
  return <aside>{/* Application navigation */}</aside>
}

function AppLayout({ children }: { children: React.ReactNode }) {
  return <Layout sidebarComponent={ProjectSidebar}>{children}</Layout>
}

export function App() {
  return (
    <HyperflowApp
      config={{ apiUrl: '/api/v1', wsUrl: '/api/v1/ws' }}
      layoutComponent={AppLayout}
    />
  )
}

Replace another frame region

topbarComponent and drawerComponent use the same pattern. Replace one of these regions when it needs different visual content while the overall layout remains the same.

import { HyperflowApp, Layout } from '@hyperflow/chakra-ui'

function ProjectTopBar() {
  return <header>{/* Page actions */}</header>
}

function AppLayout({ children }: { children: React.ReactNode }) {
  return <Layout topbarComponent={ProjectTopBar}>{children}</Layout>
}

export function App() {
  return (
    <HyperflowApp
      config={{ apiUrl: '/api/v1', wsUrl: '/api/v1/ws' }}
      layoutComponent={AppLayout}
    />
  )
}

Guide

Keep the route outlet in place

children is the active Hyperflow or application page supplied by the router. Keep it inside Layout; do not add a second router or HyperflowProvider around the frame.

Replace the smallest region

Use sidebarComponent, topbarComponent, or drawerComponent before replacing the entire layout. This preserves the default responsive behavior and background-task placement.

Add pages outside the frame

Use routes and navItems on HyperflowApp to add application pages and navigation. A route with the same path as a default page replaces it, and supplied routes retain their array order. See Build a Chakra application for the complete pattern.

Props

For the complete LayoutProps type, see the @hyperflow/chakra-ui reference.

Related components

• SessionSidebar and BaseSidebar
• SessionTopBar and BaseTopBar
• SessionBackgroundTasksDrawer and BaseDrawer

Use Component overrides for the supported replacement pattern.