# 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](https://khmys.com/branding/guide.md) or the [complete JSON kit](https://khmys.com/branding/kit.json). Both work without JavaScript or a login.

Geist Sans Tailwind CSS shadcn/ui · Radix Lucide icons visx charts

Guide

## How to Use This Kit

pages/branding/resources.ts · BRAND-GUIDE.md download

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

**This is a presentation-layer pass, never a rewrite.** Data fetching, API calls, routing, auth, business logic: none of that should change. If a component's markup and classes change but nothing it does changes, you're doing it right.

### 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.
```

Foundations

## Logo & Mark

components/brand/Logo.tsx

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.

Public · dark

Public · light

In-app · follows theme

Footer · teal on black

### Compact k

Use only for square browser icons and avatars. Use the full wordmark in page headers and navigation.

16px

24px

32px

48px

64px

  View code

### 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.

mono

inverse

### 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

index.css · tailwind.config.ts

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

--background #FBFAF9

foreground

Default text and the strongest ink

--foreground #1C1917

card

Raised surfaces: cards, popovers, sheets

--card #FFFFFF

primary

The brand action colour: buttons, links, focus, selection

--primary #29A397

primary-foreground

Text and icons sitting on primary

--primary-foreground #FFFFFF

secondary

Quiet filled surfaces: secondary buttons, tracks

--secondary #F1F0EE

muted

Recessed fills: skeletons, hovered rows, segmented tracks

--muted #F6F5F4

muted-foreground

Secondary text, captions, axis labels, placeholders

--muted-foreground #78716D

accent

Hover and active fill for menu items and ghost buttons

--accent #F1F0EE

destructive

Delete, remove and irreversible actions

--destructive #EF4343

border

Hairlines and card outlines

--border #E8E6E3

input

Form control outlines

--input #E8E6E3

ring

Keyboard focus ring

--ring #29A397

### Navigation

sidebar

Navigation rail surface

--sidebar-background #F8F8F6

sidebar-foreground

Navigation text

--sidebar-foreground #1C1917

sidebar-accent

Active and hovered nav item

--sidebar-accent #F1F0EE

sidebar-border

Rail edge and group dividers

--sidebar-border #EDEBE9

### Charts and series

chart-blue

Categorical 1: also the default tag colour

--chart-blue #245EFF

chart-green

Categorical 2: money in, positive change, success

--chart-green #21C45D

chart-purple

Categorical 3

--chart-purple #7C3BED

chart-orange

Categorical 4: warnings that are not yet errors

--chart-orange #FB923C

chart-yellow

Categorical 5: caution, bills

--chart-yellow #FACC14

chart-red

Categorical 6: money out, over budget, errors

--chart-red #EF4343

series-income

Income series in grouped bars and cash-flow charts

--series-income #21C45D

series-expense

Expense series; always paired with a legend and value labels

--series-expense #EF4343

series-magnitude

Single-hue ramp for magnitude (spend by category)

--series-magnitude #245EFF

### Public pages

Dark

land-bg

Public page background

--l-bg #0A0A0A

land-fg

Public page text

--l-fg #FAFAFA

land-muted

Supporting copy

--l-muted #9E9E9E

land-line

Hairlines

--l-line #262626

land-card

Raised panels

--l-card #141414

land-card2

Nested panels

--l-card2 #1C1C1C

land-accent

Mint accent: eyebrow labels, the mark, key figures

--l-accent #75C7B7

land-invert

Primary pill button fill

--l-invert #FFFFFF

land-paper

Closing section, inverted paper surface

--l-paper #F5F4EF

Light

land-bg

Public page background

--l-bg #F7F6F2

land-fg

Public page text

--l-fg #0F0F0F

land-muted

Supporting copy

--l-muted #616161

land-line

Hairlines

--l-line #DFDCD8

land-card

Raised panels

--l-card #FFFFFF

land-card2

Nested panels

--l-card2 #F1EFEA

land-accent

Mint accent: eyebrow labels, the mark, key figures

--l-accent #1D7C6F

land-invert

Primary pill button fill

--l-invert #0F0F0F

land-paper

Closing section, inverted paper surface

--l-paper #0D0D0D

### 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

index.css · @fontsource/geist-sans

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

hooks/useDocumentTitle.ts · index.html

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

tailwind.config.ts

Build on the existing Tailwind spacing scale. Let alignment and borders carry hierarchy before adding shadows.

4px

8px

12px

16px

24px

32px

48px

| 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

tailwind.config.ts · index.css

Motion confirms an action or reveals a layer. Respect reduced motion and keep financial values readable during updates.

Replay entrance

A subtle entrance

| 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-react

Lucide icons use a consistent outline. Pair unfamiliar symbols with labels, and give icon-only controls an accessible name.

Wallet

Landmark

CreditCard

Search

Bell

Settings

Tag

ShieldCheck

EyeOff

Check

ArrowDownLeft

ArrowUpRight

```
<Button variant="ghost" size="icon" aria-label="Search transactions">
  <Search size={18} strokeWidth={1.5} aria-hidden />
</Button>
```

## Money & Numbers

lib/format.ts · hooks/useMoney.ts

Use the shared formatters in product screens. Keep signs, currency, dates and privacy masking consistent. All values here are fictional.

Hide sample amounts

| 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 |

**Keep currencies separate.** Never sum USD and INR directly. Show a currency scope or an explicitly converted amount with its rate and date. Preview masking on this page does not change your privacy preference.

## Data Visualization

components/charts/TimeSeriesChart.tsx · CalendarHeatmap.tsx

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.

Sample USD balances · January–June 2026

Explore the [interactive calendar heatmap](https://khmys.com/branding#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.

Layout Patterns

## App Shell

components/Layout.tsx · AppSidebar.tsx

Retain the existing sidebar, header and content hierarchy. This is a miniature illustration with sample content; the product shell stays unchanged.

Overview

Transactions

Accounts

Search · Notifications · Profile

### Overview

A clear place for the month ahead.

### Sample cash balance

$4,380.00

USD · fictional

## Page Header

pages/Transactions.tsx

A title, one useful sentence and a primary action. Allow actions to wrap on small screens.

### Transactions

Review and organize your activity.

[Add sample transaction](https://khmys.com/branding#forms)

## Filter Bar

components/ui/input.tsx · table.tsx

Keep filters close to the result set and make clearing them easy.

Clear

| Description | Category | Amount |
| --- | --- | --- |
| Sample payrollOct 1, 2026 | Income | +$4,250.00 |
| Sample grocery shopOct 2, 2026 | Groceries | -$82.50 |
| Sample coffeeOct 3, 2026 | Dining | -$6.25 |

## Stat Tiles

components/dashboard/StatCard.tsx

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

+8%

$1,550.00

Sample vs previous month

## Ledger Table

components/ui/table.tsx

Descriptions lead, amounts align right, and dates provide context. The table scrolls horizontally when space is tight.

| Description | Category | Amount |
| --- | --- | --- |
| Sample payrollOct 1, 2026 | Income | +$4,250.00 |
| Sample grocery shopOct 2, 2026 | Groceries | -$82.50 |
| Sample coffeeOct 3, 2026 | Dining | -$6.25 |

## Empty State

Distinguish no data from no search results and from loading errors. Offer one relevant next step.

### No transactions yet

Connect your bank to see your activity.

[Explore sample controls](https://khmys.com/branding#pickers)

## Review Queue

Make review status explicit. Confirming a sample below only changes its local preview.

Sample grocery shop

Groceries · −$82.50 · USD

Mark sample reviewed

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

components/ui/sheet.tsx

Inspect details without losing the list. Sheets need a title, a description and a reachable close action.

Open sample detail

## Public Pages

pages/Landing.tsx · pages/Demo.tsx

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 demo](https://demo.khmys.com/)

Components

## Buttons

components/ui/button.tsx

One clear primary action per surface. Destructive actions explain their impact and ask for confirmation in product flows.

defaultsecondaryoutlineghostlinkdestructiveUnavailable

  View code

## Form Controls

components/ui/input.tsx · checkbox.tsx · switch.tsx

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.

Sample goal name

Up to 100 characters. Sample only.

Notes

Include in monthly review

Reminder

Save sample goal

Nothing is written to your account.

## Pickers & Filters

components/ui/select.tsx · calendar.tsx

Use explicit labels and an All option for filters. Keep calendar dates in local time.

### Account picker

### Calendar

October 2026

| Su | Mo | Tu | We | Th | Fr | Sa |
| --- | --- | --- | --- | --- | --- | --- |
| 27 | 28 | 29 | 30 | 1 | 2 | 3 |
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |

October 7, 2026

## Segmented Control

components/charts/SegmentedControl.tsx

Use for a short set of related views. Expose the selected option to assistive technology.

1 month3 months12 months

Selected: 3M

  View code

## Cards

components/ui/card.tsx

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

components/ui/badge.tsx

Status labels stay short. Text must carry meaning even when color is not visible.

Connected

Sample data

Transfer

Needs attention

Reviewed

## Alerts

components/ui/alert.tsx

Explain the situation and a next step without exposing internal errors or secrets.

##### Sample data

These examples do not read or update your accounts.

##### Sample connection needs attention

Reconnect this account to resume updates. Existing data is still available.

## Tables

components/ui/table.tsx

Use proper headers, a caption and right-aligned numeric cells. Large tables need filtering and pagination.

| Description | Category | Amount |
| --- | --- | --- |
| Sample payrollOct 1, 2026 | Income | +$4,250.00 |
| Sample grocery shopOct 2, 2026 | Groceries | -$82.50 |
| Sample coffeeOct 3, 2026 | Dining | -$6.25 |

## Pagination

components/ui/pagination.tsx

Use buttons for local state changes. Disable the previous and next controls at the boundaries.

Sample page 1 of 3

## Navigation

components/ui/tabs.tsx · AppSidebar.tsx

Routes are links; tabs switch content inside a page. Keep selected state and keyboard focus visible.

Money inMoney out

Sample income: $4,250.00 USD

## Overlays

components/ui/dialog.tsx · alert-dialog.tsx

Use dialogs for focused tasks and alert dialogs for confirmations. Escape closes the layer and focus returns to the trigger.

Open sample dialogPreview delete confirmation

No sample rule deleted.

## Toast

components/ui/sonner.tsx

Short feedback for completed actions. Keep validation beside inputs and important errors visible on the page.

Preview success toastPreview error toast

## Avatars

components/ui/avatar.tsx

Use initials as a fallback. These synthetic profiles make no requests to external image services.

WN  AB  SK

## Accordion

components/ui/accordion.tsx

Keep optional detail behind a clearly named disclosure. Do not hide required instructions or critical errors.

### Where does this sample data come from?

### Will previewing themes change my settings?

## Progress

components/ui/progress.tsx

Always show the number and what it measures. Clamp the visual indicator at 100% and explain any excess separately.

Sample goal 60%

DecreaseIncrease

## Skeleton

components/ui/skeleton.tsx

Use a stable placeholder while loading. An empty state or error is a separate state.

Loading sample content

## Charts

components/charts/TimeSeriesChart.tsx

Shared line and bar renderers with keyboard tooltips. The table gives the same fictional data without relying on a chart.

LineBar

| 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

components/charts/CalendarHeatmap.tsx

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.

OutflowInflow

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.

Jan     Feb    Mar    Apr    May     Jun    Jul    Aug     Sep    Oct     Nov    Dec

Mon  Wed  Fri

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 |

Fictional daily cash flow · USD · 2025–2026

- 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](https://khmys.com/branding/files/src/components/charts/CalendarHeatmap.tsx) and [calendarActivity.ts](https://khmys.com/branding/files/src/lib/calendarActivity.ts). This preview changes no account data.

## Additional UI Primitives

components/ui/**

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

16:9 sample surface

### Breadcrumb

### Carousel

Sample panel 1

Sample panel 2

Sample panel 3

Previous slide Next slide

### Collapsible

Toggle sample details

### Command

No sample action found.

Sample actions

Review sample

Export sample

### ContextMenu

Right-click for sample actions

### Drawer

Open sample bottom drawer

### DropdownMenu

Sample dropdown menu

### Form

Validated sample title

React Hook Form example; local state only.

Submit local form

### HoverCard

Hover sample account

### InputOTP

Control preview only; no authentication request.

### Menubar

Sample file

### NavigationMenu

### Popover

Open sample popover

### RadioGroup

monthlyweekly

### Resizable

Sample list

Sample details

### ScrollArea

Sample row 1

Sample row 2

Sample row 3

Sample row 4

Sample row 5

Sample row 6

Sample row 7

Sample row 8

Sample row 9

Sample row 10

### Separator

Sample section one

Sample section two

### Sidebar

Sample sidebar group

-

-

Presentation primitives. The complete sidebar provider and shell are included as source references.

### Slider

Sample: 60%

### Toast / Toaster

Preview Radix toast

The app's existing toast provider renders this notification.

### Toggle

Compact view

### ToggleGroup

ListGrid

### Tooltip

Sample tooltip trigger

No sample action yet.

## Custom Product Elements

components/elements · transactions · skeletons

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

Groceries

Groceries  S

Selected: Groceries

### Date and month pickers

Oct 7, 2026  October 2026

### Tag pickers and bulk assignment

Add tags

All Tags  Tag

Tag filter: All sample tags

### Search, copying and detail rows

Sample referenceSAMPLE-001

Search valueEmpty

### Animated money

$1,250.00  Change sample amount

### Transaction helpers

Transfer Duplicate? Split · 2 Open sample split editor

### 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

components/charts · dashboard/WeightBar.tsx

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

Sample USD $100.00

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

Sample groceries · 60%

Category names and percentages accompany the colors.

Resources

## Downloads

index.css · tailwind.config.ts · components/brand/Logo.tsx

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.

[Download complete reference kit](https://khmys.com/branding/kit.json)

tokens.css

App and public theme tokens

tokens.json

Machine-readable theme values

index.css

Complete stylesheet and overrides

tailwind.config.ts

Actual Tailwind configuration

Logo.tsx

Shared React wordmark and compact k

khmys-mark-app.svg

Teal app wordmark for a light surface

khmys-mark-public-dark.svg

White public wordmark for a dark surface

khmys-mark-public-light.svg

Public wordmark for a light surface

khmys-mark-mono.svg

Monochrome wordmark for a light surface

BRAND-GUIDE.md

Adoption, copy and accessibility guidance

### 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

src/components/**

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.

Clear inventory filters

- src/components/AppSidebar.tsx

  Exports: AppSidebar

  Source reference

  View source

- src/components/CommandPalette.tsx

  Exports: CommandPalette

  Source reference

  View source

- src/components/ErrorBoundary.tsx

  Exports: ErrorBoundary

  Source reference

  View source

- src/components/Layout.tsx

  Exports: Layout

  Source reference

  View source

- src/components/NavLink.tsx

  Exports: NavLink

  Source reference

  View source

- src/components/PageTransition.tsx

  Exports: PageTransition

  Source reference

  View source

- src/components/ScrollToTop.tsx

  Exports: ScrollToTop

  Source reference

  View source

- src/components/SettingsLayout.tsx

  Exports: SettingsLayout

  Source reference

  View source

- src/components/TransactionDetail.tsx

  Exports: TransactionDetail, allCategories

  Source reference

  View source

- src/components/accounts/AccountDialog.tsx

  Exports: AccountDialog

  Source reference

  View source

- src/components/accounts/AccountNotes.tsx

  Exports: AccountNotes

  Source reference

  View source

- src/components/accounts/AccountTransactions.tsx

  Exports: AccountTransactions

  Source reference

  View source

- src/components/accounts/AccountsView.tsx

  Exports: AccountsScope, AccountsView

  Source reference

  View source

- src/components/accounts/accountTints.ts

  Exports: ACCOUNT_TINTS

  Source reference

  View source

- src/components/analytics/CashflowChart.tsx

  Exports: CashflowChart

  Source reference

  View source

- src/components/analytics/SpendByCategoryChart.tsx

  Exports: CategoryDatum, SpendByCategoryChart, SpendByCategoryTable

  Source reference

  View source

- src/components/analytics/cashflow-data.ts

  Exports: CashflowPoint, buildCashflow

  Source reference

  View source

- src/components/auth/GoogleSignIn.tsx

  Exports: GoogleSignIn, prefetchGoogleSignIn

  Source reference

  View source

- src/components/brand/Logo.tsx

  Exports: Logo, LogoMark, LogoTone, faviconSvg, logoSvg

  Source reference

  View source

- src/components/brand/PublicFooter.tsx

  Exports: PublicFooter, useRootPalette

  Source reference

  View source

- src/components/charts/BubbleChart.tsx

  Exports: BubbleChart

  Source reference

  View source

- src/components/charts/CalendarHeatmap.tsx

  Exports: CalendarHeatmap

  Source reference

  View source

- src/components/charts/ChartTooltip.tsx

  Exports: ChartTooltip, TooltipRow

  Source reference

  View source

- src/components/charts/ChartTypeToggle.tsx

  Exports: ChartTypeToggle

  Source reference

  View source

- src/components/charts/DonutChart.tsx

  Exports: DonutBreakdownPart, DonutChart, DonutSlice

  Source reference

  View source

- src/components/charts/GroupedBarChart.tsx

  Exports: BarSeries, GroupedBarChart

  Source reference

  View source

- src/components/charts/HorizontalBarChart.tsx

  Exports: HorizontalBarChart

  Source reference

  View source

- src/components/charts/SegmentedControl.tsx

  Exports: SegmentedControl

  Source reference

  View source

- src/components/charts/TimeSeriesChart.tsx

  Exports: TimePoint, TimeSeriesChart

  Source reference

  View source

- src/components/charts/WeightRing.tsx

  Exports: WeightRing

  Source reference

  View source

- src/components/commandPaletteConfig.ts

  Exports: OPEN_PALETTE_EVENT, PAGES

  Source reference

  View source

- src/components/dashboard/BalanceChart.tsx

  Exports: BalanceChart

  Source reference

  View source

- src/components/dashboard/CashflowSankeyChart.tsx

  Exports: CashflowSankeyChart

  Source reference

  View source

- src/components/dashboard/CollapseToggle.tsx

  Exports: CollapseToggle

  Source reference

  View source

- src/components/dashboard/ForecastWidget.tsx

  Exports: ForecastWidget

  Source reference

  View source

- src/components/dashboard/OutflowsWidget.tsx

  Exports: OutflowsWidget

  Source reference

  View source

- src/components/dashboard/RecentTransactions.tsx

  Exports: RecentTransactions

  Source reference

  View source

- src/components/dashboard/StatCard.tsx

  Exports: StatCard

  Source reference

  View source

- src/components/dashboard/UpcomingList.tsx

  Exports: UpcomingList

  Source reference

  View source

- src/components/dashboard/WeightBar.tsx

  Exports: WeightBar

  Source reference

  View source

- src/components/dashboard/shareColors.ts

  Exports: SHARE_COLORS, shareColor

  Source reference

  View source

- src/components/elements/AnimatedMoney.tsx

  Exports: AnimatedMoney

  Source reference

  View source

- src/components/elements/BulkTagPicker.tsx

  Exports: BulkTagPicker

  Source reference

  View source

- src/components/elements/CategoryIcon.tsx

  Exports: CategoryBadge, CategoryIcon, MerchantAvatar

  Source reference

  View source

- src/components/elements/CategoryPicker.tsx

  Exports: ALL_CATEGORIES, CategoryPicker

  Source reference

  View source

- src/components/elements/CopyButton.tsx

  Exports: CopyButton

  Source reference

  View source

- src/components/elements/DatePicker.tsx

  Exports: DatePicker

  Source reference

  View source

- src/components/elements/DetailRow.tsx

  Exports: DetailRow

  Source reference

  View source

- src/components/elements/EmptyState.tsx

  Exports: EmptyState

  Source reference

  View source

- src/components/elements/MonthPicker.tsx

  Exports: MonthPicker

  Source reference

  View source

- src/components/elements/SearchInput.tsx

  Exports: SearchInput

  Source reference

  View source

- src/components/elements/SplitEditor.tsx

  Exports: SplitEditor

  Source reference

  View source

- src/components/elements/TagFilterPicker.tsx

  Exports: TagFilterPicker

  Source reference

  View source

- src/components/elements/TagPicker.tsx

  Exports: TagPicker

  Source reference

  View source

- src/components/elements/categoryIcons.ts

  Exports: CATEGORY_ICON

  Source reference

  View source

- src/components/enhancements/CategoryTools.tsx

  Exports: CategoryTools, CustomCategory, RulePreview

  Source reference

  View source

- src/components/enhancements/CurrencyTools.tsx

  Exports: CURRENCIES, CurrencyReport, CurrencyTools, ReconciliationTool, selectClass, useAccountCurrencies

  Source reference

  View source

- src/components/enhancements/PlanningTools.tsx

  Exports: PlanningTools

  Source reference

  View source

- src/components/enhancements/SecurityTools.tsx

  Exports: SecurityTools

  Source reference

  View source

- src/components/enhancements/SyncTools.tsx

  Exports: SyncTools

  Source reference

  View source

- src/components/enhancements/shared.tsx

  Exports: QueryError, ToolCard, useToolAction

  Source reference

  View source

- src/components/import/ImportDialog.tsx

  Exports: ImportDialog

  Source reference

  View source

- src/components/investments/AccountMenu.tsx

  Exports: AccountMenu

  Source reference

  View source

- src/components/investments/AddInvestmentAccountButton.tsx

  Exports: AddInvestmentAccountButton

  Source reference

  View source

- src/components/investments/AddInvestmentDialog.tsx

  Exports: AddInvestmentDialog

  Source reference

  View source

- src/components/investments/AllocationPanel.tsx

  Exports: AllocationPanel

  Source reference

  View source

- src/components/investments/ConnectedAccountsList.tsx

  Exports: ConnectedAccountRow, ConnectedAccountsList

  Source reference

  View source

- src/components/investments/EditHoldingDialog.tsx

  Exports: EditHoldingDialog

  Source reference

  View source

- src/components/investments/ExposurePanel.tsx

  Exports: ExposurePanel

  Source reference

  View source

- src/components/investments/GoalsPanel.tsx

  Exports: GoalsPanel

  Source reference

  View source

- src/components/investments/HoldingChart.tsx

  Exports: HoldingChart

  Source reference

  View source

- src/components/investments/PortfolioAllocation.tsx

  Exports: PortfolioAllocation

  Source reference

  View source

- src/components/investments/PortfolioValueChart.tsx

  Exports: PortfolioValueChart

  Source reference

  View source

- src/components/investments/SourceCard.tsx

  Exports: SourceCard

  Source reference

  View source

- src/components/investments/TopMovers.tsx

  Exports: TopMovers

  Source reference

  View source

- src/components/kite/KiteReconnectDialog.tsx

  Exports: KiteReconnectDialog

  Source reference

  View source

- src/components/landing/AboutAndTrust.tsx

  Exports: AboutAndTrust

  Source reference

  View source

- src/components/plaid/BankReconnectButton.tsx

  Exports: BankReconnectButton

  Source reference

  View source

- src/components/plaid/ConnectBankButton.tsx

  Exports: ConnectBankButton

  Source reference

  View source

- src/components/plaid/PlaidLinkSession.tsx

  Exports: PlaidLinkSession

  Source reference

  View source

- src/components/skeletons/LoadingSkeletons.tsx

  Exports: ChartSkeleton, DashboardSkeleton, PageSkeleton, StatCardSkeleton, TransactionRowSkeleton

  Source reference

  View source

- src/components/todos/TodoDetailSheet.tsx

  Exports: TodoDetailSheet

  Source reference

  View source

- src/components/transactions/AccountBalanceChart.tsx

  Exports: AccountBalanceChart

  Source reference

  View source

- src/components/transactions/AddTransactionDialog.tsx

  Exports: AddTransactionDialog

  Source reference

  View source

- src/components/transactions/DuplicateBadge.tsx

  Exports: DuplicateBadge

  Source reference

  View source

- src/components/transactions/SplitBadge.tsx

  Exports: SplitBadge

  Source reference

  View source

- src/components/transactions/TransactionsActivityChart.tsx

  Exports: TransactionsActivityChart

  Source reference

  View source

- src/components/transactions/TransactionsBalanceChart.tsx

  Exports: TransactionsBalanceChart

  Source reference

  View source

- src/components/transactions/TransferBadge.tsx

  Exports: TransferBadge

  Source reference

  View source

- src/components/ui/accordion.tsx

  Exports: Accordion, AccordionContent, AccordionItem, AccordionTrigger

  Source reference

  View source

- src/components/ui/alert-dialog.tsx

  Exports: AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger

  Source reference

  View source

- src/components/ui/alert.tsx

  Exports: Alert, AlertDescription, AlertTitle

  Source reference

  View source

- src/components/ui/aspect-ratio.tsx

  Exports: AspectRatio

  Source reference

  View source

- src/components/ui/avatar.tsx

  Exports: Avatar, AvatarFallback, AvatarImage

  Source reference

  View source

- src/components/ui/badge.tsx

  Exports: Badge, BadgeProps, badgeVariants

  Source reference

  View source

- src/components/ui/breadcrumb.tsx

  Exports: Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator

  Source reference

  View source

- src/components/ui/button.tsx

  Exports: Button, ButtonProps, buttonVariants

  Source reference

  View source

- src/components/ui/calendar.tsx

  Exports: Calendar, CalendarProps

  Source reference

  View source

- src/components/ui/card.tsx

  Exports: Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle

  Source reference

  View source

- src/components/ui/carousel.tsx

  Exports: Carousel, CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious

  Source reference

  View source

- src/components/ui/checkbox.tsx

  Exports: Checkbox

  Source reference

  View source

- src/components/ui/collapsible.tsx

  Exports: Collapsible, CollapsibleContent, CollapsibleTrigger

  Source reference

  View source

- src/components/ui/command.tsx

  Exports: Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut

  Source reference

  View source

- src/components/ui/context-menu.tsx

  Exports: ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger

  Source reference

  View source

- src/components/ui/dialog.tsx

  Exports: Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger

  Source reference

  View source

- src/components/ui/drawer.tsx

  Exports: Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger

  Source reference

  View source

- src/components/ui/dropdown-menu.tsx

  Exports: DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger

  Source reference

  View source

- src/components/ui/form.tsx

  Exports: Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField

  Source reference

  View source

- src/components/ui/hover-card.tsx

  Exports: HoverCard, HoverCardContent, HoverCardTrigger

  Source reference

  View source

- src/components/ui/input-otp.tsx

  Exports: InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot

  Source reference

  View source

- src/components/ui/input.tsx

  Exports: Input

  Source reference

  View source

- src/components/ui/label.tsx

  Exports: Label

  Source reference

  View source

- src/components/ui/menubar.tsx

  Exports: Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger

  Source reference

  View source

- src/components/ui/navigation-menu.tsx

  Exports: NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle

  Source reference

  View source

- src/components/ui/pagination.tsx

  Exports: Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious

  Source reference

  View source

- src/components/ui/popover.tsx

  Exports: Popover, PopoverContent, PopoverTrigger

  Source reference

  View source

- src/components/ui/progress.tsx

  Exports: Progress

  Source reference

  View source

- src/components/ui/radio-group.tsx

  Exports: RadioGroup, RadioGroupItem

  Source reference

  View source

- src/components/ui/resizable.tsx

  Exports: ResizableHandle, ResizablePanel, ResizablePanelGroup

  Source reference

  View source

- src/components/ui/scroll-area.tsx

  Exports: ScrollArea, ScrollBar

  Source reference

  View source

- src/components/ui/select.tsx

  Exports: Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue

  Source reference

  View source

- src/components/ui/separator.tsx

  Exports: Separator

  Source reference

  View source

- src/components/ui/sheet.tsx

  Exports: Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger

  Source reference

  View source

- 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

  Source reference

  View source

- src/components/ui/skeleton.tsx

  Exports: Skeleton

  Source reference

  View source

- src/components/ui/slider.tsx

  Exports: Slider

  Source reference

  View source

- src/components/ui/sonner.tsx

  Exports: Toaster, toast

  Source reference

  View source

- src/components/ui/switch.tsx

  Exports: Switch

  Source reference

  View source

- src/components/ui/table.tsx

  Exports: Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow

  Source reference

  View source

- src/components/ui/tabs.tsx

  Exports: Tabs, TabsContent, TabsList, TabsTrigger

  Source reference

  View source

- src/components/ui/textarea.tsx

  Exports: Textarea, TextareaProps

  Source reference

  View source

- src/components/ui/toast.tsx

  Exports: Toast, ToastAction, ToastActionElement, ToastClose, ToastDescription, ToastProps, ToastProvider, ToastTitle, ToastViewport

  Source reference

  View source

- src/components/ui/toaster.tsx

  Exports: Toaster

  Source reference

  View source

- src/components/ui/toggle-group.tsx

  Exports: ToggleGroup, ToggleGroupItem

  Source reference

  View source

- src/components/ui/toggle.tsx

  Exports: Toggle, toggleVariants

  Source reference

  View source

- src/components/ui/tooltip.tsx

  Exports: Tooltip, TooltipContent, TooltipProvider, TooltipTrigger

  Source reference

  View source

- src/components/ui/use-toast.ts

  Exports: toast, useToast

  Source reference

  View source

### 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.