Introduction

Bevel is a set of tactile React components: interface parts with weight, edges and light. Each one is a real object that does a real job in a modern product: a cover over a deploy switch, a meter that shows a turn's cost as it runs, alarm lamps that latch until someone sees them.

It isn't a package. Like shadcn/ui, you add components with the shadcn CLI and the source lands in your project, yours to read and change. There are 35 today, built on Base UI and Tailwind CSS v4.

The rules

Every component follows the same handful of rules, so they read as one set and stay fast.

• A real job first. The object has to earn its place: if a plain control does the job as well, it isn't in Bevel. No two components do the same job.
• Composable parts. One file per component family, exported as parts (Wallet, WalletCard, WalletPocket), not one component with forty props. A part that works alone is its own component.
• Tokens, not values. Components never hard-code a colour, shadow, radius, duration or type size. They read tokens from one foundation stylesheet, so a change there reaches everything. See the design system.
• One light, from above. Every highlight and shadow agrees, which is most of what makes the set look like it belongs together.
• State in words. Whatever an object shows with light or position, it also says in text, to everyone. See accessibility.
• Motion that stays on the compositor. Only transform, opacity and filter move; nothing animates layout. See motion.

What's in the box

• Money: wallets, cards, meters, ledgers, receipts. For checkout, billing and usage.
• Agents and documents: task plans, delegation boards, citations, approvals, redlines, redactions.
• Coordination: guarded switches, lockouts, dead man's switches and queues, for work people and agents share.
• Instruments: gauges, dials, telegraphs, annunciators, faders.
• Records: ways to see many things at once: notched cards, Kardex trays, contact sheets, departure boards.

Browse them all on the components page, or see them working together in the demos.