Spending by category
Where this month's money went.
The open source AI design system
Open source and fully themeable, built for AI products and coding agents.
178Components
327Semantic tokens
13Themes
5MCP tools
$0Cost
Components you don’t have to build
Typed, keyboard-ready and checked with axe. Every card below is live in your theme.
The money month
Payroll runs, due dates, and filings in one view.
July 2026
Financial performance
Compared to the month before.
$350KMRR+3.2%
$211KOpEx+12.8%
44.6%GPM-1.2%
$443KEBITDA+4.1%
New invoice
Bill a client in their own currency.
USD — US dollar
Recent activity
What happened over the past day.
- Danilo SousaApproved invoice #34619:41 am
- Zahra AmbessaUpdated client details for Acme Ltd8:20 am
- Jasper ErikssonCreated 4 invoicesYesterday
Ask about your money
Answers grounded in your own transactions.
New chat
Today
How much did I spend on dining in July?
July has five weekends, so compare against a weekly average rather than the June total.
query_transactions86 transactions scannedDone
$280 across nine visits, 12% less than June. Your cheapest week was the one you meal-prepped.
Overdue invoices
Nothing overdue
Every invoice is paid or inside its terms.
Documents
Statements are generated on the 1st of each month.
- June 2026PDF · 84 KB
- May 2026PDF · 87 KB
- April 2026PDF · 80 KB
Search
Find any transaction, client, or invoice.
Search transactions…⌘K
RecentAcme Ltd#3461
Install
178 components on 327 semantic tokens, one package.
npm install rift-dsQuarter close
Six weeks from closing the books to the filing.
Trading activity
One cell per trading day; darker means more trades.
Reconciling accounts
A background agent matching invoices to deposits.
Matching deposits
- Pull the July statementsCompleted
- Match invoices to deposits31 of 34 matchedIn progress
- Flag the rest for reviewNot started
Revenue
Monthly, in thousands.
Quick actions
Send moneySend
Request moneyRequest
Top up balanceTop up
More actionsMore
Start a conversation
Ask in plain language; pick the model behind it.
Invoice paid
You received $17,975.30Invoice #3463 settled. A receipt went to accounting@example.com.
Savings targets
Active goals across your accounts.
Retirement$420,000 target
House deposit$85,000 target
Payout schedule
When your cleared balance is sent to the bank.
WeeklyEvery Friday, balances over $10
MonthlyOn the 15th of each month
Email a receipt for each payout
Open positions
Fetching the latest prices
Where payments come from
Hover a city for the client and the invoice it settled.
- Head office
- Client
- Payment route
Portfolio value
Against the index, in thousands.
Payout coverage
Hover a city for the currency and how fast it settles.
Zoom outZoom in
Top holdings
By market value.
| Ticker | Shares | Value |
|---|---|---|
VGRO | 412 | $14,830 |
XEQT | 260 | $9,215 |
ZAG | 705 | $8,904 |
Team cards
Click the deck to flip through the virtual cards you've issued.
•••• 4021$2,000 monthly limit
Danilo Sousa
Card 1 of 3
Schedule a transfer
Pick the day the money should move.
August 2026
Notifications
Choose which alerts reach you.
Transaction alertsDeposits, withdrawals, and transfers
Security alertsLogin attempts and account changes
Market updatesDaily price summary
Agent hand-offs
The agent pauses before anything irreversible.
Send $2,500 to savings?
Waiting for your decisionThis transfer is larger than your usual amount.
July statement is ready
Nine categories over 86 transactions.
Invoices
This month, most recent first.
- #3461Acme Ltd$12,400.00Paid
- #3462Northwind$8,150.00Pending
- #3458Globex$21,090.00Overdue
- #3464Initech$3,600.00Draft
Payout threshold
The minimum balance before a payout is triggered.
Minimum payout$2,500
Invoice #3459
From issue to payment in eleven days.
- IssuedSent to Acme Ltd.
- ApprovedSigned off by their finance team.
- Paid$12,400.00 received.
Skip the blank page
Start from a template: a whole product screen, made from the same components, in your theme.
Make it entirely yours. Retune every colour, typeface, corner and control height, or start from an image or a DESIGN.md, and every component follows.
A new look in one line
Complete themes, light and dark.
<html data-brand="mono">Your agent knows the API
Real props and tokens over MCP, no key needed.
get_componentRunning
list_tokensNeeds approval
get_setupNeeds approval
Free, however you install it
MIT licensed, by npm, the shadcn CLI or a clone.
npm install rift-ds
npx shadcn@latest add https://rift-ds.com/r/button.json
git clone https://github.com/robritacca-dotcom/rift-dsCommon questions
A React design system on npm as rift-ds: 178 components, the semantic tokens they are styled from, theme presets, template screens and an AI chat you can drop into an app. Every page of this site is built from it.
No. Components are styled with plain CSS that reads the tokens, so there is no CSS framework to set up. React 19 and React DOM are the only required peers. Recharts is needed for the charts alone, and the AI chat brings a few optional packages of its own.
Run npm install rift-ds, import the token stylesheet once, then import components by name. To own the source instead, add any component from the shadcn registry. Get started has both paths.
Yes. A public MCP endpoint serves every component's props, the tokens and the install steps to any MCP client. npx rift-ds init adds agent skills that teach your agent the library, how to move an existing screen onto it, and how to audit styles against the tokens.
Yes, all of it. Every colour, radius, typeface, spacing step, shadow and duration is a token, and the components are styled from those tokens. Change a token and every component that uses it follows, in light and dark, with no component code touched.
The playground is the quick way in: move the sliders or drop in an image of your brand, then export the result as CSS. The 13 themes in the package are there to use as they are or to start from: import presets.css once, then each is one attribute, data-brand on the root element.
Both, from one token layer. Set data-theme="dark" on the root element and every semantic colour switches, in every theme.
Yes. The chat never talks to a model directly: it reads a stream of small events from your server, one JSON object per line. {"type":"delta","text":"…"} carries the reply as it is written, a status event shows what the agent is doing, and {"type":"done"} ends the turn.
To use OpenAI, Gemini, a local model or your own agent, write a route that calls it and turns each streamed chunk into a delta line, then point createFetchTransport at that route. You can also skip the server format and write a transport in the browser: one function that takes the conversation and yields the same events.
The packaged server half is built for Claude, so the quickest start is an Anthropic key and npx rift-ds init chat, which scaffolds the route and the mount. Add the chat lists every event the panel reads.
Yes. The package is MIT licensed, every component included. Use it in commercial and client projects with nothing to buy and no key to register.
React- TypeScript
Vite
Next.js- Recharts