App Shell

AppShell is the outer layout, mirroring how Attio's window works: a resizable sidebar pane (drag its right edge) that collapses away (and a button brings it back), next to a main content pane. The sidebar pane clips rather than squishing, so its content never reflows while collapsing.

See it live in the Companies page example — drag the sidebar edge, and use the panel button in the sidebar header to collapse it.

Usage

The sidebar prop is a render function that receives a toggleCollapse callback — wire it to your sidebar's collapse control (e.g. Sidebar's onToggleCollapse). Make the sidebar fill its pane with width: 100%.

import { AppShell, Sidebar } from "crisp";

export function AppLayout() {
  return (
    <AppShell
      sidebar={(toggleCollapse) => (
        <Sidebar
          onToggleCollapse={toggleCollapse}
          style={{ width: "100%", height: "100%" }}
        />
      )}
    >
      <YourPageHeader />
      <YourContent />
    </AppShell>
  );
}

Props

Notes

• Clip, don't squish. Collapsing animates the pane width to 0 while the sidebar keeps its width inside, so it slides away cleanly instead of reflowing to nothing.
• Resize disables text selection and forces a col-resize cursor during the drag, and the width is remembered across a collapse/expand.