The padded column that holds a page's header and sections. It gives every page the same edges and the same space between blocks.
Find, open, and organize workspace files. Sharing a file never changes who owns it.
import { PageContent } from "@tulipfarm/sprout/page-content";
import { PageHeader } from "@tulipfarm/sprout/page-header";
<div className="min-h-0 flex-1 overflow-auto">
<PageContent>
<PageHeader title="Usage" description="Credits, and where they go." />
<WorkspaceCredits />
</PageContent>
</div>PageContent fills the width and never forces its parent wider (min-width: 0). Padding is 16px on small screens and 24px left and right, 20px top and bottom from 640px. Direct children sit 16px apart. Hidden children, such as a hidden file input, and children that render nothing add no space.
It does not scroll. Put it in your own scroll region, usually a min-h-0 flex-1 overflow-auto column under the app header. It takes every div prop, includingref and className.
// Room under the list for a floating composer
<div role="region" aria-label="Chat list" className="min-h-0 flex-1 overflow-y-auto pb-24">
<PageContent>…</PageContent>
</div>
// Keep the scroller in a ref to save and restore its position
<div ref={scroller} data-scroll-restoration-id="files-library" className="min-h-0 flex-1 overflow-y-auto">
<PageContent>…</PageContent>
</div>
// A rail that scrolls edge to edge on small screens
<nav className="-mx-[var(--sprout-page-content-inline)] px-[var(--sprout-page-content-inline)] overflow-x-auto">…</nav>The current padding is on --sprout-page-content-inline and --sprout-page-content-block; the gap is --sprout-page-content-gap. Children can read these to bleed to the edge. Spacing has zero specificity, so a child's own margin class wins.
Only you can see these chats. Most recently active first.
Find, open, and organize workspace files. Sharing a file never changes who owns it.
Every Monday at 9:00 · 4 steps · Last run succeeded
Connect the apps your agents work in.
This is the real shared page content region.
Nested content inherits the standard page spacing.
PageContent is a plain div with no role and no motion. Give the scroll region a name with role="region" and aria-label when it is a landmark, and let the keyboard reach it with tabIndex={0} when it has no focusable content. The page's h1 comes from PageHeader. Routing and data in these examples are sample code.