Brand reference for every KHMYS surface.
The tokens, type, components and patterns the product is built from, rendered live from the same code the app ships, with fictional sample data. Theme previews are temporary. Use the sidebar to jump; switch light/dark or the alternate style at the bottom.
Sharing with an agent? Use the Markdown reference or the complete JSON kit. Both work without JavaScript or a login.
How to Use This Kit
Live controls use the product's components and stylesheet. Layout examples show how to compose them, using fictional data throughout.
The rule that matters most
Adopting this into another app
- 1
Bring in the foundations first
Copy the token blocks from Resources → Downloads into the app's global stylesheet and map them in Tailwind. Scope the tokens to your application and check existing screens for styling collisions.
- 2
Inventory before you touch anything
Walk your app screen by screen. For each one, note the closest matching pattern here: Layout Patterns for page-level shells, Components for individual controls.
- 3
Adopt one screen at a time
Swap controls for their kit equivalents, open View code on a specimen for the usage, and keep the existing props and handlers wired exactly as they were.
- 4
Check both themes
Flip Light/Dark in the sidebar footer on this page, then do the same in your app. Every colour in the kit is a token that has a dark value; a hard-coded colour is the usual culprit when one theme looks wrong.
Copy-paste prompt for an AI coding agent
Hand this to an agent along with the Downloads files when you want it to do the adoption pass.
You are restyling an existing app to match the KHMYS brand kit (https://khmys.com/branding).
Read https://khmys.com/branding/guide.md for the reference without JavaScript.
Fetch https://khmys.com/branding/kit.json for the complete source bundle, or individual
files such as https://khmys.com/branding/files/tokens.css and
https://khmys.com/branding/files/src/components/ui/button.tsx.
Rules:
1. Presentation layer only. Do not change data fetching, routing, auth, state or business logic.
2. Start by adding the design tokens: copy the :root and .dark blocks from "Resources -> Downloads -> tokens.css" into the app's global stylesheet, and map them in tailwind.config (see the Tailwind snippet there). Use Geist Sans.
3. Inventory each screen, then replace controls with the matching component from the kit's Component Inventory (buttons, inputs, selects, badges, cards, dialogs, tables).
4. Use semantic utilities only (bg-background, text-muted-foreground, border-border, bg-primary...). Never hard-code hex values.
5. Money: tabular-nums, credits "+" in text-chart-green, debits "-" in text-foreground. Icons: lucide-react, stroke 1.5.
6. Verify every screen in both light and dark before finishing.Logo & Mark
Architype Stedelijk spells khmy$ as one word, using the exact letter outlines and natural font spacing. The wordmark is teal in both modes: a deeper teal on light surfaces and a lighter teal (hsl 168 42% 62%) in dark mode. A compact k is reserved for square icons.
Primary wordmark
White on dark surfaces and teal on light surfaces. Use the wordmark on its own, with no added letter spacing. The footer uses teal lettering on black.
Compact k
Use only for square browser icons and avatars. Use the full wordmark in page headers and navigation.
Wordmark sizes
Set the height and keep the width automatic. Preserve the font’s natural spacing and use at least 20px in height.
Monochrome
One color for print and surfaces that need a neutral wordmark.
Clear space
Keep a quarter of the wordmark's height clear on every side.
Don't
- Don't stretch the wordmark or change the letter spacing
- Don't rotate, tilt or skew the lettering
- Don't recolor outside the supported tones
- Don't add outlines, shadows or effects
- Don't use the wordmark on a low-contrast background
- Don't add a second text label or the old shield beside the wordmark
Color
These values are read from the shipped stylesheet. Use semantic tokens so surfaces, text and focus states follow the selected theme.
Interface
background
Page canvas behind everything
foreground
Default text and the strongest ink
card
Raised surfaces: cards, popovers, sheets
primary
The brand action colour: buttons, links, focus, selection
primary-foreground
Text and icons sitting on primary
secondary
Quiet filled surfaces: secondary buttons, tracks
muted
Recessed fills: skeletons, hovered rows, segmented tracks
muted-foreground
Secondary text, captions, axis labels, placeholders
accent
Hover and active fill for menu items and ghost buttons
destructive
Delete, remove and irreversible actions
border
Hairlines and card outlines
input
Form control outlines
ring
Keyboard focus ring
Navigation
sidebar
Navigation rail surface
sidebar-foreground
Navigation text
sidebar-accent
Active and hovered nav item
sidebar-border
Rail edge and group dividers
Charts and series
chart-blue
Categorical 1: also the default tag colour
chart-green
Categorical 2: money in, positive change, success
chart-purple
Categorical 3
chart-orange
Categorical 4: warnings that are not yet errors
chart-yellow
Categorical 5: caution, bills
chart-red
Categorical 6: money out, over budget, errors
series-income
Income series in grouped bars and cash-flow charts
series-expense
Expense series; always paired with a legend and value labels
series-magnitude
Single-hue ramp for magnitude (spend by category)
Public pages
Dark
land-bg
Public page background
land-fg
Public page text
land-muted
Supporting copy
land-line
Hairlines
land-card
Raised panels
land-card2
Nested panels
land-accent
Mint accent: eyebrow labels, the mark, key figures
land-invert
Primary pill button fill
land-paper
Closing section, inverted paper surface
Light
land-bg
Public page background
land-fg
Public page text
land-muted
Supporting copy
land-line
Hairlines
land-card
Raised panels
land-card2
Nested panels
land-accent
Mint accent: eyebrow labels, the mark, key figures
land-invert
Primary pill button fill
land-paper
Closing section, inverted paper surface
Contrast check
Calculated from the token values. Text needs 4.5:1 for normal sizes; UI graphics need 3:1. This measures token pairings, not a complete accessibility audit. V2 buttons use the existing inverted foreground/background override.
| Pair | Ratio | Threshold | Result |
|---|---|---|---|
| Body text on page | 16.78:1 | 4.5:1 | Pass |
| Body text on card | 17.49:1 | 4.5:1 | Pass |
| Secondary text on page | 4.60:1 | 4.5:1 | Pass |
| Secondary text on card | 4.79:1 | 4.5:1 | Pass |
| Button label on primary | 3.10:1 | 4.5:1 | Needs review |
| Primary on page (links, focus) | 2.97:1 | 3:1 | Needs review |
| Money in (green) on card | 2.30:1 | 3:1 | Needs review |
| Money out (red) on card | 3.78:1 | 3:1 | Pass |
Typography
Geist Sans is self-hosted in weights 400, 500, 600 and 700. Use restrained hierarchy and tabular figures for financial comparisons.
Your money, clearly.
A calmer view of the month
See what came in, what went out, and what is ahead.
Updated a moment ago · USD
account.currency · USD
$12,345.67
| Role | Utility | Use |
|---|---|---|
| Page heading | text-2xl font-semibold tracking-tight | One h1 per product page |
| Section heading | text-lg font-semibold | Card and section hierarchy |
| Body | text-sm / text-base | Readable descriptions |
| Supporting | text-xs text-muted-foreground | Dates and metadata |
| Money | tabular-nums | Aligned amounts and percentages |
@import "@fontsource/geist-sans/latin-400.css";
@import "@fontsource/geist-sans/latin-500.css";
@import "@fontsource/geist-sans/latin-600.css";
@import "@fontsource/geist-sans/latin-700.css";Voice & Tone
Calm, specific and useful. Financial decisions belong to the user; our copy explains what happened and what they can do next.
| Situation | Copy |
|---|---|
| Empty ledger | No transactions yet. Connect your bank to get started. |
| Sync failed | We couldn't sync this account. Your existing transactions are still available. Try again. |
| Budget | You've used 75% of this month's groceries budget. |
| Confirmation | Delete this rule? Existing transactions will keep their categories. |
| Validation | Enter an amount greater than zero. |
- Name the action: Save goal, Connect account, Export CSV.
- Explain the effect before a destructive action.
- Include currency and period when totals need context.
- Keep sample data visibly labeled.
- Don't shame spending or promise financial outcomes.
- Don't claim a connection is live when it is only a preview.
Page Titles & Metadata
Browser titles use Page name · KHMYS. Keep the visible page heading concrete and consistent with navigation.
import { useDocumentTitle } from "@/hooks/useDocumentTitle";
useDocumentTitle("Transactions"); // Transactions · KHMYS| Surface | Title | Description |
|---|---|---|
| Public home | KHMYS — Know How Much You Spend | Personal finance overview |
| Dashboard | Overview · KHMYS | Your current financial picture |
| Brand reference | Brand kit · KHMYS | Tokens, components and layout patterns |
Spacing & Elevation
Build on the existing Tailwind spacing scale. Let alignment and borders carry hierarchy before adding shadows.
| Element | Convention |
|---|---|
| Control gap | gap-2 (8px) |
| Dense row | px-4 py-3 |
| Card padding | p-6 (24px) |
| Section gap | space-y-6 |
| Base radius | --radius: 0.5rem |
| Card | border border-border shadow-sm |
| Popover / sheet | shadow-md / shadow-lg |
Motion
Motion confirms an action or reveals a layer. Respect reduced motion and keep financial values readable during updates.
| Behavior | Timing | Guideline |
|---|---|---|
| Hover / focus | 150–200ms | Color and border feedback |
| Card entrance | 300ms ease-out | Small fade and translation |
| Dialog | 200ms | Use the shared Radix component |
| Reduced motion | No decorative movement | Use motion-safe: utilities |
Iconography
Lucide icons use a consistent outline. Pair unfamiliar symbols with labels, and give icon-only controls an accessible name.
<Button variant="ghost" size="icon" aria-label="Search transactions">
<Search size={18} strokeWidth={1.5} aria-hidden />
</Button>Money & Numbers
Use the shared formatters in product screens. Keep signs, currency, dates and privacy masking consistent. All values here are fictional.
| Meaning | Sample | Rule |
|---|---|---|
| Income | +$4,250.00 | Explicit plus sign |
| Expense | -$82.50 | Minus sign; never color alone |
| Indian rupees | ₹1,23,456.00 | Account currency and locale |
| Zero | $0.00 | Zero is a value, not missing data |
Data Visualization
The same line, bar and daily calendar heatmap charts used by the app, with fictional USD data. Hover for values or focus a chart and use the arrow keys.
Explore the interactive calendar heatmap for daily cash flow, date selection and range filtering.
- Label the currency and reporting period.
- Use a zero baseline for amount bars.
- Pair series colors with names and exact values.
- Provide a table when the chart is not enough.
App Shell
Retain the existing sidebar, header and content hierarchy. This is a miniature illustration with sample content; the product shell stays unchanged.
Overview
A clear place for the month ahead.
Sample cash balance
$4,380.00
USD · fictional
Page Header
A title, one useful sentence and a primary action. Allow actions to wrap on small screens.
Transactions
Review and organize your activity.
Filter Bar
Keep filters close to the result set and make clearing them easy.
| Description | Category | Amount |
|---|---|---|
Sample payroll Oct 1, 2026 | Income | +$4,250.00 |
Sample grocery shop Oct 2, 2026 | Groceries | -$82.50 |
Sample coffee Oct 3, 2026 | Dining | -$6.25 |
Stat Tiles
Pair amounts with a period and a currency. Comparisons need a defined baseline.
Money in
$4,250.00
Sample · October · USD
Money out
$2,700.00
Sample · October · USD
Net cashflow
$1,550.00
Sample vs previous month
Ledger Table
Descriptions lead, amounts align right, and dates provide context. The table scrolls horizontally when space is tight.
| Description | Category | Amount |
|---|---|---|
Sample payroll Oct 1, 2026 | Income | +$4,250.00 |
Sample grocery shop Oct 2, 2026 | Groceries | -$82.50 |
Sample coffee Oct 3, 2026 | Dining | -$6.25 |
Empty State
Distinguish no data from no search results and from loading errors. Offer one relevant next step.
Review Queue
Make review status explicit. Confirming a sample below only changes its local preview.
Sample grocery shop
Groceries · −$82.50 · USD
Sample needs review.
Activity Timeline
Use readable events and timestamps. Do not expose credentials or raw provider payloads.
Sample account connected
October 1, 2026 · Fictional activity
Sample transactions imported
October 2, 2026 · Fictional activity
Sample categories reviewed
October 3, 2026 · Fictional activity
Detail Sheet
Inspect details without losing the list. Sheets need a title, a description and a reachable close action.
Public Pages
Public pages use the established landing palette, the shared Architype Stedelijk wordmark and concise explanations.
Personal finance, clearly
A calmer place for your money.
Accounts, transactions, budgets and goals in one view.
Try the demoForm Controls
Labels stay visible. Put validation beside the field, connect it with aria-describedby, and preserve input after an error. This form only updates the preview.
Pickers & Filters
Use explicit labels and an All option for filters. Keep calendar dates in local time.
Account picker
Calendar
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
October 7, 2026
Segmented Control
Use for a short set of related views. Expose the selected option to assistive technology.
Selected: 3M
Cards
Group related information with a title and a quiet border. Keep actions near the information they affect.
Sample savings goal
Emergency fund · USD · fictional
$3,000 of $5,000
Badges & Chips
Status labels stay short. Text must carry meaning even when color is not visible.
Alerts
Explain the situation and a next step without exposing internal errors or secrets.
Sample data
Sample connection needs attention
Tables
Use proper headers, a caption and right-aligned numeric cells. Large tables need filtering and pagination.
| Description | Category | Amount |
|---|---|---|
Sample payroll Oct 1, 2026 | Income | +$4,250.00 |
Sample grocery shop Oct 2, 2026 | Groceries | -$82.50 |
Sample coffee Oct 3, 2026 | Dining | -$6.25 |
Pagination
Use buttons for local state changes. Disable the previous and next controls at the boundaries.
Sample page 1 of 3
Overlays
Use dialogs for focused tasks and alert dialogs for confirmations. Escape closes the layer and focus returns to the trigger.
No sample rule deleted.
Toast
Short feedback for completed actions. Keep validation beside inputs and important errors visible on the page.
Avatars
Use initials as a fallback. These synthetic profiles make no requests to external image services.
Accordion
Keep optional detail behind a clearly named disclosure. Do not hide required instructions or critical errors.
Progress
Always show the number and what it measures. Clamp the visual indicator at 100% and explain any excess separately.
Skeleton
Use a stable placeholder while loading. An empty state or error is a separate state.
Charts
Shared line and bar renderers with keyboard tooltips. The table gives the same fictional data without relying on a chart.
| Date | Sample USD balance |
|---|---|
| 2026-01-01 | $3,400.00 |
| 2026-02-01 | $3,600.00 |
| 2026-03-01 | $3,450.00 |
| 2026-04-01 | $3,950.00 |
| 2026-05-01 | $4,200.00 |
| 2026-06-01 | $4,380.00 |
Calendar Heatmap
The daily activity chart used by Transactions. Teal intensity shows the daily amount. Hover or focus for exact values; select a day or drag a range to update this local preview.
Use arrow keys to explore days, Enter or Space to select a day, and Escape to clear. Drag across days or use the date picker to select a range.
2026 · $28,417.00 outflow
View daily amounts
| Date | Outflow (USD) |
|---|---|
| Jan 1, 2026 | $1,350.00 |
| Jan 3, 2026 | $73.00 |
| Jan 6, 2026 | $112.00 |
| Jan 9, 2026 | $151.00 |
| Jan 12, 2026 | $190.00 |
| Jan 15, 2026 | $49.00 |
| Jan 18, 2026 | $88.00 |
| Jan 21, 2026 | $127.00 |
| Jan 24, 2026 | $166.00 |
| Jan 27, 2026 | $25.00 |
| Jan 30, 2026 | $64.00 |
| Feb 1, 2026 | $1,350.00 |
| Feb 3, 2026 | $92.00 |
| Feb 6, 2026 | $131.00 |
| Feb 9, 2026 | $170.00 |
| Feb 12, 2026 | $29.00 |
| Feb 15, 2026 | $68.00 |
| Feb 18, 2026 | $107.00 |
| Feb 21, 2026 | $146.00 |
| Feb 24, 2026 | $185.00 |
| Feb 27, 2026 | $44.00 |
| Mar 1, 2026 | $1,350.00 |
| Mar 3, 2026 | $111.00 |
| Mar 6, 2026 | $150.00 |
| Mar 9, 2026 | $189.00 |
| Mar 12, 2026 | $48.00 |
| Mar 15, 2026 | $87.00 |
| Mar 18, 2026 | $126.00 |
| Mar 21, 2026 | $165.00 |
| Mar 24, 2026 | $24.00 |
| Mar 27, 2026 | $63.00 |
| Mar 30, 2026 | $102.00 |
| Apr 1, 2026 | $1,350.00 |
| Apr 3, 2026 | $130.00 |
| Apr 6, 2026 | $169.00 |
| Apr 9, 2026 | $28.00 |
| Apr 12, 2026 | $67.00 |
| Apr 15, 2026 | $106.00 |
| Apr 18, 2026 | $145.00 |
| Apr 21, 2026 | $184.00 |
| Apr 24, 2026 | $43.00 |
| Apr 27, 2026 | $82.00 |
| Apr 30, 2026 | $121.00 |
| May 1, 2026 | $1,350.00 |
| May 3, 2026 | $149.00 |
| May 6, 2026 | $188.00 |
| May 9, 2026 | $47.00 |
| May 12, 2026 | $86.00 |
| May 15, 2026 | $125.00 |
| May 18, 2026 | $164.00 |
| May 21, 2026 | $23.00 |
| May 24, 2026 | $62.00 |
| May 27, 2026 | $101.00 |
| May 30, 2026 | $140.00 |
| Jun 1, 2026 | $1,350.00 |
| Jun 3, 2026 | $168.00 |
| Jun 6, 2026 | $27.00 |
| Jun 9, 2026 | $66.00 |
| Jun 12, 2026 | $105.00 |
| Jun 15, 2026 | $144.00 |
| Jun 18, 2026 | $183.00 |
| Jun 21, 2026 | $42.00 |
| Jun 24, 2026 | $81.00 |
| Jun 27, 2026 | $120.00 |
| Jun 30, 2026 | $159.00 |
| Jul 1, 2026 | $1,350.00 |
| Jul 3, 2026 | $187.00 |
| Jul 6, 2026 | $46.00 |
| Jul 9, 2026 | $85.00 |
| Jul 12, 2026 | $124.00 |
| Jul 15, 2026 | $163.00 |
| Jul 18, 2026 | $22.00 |
| Jul 21, 2026 | $61.00 |
| Jul 24, 2026 | $100.00 |
| Jul 27, 2026 | $139.00 |
| Jul 30, 2026 | $178.00 |
| Aug 1, 2026 | $1,350.00 |
| Aug 3, 2026 | $26.00 |
| Aug 6, 2026 | $65.00 |
| Aug 9, 2026 | $104.00 |
| Aug 12, 2026 | $143.00 |
| Aug 15, 2026 | $182.00 |
| Aug 18, 2026 | $41.00 |
| Aug 21, 2026 | $80.00 |
| Aug 24, 2026 | $119.00 |
| Aug 27, 2026 | $158.00 |
| Aug 30, 2026 | $17.00 |
| Sep 1, 2026 | $1,350.00 |
| Sep 3, 2026 | $45.00 |
| Sep 6, 2026 | $84.00 |
| Sep 9, 2026 | $123.00 |
| Sep 12, 2026 | $162.00 |
| Sep 15, 2026 | $21.00 |
| Sep 18, 2026 | $60.00 |
| Sep 21, 2026 | $99.00 |
| Sep 24, 2026 | $138.00 |
| Sep 27, 2026 | $177.00 |
| Sep 30, 2026 | $36.00 |
| Oct 1, 2026 | $1,350.00 |
| Oct 3, 2026 | $64.00 |
| Oct 6, 2026 | $103.00 |
| Oct 9, 2026 | $142.00 |
| Oct 12, 2026 | $181.00 |
| Oct 15, 2026 | $40.00 |
| Oct 18, 2026 | $79.00 |
| Oct 21, 2026 | $118.00 |
| Oct 24, 2026 | $157.00 |
| Oct 27, 2026 | $16.00 |
| Oct 30, 2026 | $55.00 |
| Nov 1, 2026 | $1,350.00 |
| Nov 3, 2026 | $83.00 |
| Nov 6, 2026 | $122.00 |
| Nov 9, 2026 | $161.00 |
| Nov 12, 2026 | $20.00 |
| Nov 15, 2026 | $59.00 |
| Nov 18, 2026 | $98.00 |
| Nov 21, 2026 | $137.00 |
| Nov 24, 2026 | $176.00 |
| Nov 27, 2026 | $35.00 |
| Nov 30, 2026 | $74.00 |
| Dec 1, 2026 | $1,350.00 |
| Dec 3, 2026 | $102.00 |
| Dec 6, 2026 | $141.00 |
| Dec 9, 2026 | $180.00 |
| Dec 12, 2026 | $39.00 |
| Dec 15, 2026 | $78.00 |
| Dec 18, 2026 | $117.00 |
| Dec 21, 2026 | $156.00 |
| Dec 24, 2026 | $15.00 |
| Dec 27, 2026 | $54.00 |
| Dec 30, 2026 | $93.00 |
- Keep Outflow/Inflow and year controls beside the chart.
- Dim days outside the selection and provide a way to clear it.
- Support arrow keys, Enter or Space to select, and Escape to clear.
- Keep currency, exact values and a readable data alternative available.
Source: CalendarHeatmap.tsx and calendarActivity.ts. This preview changes no account data.
Additional UI Primitives
The remaining shared UI primitives, rendered with local sample actions. Existing buttons, inputs, dialogs, tables and other core controls are shown in their sections above. Utilities and every subcomponent export are also listed in the inventory.
AspectRatio
Breadcrumb
Carousel
Collapsible
Command
ContextMenu
Right-click for sample actionsDrawer
DropdownMenu
Form
HoverCard
InputOTP
Control preview only; no authentication request.
Menubar
NavigationMenu
Popover
RadioGroup
Resizable
ScrollArea
Separator
Sample section one
Sample section two
Sidebar
Presentation primitives. The complete sidebar provider and shell are included as source references.
Slider
Sample: 60%
Toast / Toaster
The app's existing toast provider renders this notification.
Toggle
ToggleGroup
Tooltip
No sample action yet.
Custom Product Elements
The actual reusable pickers, money display, badges and loading states. Tags, amounts and callbacks are fictional and local. No account updates are sent.
Category and merchant elements
Selected: Groceries
Date and month pickers
Tag pickers and bulk assignment
Tag filter: All sample tags
Search, copying and detail rows
- Sample reference
- SAMPLE-001
- Search value
- Empty
Animated money
Transaction helpers
Empty state and collapse toggle
Sample activity
No sample activity
The real shared empty-state element.
All loading skeletons
Local examples only.
Chart Component Gallery
The chart types missing from the first reference page. Every dataset is fictional. Shared tooltip and value-label primitives render inside the charts.
Donut, bubble and chart type toggle
Groceries: $60.00 · Dining: $40.00
Grouped bars
Sample income and expense · USD · January–March
Horizontal bars
Select a sample category.
Weight ring and weight bar
Category names and percentages accompany the colors.
Downloads
Export the actual source and tokens used by this app. The bundle is JSON containing the files below; it is a reference kit, not a standalone app.
Core Tailwind mapping
For every token, including navigation and landing colors, use the complete configuration download.
// tailwind.config.ts -> theme.extend
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))" },
secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))" },
destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))" },
muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))" },
accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))" },
card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))" },
chart: {
green: "hsl(var(--chart-green))", red: "hsl(var(--chart-red))", blue: "hsl(var(--chart-blue))",
purple: "hsl(var(--chart-purple))", orange: "hsl(var(--chart-orange))", yellow: "hsl(var(--chart-yellow))",
},
series: {
income: "hsl(var(--series-income))", expense: "hsl(var(--series-expense))", magnitude: "hsl(var(--series-magnitude))",
},
},
borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)" },
fontFamily: { sans: ["Geist Sans", "system-ui", "-apple-system", "sans-serif"] },
Component Inventory
Every production component file and colocated helper is included, across all subfolders. Inspect source here or download it without opening GitHub. Account-dependent components are source references; live samples use fictional data.
137 of 137 component source files. All 137 are included in the complete download.
src/components/AppSidebar.tsx
Exports: AppSidebar
src/components/CommandPalette.tsx
Exports: CommandPalette
src/components/ErrorBoundary.tsx
Exports: ErrorBoundary
src/components/Layout.tsx
Exports: Layout
src/components/NavLink.tsx
Exports: NavLink
src/components/PageTransition.tsx
Exports: PageTransition
src/components/ScrollToTop.tsx
Exports: ScrollToTop
src/components/SettingsLayout.tsx
Exports: SettingsLayout
src/components/TransactionDetail.tsx
Exports: TransactionDetail, allCategories
src/components/accounts/AccountDialog.tsx
Exports: AccountDialog
src/components/accounts/AccountNotes.tsx
Exports: AccountNotes
src/components/accounts/AccountTransactions.tsx
Exports: AccountTransactions
src/components/accounts/AccountsView.tsx
Exports: AccountsScope, AccountsView
src/components/accounts/accountTints.ts
Exports: ACCOUNT_TINTS
src/components/analytics/CashflowChart.tsx
Exports: CashflowChart
src/components/analytics/SpendByCategoryChart.tsx
Exports: CategoryDatum, SpendByCategoryChart, SpendByCategoryTable
src/components/analytics/cashflow-data.ts
Exports: CashflowPoint, buildCashflow
src/components/auth/GoogleSignIn.tsx
Exports: GoogleSignIn, prefetchGoogleSignIn
src/components/brand/Logo.tsx
Exports: Logo, LogoMark, LogoTone, faviconSvg, logoSvg
src/components/brand/PublicFooter.tsx
Exports: PublicFooter, useRootPalette
src/components/charts/BubbleChart.tsx
Exports: BubbleChart
src/components/charts/CalendarHeatmap.tsx
Exports: CalendarHeatmap
src/components/charts/ChartTooltip.tsx
Exports: ChartTooltip, TooltipRow
src/components/charts/ChartTypeToggle.tsx
Exports: ChartTypeToggle
src/components/charts/DonutChart.tsx
Exports: DonutBreakdownPart, DonutChart, DonutSlice
src/components/charts/GroupedBarChart.tsx
Exports: BarSeries, GroupedBarChart
src/components/charts/HorizontalBarChart.tsx
Exports: HorizontalBarChart
src/components/charts/SegmentedControl.tsx
Exports: SegmentedControl
src/components/charts/TimeSeriesChart.tsx
Exports: TimePoint, TimeSeriesChart
src/components/charts/WeightRing.tsx
Exports: WeightRing
src/components/commandPaletteConfig.ts
Exports: OPEN_PALETTE_EVENT, PAGES
src/components/dashboard/BalanceChart.tsx
Exports: BalanceChart
src/components/dashboard/CashflowSankeyChart.tsx
Exports: CashflowSankeyChart
src/components/dashboard/CollapseToggle.tsx
Exports: CollapseToggle
src/components/dashboard/ForecastWidget.tsx
Exports: ForecastWidget
src/components/dashboard/OutflowsWidget.tsx
Exports: OutflowsWidget
src/components/dashboard/RecentTransactions.tsx
Exports: RecentTransactions
src/components/dashboard/StatCard.tsx
Exports: StatCard
src/components/dashboard/UpcomingList.tsx
Exports: UpcomingList
src/components/dashboard/WeightBar.tsx
Exports: WeightBar
src/components/dashboard/shareColors.ts
Exports: SHARE_COLORS, shareColor
src/components/elements/AnimatedMoney.tsx
Exports: AnimatedMoney
src/components/elements/BulkTagPicker.tsx
Exports: BulkTagPicker
src/components/elements/CategoryIcon.tsx
Exports: CategoryBadge, CategoryIcon, MerchantAvatar
src/components/elements/CategoryPicker.tsx
Exports: ALL_CATEGORIES, CategoryPicker
src/components/elements/CopyButton.tsx
Exports: CopyButton
src/components/elements/DatePicker.tsx
Exports: DatePicker
src/components/elements/DetailRow.tsx
Exports: DetailRow
src/components/elements/EmptyState.tsx
Exports: EmptyState
src/components/elements/MonthPicker.tsx
Exports: MonthPicker
src/components/elements/SearchInput.tsx
Exports: SearchInput
src/components/elements/SplitEditor.tsx
Exports: SplitEditor
src/components/elements/TagFilterPicker.tsx
Exports: TagFilterPicker
src/components/elements/TagPicker.tsx
Exports: TagPicker
src/components/elements/categoryIcons.ts
Exports: CATEGORY_ICON
src/components/enhancements/CategoryTools.tsx
Exports: CategoryTools, CustomCategory, RulePreview
src/components/enhancements/CurrencyTools.tsx
Exports: CURRENCIES, CurrencyReport, CurrencyTools, ReconciliationTool, selectClass, useAccountCurrencies
src/components/enhancements/PlanningTools.tsx
Exports: PlanningTools
src/components/enhancements/SecurityTools.tsx
Exports: SecurityTools
src/components/enhancements/SyncTools.tsx
Exports: SyncTools
src/components/enhancements/shared.tsx
Exports: QueryError, ToolCard, useToolAction
src/components/import/ImportDialog.tsx
Exports: ImportDialog
src/components/investments/AccountMenu.tsx
Exports: AccountMenu
src/components/investments/AddInvestmentAccountButton.tsx
Exports: AddInvestmentAccountButton
src/components/investments/AddInvestmentDialog.tsx
Exports: AddInvestmentDialog
src/components/investments/AllocationPanel.tsx
Exports: AllocationPanel
src/components/investments/ConnectedAccountsList.tsx
Exports: ConnectedAccountRow, ConnectedAccountsList
src/components/investments/EditHoldingDialog.tsx
Exports: EditHoldingDialog
src/components/investments/ExposurePanel.tsx
Exports: ExposurePanel
src/components/investments/GoalsPanel.tsx
Exports: GoalsPanel
src/components/investments/HoldingChart.tsx
Exports: HoldingChart
src/components/investments/PortfolioAllocation.tsx
Exports: PortfolioAllocation
src/components/investments/PortfolioValueChart.tsx
Exports: PortfolioValueChart
src/components/investments/SourceCard.tsx
Exports: SourceCard
src/components/investments/TopMovers.tsx
Exports: TopMovers
src/components/kite/KiteReconnectDialog.tsx
Exports: KiteReconnectDialog
src/components/landing/AboutAndTrust.tsx
Exports: AboutAndTrust
src/components/plaid/BankReconnectButton.tsx
Exports: BankReconnectButton
src/components/plaid/ConnectBankButton.tsx
Exports: ConnectBankButton
src/components/plaid/PlaidLinkSession.tsx
Exports: PlaidLinkSession
src/components/skeletons/LoadingSkeletons.tsx
Exports: ChartSkeleton, DashboardSkeleton, PageSkeleton, StatCardSkeleton, TransactionRowSkeleton
src/components/todos/TodoDetailSheet.tsx
Exports: TodoDetailSheet
src/components/transactions/AccountBalanceChart.tsx
Exports: AccountBalanceChart
src/components/transactions/AddTransactionDialog.tsx
Exports: AddTransactionDialog
src/components/transactions/DuplicateBadge.tsx
Exports: DuplicateBadge
src/components/transactions/SplitBadge.tsx
Exports: SplitBadge
src/components/transactions/TransactionsActivityChart.tsx
Exports: TransactionsActivityChart
src/components/transactions/TransactionsBalanceChart.tsx
Exports: TransactionsBalanceChart
src/components/transactions/TransferBadge.tsx
Exports: TransferBadge
src/components/ui/accordion.tsx
Exports: Accordion, AccordionContent, AccordionItem, AccordionTrigger
src/components/ui/alert-dialog.tsx
Exports: AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger
src/components/ui/alert.tsx
Exports: Alert, AlertDescription, AlertTitle
src/components/ui/aspect-ratio.tsx
Exports: AspectRatio
src/components/ui/avatar.tsx
Exports: Avatar, AvatarFallback, AvatarImage
src/components/ui/badge.tsx
Exports: Badge, BadgeProps, badgeVariants
src/components/ui/breadcrumb.tsx
Exports: Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator
src/components/ui/button.tsx
Exports: Button, ButtonProps, buttonVariants
src/components/ui/calendar.tsx
Exports: Calendar, CalendarProps
src/components/ui/card.tsx
Exports: Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle
src/components/ui/carousel.tsx
Exports: Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious
src/components/ui/checkbox.tsx
Exports: Checkbox
src/components/ui/collapsible.tsx
Exports: Collapsible, CollapsibleContent, CollapsibleTrigger
src/components/ui/command.tsx
Exports: Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut
src/components/ui/context-menu.tsx
Exports: ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger
src/components/ui/dialog.tsx
Exports: Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger
src/components/ui/drawer.tsx
Exports: Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger
src/components/ui/dropdown-menu.tsx
Exports: DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger
src/components/ui/form.tsx
Exports: Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField
src/components/ui/hover-card.tsx
Exports: HoverCard, HoverCardContent, HoverCardTrigger
src/components/ui/input-otp.tsx
Exports: InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot
src/components/ui/input.tsx
Exports: Input
src/components/ui/label.tsx
Exports: Label
src/components/ui/menubar.tsx
Exports: Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger
src/components/ui/navigation-menu.tsx
Exports: NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle
src/components/ui/pagination.tsx
Exports: Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious
src/components/ui/popover.tsx
Exports: Popover, PopoverContent, PopoverTrigger
src/components/ui/progress.tsx
Exports: Progress
src/components/ui/radio-group.tsx
Exports: RadioGroup, RadioGroupItem
src/components/ui/resizable.tsx
Exports: ResizableHandle, ResizablePanel, ResizablePanelGroup
src/components/ui/scroll-area.tsx
Exports: ScrollArea, ScrollBar
src/components/ui/select.tsx
Exports: Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue
src/components/ui/separator.tsx
Exports: Separator
src/components/ui/sheet.tsx
Exports: Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger
src/components/ui/sidebar.tsx
Exports: Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar
src/components/ui/skeleton.tsx
Exports: Skeleton
src/components/ui/slider.tsx
Exports: Slider
src/components/ui/sonner.tsx
Exports: Toaster, toast
src/components/ui/switch.tsx
Exports: Switch
src/components/ui/table.tsx
Exports: Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow
src/components/ui/tabs.tsx
Exports: Tabs, TabsContent, TabsList, TabsTrigger
src/components/ui/textarea.tsx
Exports: Textarea, TextareaProps
src/components/ui/toast.tsx
Exports: Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport
src/components/ui/toaster.tsx
Exports: Toaster
src/components/ui/toggle-group.tsx
Exports: ToggleGroup, ToggleGroupItem
src/components/ui/toggle.tsx
Exports: Toggle, toggleVariants
src/components/ui/tooltip.tsx
Exports: Tooltip, TooltipContent, TooltipProvider, TooltipTrigger
src/components/ui/use-toast.ts
Exports: toast, useToast
Preview coverage
The sections above show core controls, charts and custom elements. Product shells, dialogs and financial tools that rely on account providers are documented as source references to keep this public page independent of account data.
18 source folders are covered, including every root-level app component.