KQ-2107 · SUITE/ATRIUM

Suite Atrium

The home of a product suite, its apps as tiles with live summaries, rolling stats and sparklines, where choosing a tile grows it into the full app on springs.glide: one progress value opens a clip from the tile's box to the whole atrium while the app's interior rides the clip's corner, so the icon never moves and the window opens around it, and the sidebar unfolds from the tile's edge a beat behind with its rows arriving in cascade. Going home runs the same value back into the tile, re-measured in case pinning moved it, and focus returns to it; grow can instead zoom the app from the tile's centre or raise it as a sheet. Tiles are one roving group: arrows move by tile and by row, Enter opens, P pins and pinned apps glide to the front, and Cmd or Ctrl+Shift+H or Escape goes home.

KQ-2107 · SUITE/ATRIUM

Fieldline · Home

Good afternoon, Ines

Jump back in

Apps · 5

home · 5 apps · Survey pinned · 14 on shift

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/suite-atrium

Props

tileSize: number; default 180; The narrowest a tile column may be, in px: smaller fits more tiles to a row.
grow: "tile" | "zoom" | "sheet"; default "tile"; How a chosen tile becomes the app: grows from the tile, zooms from its centre, or rises as a sheet from its top edge.
accent: "cobalt" | "plum" | "mint" | "ink" | string; default "cobalt"; Interface accent: the section pill, the pinned glyph and the highlighted item. A name or any CSS colour.
apps: SuiteApp[]; default defaultSuiteApps; The suite's apps in home order: { id, name, icon, hue?, summary, stat?, series?, status?, lockedReason?, sections, items }. Pinned ones sort first.
recent: SuiteRecent[]; default defaultSuiteRecent; Recent items across the suite, newest first: { id, appId, itemId?, title }. Shown as chips at home and per app in its sidebar.
openApp / defaultOpenApp: string | null; default — / null; The open app id, controlled or initial; null is home.
onOpenApp: (appId: string) => void; default —; Fires from the tile, chip or key that opened an app.
onReturnHome: (fromAppId: string) => void; default —; Fires from the button or key that went home, with the app that was open.
pinned / defaultPinned: string[]; default — / ["survey"]; Pinned app ids, controlled or initial.
onPinApp: (appId: string, pinned: boolean, all: string[]) => void; default —; Fires when an app is pinned or unpinned, with the whole new list.
onOpenItem: (appId: string, itemId: string) => void; default —; An item inside an app, or a recent item, was chosen.
onRequestAccess: (appId: string) => void; default —; A locked app was pressed; its tile then says access was requested.
suite: string; default "Fieldline"; The suite's name in the header.
user: { name: string; initials?: string }; default { name: "Ines Duarte" }; Who is signed in: the greeting's name and the avatar.
greeting: string; default —; The home greeting. Defaults to good morning, afternoon or evening from now's UTC hour, with the first name.
now: number; default defaultSuiteNow; The moment the greeting reads, in ms, so server and browser agree.
status: "ready" | "loading" | "error"; default "ready"; Whether the suite's data has arrived: skeleton tiles while loading, a message with Try again on error.
onRetry: () => void; default —; Try again after an error.
label: string; default —; The atrium's accessible name. Defaults to "<suite> home".
className: string; default —; Classes for the outer container.

Prop	Type	Default	Description
tileSize	number	180	The narrowest a tile column may be, in px: smaller fits more tiles to a row.
grow	"tile" \| "zoom" \| "sheet"	"tile"	How a chosen tile becomes the app: grows from the tile, zooms from its centre, or rises as a sheet from its top edge.
accent	"cobalt" \| "plum" \| "mint" \| "ink" \| string	"cobalt"	Interface accent: the section pill, the pinned glyph and the highlighted item. A name or any CSS colour.
apps	SuiteApp[]	defaultSuiteApps	The suite's apps in home order: { id, name, icon, hue?, summary, stat?, series?, status?, lockedReason?, sections, items }. Pinned ones sort first.
recent	SuiteRecent[]	defaultSuiteRecent	Recent items across the suite, newest first: { id, appId, itemId?, title }. Shown as chips at home and per app in its sidebar.
openApp / defaultOpenApp	string \| null	— / null	The open app id, controlled or initial; null is home.
onOpenApp	(appId: string) => void	—	Fires from the tile, chip or key that opened an app.
onReturnHome	(fromAppId: string) => void	—	Fires from the button or key that went home, with the app that was open.
pinned / defaultPinned	string[]	— / ["survey"]	Pinned app ids, controlled or initial.
onPinApp	(appId: string, pinned: boolean, all: string[]) => void	—	Fires when an app is pinned or unpinned, with the whole new list.
onOpenItem	(appId: string, itemId: string) => void	—	An item inside an app, or a recent item, was chosen.
onRequestAccess	(appId: string) => void	—	A locked app was pressed; its tile then says access was requested.
suite	string	"Fieldline"	The suite's name in the header.
user	{ name: string; initials?: string }	{ name: "Ines Duarte" }	Who is signed in: the greeting's name and the avatar.
greeting	string	—	The home greeting. Defaults to good morning, afternoon or evening from now's UTC hour, with the first name.
now	number	defaultSuiteNow	The moment the greeting reads, in ms, so server and browser agree.
status	"ready" \| "loading" \| "error"	"ready"	Whether the suite's data has arrived: skeleton tiles while loading, a message with Try again on error.
onRetry	() => void	—	Try again after an error.
label	string	—	The atrium's accessible name. Defaults to "<suite> home".
className	string	—	Classes for the outer container.