Shell in Womp's Design System.

Most apps have the same frame: a header, navigation on the left, the work in the middle, and details on the right. Each team builds this frame again, and the boxes are never the problem. The problem is the pattern: which panes are open, how each one behaves on a phone, and what it remembers between visits. Shell is the component in Womp's Design System that holds this pattern, so the app declares the regions that it has and puts its own content inside them.

import { Shell } from '@kushagradhawan/kookie-ui';export function App() {  return (    <Shell.Root>      <Shell.Header>{/* global navigation */}</Shell.Header>      <Shell.Sidebar defaultState="expanded" resizable paneId="nav">        <nav>Navigation</nav>      </Shell.Sidebar>      <Shell.Content>{/* the product */}</Shell.Content>    </Shell.Root>  );}

That example states almost nothing, but the sidebar already behaves correctly. Below 1024px it covers the content, and Escape closes it. Above 1024px it takes its own space. A person can drag it between 200 and 400px, and it loads its last width on the next visit. Every pane has defaults like these, so most apps set very few props.

A pattern like this cannot be a set of separate components, because it is the relation between them. In an app with many screens, each screen gets the same navigation, the same details panel and the same behavior on a small window, because no screen builds the frame itself. When the pattern must change, it changes in Shell, and every screen follows.

The reference is at womp-ui.kookie.design/docs/shell, and the source is on GitHub. Kookie UI has its own Shell, described in Shell in Kookie UI.