Components

Everything every product needs: theme, brand files, the restyled shadcn components and the shared jengacore components.

Core kit + RuleChip, RiskScore, CaseTimeline and the alert queue block.

Core kit + MemberSummary, LoanSchedule and the member overview block.

Core kit + SettlementPosition, SettlementWindow and the settlement overview block.

Core kit + CaseTimeline and the dispute case block.

Tokens for Light, Dark and High contrast, the three fonts, radii, shadows, motion and base styles. Merged into the app's Tailwind v4 stylesheet.

cn(): clsx + tailwind-merge, the class helper every component imports from @/lib/utils.

jengacore and product wordmarks (ink and white) and app tiles, installed into public/brand.

Money from decimal strings with minor units per ISO 4217, true minus sign, short IDs, dates (05 Oct 2026) and 24 h times.

One status dictionary for every product: the same word always gets the same tone.

Light, Dark and High contrast per user, a no-flash ThemeScript, and the product signature (data-product).

Viewport hook used by the sidebar and drawer.

shadcn Button with jengacore variants, 30/34/44px heights and a `shortcut` hint. Same API as upstream.

Tones success, warning, danger, info, neutral, outline and brand. Accepts the shadcn `variant` names too.

36px control with an `input` border at ≥3:1 and a 2px focus ring.

Multi-line field matching Input.

Mono uppercase headers on muted, hairline rows, `fresh` mint flash, `selected` rows and a compact density.

Bordered card on canvas, radius-lg, whisper shadow, optional mint `tint` and a mono CardEyebrow.

Tinted ground + coloured icon + title. Tones info, success, warning, danger. No coloured left border.

Keyboard hint in Geist Mono.

Shimmer placeholder on muted; still under reduced motion.

Modal on a navy-950 45% scrim, radius-lg, shadow-pop, muted footer. Same API as upstream.

480px record panel from the right with SheetBody and a three-action SheetFooter; the ID sits in the mono eyebrow.

Underline tabs with a 2px primary marker and mono count chips; `segmented` for compact filters.

cmdk primitives restyled: mono group headings, mint active row, scope chip and CommandFooter.

Navy toasts in every theme, bottom right, with one action (Undo, View). Replaces shadcn sonner: same Toaster export.

shadcn Accordion, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Alert Dialog, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Aspect Ratio, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Avatar, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Breadcrumb, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Button Group, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Calendar, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Carousel, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Chart, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Checkbox, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Collapsible, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Context Menu, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Drawer, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Dropdown Menu, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Empty, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Field, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Form, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Hover Card, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Input Group, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Input Otp, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Item, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Label, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Menubar, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Native Select, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Navigation Menu, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Pagination, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Popover, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Progress, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Radio Group, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Resizable, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Scroll Area, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Select, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Separator, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Sidebar, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Slider, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Spinner, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Switch, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Toggle, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Toggle Group, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

shadcn Tooltip, restyled: jengacore focus ring, radii, card fill, navy scrim and shadow-pop.

Every money value: decimal string in, tabular figures, currency as a mono suffix, true minus, never red for a debit.

Mono reference with copy; shortens long IDs in the middle and keeps the full value in the tooltip.

Icon + word from the shared status dictionary. Never colour alone.

Countdown: green, amber under the threshold, red and ticking when breached.

PRODUCTION, UAT, SANDBOX or DEV in the top bar.

One ledger of 2–4 numbers in Bricolage with a comparison line each. Not floating tiles.

Share of a limit with the alert threshold marked and the percentage as text.

The live indicator, one of the two loops the motion rules allow.

Currency addon in mono on the left, value right-aligned with tabular figures.

Label, control and helper or error that says how to fix it; required asterisk and ARIA wiring.

One sentence of what will appear here and one action. No illustrations.

Maker-checker and destructive confirmation that repeats the object and its details; optional required reason.

Table + TanStack: sortable mono headers, row click, selected and fresh rows, empty state.

Navy sidebar in every theme with the product wordmark, signature marker, ⌘K button and a 64px rail.

Frame, 56px top bar with breadcrumbs and environment chip, main area and the PageHeader anatomy.

The ⌘K palette: Records → Actions → Go to → Switch product → Appearance, fed by each product's data.

Compact single choice that acts at once: USD / SLSH, All / Mine / Unassigned. A radio group with arrow keys.

Mulisa: mono rule code + the condition in plain language.

Mulisa: risk score in a table cell, toned by band, with the band word for screen readers.

Mulisa: score, three labelled bands with a pin, and the rules that fired.

Disputes and Mulisa investigations: who acted, what, the reference and when; done, current and future steps.

Msingi: identity, KYC and the three balances tellers ask for first.

Msingi: repayment schedule in one currency with status per instalment.

Finance Portal: net position against the net debit cap, per participant and currency.

Finance Portal: open → closed → files sent → settled stepper.

Sidebar, top bar, ⌘K palette, theme and product signature wired together. Mount once in the root layout.

The shared sign-in: navy brand panel with the four products, environment choice, email and password, single sign-on.

Mulisa home: KPI strip, compact queue sorted by SLA then score, alert detail in the side panel.

Finance Portal home: the open window and one position card per participant and currency, with a maker-checker close.

Msingi member page: summary, 44px teller actions, loans and transactions tabs.

Disputes case page: header with SLA, timeline, evidence and a decision that requires a reason.