# Bevel

> Bevel is a shadcn-style registry of tactile, skeuomorphic React components built on Base UI (@base-ui/react) and Tailwind CSS v4. Components install as source with the shadcn CLI; each one is a real object doing a real job in a product (a cover over a deploy switch, a meter for live spend, alarm lamps that latch).

Install a component with `npx shadcn@latest add @bevel/<slug>` after adding `"registries": { "@bevel": "https://bevel-ui.vercel.app/r/{name}.json" }` to components.json. Everything below in one file: https://bevel-ui.vercel.app/llms-full.txt. Each component link is a Markdown file with its install command, anatomy, parts and example code.

## Docs

- [Introduction](https://bevel-ui.vercel.app/docs.md): What Bevel is: skeuomorphic React components on Base UI and Tailwind, and the rules every component follows.
- [Installation](https://bevel-ui.vercel.app/docs/installation.md): Install Bevel components with the shadcn CLI, by the @bevel namespace or by URL, into any React and Tailwind v4 project.
- [Use with AI](https://bevel-ui.vercel.app/docs/ai.md): Let Claude Code, Cursor or Copilot find, install and use Bevel components.
- [Design system](https://bevel-ui.vercel.app/docs/design-system.md): Light, depth, materials, motion and shape: the tokens everything reads.
- [Theming](https://bevel-ui.vercel.app/docs/theming.md): Dark mode, palettes and materials: change the look without forking a component.
- [Accessibility](https://bevel-ui.vercel.app/docs/accessibility.md): How Bevel components work with the keyboard, screen readers, reduced motion and forced colours, and what each one announces.
- [Motion](https://bevel-ui.vercel.app/docs/motion.md): Why Bevel components move the way they do: durations by purpose, a spring curve, and motion that never animates layout.
- [Sound and haptics](https://bevel-ui.vercel.app/docs/sound.md): Opt-in clicks, detents and thunks, synthesised in the browser. Off unless you turn them on.
- [Material themes](https://bevel-ui.vercel.app/themes): brass, bakelite and anodized themes (`npx shadcn@latest add @bevel/themes`, then `data-bevel-theme="brass"` on <html> or a container), and a playground that writes custom theme CSS.

## Essentials

Everyday controls (buttons, fields, switches, overlays) made of Bevel's materials. The real Base UI control, with a body.

- [Key](https://bevel-ui.vercel.app/components/key.md): A button made as a keycap: a cap with a lit top edge on a visible side, which travels down by the side's depth when pressed by pointer, Space or Enter. While its action runs it latches down with a small lamp lit, instead of a spinner, and pops back up when done.
  - [Icon key](https://bevel-ui.vercel.app/components/key/icon-key.md): A square keycap for a single icon: copy, close, toolbar actions. It must be given an aria-label, and is secondary by default so a row of them stays quiet.
- [Kbd](https://bevel-ui.vercel.app/components/kbd.md): A keycap printed in a line of text, for shortcuts and docs. Symbols such as ⌘ are read aloud by name. With listen, the cap goes down when the reader presses that key on their own keyboard, so a shortcut list shows its keys working.
- [Badge](https://bevel-ui.vercel.app/components/badge.md): A small printed plate with an indicator lamp, for status in tables, lists and headings. Five tones; a lamp is lit while its condition holds and dark when it doesn't. Lamps burn steady and never blink.
- [Text field](https://bevel-ui.vercel.app/components/text-field.md): A text input cut into the panel as a slot, with a printed label above and description and error lines below. Focus lights the slot's edge amber, the colour of a caret; an invalid field edges in red and lights a lamp by its label. Inputs, textareas, search boxes with an icon and a key hint, amounts with a unit.
- [Toggle lever](https://bevel-ui.vercel.app/components/toggle-lever.md): An everyday on/off switch, as a bat-handle toggle on a small plate. The lever swings through its bushing toward the side that's on and settles with a little spring; a lamp at the end of the plate lights. For settings rows. (For banks of config bits use DIP switches; for dangerous actions, the guarded switch.)
- [Latch checkbox](https://bevel-ui.vercel.app/components/latch-checkbox.md): A checkbox as a latching push-key. Press it and it sinks and stays down with its mark lit amber; press again and it springs back up. Mixed holds it half-down with a dash. Small enough for lists and table rows.
- [Preset keys](https://bevel-ui.vercel.app/components/preset-keys.md): Tabs and segmented controls as interlocked preset keys, like a car radio's: press one and it latches down while the one that was down springs back up. Only one is ever down. PresetTabs switches panels; PresetKeys picks a value.
- [Tooltip](https://bevel-ui.vercel.app/components/tooltip.md): A label-maker strip: dark embossing tape with raised pale letters and a tab pointing at the trigger. It feeds out a short way from the trigger's side; in a group, the next one prints at once.
- [Popover](https://bevel-ui.vercel.app/components/popover.md): A sheet of panel stock lifted off the page on the shared light, with a folded tab at its trigger. It lifts toward you and settles; Escape or a click outside puts it down and returns focus.
- [Menu](https://bevel-ui.vercel.app/components/menu.md): A selector plate: items engraved into brushed metal, the highlighted one pressed in, a lamp for checked settings, engraved rules between groups and keycaps for shortcuts. Dropdown, submenu and context menu.
- [Dialog](https://bevel-ui.vercel.app/components/dialog.md): The lights go down and a panel rises onto the desk, screwed or stitched at its corners. Content has no padding of its own, so it hosts forms and command palettes alike; AlertDialog asks before something can't be undone.

## Money

Balances, payment methods and credits for checkout, billing and usage-based products.

- [Wallet](https://bevel-ui.vercel.app/components/wallet.md): 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](https://bevel-ui.vercel.app/components/wallet/payment-card.md): A plastic payment card at real proportions. Use it on its own, as a radio in a picker, or inside a Wallet.
- [Amount](https://bevel-ui.vercel.app/components/amount.md): A formatted figure with steady digits, in any currency and locale. Every amount in Bevel is one of these.
- [Meter](https://bevel-ui.vercel.app/components/meter.md): A brass metering instrument with a rolling reading: live spend that ticks up, or a prepaid balance that counts down.
- [Receipt](https://bevel-ui.vercel.app/components/receipt.md): Thermal paper with torn edges. Lines print in as they're added; a stamp or seal lands when it's paid.
- [Ticket sheet](https://bevel-ui.vercel.app/components/ticket-sheet.md): A sheet of perforated tickets, one per option. Picking one tears it off. A radio group underneath.
- [Ledger](https://bevel-ui.vercel.app/components/ledger.md): A ruled page of numbered entries with a red margin. History and audit logs that read like a passbook.
- [Keycard](https://bevel-ui.vercel.app/components/keycard.md): 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](https://bevel-ui.vercel.app/components/number-wheel.md): Mechanical rolling digits. Each digit is a printed drum that turns to its figure, lowest digit first.
- [Gauge and dial](https://bevel-ui.vercel.app/components/dial.md): A needle on a brass-bezelled scale. Gauge reads a value; Dial sets one, turned by drag or keyboard.
- [Breaker](https://bevel-ui.vercel.app/components/breaker.md): A circuit breaker: on, off, or tripped until someone resets it. For spending caps, kill switches and feature flags.
- [Engine telegraph](https://bevel-ui.vercel.app/components/engine-telegraph.md): 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](https://bevel-ui.vercel.app/components/annunciator.md): 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](https://bevel-ui.vercel.app/components/detent-knob.md): 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](https://bevel-ui.vercel.app/components/push-to-talk.md): 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.
- [Mixer strip](https://bevel-ui.vercel.app/components/mixer-strip.md): 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.
  - [Motorized fader](https://bevel-ui.vercel.app/components/mixer-strip/motorized-fader.md): 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.
- [DIP switches](https://bevel-ui.vercel.app/components/dip-switch.md): A bank of tiny numbered slide switches, ON at the top, as on a circuit board. Every flag is visible at once and the bank reads as one value. For feature flags, permission bits and config words.
- [Patch bay](https://bevel-ui.vercel.app/components/patch-bay.md): A rack of jacks joined by patch cables: every route from a source to a destination is a cable you can see and pull. For webhook events to handlers, agent tools to agents, and inputs to outputs.

## 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](https://bevel-ui.vercel.app/components/guarded-switch.md): 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](https://bevel-ui.vercel.app/components/vigilance.md): 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](https://bevel-ui.vercel.app/components/lockout.md): 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](https://bevel-ui.vercel.app/components/take-a-number.md): 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, a due-date slip and a time card.

- [Keysort filter](https://bevel-ui.vercel.app/components/keysort-filter.md): 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](https://bevel-ui.vercel.app/components/visible-file.md): 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](https://bevel-ui.vercel.app/components/contact-sheet.md): 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](https://bevel-ui.vercel.app/components/split-flap.md): 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.
- [Time card](https://bevel-ui.vercel.app/components/time-card.md): A punch clock's time card: each session is a row with its date, time in, time out and how long it ran, and the key stamps the time now onto the next line. For timesheets, focus sessions and on-call shifts.
- [Due-date slip](https://bevel-ui.vercel.app/components/due-date-slip.md): 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](https://bevel-ui.vercel.app/components/name-tag.md): 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](https://bevel-ui.vercel.app/components/task-plan.md): 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](https://bevel-ui.vercel.app/components/activity-log.md): A docket of what an agent did: thoughts, actions, questions, responses and errors, each timed. Questions waiting on you are highlighted.
- [Approval](https://bevel-ui.vercel.app/components/approval.md): 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](https://bevel-ui.vercel.app/components/delegation-board.md): 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.

- [Citation](https://bevel-ui.vercel.app/components/citation.md): An exhibit sticker in the text that opens the exact passage it cites, with a stamp saying whether the source checks out.
- [Redline](https://bevel-ui.vercel.app/components/redline.md): Proposed edits in proofreader's red ink, each with a sign-here flag to accept or reject it. Nothing is applied until someone decides.

## Marks

Ink and relief on paper: status stamps, embossed seals and redactions.

- [Stamp and seal](https://bevel-ui.vercel.app/components/stamp.md): A rubber-stamp impression in ink for statuses, and an embossed seal for the moment something becomes official.
- [Redaction](https://bevel-ui.vercel.app/components/redaction.md): A black marker bar over withheld text, read as “Redacted” with the reason. Hidden text is never rendered; revealed text keeps a trace of the marker.

## Blocks

Whole screens built only from Bevel components, for Next.js apps.

- [Relay, AI agent control room](https://bevel-ui.vercel.app/demo/1): Supervise a coding agent and its subagents: set its autonomy, balance effort between subagents, hold the dead man's switch, and lift the cover to ship. Install: `npx shadcn@latest add @bevel/agent-console`.
- [Meterline, Usage billing](https://bevel-ui.vercel.app/demo/2): A usage-based account page: the balance in a wallet, spend running on a meter, caps on breakers, the ledger, and API keys that expire on a library slip. Install: `npx shadcn@latest add @bevel/billing-desk`.
- [Shipyard, Release coordination](https://bevel-ui.vercel.app/demo/3): A release board for a team: regions on a split-flap board, services moving through stages, a deploy queue, a freeze everyone must lift, and the promote switch. Install: `npx shadcn@latest add @bevel/release-hall`.
- [Casefile, Legal review desk](https://bevel-ui.vercel.app/demo/4): A lawyer's desk with an AI assistant: pull contracts with needles, mark up a clause, check the answer's sources, redact, and seal before it leaves. Install: `npx shadcn@latest add @bevel/review-desk`.

## Optional

- [Neo-skeuomorphism: what it is, with live examples](https://bevel-ui.vercel.app/blog/neo-skeuomorphism.md): Neo-skeuomorphism (skeuomorphism 2.0) brings light, depth and physical behaviour back to the controls that matter. Its rules, and live React examples.
- [Skeuomorphism vs neumorphism vs flat design](https://bevel-ui.vercel.app/blog/skeuomorphism-vs-neumorphism.md): Skeuomorphism vs neumorphism vs flat design vs glassmorphism: the same button and switch in each style, live, with CSS and measured contrast.
- [How to make a skeuomorphic button in CSS and Tailwind](https://bevel-ui.vercel.app/blog/skeuomorphic-button-css.md): A skeuomorphism CSS tutorial: build a skeuomorphic button with one light source, stacked shadows and a real press. Live at every step, plus Tailwind v4.
- [Skeuomorphism is back, for a better reason this time](https://bevel-ui.vercel.app/blog/skeuomorphism-is-back.md): Flat design took away the shape of things, and with it a lot of what an interface used to tell you. A few old machines, the patents behind them, and what they still teach.
- [Full docs in one file](https://bevel-ui.vercel.app/llms-full.txt): every component with its anatomy, parts and example code.
- [Registry index](https://bevel-ui.vercel.app/r/registry.json): the shadcn registry, for `shadcn search` and the shadcn MCP server.
- [Source on GitHub](https://github.com/hiteshbandhu/bevel): the components, the docs site and the registry build.