Interface parts with weight, edges and light.
Bevel is a set of tactile React components built on Base UI and Tailwind. Add one with the shadcn CLI and the code is yours to change.
npx shadcn@latest add @bevel/walletPay with balance
Active$124.50
- Order total
- $86.40
- Left after payment
- $38.10
A billing screen, assembled
Every part works on its own. Together they make the screen most products need: pick a pack and pay, watch a turn's cost run, and read the history. All of it is live.
Credit purchase
17 Oct 2026, 14:02
- 50 credits
- $50.00
- Card fee
- $1.75
- Total
- $51.75
Credits never expire.
Credit ledger
| No. | Date | Entry | Amount | Balance | Status |
|---|---|---|---|---|---|
| Entry 0045 | 17 Oct | Credits bought | +$50.00 | $74.60 | Received |
| Entry 0044 | 16 Oct | Usage, 212 calls | -$18.40 | $24.60 | Auto |
| Entry 0043 | 14 Oct | Refund, case 118 | +$12.00 | $43.00 | Returned |
| Entry 0042 | 12 Oct | Credits bought | +$10.00 | $31.00 | Held |
An agent at work, assembled
The same idea for AI agents: a plan on a legal pad, subagents in their pigeonholes, an answer with its sources pinned in, and a seal you hold before anything leaves the firm.
Review the Harbor Street lease
- Done: Read the lease and schedules
- In progress: List every notice clause
- Not started: Check notice periods against the playbook
- Not started: Draft a redline
- Not started: Summarise for Priya
The landlord can end the lease on thirty days' notice, but notice must be written and delivered to the address in the schedule.
Courts have read similar clauses strictly, so email alone may not count.
Send the redline to opposing counsel
The drafting agent will email it to j.lee@haleward.com. Sent email can't be recalled.
- Priya Shah: signed
- You: not signed yet
- WorkingResearchFind cases on notice by email
- WorkingDraftingRedline clause 9.2
- PendingReviewCheck the redline against the playbook
- WorkingCitationsVerify every authority cited
Install once, then add what you need
Bevel is a shadcn registry. Point your project at it once; after that each component arrives with the parts it's built from, its dependencies and its styles, merged into your global CSS. Nothing is wrapped in a package: the files are yours.
{
"registries": {
"@bevel": "https://bevel-ui.vercel.app/r/{name}.json"
}
}npx shadcn@latest add @bevel/wallet @bevel/receiptMoney
Balances, payment methods and credits for checkout, billing and usage-based products.
Wallet
A customer's stored balance, shown as a leather wallet. Saved cards sit in it, and picking one pulls it out of the pocket.
Payment card
A plastic payment card at real proportions. Use it on its own, as a radio in a picker, or inside a Wallet.
Amount
A formatted figure with steady digits, in any currency and locale. Every amount in Bevel is one of these.
Meter
A brass metering instrument with a rolling reading: live spend that ticks up, or a prepaid balance that counts down.
Receipt
Thermal paper with torn edges. Lines print in as they're added; a stamp or seal lands when it's paid.
Ticket sheet
A sheet of perforated tickets, one per option. Picking one tears it off. A radio group underneath.
Ledger
A ruled page of numbered entries with a red margin. History and audit logs that read like a passbook.
Keycard
An API key on a plastic card that slides into a brass reader. For bring-your-own-key and credential screens.
Instruments
Readouts and controls from a panel: rolling counters, gauges, dials and breakers.
Number wheel
Mechanical rolling digits. Each digit is a printed drum that turns to its figure, lowest digit first.
Gauge and dial
A needle on a brass-bezelled scale. Gauge reads a value; Dial sets one, turned by drag or keyboard.
Breaker
A circuit breaker: on, off, or tripped until someone resets it. For spending caps, kill switches and feature flags.
Engine telegraph
A ship's engine order telegraph: you set an order, the other side answers by moving its own pointer to match. Both show on one dial, so a pending order is visible at a glance. For autonomy levels, deploy stages and any setting that takes effect only once acknowledged.
Annunciator
A panel of alarm lamps from a control room. A new alarm flashes until someone acknowledges it, then stays lit while its condition lasts; one that clears unseen keeps flashing, so nothing passes unnoticed. For agent, build and system alerts.
Detent knob
A rotary switch that clicks into fixed positions and stops hard at both ends. For a few ordered settings where the order matters: reasoning effort, quality presets, verbosity.
Push to talk
A radio's push-to-talk key: it listens only while held, and letting go stops it. Nothing records by accident. For voice input to agents, walkie-talkie chat and dictation.
Motorized fader
A console fader with a motor: when someone else sets it, the cap travels there on its own and says who moved it. Grab it and it's yours. For settings an agent, a teammate or an automation can change too.
Mixer strip
One channel of a mixing console per agent or source: its name, mute and solo keys, and a motorized fader that an orchestrator can move and you can take. For balancing subagents, models or data sources.
Coordination
Guards and holds for consequential work shared by people and agents: a cover over a critical switch, a check-in that keeps a run alive, a lockout everyone must release, and a take-a-number queue.
Guarded switch
A critical switch under a flip-up cover, as in a cockpit. Lift the cover, then flip it; closing the cover returns it to safe, and the cover closes itself if left.
Dead man's switch
A train cab's vigilance control for supervised agent runs: the run keeps going only while someone checks in. Miss the window and it warns, then pauses.
Lockout
A lockout-tagout hasp: everyone working on something hangs their own padlock and tag, and it can't start until the last lock comes off. For freezes and holds.
Take a number
A ticket dispenser and a Now Serving sign: your place in the queue is the number in your hand. For support queues, waitlists and jobs waiting their turn.
Records
Seeing many things at once: notched cards that drop out when filtered, signals along a file's edge, a contact sheet, a departures board and a due-date slip.
Keysort filter
Edge-notched cards from the 1950s office: each hole along the top is an attribute, notched open if the card has it. Push needles down the columns and the cards notched for all of them fall free. AND filtering you can see. For documents, tickets and records with tags.
Visible file
A Kardex visible-index tray: each record shows only its edge, and coloured signal clips slide along it to mark where it stands, so a whole tray reads at a glance. For pipelines, renewals and task stages.
Contact sheet
A photographer's contact sheet: every frame at once on a strip of film, marked with a grease pencil. Circle the keepers, cross out the rest. For reviewing generated images, design variants and screenshots.
Split-flap board
A station departure board: each character is a pair of flaps that falls to the next value, column by column. The text is the truth and changes are announced once per row. For deploy boards, queues and live status.
Due-date slip
The library card in the back of a book: each loan or renewal stamps the next ruled line, and the last date is when it's due. Overdue dates are stamped red. For expiring keys, trials, seats and access grants.
Agents
Plans, logs, delegation and approvals for AI agents at work. Who's doing what, how far along, and what needs you.
Name tag
Who someone is: an agent, a person, a guest. The “HELLO my name is” sticker, a visitor badge for outside collaborators, and a plain tag for lists.
Task plan
An agent's plan on a legal pad. Finished steps are ticked in ink, the current one is underlined in red pen, the rest are still in pencil.
Activity log
A docket of what an agent did: thoughts, actions, questions, responses and errors, each timed. Questions waiting on you are highlighted.
Approval
An action an agent wants to take, waiting for a person. Say what it does and what can't be undone; press and hold the brass seal to approve.
Delegation board
Pigeonholes for delegated work, one per subagent: its task slip, a lamp and a word for its status, and its progress. Finished work rises out of its cubby.
Documents
Sources and edits: citations that open their passage, and redlines you accept or reject.
Marks
Ink and relief on paper: status stamps, embossed seals and redactions.