Application Composer

Start from the compact AdminApp baseline, then move branded chrome and compose real Sheen components. Output is copyable TSX, not a runtime page schema.

Starter ready. Select a block or add a component.

AdminApp preset

Chrome

Navigation

Actions

Theme

Accent

Mode

Density

Radius

Motion

Direction

Locale

Viewport

Place navigation, account, and app chrome

Product placement

Workspace placement

Primary navigation placement

Secondary navigation placement

Current view placement

Command trigger placement

Global search placement

Primary actions placement

Utility actions placement

Notifications placement

Help placement

Account menu placement

Preview canvas

Resize the frame, use the viewport presets, or drag a palette item to a semantic region.

Width

Height

Copyable output

The JSON schema is private and unstable. Generated TSX uses public Sheen imports and deterministic fixtures.

TSX output

northstar-admin-starter.tsxGenerated Composer TSX

1import { ActivityTimeline, Button, Card, Grid, Heading, Input, SearchInput, Stack, Text, ThemeProvider } from "@gemologic/sheen";
2import type { ActivityTimelineItem } from "@gemologic/sheen";
3import { defineSeries } from "@gemologic/sheen-charts/core";
4import type { ChartData } from "@gemologic/sheen-charts/core";
5import { TimeSeries } from "@gemologic/sheen-charts/time-series";
6import { PageHeader, StatusBar } from "@gemologic/sheen-patterns";
7import { AdminApp } from "@gemologic/sheen-patterns/admin";
8import type { AdminPlacementOverride } from "@gemologic/sheen-patterns/admin";
9import { DataTable, QueryBuilder, defineColumns } from "@gemologic/sheen-table";
10import type { FilterNode, QueryBuilderColumn } from "@gemologic/sheen-table/core";
11import { createSignal } from "solid-js";
12
13export interface GeneratedRecord { readonly id: string; readonly account: string; readonly owner: string; readonly status: "Active" | "Review" | "Paused"; readonly amount: number; }
14
15const columns = defineColumns<GeneratedRecord>([
16  { id: "account", header: "Account", accessor: row => row.account, search: true, filter: { type: "text" }, sort: "text", width: "fill" },
17  { id: "owner", header: "Owner", accessor: row => row.owner, search: true, filter: { type: "text" }, sort: "text", width: 180 },
18  { id: "status", header: "Status", accessor: row => row.status, filter: { type: "enum", options: ["Active", "Review", "Paused"], faceted: true }, sort: "text", width: 120 },
19  { id: "amount", header: "Amount", accessor: row => row.amount, filter: { type: "number" }, sort: "number", numeric: true, width: 140 },
20]);
21
22const queryColumns = [
23  { id: "account", label: "Account", type: "text" },
24  { id: "owner", label: "Owner", type: "text" },
25  { id: "status", label: "Status", type: "enum", options: ["Active", "Review", "Paused"] },
26  { id: "amount", label: "Amount", type: "number" },
27] satisfies readonly QueryBuilderColumn[];
28
29const initialQuery: FilterNode = { kind: "and", children: [
30  { kind: "enum", column: "status", operator: "in", values: ["Active", "Review", "Paused"] },
31] };
32
33const series = defineSeries([
34  { key: "p50", label: "p50", color: "chart-1" },
35  { key: "p99", label: "p99", color: "chart-3", encoding: "dashed" },
36]);
37
38const records: readonly GeneratedRecord[] = [
39  {
40    "id": "record-0001",
41    "account": "Aperture 001",
42    "owner": "Katherine Thompson",
43    "status": "Paused",
44    "amount": 66135.25
45  },
46  {
47    "id": "record-0002",
48    "account": "Beacon 002",
49    "owner": "Grace Lovelace",
50    "status": "Active",
51    "amount": 75639.03
52  },
53  {
54    "id": "record-0003",
55    "account": "Cinder 003",
56    "owner": "Katherine Thompson",
57    "status": "Active",
58    "amount": 76422.87
59  },
60  {
61    "id": "record-0004",
62    "account": "Drift 004",
63    "owner": "Margaret Dijkstra",
64    "status": "Active",
65    "amount": 65692.84
66  },
67  {
68    "id": "record-0005",
69    "account": "Evergreen 005",
70    "owner": "Grace Hamilton",
71    "status": "Active",
72    "amount": 39828.95
73  },
74  {
75    "id": "record-0006",
76    "account": "Fable 006",
77    "owner": "Grace Hamilton",
78    "status": "Review",
79    "amount": 20680.69
80  },
81  {
82    "id": "record-0007",
83    "account": "Granite 007",
84    "owner": "Ada Torvalds",
85    "status": "Active",
86    "amount": 24946.58
87  },
88  {
89    "id": "record-0008",
90    "account": "Harbor 008",
91    "owner": "Margaret Dijkstra",
92    "status": "Active",
93    "amount": 15768.08
94  },
95  {
96    "id": "record-0009",
97    "account": "Aperture 009",
98    "owner": "Radia Perlman",
99    "status": "Active",
100    "amount": 15422.77
101  },
102  {
103    "id": "record-0010",
104    "account": "Beacon 010",
105    "owner": "Grace Lovelace",
106    "status": "Active",
107    "amount": 67416.74
108  },
109  {
110    "id": "record-0011",
111    "account": "Cinder 011",
112    "owner": "Grace Dijkstra",
113    "status": "Review",
114    "amount": 60648.54
115  },
116  {
117    "id": "record-0012",
118    "account": "Drift 012",
119    "owner": "Radia Perlman",
120    "status": "Paused",
121    "amount": 77649.89
122  },
123  {
124    "id": "record-0013",
125    "account": "Evergreen 013",
126    "owner": "Grace Perlman",
127    "status": "Active",
128    "amount": 50811.89
129  },
130  {
131    "id": "record-0014",
132    "account": "Fable 014",
133    "owner": "Edsger Torvalds",
134    "status": "Active",
135    "amount": 17623.59
136  },
137  {
138    "id": "record-0015",
139    "account": "Granite 015",
140    "owner": "Grace Lovelace",
141    "status": "Active",
142    "amount": 37415.62
143  },
144  {
145    "id": "record-0016",
146    "account": "Harbor 016",
147    "owner": "Grace Hamilton",
148    "status": "Review",
149    "amount": 78604.25
150  },
151  {
152    "id": "record-0017",
153    "account": "Aperture 017",
154    "owner": "Ada Torvalds",
155    "status": "Active",
156    "amount": 71626.27
157  },
158  {
159    "id": "record-0018",
160    "account": "Beacon 018",
161    "owner": "Grace Lovelace",
162    "status": "Active",
163    "amount": 84664.2
164  },
165  {
166    "id": "record-0019",
167    "account": "Cinder 019",
168    "owner": "Ada Torvalds",
169    "status": "Active",
170    "amount": 64363.83
171  },
172  {
173    "id": "record-0020",
174    "account": "Drift 020",
175    "owner": "Margaret Dijkstra",
176    "status": "Active",
177    "amount": 29903.19
178  },
179  {
180    "id": "record-0021",
181    "account": "Evergreen 021",
182    "owner": "Grace Dijkstra",
183    "status": "Review",
184    "amount": 86528.07
185  },
186  {
187    "id": "record-0022",
188    "account": "Fable 022",
189    "owner": "Radia Perlman",
190    "status": "Active",
191    "amount": 8746.32
192  },
193  {
194    "id": "record-0023",
195    "account": "Granite 023",
196    "owner": "Margaret Hopper",
197    "status": "Paused",
198    "amount": 36713.12
199  },
200  {
201    "id": "record-0024",
202    "account": "Harbor 024",
203    "owner": "Edsger Torvalds",
204    "status": "Active",
205    "amount": 86492.06
206  }
207];
208const activity: readonly ActivityTimelineItem[] = [
209  {
210    "id": "requested",
211    "title": "Change requested",
212    "description": "The release candidate entered review.",
213    "actor": "Radia Torvalds",
214    "timestamp": "2026-09-09T10:00:00.000Z",
215    "timeLabel": "10:00 AM",
216    "state": "completed"
217  },
218  {
219    "id": "approved",
220    "title": "Policy approved",
221    "description": "Automated and operator gates accepted the change.",
222    "actor": "Grace Dijkstra",
223    "timestamp": "2026-09-09T11:00:00.000Z",
224    "timeLabel": "11:00 AM",
225    "state": "completed"
226  },
227  {
228    "id": "deploying",
229    "title": "Deployment running",
230    "description": "Three regions are receiving revision 1842.",
231    "actor": "Ada Torvalds",
232    "timestamp": "2026-09-09T12:00:00.000Z",
233    "timeLabel": "12:00 PM",
234    "state": "current"
235  },
236  {
237    "id": "verify",
238    "title": "Verify production",
239    "description": "Confirm service health and error budgets.",
240    "state": "upcoming"
241  }
242];
243const chartData: ChartData = {
244  t: new Float64Array([1788955200000, 1788955260000, 1788955320000, 1788955380000, 1788955440000, 1788955500000, 1788955560000, 1788955620000, 1788955680000, 1788955740000, 1788955800000, 1788955860000, 1788955920000, 1788955980000, 1788956040000, 1788956100000, 1788956160000, 1788956220000, 1788956280000, 1788956340000, 1788956400000, 1788956460000, 1788956520000, 1788956580000, 1788956640000, 1788956700000, 1788956760000, 1788956820000, 1788956880000, 1788956940000, 1788957000000, 1788957060000, 1788957120000, 1788957180000, 1788957240000, 1788957300000, 1788957360000, 1788957420000, 1788957480000, 1788957540000, 1788957600000, 1788957660000, 1788957720000, 1788957780000, 1788957840000, 1788957900000, 1788957960000, 1788958020000]),
245  p50: new Float64Array([19.346, 20.625, 19.728, 21.066, 20.916, 22.814, 22.34, 22.938, 22.791, 22.339, 23.478, 21.883, 20.974, 20.408, 20.979, 19.03, 19.213, 17.285, 18.025, 17.219, 16.571, 16.156, 14.804, 15.069, 15.947, 14.432, 15.433, 15.143, 16.468, 18.118, 17.683, 19.475, 18.704, 20.81, 21.346, 21.533, 23.069, 22.509, 22.041, 22.244, 23.796, 22.222, 21.825, 22.11, 21.563, 21.443, 20.012, 19.218]),
246  p99: new Float64Array([48.591, 49.452, 50.379, 49.82, 53.645, 54.723, 53.217, 53.9, 54.248, 54.816, 56.716, 58.41, 57.791, 55.083, 55.767, 53.762, 55.054, 53.85, 52.381, 50.249, 51.945, 51.054, 48.842, 46.916, 44.63, 43.902, 45.072, 43.264, 39.736, Number.NaN, 40.641, 39.314, 37.988, 39.442, 40.052, 39.837, 38.791, 39.553, 41.201, 43.032, 43.64, 45.355, 43.56, 47.04, 49.555, 47.386, 52.111, 53.449]),
247};
248
249const placements = [
250  { zone: "current-view", target: "topbar-start" },
251  { zone: "command-trigger", target: "topbar-center" },
252  { zone: "global-search", target: "topbar-center" },
253  { zone: "primary-actions", target: "topbar-end" },
254  { zone: "utility-actions", target: "topbar-end" },
255  { zone: "notifications", target: "topbar-end" },
256  { zone: "help", target: "topbar-end" },
257  { zone: "product", target: "sidebar-header" },
258  { zone: "workspace", target: "sidebar-header" },
259  { zone: "primary-navigation", target: "sidebar-navigation" },
260  { zone: "secondary-navigation", target: "sidebar-navigation" },
261  { zone: "account", target: "sidebar-footer" },
262] satisfies readonly AdminPlacementOverride[];
263
264export default function GeneratedAdminApp() {
265  const [workspace, setWorkspace] = createSignal("production");
266  const [detailsOpen, setDetailsOpen] = createSignal(true);
267  const [queryFilter, setQueryFilter] = createSignal<FilterNode>(initialQuery);
268  return (
269  <ThemeProvider>
270    <AdminApp
271          label="Northstar operations application"
272          pathname="/accounts"
273          preset="standard"
274          appearance={{"chrome":"layered","navigation":"subtle","actions":"quiet"}}
275          placements={placements}
276          product={{ name: "Northstar operations", href: "/" }}
277          workspace={{ label: "Workspace", currentId: workspace(), items: [{ id: "production", label: "Production" }, { id: "staging", label: "Staging" }], onChange: setWorkspace }}
278          primaryNavigation={{ id: "primary", label: "Primary navigation", items: [{ kind: "link", id: "overview", label: "Overview", href: "/" }, { kind: "link", id: "accounts", label: "Accounts", href: "/accounts", match: "prefix" }] }}
279          currentView={<strong>Accounts</strong>}
280          globalSearch={<SearchInput label="Search application" />}
281          actionGroups={[{ id: "create", label: "Create", role: "primary", items: [{ kind: "action", id: "new", label: "New account", onSelect: () => setDetailsOpen(true) }] }]}
282          notifications={{ items: [{ kind: "link", id: "deployed", title: "Deploy completed", href: "/", timeLabel: "4 minutes ago" }] }}
283          account={{ id: "ada", name: "Ada Lovelace", email: "ada@northstar.example.test", items: [{ kind: "action", id: "profile", label: "Profile settings", onSelect: () => undefined }] }}
284          commandPalette={{ sources: [{ kind: "static", id: "application", commands: [{ id: "accounts", label: "Open accounts", group: "Navigation", run: () => undefined }] }] }}
285          details={{ id: "details", title: "Account details", open: detailsOpen(), onOpenChange: setDetailsOpen, content: <>
286            <Card bordered={true} padding={"lg"} variant={"subtle"}>
287              <Heading level={2} size={"h3"}>{"Account details"}</Heading>
288              <Text numeric={false} size={"body"} tone={"muted"}>{"Select a record to inspect ownership, status, and recent changes."}</Text>
289            </Card>
290          </> }}
291          statusBar={<StatusBar connection="connected" tasks={0} counts={[{ label: "Records", value: records.length }]}><>
292            <Text numeric={true} size={"caption"} tone={"muted"}>{"96 records · revision 1842"}</Text>
293          </></StatusBar>}
294        >
295          <Stack gap="lg">
296          <PageHeader headingLevel={1} title={"Accounts"} actions={<Button>Export records</Button>} />
297          <Stack gap={"sm"}>
298            <Input label={"Search accounts"} placeholder={"Name, owner, or status"} />
299            <Button size={"sm"} tone={"accent"} variant={"solid"} onClick={() => setDetailsOpen(true)}>{"Create account"}</Button>
300          </Stack>
301          <Grid columns={2} gap={"lg"}>
302            <Card bordered={true} padding={"lg"} variant={"raised"}>
303              <Heading level={2} size={"h3"}>{"API latency"}</Heading>
304              <TimeSeries height={220} label={"API latency"} summary={"Median latency is steady; one p99 sample is missing."} tooltip={true} xLabel={"Time"} series={series} data={chartData} x={{ type: "time", tz: "UTC" }} y={{ format: "duration" }} legend={"inline"} />
305            </Card>
306            <Card bordered={true} padding={"lg"} variant={"raised"}>
307              <Heading level={2} size={"h3"}>{"Recent activity"}</Heading>
308              <ActivityTimeline density={"compact"} label={"Deployment activity"} items={activity} />
309            </Card>
310            <QueryBuilder columns={queryColumns} value={queryFilter()} onChange={setQueryFilter} disabled={false} label={"Account query"} />
311            <DataTable data={records} columns={columns} getRowId={row => row.id} caption={"Northstar accounts"} variant="integrated" density="compact" pagination={{ pageIndex: 0, pageSize: 12 }} filter={queryFilter()} onAcceptedStateChange={state => setQueryFilter(state.filter)} search={{}} filterBar columnControls export={{ filename: "application-records" }} initialViewportHeight={320} mobileLayout={{ pageSize: 12, titleColumn: "account" }} />
312          </Grid>
313          </Stack>
314        </AdminApp>
315  </ThemeProvider>
316  );
317}
318

Import or inspect private Composer JSON

Composer JSON

{
  "schemaVersion": 1,
  "id": "northstar-admin-starter",
  "title": "Northstar operations",
  "preset": "standard",
  "appearance": {
    "chrome": "layered",
    "navigation": "subtle",
    "actions": "quiet"
  },
  "regions": [
    {
      "id": "topbar",
      "nodes": [
        {
          "type": "placement",
          "id": "placement-current-view",
          "zone": "current-view",
          "target": "topbar-start"
        },
        {
          "type": "placement",
          "id": "placement-command-trigger",
          "zone": "command-trigger",
          "target": "topbar-center"
        },
        {
          "type": "placement",
          "id": "placement-global-search",
          "zone": "global-search",
          "target": "topbar-center"
        },
        {
          "type": "placement",
          "id": "placement-primary-actions",
          "zone": "primary-actions",
          "target": "topbar-end"
        },
        {
          "type": "placement",
          "id": "placement-utility-actions",
          "zone": "utility-actions",
          "target": "topbar-end"
        },
        {
          "type": "placement",
          "id": "placement-notifications",
          "zone": "notifications",
          "target": "topbar-end"
        },
        {
          "type": "placement",
          "id": "placement-help",
          "zone": "help",
          "target": "topbar-end"
        }
      ]
    },
    {
      "id": "sidebar",
      "nodes": [
        {
          "type": "placement",
          "id": "placement-product",
          "zone": "product",
          "target": "sidebar-header"
        },
        {
          "type": "placement",
          "id": "placement-workspace",
          "zone": "workspace",
          "target": "sidebar-header"
        },
        {
          "type": "placement",
          "id": "placement-primary-navigation",
          "zone": "primary-navigation",
          "target": "sidebar-navigation"
        },
        {
          "type": "placement",
          "id": "placement-secondary-navigation",
          "zone": "secondary-navigation",
          "target": "sidebar-navigation"
        },
        {
          "type": "placement",
          "id": "placement-account",
          "zone": "account",
          "target": "sidebar-footer"
        }
      ]
    },
    {
      "id": "page-header",
      "nodes": [
        {
          "type": "component",
          "id": "page-header",
          "component": "PageHeader",
          "props": {
            "headingLevel": 1,
            "title": "Accounts"
          },
          "fixture": "application-heading",
          "children": []
        }
      ]
    },
    {
      "id": "toolbar",
      "nodes": [
        {
          "type": "component",
          "id": "toolbar",
          "component": "Stack",
          "props": {
            "gap": "sm"
          },
          "children": [
            {
              "type": "component",
              "id": "search",
              "component": "Input",
              "props": {
                "label": "Search accounts",
                "placeholder": "Name, owner, or status"
              },
              "fixture": "workspace-name",
              "children": []
            },
            {
              "type": "component",
              "id": "create",
              "component": "Button",
              "props": {
                "children": "Create account",
                "size": "sm",
                "tone": "accent",
                "variant": "solid"
              },
              "fixture": "primary-action",
              "children": []
            }
          ]
        }
      ]
    },
    {
      "id": "main-grid",
      "nodes": [
        {
          "type": "component",
          "id": "dashboard-grid",
          "component": "Grid",
          "props": {
            "columns": 2,
            "gap": "lg"
          },
          "children": [
            {
              "type": "component",
              "id": "latency-card",
              "component": "Card",
              "props": {
                "bordered": true,
                "padding": "lg",
                "variant": "raised"
              },
              "children": [
                {
                  "type": "component",
                  "id": "latency-heading",
                  "component": "Heading",
                  "props": {
                    "children": "API latency",
                    "level": 2,
                    "size": "h3"
                  },
                  "fixture": "lorem-title",
                  "children": []
                },
                {
                  "type": "component",
                  "id": "latency-chart",
                  "component": "TimeSeries",
                  "props": {
                    "height": 220,
                    "label": "API latency",
                    "legend": "inline",
                    "summary": "Median latency is steady; one p99 sample is missing.",
                    "tooltip": true,
                    "xLabel": "Time"
                  },
                  "fixture": "latency-chart",
                  "children": []
                }
              ]
            },
            {
              "type": "component",
              "id": "activity-card",
              "component": "Card",
              "props": {
                "bordered": true,
                "padding": "lg",
                "variant": "raised"
              },
              "children": [
                {
                  "type": "component",
                  "id": "activity-heading",
                  "component": "Heading",
                  "props": {
                    "children": "Recent activity",
                    "level": 2,
                    "size": "h3"
                  },
                  "fixture": "lorem-title",
                  "children": []
                },
                {
                  "type": "component",
                  "id": "activity",
                  "component": "ActivityTimeline",
                  "props": {
                    "density": "compact",
                    "label": "Deployment activity",
                    "refreshing": false
                  },
                  "fixture": "activity",
                  "children": []
                }
              ]
            },
            {
              "type": "component",
              "id": "query",
              "component": "QueryBuilder",
              "props": {
                "disabled": false,
                "label": "Account query"
              },
              "fixture": "query-filter",
              "children": []
            },
            {
              "type": "component",
              "id": "records",
              "component": "DataTable",
              "props": {
                "caption": "Northstar accounts",
                "pagination": true
              },
              "fixture": "records",
              "children": []
            }
          ]
        }
      ]
    },
    {
      "id": "details-panel",
      "nodes": [
        {
          "type": "component",
          "id": "details-card",
          "component": "Card",
          "props": {
            "bordered": true,
            "padding": "lg",
            "variant": "subtle"
          },
          "children": [
            {
              "type": "component",
              "id": "details-heading",
              "component": "Heading",
              "props": {
                "children": "Account details",
                "level": 2,
                "size": "h3"
              },
              "fixture": "lorem-title",
              "children": []
            },
            {
              "type": "component",
              "id": "details-copy",
              "component": "Text",
              "props": {
                "children": "Select a record to inspect ownership, status, and recent changes.",
                "numeric": false,
                "size": "body",
                "tone": "muted"
              },
              "fixture": "lorem-body",
              "children": []
            }
          ]
        }
      ]
    },
    {
      "id": "status-bar",
      "nodes": [
        {
          "type": "component",
          "id": "status-copy",
          "component": "Text",
          "props": {
            "children": "96 records · revision 1842",
            "numeric": true,
            "size": "caption",
            "tone": "muted"
          },
          "children": []
        }
      ]
    },
    {
      "id": "overlays",
      "nodes": []
    }
  ]
}