If your project doesn't have Wisty UI's theme yet, add it once with npx shadcn@latest add @wisty/cosmos. Until then, components keep shadcn's default look. Installation has the details.

The install writes the Account page, record-page.tsx, and its fixtures, record-page-data.ts, beside it. RecordPage takes no props: the page file is what you edit. Swap the fixture import for the app's data and change the JSX. It is Page regions' Header and Right Sidebar: Record header on top, a card of Related, Details and Activity tabs in the main region, KPI row and Cases as tiles in the sidebar. The Opportunity example is the same page for another object: Path under the header, Products and Contact Roles on the Related tab, Stage History beside them. For a case or a custom object, copy the example nearest it and change the lines that name the object: the icon, the object label, the columns and the lists. Wire each section's handlers (onAction, onRowAction, onEdit, onToggleComplete) to the app's saves; Follow and a task's checkbox are page state in the examples.

The page is Lightning's record page on the Header and Right Sidebar template, built from the blocks that draw each part: Record header is the highlights panel; the main region's card holds the Tabs component in Lightning's order, Related (Related list cards), Details (Record detail, the page layout's sections) and Activity (Activity timeline); the sidebar holds KPI row and a Related list as tiles, as a Dynamic Related List shows in a sidebar. Path sits under the header at the page's full width, where Lightning places it.

Known gaps:

• No Chatter, News or activity composer, and no inline edit on the Details tab. For inline edit, swap Record detail for Record inline edit.

• The page follows its own width, not the window's: from 54rem the main region takes two thirds and the sidebar the rest, never narrower than 22rem; below that the sidebar stacks under the main region, as Page regions lays them out.
• Each section sizes itself inside its region: a related list shows tiles below 30rem, the details go to one column below about 584px, and the figures go two by two in the sidebar.

• Pass null as a list's records, or as activities, when it couldn't load, never []: an empty array says there are none.
• Pass each count the app knows, never the length of a list it read with a limit. Add hasMore when it only knows there are more.
• Pass raw values with a type, null for an empty field, and amounts in one currency with currency set to match on every section. Each section formats them with locale, currency and timeZone.
• Pass today in the same time zone as timeZone; overdue tasks and upcoming activity come from it.
• Render one per page: the header's name is the page's h1. Never pass asChild or render.