---
name: "@bevel"
slug: "bevel"
description: "Tactile, skeuomorphic React components for real product work: guarded switches, annunciators, motorized faders, split-flap boards. Base UI and Tailwind CSS v4."
category: "Animated components"
tags: ["ai", "animation", "buttons", "cards", "charts", "crypto", "media", "overlays", "payments", "retro", "theming"]
framework: "react"
license: "MIT"
author: "hiteshbandhu"
website: "https://bevel-ui.vercel.app"
github: "https://github.com/hiteshbandhu/bevel"
registry: "https://bevel-ui.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: 0
component_count: 41
generated_at: "2026-10-20T06:35:22.791Z"
---

# @bevel

Tactile, skeuomorphic React components for real product work: guarded switches, annunciators, motorized faders, split-flap boards. Base UI and Tailwind CSS v4.

## Links

- Website: https://bevel-ui.vercel.app
- GitHub: https://github.com/hiteshbandhu/bevel
- Registry JSON: https://bevel-ui.vercel.app/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/bevel
- This file: https://sh4dcn.vercel.app/md/bevel.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://bevel-ui.vercel.app/r/registry.json
pnpm dlx shadcn@latest add https://bevel-ui.vercel.app/r/registry.json
bunx shadcn@latest add https://bevel-ui.vercel.app/r/registry.json
# clone the source repo
git clone https://github.com/hiteshbandhu/bevel.git
# fetch the raw registry index
curl -s https://bevel-ui.vercel.app/r/registry.json
```

## Components (41)

| name | type | description | install |
| --- | --- | --- | --- |
| bevel | registry:item | Light, depth, materials, motion and shape tokens, plus the utilities components use to apply them. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/bevel.json` |
| theme-transition | registry:lib | Switch light and dark as a change in lighting: the room dims, or the lights come up. Uses View Transitions. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/theme-transition.json` |
| wallet | registry:ui | A customer's stored balance, shown as a leather wallet. Saved cards sit in it, and picking one pulls it out of the pocket. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/wallet.json` |
| payment-card | registry:ui | A plastic payment card at real proportions. Use it on its own, as a radio in a picker, or inside a Wallet. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/payment-card.json` |
| amount | registry:ui | A formatted figure with steady digits, in any currency and locale. Every amount in Bevel is one of these. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/amount.json` |
| number-wheel | registry:ui | Mechanical rolling digits. Each digit is a printed drum that turns to its figure, lowest digit first. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/number-wheel.json` |
| meter | registry:ui | A brass metering instrument with a rolling reading: live spend that ticks up, or a prepaid balance that counts down. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/meter.json` |
| stamp | registry:ui | A rubber-stamp impression in ink for statuses, and an embossed seal for the moment something becomes official. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/stamp.json` |
| receipt | registry:ui | Thermal paper with torn edges. Lines print in as they're added; a stamp or seal lands when it's paid. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/receipt.json` |
| ticket-sheet | registry:ui | A sheet of perforated tickets, one per option. Picking one tears it off. A radio group underneath. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/ticket-sheet.json` |
| dial | registry:ui | A needle on a brass-bezelled scale. Gauge reads a value; Dial sets one, turned by drag or keyboard. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/dial.json` |
| breaker | registry:ui | A circuit breaker: on, off, or tripped until someone resets it. For spending caps, kill switches and feature flags. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/breaker.json` |
| ledger | registry:ui | A ruled page of numbered entries with a red margin. History and audit logs that read like a passbook. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/ledger.json` |
| keycard | registry:ui | An API key on a plastic card that slides into a brass reader. For bring-your-own-key and credential screens. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/keycard.json` |
| name-tag | registry:ui | 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. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/name-tag.json` |
| citation | registry:ui | An exhibit sticker in the text that opens the exact passage it cites, with a stamp saying whether the source checks out. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/citation.json` |
| task-plan | registry:ui | 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. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/task-plan.json` |
| activity-log | registry:ui | A docket of what an agent did: thoughts, actions, questions, responses and errors, each timed. Questions waiting on you are highlighted. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/activity-log.json` |
| approval | registry:ui | 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. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/approval.json` |
| delegation-board | registry:ui | 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. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/delegation-board.json` |
| redline | registry:ui | Proposed edits in proofreader's red ink, each with a sign-here flag to accept or reject it. Nothing is applied until someone decides. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/redline.json` |
| redaction | registry:ui | 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. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/redaction.json` |
| guarded-switch | registry:ui | 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 le… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/guarded-switch.json` |
| vigilance | registry:ui | 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. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/vigilance.json` |
| lockout | registry:ui | 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. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/lockout.json` |
| take-a-number | registry:ui | 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. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/take-a-number.json` |
| engine-telegraph | registry:ui | 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 visi… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/engine-telegraph.json` |
| annunciator | registry:ui | 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… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/annunciator.json` |
| detent-knob | registry:ui | 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 pre… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/detent-knob.json` |
| push-to-talk | registry:ui | 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… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/push-to-talk.json` |
| motorized-fader | registry:ui | 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,… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/motorized-fader.json` |
| mixer-strip | registry:ui | 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 ba… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/mixer-strip.json` |
| keysort-filter | registry:ui | 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… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/keysort-filter.json` |
| visible-file | registry:ui | 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 glan… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/visible-file.json` |
| contact-sheet | registry:ui | 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 gene… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/contact-sheet.json` |
| split-flap | registry:ui | 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 on… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/split-flap.json` |
| due-date-slip | registry:ui | 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… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/due-date-slip.json` |
| agent-console | registry:block | 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. A whole… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/agent-console.json` |
| billing-desk | registry:block | 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. A whol… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/billing-desk.json` |
| release-hall | registry:block | 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.… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/release-hall.json` |
| review-desk | registry:block | 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. A whole scr… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/review-desk.json` |

## For AI agents

```text
You are adding components from @bevel to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/bevel.md) for the component list.
2. Fetch the machine-readable index: https://bevel-ui.vercel.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: bevel).
```