Bevel

Tactile, skeuomorphic React components for real product work. Built on Base UI and Tailwind CSS v4, installed with the shadcn CLI.

bevel-ui.vercel.app: docs, every component, and live demos.

Each component is a physical object that does a real job in a modern app: a cover over a deploy switch, alarm lamps that latch until someone sees them, a fader an agent can move and you can take back, a library slip for an expiring API key. Like shadcn/ui, it isn't a package: the source lands in your project and it's yours.

Install

Add the registry to components.json once:

{
  "registries": {
    "@bevel": "https://bevel-ui.vercel.app/r/{name}.json"
  }
}

Then add components by name:

npx shadcn@latest add @bevel/guarded-switch @bevel/annunciator

Or skip the setup and install straight from a URL:

npx shadcn@latest add https://bevel-ui.vercel.app/r/wallet.json

Every demo product also installs as a whole screen (a block) in a Next.js app:

npx shadcn@latest add @bevel/agent-console   # or billing-desk, release-hall, review-desk

You need React 19, Tailwind CSS v4 and a project set up with npx shadcn@latest init. See the installation guide.

What's inside

Category	Components
Money	Wallet, Payment card, Amount, Meter, Receipt, Ticket sheet, Ledger, Keycard
Instruments	Number wheel, Gauge and dial, Breaker, Engine telegraph, Annunciator, Detent knob, Push to talk, Motorized fader, Mixer strip
Coordination	Guarded switch, Dead man's switch, Lockout, Take a number
Records	Keysort filter, Visible file, Contact sheet, Split-flap board, Due-date slip
Agents	Name tag, Task plan, Activity log, Approval, Delegation board
Documents	Citation, Redline
Marks	Stamp and seal, Redaction

Demos

Four made-up products, each one screen built from Bevel components. Every demo also installs as a whole screen, e.g. npx shadcn@latest add @bevel/agent-console.

Relay, an agent control room · @bevel/agent-console	Meterline, usage billing · @bevel/billing-desk
Shipyard, release coordination · @bevel/release-hall	Casefile, a legal review desk · @bevel/review-desk

Where they come from

Every component is modelled on a real object, and cites where that object came from. Patent numbers link to the patents themselves.

Component	Source	Reference	Who, when
Payment card	Patent	US 3,971,916, Methods of data storage and data storage systems	Roland Moreno, 1976
Number wheel	Patent	US 548,482, Cyclometer	Curtis H. Veeder, 1895
Meter	Patent	US 710,997, Postage-stamp device	Arthur H. Pitney, 1902
Stamp and seal	History	Encyclopedia.com, “Rubber Stamp”	Disputed: James Orton Woodruff or L. F. Witherell, 1866
Receipt	Patent	US 221,360, Improvement in Cash Register and Indicator	James and John Ritty, 1879
Ticket sheet	History	Grace's Guide, Henry Archer	Henry Archer, 1848

Components with no defining invention (the wallet, the amount, the citation sticker, the activity log) are left out rather than given a forced citation.

Principles

• A real job first. If a plain control does the job as well, it isn't in Bevel.
• Composable parts, never mega-props. A part that works alone is its own component.
• Tokens, not values. Components read one foundation stylesheet; a lint fails on raw colours, durations or lengths.
• One light, from above, so every highlight and shadow agrees.
• State in words. What an object shows with light or position, it also says in text.
• Compositor-only motion. Transform, opacity and filter; never layout.

Read more in the design system and accessibility guides.

Repository

packages/ui      the components and their stylesheets (what ships)
apps/web         docs site; also serves the registry at /r/{name}.json
apps/storybook   stories, run as browser tests with axe checks
scripts          registry build and the token lint

pnpm install
pnpm dev                          # docs site on :3000
pnpm storybook                    # Storybook on :6006
pnpm --filter storybook test      # every story as a browser test
pnpm check:tokens                 # design-system lint

Contributing

Issues and pull requests are welcome. Please read CONTRIBUTING.md first. New components especially need a clear job that no existing component already does.

Author

Made by @_hiteshbandhu on X.

License

MIT. docs/reference/components-build is a copy of the components.build spec under Apache 2.0; see its own license.