---
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: ["accessibility", "ai", "animation", "buttons", "cards", "charts", "crypto", "e-commerce", "icons", "media", "navigation", "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: 2
component_count: 121
generated_at: "2026-10-27T06:34:08.542Z"
---

# @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.netlify.app/registry/bevel
- This file: https://sh4dcn.netlify.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 (121)

| 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` |
| themes | registry:item | Brass, bakelite and anodized aluminium. Set data-bevel-theme on <html> or any container; build your own at /themes. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/themes.json` |
| feedback | registry:lib | Opt-in sound and haptics for Bevel controls: <BevelFeedback sound haptics> and useBevelFeedback(). Synthesised with Web Audio; silent outside the provider. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/feedback.json` |
| key | registry:ui | 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 i… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/key.json` |
| icon-key | registry:ui | 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. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/icon-key.json` |
| kbd | registry:ui | 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 th… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/kbd.json` |
| badge | registry:ui | 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 do… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/badge.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` |
| dip-switch | registry:ui | 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,… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/dip-switch.json` |
| patch-bay | registry:ui | 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… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/patch-bay.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` |
| time-card | registry:ui | 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 … | `npx shadcn@latest add https://bevel-ui.vercel.app/r/time-card.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` |
| text-field | registry:ui | 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 … | `npx shadcn@latest add https://bevel-ui.vercel.app/r/text-field.json` |
| toggle-lever | registry:ui | 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 sp… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/toggle-lever.json` |
| latch-checkbox | registry:ui | 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 w… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/latch-checkbox.json` |
| preset-keys | registry:ui | 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… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/preset-keys.json` |
| tooltip | registry:ui | 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 gro… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/tooltip.json` |
| popover | registry:ui | 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 pu… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/popover.json` |
| menu | registry:ui | 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… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/menu.json` |
| dialog | registry:ui | 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 palett… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/dialog.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` |
| key-demo | registry:example | Cancel and Save at the foot of a settings form. Save latches down with its lamp lit while the request runs, then pops back up. An example of Key. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/key-demo.json` |
| key-demo-variants | registry:example | Primary, secondary, ghost and danger at sm, md and lg, with icons, and disabled. An example of Key. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/key-demo-variants.json` |
| icon-key-demo | registry:example | Ghost keys in a formatting toolbar, and a copy key that latches while it writes to the clipboard. An example of Icon key. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/icon-key-demo.json` |
| kbd-demo | registry:example | A shortcuts sheet whose caps go down as you press them. Try ⌘K or Esc. An example of Kbd. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/kbd-demo.json` |
| badge-demo | registry:example | A deployments table: the lamp is lit while a build runs or a release is live, and dark once it's superseded. An example of Badge. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/badge-demo.json` |
| wallet-demo | registry:example | Pay from stored balance. Pay once to drain it, then pick the card that covers the rest. An example of Wallet. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/wallet-demo.json` |
| wallet-demo-billing | registry:example | Account credit and saved cards. Add a card and it slides into the wallet. An example of Wallet. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/wallet-demo-billing.json` |
| wallet-demo-usage | registry:example | Prepaid credits running down over a billing cycle. Low balance turns the light and meter amber. An example of Wallet. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/wallet-demo-usage.json` |
| payment-card-demo | registry:example | Cards as a radio group, without a wallet. The chosen card lifts; arrow keys move between them. An example of Payment card. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/payment-card-demo.json` |
| amount-demo | registry:example | Digits are tabular so columns line up; separators keep their natural width in any font. An example of Amount. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/amount-demo.json` |
| number-wheel-demo | registry:example | Change the value and the drums roll to it. Sized by font size. An example of Number wheel. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/number-wheel-demo.json` |
| meter-demo | registry:example | The cost of a chat turn, ticking while the model writes. Run it, stop it, clear it. An example of Meter. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/meter-demo.json` |
| meter-demo-prepaid | registry:example | Like a postage meter: each call stamps a little off; add credit to refill. An example of Meter. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/meter-demo-prepaid.json` |
| stamp-demo | registry:example | Stamps replace badges: Received, Refunded, Held, Auto. The seal marks something verified. An example of Stamp and seal. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/stamp-demo.json` |
| receipt-demo | registry:example | Pick a pack and the receipt reprints; pay and it's stamped. Ticket sheet, receipt and stamp together. An example of Receipt. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/receipt-demo.json` |
| ticket-sheet-demo | registry:example | Plans as tickets. Arrow keys move between them; a sold-out one is disabled. An example of Ticket sheet. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/ticket-sheet-demo.json` |
| ticket-sheet-demo-credits-checkout | registry:example | The sheet driving a receipt. An example of Ticket sheet. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/ticket-sheet-demo-credits-checkout.json` |
| dial-demo | registry:example | Days of credit left, with the auto top-up level marked. An example of Gauge and dial. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/dial-demo.json` |
| dial-demo-auto-top-up | registry:example | Set like a thermostat: the level to keep above, and how much to add. An example of Gauge and dial. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/dial-demo-auto-top-up.json` |
| breaker-demo | registry:example | The per-person cap has tripped; switch it to reset. Overage is locked to owners. An example of Breaker. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/breaker-demo.json` |
| ledger-demo | registry:example | Numbered entries with the balance after each, and stamped statuses. An example of Ledger. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/ledger-demo.json` |
| keycard-demo | registry:example | Switch the breaker and the key goes into the reader: usage bills to it instead of credits. An example of Keycard. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/keycard-demo.json` |
| keycard-demo-swipe | registry:example | Drag the card through the reader, or flick it. A short drag springs back. Keyboard: focus the card, press Enter. An example of Keycard. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/keycard-demo-swipe.json` |
| name-tag-demo | registry:example | Rename the agent by writing on its sticker. Guests get a visitor badge; lists use the plain tag. An example of Name tag. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/name-tag-demo.json` |
| citation-demo | registry:example | Open a sticker to read the cited passage. The third source has been appealed. An example of Citation. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/citation-demo.json` |
| task-plan-demo | registry:example | The plan advances on its own. Each step is ticked in ink as it finishes. An example of Task plan. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/task-plan-demo.json` |
| activity-log-demo | registry:example | Entries arrive as the agents work. Who acted is a plain Name tag. An example of Activity log. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/activity-log-demo.json` |
| approval-demo | registry:example | Hold the seal until it presses. Let go early and nothing happens. An example of Approval. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/approval-demo.json` |
| delegation-board-demo | registry:example | Four agents working in parallel. Drafting stops to ask you a question; answer it to unblock Review. An example of Delegation board. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/delegation-board-demo.json` |
| redline-demo | registry:example | Three suggested edits. Decide each one, or all at once. An example of Redline. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/redline-demo.json` |
| redaction-demo | registry:example | A privileged memo, stamped. Switch who's reading: opposing counsel sees the redactions. An example of Redaction. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/redaction-demo.json` |
| guarded-switch-demo | registry:example | Lift a cover, then flip the switch. Leave it and the cover closes, turning it off. An example of Guarded switch. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/guarded-switch-demo.json` |
| vigilance-demo | registry:example | Check in every 12 seconds to keep it going. Stop checking in and watch it warn, then pause. An example of Dead man's switch. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/vigilance-demo.json` |
| lockout-demo | registry:example | Three locks hold the migration. Remove yours; the others come off as their work finishes. An example of Lockout. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/lockout-demo.json` |
| take-a-number-demo | registry:example | Take a number; the sign rolls on every two seconds until it's your turn. An example of Take a number. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/take-a-number-demo.json` |
| engine-telegraph-demo | registry:example | Set how much the agent may do alone. It answers once its current step is done. An example of Engine telegraph. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/engine-telegraph-demo.json` |
| annunciator-demo | registry:example | Conditions come and go on their own. Acknowledge them one by one, or all at once. An example of Annunciator. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/annunciator-demo.json` |
| detent-knob-demo | registry:example | Turn the knob to trade speed and cost for how hard the model thinks. An example of Detent knob. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/detent-knob-demo.json` |
| push-to-talk-demo | registry:example | Hold the key, or Space, to record a note. Let go to send it. An example of Push to talk. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/push-to-talk-demo.json` |
| motorized-fader-demo | registry:example | The agent adjusts its own temperature; grab the fader to take over, then hand it back. An example of Motorized fader. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/motorized-fader-demo.json` |
| mixer-strip-demo | registry:example | A lead agent rebalances effort as it goes. Take a fader to override it; mute pauses a subagent, solo runs one alone. An example of Mixer strip. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/mixer-strip-demo.json` |
| dip-switch-demo | registry:example | Flip a workspace's flags; the bank is also the config value you ship. One is locked by the organisation. An example of DIP switches. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/dip-switch-demo.json` |
| patch-bay-demo | registry:example | Patch a billing provider's events to your handlers. One event can feed several handlers. An example of Patch bay. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/patch-bay-demo.json` |
| keysort-filter-demo | registry:example | Push needles through to find the contracts with every attribute. An example of Keysort filter. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/keysort-filter-demo.json` |
| visible-file-demo | registry:example | Signals slide along each card as its task moves through the stages. An example of Visible file. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/visible-file-demo.json` |
| contact-sheet-demo | registry:example | Eight variants of one prompt. Circle the keepers, cross out the rest. An example of Contact sheet. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/contact-sheet-demo.json` |
| split-flap-demo | registry:example | Each region's status flips over as its rollout moves on. An example of Split-flap board. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/split-flap-demo.json` |
| time-card-demo | registry:example | Three sessions on the card already. Punch in, then out, and watch the clock stamp each time. An example of Time card. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/time-card-demo.json` |
| due-date-slip-demo | registry:example | The key lapsed four days ago. Renew it, and again, until the renewals run out. An example of Due-date slip. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/due-date-slip-demo.json` |
| text-field-demo | registry:example | Fields validate as you leave them and again on save; the server's answer comes back on the field it's about. Save as is: the URL is taken. An example of Text f… | `npx shadcn@latest add https://bevel-ui.vercel.app/r/text-field-demo.json` |
| text-field-demo-search | registry:example | An icon and a key hint in the slot. ⌘K or / focuses it from anywhere on the page. An example of Text field. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/text-field-demo-search.json` |
| toggle-lever-demo | registry:example | A lever per row, and a master lever that pauses them all. An example of Toggle lever. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/toggle-lever-demo.json` |
| latch-checkbox-demo | registry:example | Which tools an agent may use. The top key presses them all, and sits half-down while only some are on. An example of Latch checkbox. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/latch-checkbox-demo.json` |
| preset-keys-demo | registry:example | The tabs over a docs example, at the small size. An example of Preset keys. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/preset-keys-demo.json` |
| preset-keys-demo-range | registry:example | A segmented range picker over a usage chart. An example of Preset keys. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/preset-keys-demo-range.json` |
| tooltip-demo | registry:example | An editor toolbar. Hover one button and slide along: each label prints at once. An example of Tooltip. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/tooltip-demo.json` |
| tooltip-demo-tapes | registry:example | Each label feeds out from its own side. Red and blue tape are for the label that must stand out. An example of Tooltip. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/tooltip-demo-tapes.json` |
| popover-demo | registry:example | A link to copy and who can see it. An example of Popover. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/popover-demo.json` |
| menu-demo | registry:example | The menu on a docs page with a Markdown version: copy it, view it, or open it in ChatGPT or Claude. Pass markdownUrl. An example of Menu. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/menu-demo.json` |
| menu-demo-file-actions | registry:example | Shortcuts as keycaps, a submenu, a setting with a lamp, a sort order and a destructive item. An example of Menu. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/menu-demo-file-actions.json` |
| dialog-demo | registry:example | An alert dialog with a red key. Cancel takes focus, and a stray click outside does nothing. An example of Dialog. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/dialog-demo.json` |
| dialog-demo-rename | registry:example | Rename a document. Enter saves; Escape, × or Cancel leave it. An example of Dialog. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/dialog-demo-rename.json` |
| dialog-demo-command | registry:example | ⌘K opens a palette in the dialog: top-aligned, no padding, no fasteners. An example of Dialog. | `npx shadcn@latest add https://bevel-ui.vercel.app/r/dialog-demo-command.json` |

## For AI agents

```text
You are adding components from @bevel to a shadcn-compatible project.
1. Read this file (https://sh4dcn.netlify.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.netlify.app/json (library slug: bevel).
```