Go to page

Search modules and pages, then press Enter to navigate.

Stratex

Stratex design system

Wrapper components built on shadcn primitives, styled with the Stratex token system. Press D outside any input to toggle light / dark mode. Use the sidebar to jump to a category; sub-section anchors are listed inside each section.

Badges

Pills, score circles, and segment badges.

Badge

The one status/tag pill. Ten semantic pastel tones × four variants (soft is the default), three sizes, three shapes, optional dot/icon and removable ×. Lime is the BRAND tone — success is green, active is teal.

Tones (soft — default)
NeutralReview · brandActiveCompleteIn progressAwaiting approvalPersonalAttentionAt riskCritical
Variants
softoutlineghostCritical · solidBrand solid — dark text
Sizes · shapes · dot
xsmdlgsquareDue tomorrow · ribbonLive

Status → tone registry

Statuses never hardcode a tone — components ask the single map file (components/badges/status-tone-map).

ActiveOnboardingReviewPlan RenewalUrgent

ScoreCircle · rings · ScoreChip

Numeric score chips on the badge palette. Tone auto-derives from the value (90+ good · 75 ok · 50 watch · 25 risk · <25 critical); `ring` renders conic progress; ScoreChip pairs a circle with a label.

ExcellentHealthyWatchCritical

Segment & sequence badges

Connected shapes make multipart records feel related — broken shifts, workflow sequences. ShiftSegmentBadge renders nothing when `segment` is null.

Broken Shift · Segment 1 of 2
Segment 1 of 2Segment 2 of 21 · Referral2 · Review3 · Agreement

Counts & notification dots

CountDot caps at `max` (99+), hides at zero, and overlays icon buttons (see the header Bell via HeaderTool.count).

399+Tasks 1870

Trend badges

Direction is visual; sentiment comes from `tone` — up isn't always good.

7 points4% coverage3 new incidentssteady

Avatar chips

Identity chip — avatar + name + optional trailing badge slot.

Parth PatelOwnerAkash MuniDipali ShahReviewSarah King

Chart legends & stacked bars

Category colours come from the badge palette borders; legends render as dots or ghost pills.

  • In progress14
  • Completed13
  • Open partial8
  • Open shift6
  • Cancelled4
  • In progress · 31%
  • Completed · 28%
  • Open partial · 17%

Filter & choice chips

SELECTION grammar — selected uses the dark ink fill, never a semantic tone, so a selected 'Critical' filter can't read as positive.

Cross-cutting patterns

Verification, AI recommendation, and the worst-tier rule (SEVERE / CRITICAL / Overdue / Urgent go solid + icon via worstTierBadgeProps).

verifiedneeds reviewinvalidnot checkedunverified
suggestedrecommendedaccepteddismissed
SevereCriticalOverduePending (not worst-tier)

In context — roster rows

The pieces together: status badges, segment badges, score circles, counts, and a distribution bar on real-shaped rows.

Morning support · Addie Cassin

08:00–12:00 · Community access

Confirmed

Personal care · Mia Tran

13:30–15:30 · Worker not assigned

Needs worker

Evening support · Noah Reed

18:00–22:00 · Possible overlap

Roster conflict

Removable tags

Tags are Badges: outline variant with an optional trailing × (onRemove) and leading icon.

Community accessHigh intensityWith iconParticipant choice

Buttons

General-purpose pill button plus the icon-only round tap-target.

Button

Seven variants × three sizes. Pill-shaped, owns its own variant system (radix Slot, not shadcn Button).

asChild link (anchor)

IconCircleButton

Three variants × two sizes.

Outline

Ghost

Solid

Disabled

Avatar

Identity-encoded initials avatars.

InitialsAvatar

Five sizes; deterministic color hashed from name; optional tint.

Tint override:Ring override:

Charts

Bespoke Stratex visualisations.

ScoreSliceBar

Flat horizontal meter built from N slices.

RiskMatrix

5×5 likelihood × consequence; numbered dots per plotted risk.

Likelihood
Almost certain
5
10
15
20
25
Likely
4
8
1
16
20
Possible
3
4
9
12
15
Unlikely
2
4
5
8
2
Rare
1
2
3
4
3
Insignificant
Minor
Moderate
Major
Catastrophic
Consequence

Cards

Surface tiles — generic Card, plus opinionated SectionCard / StatTile / EntityListCard.

Card

Eight variants × interactive / selected / asButton states. Generic surface; SectionCard is the opinionated header-composition sibling.

Variants

solid

Card surface, base elevation.

solid-elevated

solid-selected

glass-soft

glass-softer

glass-elevated

glass-whisper

dashed-block

Interactive (hover)
Selected (side-by-side)

Default

Same data, unselected.

selected={true}

Promotes to solid-selected regardless of variant.

SectionCard

Glassmorphic surface with optional eyebrow + title + description + actions header.

Health

Wellbeing summary

Most recent assessment from 12 Apr 2026.

Aroha is in good health overall. Sleep and mood ratings are strong; a small dip in energy on weekends.

Plain variant renders without padding, intended for full-bleed children like timelines.

StatTile

Two emphases; default neutral glass, strong lime fill.

Next review14 May2 weeks away
Wellbeing88 / 100↑ 4 since last week
Active risks31 high priority
Funding remaining$8,45038% of plan

EntityListCard

Title + subtitle + optional pill + 2-column field grid.

Paracetamol 500 mg

2 tablets every 6 hours, max 8 / day

Current
Prescriber
Dr Lin
Started
12 Mar 2026
Notes
Use for headaches and fever only.

Peanut allergy

Severe — anaphylaxis risk

Severe
Identified
2 Aug 2024
Treatment
EpiPen on person

Inputs

Form controls — TextInput / Textarea / Select, plus FormField for label + error / hint.

TextInput

Five variants × three sizes; error + disabled states; optional leading and trailing icons.

Variants
Sizes
States
Leading / trailing icons

FormField

Label + control + error/hint. Stacked or inline layout. Re-exported as StxField for back-compat. Wraps any input — TextInput, Textarea, Select shown below.

Timeline

Vertical-timeline rows.

TimelineRow

One vertical-timeline entry; pass `isLast` to hide the connector.

  • 14 Apr 2026· Kenny Smith
    Care plan review completed

    Next review scheduled for 14 May. No changes to medication.

  • 12 Apr 2026· Mei Lin
    Wellbeing assessment uploaded

    Score 88 / 100. Sleep improvement noted.

  • 2 Apr 2026· Priya Patel
    New goal added

Panels

Definition-list and metric tile grids.

InfoPanel

Definition-list grid; items can span 2 columns. Each item can opt into an inline `action` (typically a small <IconCircleButton>) shown to the right of the value.

Personal details

Date of birth
12 Mar 1989
NDIS number
430 521 998
Pronouns
she/her
Preferred contact
Mobile
Mobile phone
0400 555 168
Email
ada@example.com
Location
12 Oak Lane, Christchurch 8013
Primary residence

MetricPanel

Compact tile row for prominent values; 2 / 3 / 4 columns.

Hourly rate$48.20Pay grade 4
Loaded rate$66.45+38% on-costs
Core$12,400
Capacity$8,100
Capital$2,000
Stated$1,250

ProfileSectionNav

Sticky on-page anchor nav with IntersectionObserver scroll-spy.

Scroll-spy targets sections with matching ids on the page. In this demo no real targets exist; the active state defaults to the first item.

TextLink

Five variants × two sizes. Optional `external` adds target=_blank + a trailing arrow icon.

Variants
inline linkbreadcrumbview allBackhello@example.com
Sizes
small inlinemedium (default)
External
stratex.appOpen docs

Calendars

Read-only schedule visualisations.

WeeklyScheduleCalendar

Read-only 7-day calendar; 6am–8pm time axis.

Lists

Domain-specific row components.

Billing line-item rows

Two sibling exports: Selected (left panel) and Available (right panel).

    Selected (editable)

  • 01_011_0107_1_1Selected

    Assistance with self-care — weekday daytime

    $65.09 / hour

    Qty 2

    $130.18

  • 01_002_0107_1_1Selected

    Assistance with self-care — weekday evening

    $71.61 / hour

    Qty 1

    $71.61

    Available

Placeholders

Coming-soon gradient panels.

ModulePlaceholder

Empty-state for modules that aren't built yet — icon, eyebrow, title, description, coming-soon pill.

Forms

Form templates and submissions

Build approval workflows and capture incident reports inside Stratex. Available in the next release.

Coming soon

Editing

Inline-edit, dialog, and popover-form patterns.

InlineField

Click-to-edit text field with three sizes.

Hover to reveal the pencil icon. Enter / Tab to commit, Esc to cancel.

Small
Medium (default)
Large

Alerts

Status banners — info / success / warn / danger × compact / comfortable.

Alert

Four tones × two sizes. Default icons per tone; pass `icon` to override or `icon={null}` to suppress; `action` slot for a trailing button.

Compact (default)
Comfortable
Action slot + icon overrides

Progress

Capability and goal progress rows.

ProgressRow

Label + ScoreSliceBar + value display; ratio or percent format.

CommunicationStrong · 4 / 5
Independence3 / 5
Goal: independent meal prepTarget 80% · 62%
Plan utilisation88%

Process

Linear stage trackers.

ProcessBar

Linear stage progress with current / complete / locked states.

Service delivery lifecycleAroha · NDIS Core
  1. Intake(8 Jan)
  2. Assessment(15 Jan)
  3. Care plan(Today)
  4. Service delivery
  5. Review

Pickers

Searchable inline pickers.

ShiftBillingPicker

Searchable inline picker; greys out items already on the shift.

Heroes

Profile detail hero cards.

ProfileHero

Glassmorphic hero card; breadcrumb + identity + quick-stat tiles.

NDIS Participant

Aroha Williams(she/her)

ActivePlan ends 12 AugPersonal care
Next review14 May2 weeks
Wellbeing88 / 100
Primary workerKenny Smith
Funding$8,45038% remaining

StxDialog (family)

Compound shadcn-Dialog wrapper. Header + body + footer + StxField + Cmd+Enter to save.

StxPopoverForm

Anchored mini-form for 1–5 tightly related fields.

StxConfirmDialog

Destructive or warning tone; optional type-to-confirm gate.

Dialogs

Domain-specific dialogs.

ShiftQuickViewDialog

Composes the StxDialog family + Badge. Decoupled from next/navigation via callbacks.

Notifications

Transient surfaces — toasts today; banners and in-app alerts when those land.

Toasts

Sonner-driven toasts. Fired imperatively via toast.success / toast.error / toast.info / toast(). Mounted once at root layout.

Header / Sidebar / Shell

Application-shell wrappers.

ProfileMenu

Sidebar-footer dropdown; user + orgs + active id + change handler are required props.

Header

Top bar with brand + module tabs (lg+) + utility cluster. Pass-through default tools or replace.

Stratex

Module tabs are hidden below lg — resize the window to see them.

Sidebar

Collapse-to-icon (lg+) or full-width drawer (mobile). Footer is a slot; pages and active state are props.

Page content goes here. Click the chevron at the top of the sidebar to toggle collapsed state.

AppShell

Glues Header + Sidebar + Sheet-based mobile drawer. Designed to wrap a full page; the preview here is a fixed-height frame.

AppShell normally consumes 100svh. The frame below is sized down to fit the showcase; full-page behavior (collapse, mobile drawer) still works inside it. Open this section below lg to try the hamburger.

Go to page

Search modules and pages, then press Enter to navigate.

Stratex

Page body slot. Pass any content as children.

Mobile drawer

The Sheet drawer AppShell renders at viewport widths below lg, opened from the Header hamburger. Click the trigger below to see the same composition at any viewport.

AuthShell

Auth-route shell — Stratex painterly gradient with a brand wordmark above a centered single-column panel. Used for sign-in and other authentication surfaces.

See AuthShell rendered live on /login. Typical composition: <AuthShell><Card variant="glass-elevated"><LoginForm /></Card></AuthShell>.

Package summary

The full Stratex wrapper surface, for skim-able reference.

  • badges/ — Badge (+ status-tone-map registry), ScoreCircle, ShiftSegmentBadge
  • buttons/ — IconCircleButton
  • avatar/ — InitialsAvatar
  • charts/ — ScoreSliceBar, RiskMatrix
  • cards/ — SectionCard, StatTile, EntityListCard
  • timeline/ — TimelineRow
  • panels/ — InfoPanel, MetricPanel
  • navigation/ — ProfileSectionNav
  • calendars/ — WeeklyScheduleCalendar
  • lists/ — SelectedLineItemRow, AvailableLineItemRow
  • placeholders/ — ModulePlaceholder
  • editing/ — InlineField, StxDialog (family), StxPopoverForm, StxConfirmDialog
  • progress/ — ProgressRow
  • process/ — ProcessBar
  • pickers/ — ShiftBillingPicker
  • heroes/ — ProfileHero
  • dialogs/ — ShiftQuickViewDialog
  • header/, sidebar/, app-shell/ — Header, Sidebar (+ ProfileMenu), AppShell