Components / Application

Scheme

Strata scheme identity primitives for Instant Strata. A scheme is the owners corporation for a building: identified by name, strata plan number, location, and roll size. Use these elements everywhere a scheme appears so managers always see consistent identity, status, and context.

Design rationale

Strata managers work across dozens of schemes. Every screen inside a scheme needs a persistent context bar so they never lose track of which building they are working on. Portfolio views need list and card layouts that surface the same fields in the same order: name, plan, location, lots, and status.

The SchemeSummary type is the shared contract. Extend it in the app with financial balances, compliance dates, and fund splits. The UI primitives stay stable.

Building2 is the default scheme icon per the Icons guide. Initials on lime-soft tiles are used when a scheme needs a distinct avatar in cards and switchers.

Primitives

Compose these in custom layouts, AI entity tags, breadcrumbs, and table cells. Status and plan badges compose the shared Badge primitive. See the Badge docs for all lifecycle states and variant mapping.

SchemeIdentity, SchemePlanBadge, SchemeMeta

Harbour View Towers

SP 1042

SP 1042ActiveNeeds attentionWatch

Darling Harbour, NSW · 52 lots · FY end 30 Jun · Jane Smith

SchemeStat metrics

Lots

Open tasks

In arrears

18%

List layout

Default directory row for scheme pickers, sidebars, and mobile lists.

SchemeList with list rows

Harbour View Towers

Active

Darling Harbour, NSW · 52 lots · FY end 30 Jun

SP 1042

Parkside Residences

Needs attention

Surry Hills, NSW · 12 lots · FY end 31 Dec

SP 8871

Northbridge Estate

Onboarding

Northbridge, NSW · 24 lots · FY end 30 Jun

SP 2204

tsx

import { SchemeCard, SchemeList } from "@/components/ui/scheme"

<SchemeList>
  {schemes.map((scheme) => (
    <SchemeCard
      key={scheme.id}
      scheme={scheme}
      layout="list"
      showStatus
      showChevron
      href={`/schemes/${scheme.id}`}
    />
  ))}
</SchemeList>

Card layout

Portfolio tiles with stats for manager dashboards.

SchemeGrid with card tiles

SP 1042Active

Harbour View Towers

Darling Harbour, NSW · 52 lots · FY end 30 Jun

Healthy

Open tasks

In arrears

SP 8871Needs attention

Parkside Residences

Surry Hills, NSW · 12 lots · FY end 31 Dec

Watch

Open tasks

In arrears

12%

Wide layout

Tabular portfolio view with column headings.

SchemeList with wide rows

Scheme

Plan

Lots

Tasks

Status

Harbour View Towers

Darling Harbour, NSW · 52 lots · FY end 30 Jun

SP 1042

ActiveHealthy

Parkside Residences

Surry Hills, NSW · 12 lots · FY end 31 Dec

SP 8871

Needs attentionWatch

Northbridge Estate

Northbridge, NSW · 24 lots · FY end 30 Jun

SP 2204

OnboardingHealthy

Coastal Gardens

Bondi, NSW · 8 lots · FY end 30 Jun

SP 5510

ArchivedHealthy

SchemeContextBar

Sticky strip at the top of scheme-scoped pages. Shows identity, key metrics, portfolio switching, and page actions.

Context bar with switcher and actions

SP 1042Active

Lots

FY end

30 Jun

Manager

Jane Smith

Open tasks

Health

Healthy

Page content sits below the context bar.

tsx

import { SchemeContextBar } from "@/components/ui/scheme"
import { Button } from "@/components/ui/button"

<SchemeContextBar
  scheme={activeScheme}
  schemes={portfolio}
  onSchemeSelect={({ scheme }) => setActive(scheme)}
  actions={<Button size="sm">View roll</Button>}
/>

SchemeSwitcher

Standalone portfolio picker. Embedded automatically when schemes is passed to SchemeContextBar.

SchemeSwitcher dropdown

Related patterns

Badges: SchemePlanBadge and SchemeStatusBadge compose Badge. Use that page as the canonical reference for status tones and states.

Lot: the child entity under a scheme. See the Lot component for roll lists, levy badges, and proxy eligibility.

Scheme breadcrumb: compose SchemeIdentity with compact layout in AppHeader for nested routes like Schemes / Harbour View / Levies.

AI entity tags: align Message strata-scheme plugin styling with SchemePlanBadge and SchemeIdentity for consistent inline references.

Install

tsx

npx shadcn add https://raw.githubusercontent.com/levi-putna/elements/main/registry/scheme/registry.json

Requires the badge and dropdown-menu components.

Reference

SchemeSummary

Prop	Type	Default	Description
id	string	-	Stable identifier for routing and API calls.
name	string	-	Display name, e.g. Harbour View Towers.
plan	string	-	Strata plan number. Normalised by formatSchemePlan.
suburb	string	-	Suburb for location metadata.
state	string	-	State or territory code.
lotCount	number	-	Total lots on the strata roll.
financialYearEnd	string	-	Financial year end, e.g. "30 Jun".
managerName	string	-	Assigned strata manager.
status	SchemeStatus	-	active \| onboarding \| archived \| attention.
health	SchemeHealth	-	good \| warning \| critical.
openTasks	number	-	Open tasks requiring manager action.
arrearsPercent	number	-	Percentage of lots in arrears.

SchemeCard

Prop	Type	Default	Description
scheme	SchemeSummary	-	Scheme data object.
layout	"list" \| "card" \| "compact" \| "wide"	"list"	list = directory row. card = portfolio tile. compact = switcher row. wide = table row.
href	string	-	When set, renders the card as a link.
showChevron	boolean	false	Trailing chevron for navigable rows.
showStatus	boolean	false	Shows the lifecycle status badge.
showHealth	boolean	false	Shows the health indicator.
showPlan	boolean	true	Shows the SP plan badge.
selected	boolean	false	Highlights the row with lime-soft background.
actions	ReactNode	-	Custom trailing actions.

SchemeContextBar

Prop	Type	Default	Description
scheme	SchemeSummary	-	Active scheme shown in the bar.
schemes	SchemeSummary[]	-	Portfolio list for the switcher. Omit to hide switching.
onSchemeSelect	({ scheme }) => void	-	Called when the manager picks another scheme.
stats	ReactNode	-	Replace the default stat strip.
actions	ReactNode	-	Right-aligned page actions.
sticky	boolean	true	Stick below the app header on scroll.