Bevel

Overview

Bevel is an open-source library of skeuomorphic React components for shadcn, built on Base UI and Tailwind CSS v4. It models 50 real objects, from label-maker tape to a cockpit's guarded switch, and each component cites the patent or history it comes from, spanning 1895 to 2023. Components install as source with the shadcn CLI.

The 50 components are organized into eight collections: Essentials, Money, Instruments, Coordination, Records, Agents, Documents and Marks. Many target agent and operations interfaces, such as a motorized fader an orchestrator can move or an annunciator panel for alarms. Shared tokens cover light, depth, materials and motion, with brass, bakelite and anodized aluminium themes.

Features

• Essentials: Keycap buttons, latch checkboxes, toggle levers, preset-key tabs, label-tape tooltips and engraved menus.
• Money: Wallet, payment card, receipt that prints line by line, ticket-sheet radio group and steady-digit amounts.
• Instruments: Dials and gauges, brass meters, circuit breakers for spending caps and feature flags, and number wheels.
• Coordination: Guarded switches, annunciator panels, motorized faders, mixer strips and split-flap boards.
• Agents and records: Task plans on a legal pad, activity logs, ledgers, keycards for API keys, name tags and citations.
• Themes and transitions: Three material themes, plus light and dark switching via View Transitions.
• Sound and haptics: Optional feedback synthesized with Web Audio.
• Full screens: Assembled demo blocks such as a team release board.

Tech stack

• React, Base UI
• Tailwind CSS v4
• shadcn CLI registry

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @bevel/component-name