Component kit/App shellDesktop

App shell

On a phone the navy column becomes a bar, four tabs and a Menu sheet. The place you are in stays in the bar.

Two shells on a phone

The bar carries the place. HQ adds a steel hairline above it and HQ tabs; a brand gets its own tabs.

RJ HQ
Staging
Catalogue · Global Store

Global Store

214 products · 38 drafts

Navy birdseye two-piece suit
HS 81045 · Crystal Springs
Available
£1,150
Mid-grey flannel trousers
HS 64033 · Sherry Flannel
Draft
£340
Navy chalk-stripe three-piece
VBC 403.0118 · Revenge
Available
£1,390
Brand: RJ Clothing
Staging
Products · My Products

My Products

38 products · 6 drafts

Navy birdseye two-piece suit
HS 81045 · Crystal Springs
Available
£1,150
Charcoal herringbone jacket
VBC 218.1003 · Perennial
Available
£780
Stone linen jacket
HS 30612 · Irish Linen
Draft
£690
shadcnSidebar[collapsible=offcanvas] · custom tab barUses.phone.p-bar.tabbar.sh-hqrail.sh-pcrumb.sh-tb

Tab bar

Four tabs in thumb reach; Menu holds the rest. No hover on touch.

default
focus
disabled
loading
shadcncustom (no shadcn tab bar)Uses.tabbar a.tabbar a.on.sh-tb.sh-tb.warn--control-h-m

Menu drawer

Menu opens the whole registry as a bottom sheet: same groups, counts and amber as the desktop column.

Staging
Products · My Products

My Products

38 products · 6 drafts

Navy birdseye two-piece suit
HS 81045 · Crystal Springs
Available
£1,150
Charcoal herringbone jacket
VBC 218.1003 · Perennial
Available
£780
Stone linen jacket
HS 30612 · Irish Linen
Draft
£690
shadcnSheet[side=bottom] · DrawerUses.k-sheet.k-bottom.sh-mrow.sh-mgrp.sh-cnt.warn[data-k-stage]--motion-sheet-in--e-phone-sheet

Place switcher

Tap the place in the bar. Full-height sheet, 52px rows.

Staging
No match
Staging
Failed to load
Staging
shadcnDrawer · Command · CommandInput · CommandItem · CommandEmptyUses.k-sheet.k-bottom.sh-pop-s.sh-row.sh-grp.sh-mono.sm

Jump to

The search icon in the bar opens it full screen, keyboard up, results grouped like the menu.

re
Products1
Create Product/create-product
Website1
Releases/releases
Needs attention1
ERP retry queue/orders/retry-erp
No results
invoices
No results.Nothing in this brand's menu matches “invoices”. Orders and Customers are the nearest pages.
shadcnCommandDialog (full screen) · CommandGroup · CommandEmptyUses.sh-full.sh-cmd-in.sh-row.actmark

Environment and notices

Staging stays visible in the bar; the banner and access notice stack under it.

Staging
Engineers' staging copy. To edit or publish your website, use dtc-admin.rjmtm.com
Site selection expired or access changed. Select the brand again.
StagingProductionLocal
shadcnBadge · AlertUses.staging.env-prod.sh-banner.sh-notice

Settings

A grouped list page, not a squeezed column. The trail reads Settings · Brand once you are in.

Staging
Settings

Settings

RJ Clothing

BrandBrandsUsers & accessAPI keysAudit logRulesProfile
shadcnSidebarMenu as list · ItemUses.sh-mlist.sh-mrow.sh-mrow.on.sh-pcrumb

Embedded Payload CMS

Same frame header, taller touch targets; Payload's editor fills the width.

Payload CMS
Scoped to RJ Clothing
CollectionsPagesNavigationMediaGlobalsHeaderFooter

Pages

TitleSlugStatusUpdated
HomehomePublished2 Oct
SuitssuitsPublished29 Sep
Our clothsour-clothsDraftToday 14:20
Book a fittingbook-a-fittingPublishedYesterday
Loading
Payload CMS
Opening the editorLoading Payload for RJ Clothing.
Error
Payload CMS
Empty
Payload CMS
No brand selectedPick a brand to edit content.
Not wired
Payload CMSNot wired
Editor is off on this environmentThe Payload address is not set on staging, so content can only be edited in production.
shadcnCard · Badge · Button[size=icon]Uses.sh-frame.sh-pframe.sh-frame-b.mid