ActiveAnimated components2
@bevel
Animated components · MIT · data updated 2026-10-27
Tactile, skeuomorphic React components for real product work: guarded switches, annunciators, motorized faders, split-flap boards. Base UI and Tailwind CSS v4.
accessibilityaianimationbuttonscardschartscryptoe-commerceiconsmedianavigationoverlayspaymentsretrotheming
Install
npx shadcn@latest add https://bevel-ui.vercel.app/r/registry.jsonHealth
StatusActive
Last commit1 day ago
LicenseMIT
Open issues0
ArchivedNo
Stars2
Components (121)
beveltheme-transitionthemesfeedbackkeyicon-keykbdbadgewalletpayment-cardamountnumber-wheelmeterstampreceiptticket-sheetdialbreakerledgerkeycardname-tagcitationtask-planactivity-logapprovaldelegation-boardredlineredactionguarded-switchvigilancelockouttake-a-numberengine-telegraphannunciatordetent-knobpush-to-talkmotorized-fadermixer-stripdip-switchpatch-baykeysort-filtervisible-filecontact-sheetsplit-flaptime-carddue-date-sliptext-fieldtoggle-leverlatch-checkboxpreset-keystooltippopovermenudialogagent-consolebilling-deskrelease-hallreview-deskkey-demokey-demo-variants
Components: bevel, theme-transition, themes, feedback, key, icon-key, kbd, badge, wallet, payment-card, amount, number-wheel, meter, stamp, receipt, ticket-sheet, dial, breaker, ledger, keycard, name-tag, citation, task-plan, activity-log, approval, delegation-board, redline, redaction, guarded-switch, vigilance, lockout, take-a-number, engine-telegraph, annunciator, detent-knob, push-to-talk, motorized-fader, mixer-strip, dip-switch, patch-bay, keysort-filter, visible-file, contact-sheet, split-flap, time-card, due-date-slip, text-field, toggle-lever, latch-checkbox, preset-keys, tooltip, popover, menu, dialog, agent-console, billing-desk, release-hall, review-desk, key-demo, key-demo-variants, icon-key-demo, kbd-demo, badge-demo, wallet-demo, wallet-demo-billing, wallet-demo-usage, payment-card-demo, amount-demo, number-wheel-demo, meter-demo, meter-demo-prepaid, stamp-demo, receipt-demo, ticket-sheet-demo, ticket-sheet-demo-credits-checkout, dial-demo, dial-demo-auto-top-up, breaker-demo, ledger-demo, keycard-demo, keycard-demo-swipe, name-tag-demo, citation-demo, task-plan-demo, activity-log-demo, approval-demo, delegation-board-demo, redline-demo, redaction-demo, guarded-switch-demo, vigilance-demo, lockout-demo, take-a-number-demo, engine-telegraph-demo, annunciator-demo, detent-knob-demo, push-to-talk-demo, motorized-fader-demo, mixer-strip-demo, dip-switch-demo, patch-bay-demo, keysort-filter-demo, visible-file-demo, contact-sheet-demo, split-flap-demo, time-card-demo, due-date-slip-demo, text-field-demo, text-field-demo-search, toggle-lever-demo, latch-checkbox-demo, preset-keys-demo, preset-keys-demo-range, tooltip-demo, tooltip-demo-tapes, popover-demo, menu-demo, menu-demo-file-actions, dialog-demo, dialog-demo-rename, dialog-demo-commandPreview
Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.