{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "bevel", "homepage": "https://github.com/hiteshbandhu/bevel", "items": [ { "name": "bevel", "type": "registry:item", "title": "Bevel foundation", "categories": [ "foundation" ], "description": "Light, depth, materials, motion and shape tokens, plus the utilities components use to apply them.", "css": { ":root": { "--bevel-highlight": "oklch(1 0 0 / 0.22)", "--bevel-highlight-strong": "oklch(1 0 0 / 0.35)", "--bevel-shade": "oklch(0 0 0 / 0.32)", "--bevel-shade-strong": "oklch(0 0 0 / 0.5)", "--bevel-cast": "oklch(0.25 0.03 50 / 0.22)", "--bevel-deboss": "0 -1px 0 oklch(0 0 0 / 0.45), 0 1px 0 oklch(1 0 0 / 0.12)", "--bevel-material": "oklch(0.47 0.085 52)", "--bevel-material-edge": "oklch(0.3 0.06 44)", "--bevel-material-recess": "oklch(0.2 0.008 260)", "--bevel-grain": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E\")", "--bevel-grain-size": "180px", "--bevel-depth-recessed": "inset 0 1px 2px var(--bevel-shade-strong), 0 1px 0 var(--bevel-highlight)", "--bevel-depth-flush": "inset 0 1px 0 var(--bevel-highlight), inset 0 -1px 0 var(--bevel-shade)", "--bevel-depth-raised": "inset 0 1px 0 var(--bevel-highlight), 0 1px 0 var(--bevel-material-edge), 0 2px 0 var(--bevel-material-edge), 0 3px 5px var(--bevel-shade)", "--bevel-depth-pressed": "inset 0 1px 2px var(--bevel-shade), 0 1px 0 var(--bevel-highlight)", "--bevel-depth-object": "inset 0 1px 0 var(--bevel-highlight), inset 0 -1px 0 var(--bevel-shade), 0 0 0 1px var(--bevel-material-edge), 0 1px 1px var(--bevel-cast), 0 6px 12px -2px var(--bevel-cast), 0 18px 32px -8px var(--bevel-cast)", "--bevel-depth-cast-sm": "0 4px 6px var(--bevel-cast)", "--bevel-depth-sheet": "inset 0 1px 0 var(--bevel-highlight-strong), inset 0 0 0 1px oklch(0 0 0 / 0.12), 0 -1px 2px oklch(0 0 0 / 0.18)", "--bevel-ease-out": "cubic-bezier(0.23, 1, 0.32, 1)", "--bevel-ease-in-out": "cubic-bezier(0.77, 0, 0.175, 1)", "--bevel-ease-spring": "linear(0, 0.06, 0.202, 0.38, 0.561, 0.723, 0.856, 0.955, 1.023, 1.062, 1.081, 1.083, 1.075, 1.062, 1.047, 1.032, 1.019, 1.009, 1.002, 0.997, 0.994, 0.993, 0.993, 0.994, 1)", "--bevel-duration-press": "100ms", "--bevel-duration-small": "200ms", "--bevel-duration-move": "300ms", "--bevel-duration-ambient": "520ms", "--bevel-stagger": "30ms", "--bevel-lift": "3px", "--bevel-perspective": "30rem", "--bevel-dim": "0.82", "--bevel-radius-xs": "0.25rem", "--bevel-radius-sm": "0.5rem", "--bevel-radius-md": "0.625rem", "--bevel-radius-lg": "1rem", "--bevel-radius-xl": "1.5rem", "--bevel-stitch-width": "1.5px", "--bevel-stitch-inset": "0.375rem", "--bevel-amount": "2.25rem", "--bevel-amount-minor": "1.25rem", "--bevel-label": "0.75rem", "--bevel-fine": "0.6875rem", "--bevel-tracking-label": "0.08em", "--bevel-tracking-print": "0.06em", "--bevel-paper": "oklch(0.975 0.008 85)", "--bevel-paper-foreground": "oklch(0.28 0.02 260)", "--bevel-paper-muted": "oklch(0.48 0.015 260)", "--bevel-paper-rule": "oklch(0.78 0.04 240 / 0.45)", "--bevel-paper-margin": "oklch(0.68 0.14 25 / 0.45)", "--bevel-fibre": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .35' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .18 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E\")", "--bevel-ink-texture": "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='i'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 0 0 0 2.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23i)'/%3E%3C/svg%3E\")", "--bevel-ink-red": "oklch(0.52 0.19 27)", "--bevel-ink-blue": "oklch(0.44 0.14 262)", "--bevel-ink-green": "oklch(0.5 0.12 155)", "--bevel-ink-black": "oklch(0.3 0.01 260)", "--bevel-ink-amber": "oklch(0.55 0.13 65)", "--bevel-brass": "oklch(0.76 0.11 82)", "--bevel-brass-edge": "oklch(0.52 0.08 70)", "--bevel-ivory": "oklch(0.95 0.025 90)", "--bevel-ivory-foreground": "oklch(0.25 0.015 60)", "--bevel-needle": "oklch(0.55 0.2 27)", "--bevel-pad": "oklch(0.95 0.075 98)", "--bevel-pad-foreground": "oklch(0.27 0.03 255)", "--bevel-pad-rule": "oklch(0.72 0.06 235 / 0.45)", "--bevel-pad-margin": "oklch(0.62 0.16 25 / 0.55)", "--bevel-pen-red": "oklch(0.52 0.2 27)", "--bevel-pen-blue": "oklch(0.42 0.15 262)", "--bevel-pencil": "oklch(0.55 0.01 260)", "--bevel-sticker": "oklch(0.9 0.12 95)", "--bevel-sticker-foreground": "oklch(0.26 0.03 70)", "--bevel-font-marker": "\"Permanent Marker\", \"Marker Felt\", \"Chalkboard SE\", ui-rounded, \"Arial Rounded MT Bold\", system-ui, sans-serif" }, ".dark": { "--bevel-highlight": "oklch(1 0 0 / 0.14)", "--bevel-paper": "oklch(0.88 0.008 85)", "--bevel-ivory": "oklch(0.86 0.022 90)", "--bevel-pad": "oklch(0.86 0.07 98)", "--bevel-cast": "oklch(0 0 0 / 0.55)" }, "@utility bevel-recessed": { "background-color": "var(--bevel-material-recess)", "box-shadow": "var(--bevel-depth-recessed)" }, "@utility bevel-flush": { "box-shadow": "var(--bevel-depth-flush)" }, "@utility bevel-raised": { "background-color": "color-mix(in oklch, var(--bevel-material), white 7%)", "background-image": "linear-gradient(to bottom, var(--bevel-highlight), transparent 60%)", "box-shadow": "var(--bevel-depth-raised)" }, "@utility bevel-pressed": { "background-color": "color-mix(in oklch, var(--bevel-material), black 4%)", "background-image": "none", "box-shadow": "var(--bevel-depth-pressed)" }, "@utility bevel-object": { "box-shadow": "var(--bevel-depth-object)" }, "@utility bevel-leather": { "background-color": "var(--bevel-material)", "background-image": "var(--bevel-grain), linear-gradient(to bottom, var(--bevel-highlight), transparent 28%, transparent 72%, var(--bevel-shade))", "background-size": "var(--bevel-grain-size) var(--bevel-grain-size), 100% 100%", "background-blend-mode": "soft-light, normal" }, "@utility bevel-plastic": { "background-color": "var(--bevel-material)", "background-image": "linear-gradient(115deg, var(--bevel-highlight-strong), transparent 40%), linear-gradient(to bottom, transparent 25%, oklch(0 0 0 / 0.45))", "box-shadow": "var(--bevel-depth-sheet)" }, "@utility bevel-metal": { "background-color": "var(--bevel-material)", "background-image": "linear-gradient(to bottom, var(--bevel-highlight-strong), transparent 45%, var(--bevel-shade) 100%), repeating-linear-gradient(90deg, oklch(1 0 0 / 0.06) 0 1px, transparent 1px 3px)", "box-shadow": "inset 0 0 0 1px oklch(0 0 0 / 0.25), inset 0 1px 0 var(--bevel-highlight-strong)" }, "@utility bevel-deboss": { "text-shadow": "var(--bevel-deboss)" }, "@utility bevel-stitch": { "border-color": "var(--bevel-stitch, oklch(0.88 0.05 82 / 0.8))", "border-style": "dashed", "border-width": "var(--bevel-stitch-width)", "filter": "drop-shadow(0 1px 0 var(--bevel-shade))" }, "@utility bevel-fill": { "background-color": "var(--bevel-fill)", "background-image": "linear-gradient(to bottom, oklch(1 0 0 / 0.55), transparent 55%, oklch(0 0 0 / 0.18))", "box-shadow": "0 0 6px -1px var(--bevel-fill)" }, "@utility bevel-led": { "background-color": "var(--bevel-led)", "background-image": "radial-gradient(circle at 35% 30%, oklch(1 0 0 / 0.85), transparent 45%)", "box-shadow": "0 0 6px var(--bevel-led), inset 0 -1px 1px oklch(0 0 0 / 0.35), 0 1px 0 var(--bevel-highlight)" }, "@utility bevel-paper": { "background-color": "var(--bevel-paper)", "background-image": "var(--bevel-fibre)", "background-size": "240px 240px", "color": "var(--bevel-paper-foreground)", "box-shadow": "0 1px 1px var(--bevel-cast), 0 6px 14px -4px var(--bevel-cast)" }, "@utility bevel-ink": { "color": "var(--bevel-ink, var(--bevel-ink-red))", "border-color": "currentColor", "mix-blend-mode": "multiply", "mask-image": "var(--bevel-ink-texture)", "mask-size": "160px 160px" }, "@utility bevel-glass": { "pointer-events": "none", "background-image": "linear-gradient(165deg, var(--bevel-highlight-strong) 0%, transparent 38%, transparent 70%, var(--bevel-shade) 100%)" }, "[data-bevel-family=\"leather\"]": { "--bevel-cast": "oklch(0.25 0.03 50 / 0.22)" }, "[data-bevel-family=\"paper\"]": { "--bevel-cast": "oklch(0.3 0.01 250 / 0.16)" }, ".dark :is([data-bevel-family=\"leather\"], [data-bevel-family=\"paper\"])": { "--bevel-cast": "oklch(0 0 0 / 0.55)" }, "@utility bevel-ruled": { "background-color": "var(--bevel-sheet, var(--bevel-paper))", "background-image": "linear-gradient( to right, transparent calc(var(--bevel-rule-margin) - 1px), var(--bevel-sheet-margin, var(--bevel-paper-margin)) calc(var(--bevel-rule-margin) - 1px) calc(var(--bevel-rule-margin) + 1px), transparent calc(var(--bevel-rule-margin) + 1px) ), repeating-linear-gradient( to bottom, transparent 0 calc(var(--bevel-rule-height) - 1px), var(--bevel-sheet-rule, var(--bevel-paper-rule)) calc(var(--bevel-rule-height) - 1px) var(--bevel-rule-height) ), var(--bevel-fibre)", "background-size": "100% 100%, 100% 100%, 240px 240px", "background-attachment": "local", "color": "var(--bevel-paper-foreground)", "box-shadow": "0 1px 1px var(--bevel-cast), 0 6px 14px -4px var(--bevel-cast)" } } }, { "name": "theme-transition", "type": "registry:lib", "title": "Theme transition", "categories": [ "foundation" ], "description": "Switch light and dark as a change in lighting: the room dims, or the lights come up. Uses View Transitions.", "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json" ], "files": [ { "path": "registry/bevel/lib/theme-transition.ts", "type": "registry:lib" } ], "css": { "[data-theme-transition]::view-transition-old(root), [data-theme-transition]::view-transition-new(root)": { "animation": "none", "mix-blend-mode": "normal" }, "[data-theme-transition=\"dark\"]::view-transition-old(root)": { "z-index": "1", "animation": "theme-lights-down var(--bevel-duration-ambient) var(--bevel-ease-in-out) both" }, "[data-theme-transition=\"light\"]::view-transition-new(root)": { "animation": "theme-lights-up calc(var(--bevel-duration-ambient) * 0.7) var(--bevel-ease-out) both" }, "@keyframes theme-lights-down": { "to": { "opacity": "0", "filter": "brightness(0.45)" } }, "@keyframes theme-lights-up": { "from": { "opacity": "0", "filter": "brightness(0.7)" } } } }, { "name": "themes", "type": "registry:item", "title": "Material themes", "categories": [ "foundation" ], "description": "Brass, bakelite and anodized aluminium. Set data-bevel-theme on or any container; build your own at /themes.", "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json" ], "css": { "[data-bevel-theme]": { "--bevel-theme-panel-edge": "oklch(from var(--bevel-theme-panel) calc(l - 0.1) c h)", "--bevel-theme-panel-deep": "oklch(from var(--bevel-theme-panel) calc(l - 0.06) c h)", "--bevel-theme-key": "oklch(from var(--bevel-theme-panel) calc(l + 0.1) c h)", "--bevel-theme-hardware-edge": "oklch(from var(--bevel-theme-hardware) calc(l - 0.24) calc(c * 0.7) h)", "--bevel-brass": "var(--bevel-theme-hardware)", "--bevel-brass-edge": "var(--bevel-theme-hardware-edge)", "--bevel-ivory": "var(--bevel-theme-face)", "--annunciator-panel": "var(--bevel-theme-panel)", "--annunciator-panel-edge": "var(--bevel-theme-panel-edge)", "--annunciator-off": "var(--bevel-theme-panel-deep)", "--dip-switch-black": "var(--bevel-theme-panel)", "--dip-switch-black-edge": "var(--bevel-theme-panel-edge)", "--breaker-panel": "var(--bevel-theme-panel)", "--breaker-panel-edge": "var(--bevel-theme-panel-edge)", "--breaker-body": "var(--bevel-theme-panel-deep)", "--detent-knob-cap": "var(--bevel-theme-panel)", "--detent-knob-cap-edge": "var(--bevel-theme-panel-edge)", "--detent-knob-pointer": "var(--bevel-theme-face)", "--guarded-switch-plate": "var(--bevel-theme-panel)", "--guarded-switch-plate-edge": "var(--bevel-theme-panel-edge)", "--meter-face": "var(--bevel-theme-panel-deep)", "--meter-foreground": "var(--bevel-theme-face)", "--mixer-strip-panel": "var(--bevel-theme-panel)", "--mixer-strip-panel-edge": "var(--bevel-theme-panel-edge)", "--mixer-strip-key": "var(--bevel-theme-key)", "--motorized-fader-panel": "var(--bevel-theme-panel)", "--motorized-fader-panel-edge": "var(--bevel-theme-panel-edge)", "--motorized-fader-line": "var(--bevel-theme-panel-deep)", "--patch-bay-panel": "var(--bevel-theme-panel)", "--patch-bay-panel-edge": "var(--bevel-theme-panel-edge)", "--patch-bay-ring": "var(--bevel-theme-hardware)", "--push-to-talk-body": "var(--bevel-theme-panel)", "--push-to-talk-body-edge": "var(--bevel-theme-panel-edge)", "--push-to-talk-key": "var(--bevel-theme-key)", "--split-flap-housing": "var(--bevel-theme-panel)", "--split-flap-housing-edge": "var(--bevel-theme-panel-edge)", "--split-flap-foreground": "var(--bevel-theme-face)", "--time-card-key": "var(--bevel-theme-panel)", "--time-card-key-edge": "var(--bevel-theme-panel-edge)", "--vigilance-panel": "var(--bevel-theme-panel)", "--vigilance-panel-edge": "var(--bevel-theme-panel-edge)", "--key-primary": "var(--bevel-theme-hardware)", "--key-primary-side": "var(--bevel-theme-hardware-edge)", "--key-primary-foreground": "oklch(from var(--bevel-theme-hardware) 0.25 c h)", "--key-secondary": "var(--bevel-theme-key)", "--key-secondary-side": "var(--bevel-theme-panel-edge)", "--key-secondary-foreground": "var(--bevel-theme-face)", "--bevel-radius-xs": "calc(0.25rem * var(--bevel-radius-scale, 1))", "--bevel-radius-sm": "calc(0.5rem * var(--bevel-radius-scale, 1))", "--bevel-radius-md": "calc(0.625rem * var(--bevel-radius-scale, 1))", "--bevel-radius-lg": "calc(1rem * var(--bevel-radius-scale, 1))", "--bevel-radius-xl": "calc(1.5rem * var(--bevel-radius-scale, 1))", "--bevel-duration-press": "calc(100ms * var(--bevel-speed, 1))", "--bevel-duration-small": "calc(200ms * var(--bevel-speed, 1))", "--bevel-duration-move": "calc(300ms * var(--bevel-speed, 1))", "--bevel-duration-ambient": "calc(520ms * var(--bevel-speed, 1))" }, "[data-bevel-theme=\"brass\"]": { "--bevel-theme-panel": "oklch(0.33 0.045 62)", "--bevel-theme-hardware": "oklch(0.79 0.13 82)", "--bevel-theme-face": "oklch(0.94 0.04 85)", "--bevel-highlight": "oklch(1 0.03 85 / 0.26)", "--bevel-shade": "oklch(0.1 0.03 50 / 0.36)", "--bevel-cast": "oklch(0.3 0.06 55 / 0.28)", "--bevel-radius-scale": "1", "--bevel-speed": "1.15" }, "[data-bevel-theme=\"bakelite\"]": { "--bevel-theme-panel": "oklch(0.3 0.06 32)", "--bevel-theme-hardware": "oklch(0.84 0.012 90)", "--bevel-theme-face": "oklch(0.92 0.045 88)", "--bevel-highlight": "oklch(1 0 0 / 0.34)", "--bevel-shade": "oklch(0.08 0.03 30 / 0.42)", "--bevel-cast": "oklch(0.22 0.05 30 / 0.26)", "--bevel-radius-scale": "1.6", "--bevel-speed": "1" }, "[data-bevel-theme=\"anodized\"]": { "--bevel-theme-panel": "oklch(0.46 0.1 252)", "--bevel-theme-hardware": "oklch(0.86 0.012 250)", "--bevel-theme-face": "oklch(0.97 0.006 250)", "--bevel-highlight": "oklch(1 0 0 / 0.3)", "--bevel-shade": "oklch(0.1 0.04 255 / 0.34)", "--bevel-cast": "oklch(0.25 0.05 255 / 0.22)", "--bevel-radius-scale": "0.55", "--bevel-speed": "0.8" }, ".dark [data-bevel-theme], .dark[data-bevel-theme]": { "--bevel-highlight": "oklch(1 0 0 / 0.16)", "--bevel-cast": "oklch(0 0 0 / 0.55)" } } }, { "name": "feedback", "type": "registry:lib", "title": "Sound and haptics", "description": "Opt-in sound and haptics for Bevel controls: and useBevelFeedback(). Synthesised with Web Audio; silent outside the provider.", "categories": [ "foundation" ], "files": [ { "path": "registry/bevel/lib/feedback.ts", "type": "registry:lib" } ] }, { "name": "key", "type": "registry:ui", "title": "Key", "description": "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.", "categories": [ "essentials" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/feedback.json" ], "files": [ { "path": "registry/bevel/ui/key.tsx", "type": "registry:ui" } ], "css": { ":root": { "--key-primary": "oklch(0.76 0.14 68)", "--key-primary-side": "oklch(0.58 0.13 55)", "--key-primary-foreground": "oklch(0.24 0.04 55)", "--key-secondary": "oklch(0.97 0.004 250)", "--key-secondary-side": "oklch(0.8 0.008 250)", "--key-secondary-foreground": "oklch(0.27 0.012 250)", "--key-danger": "oklch(0.55 0.19 27)", "--key-danger-side": "oklch(0.4 0.15 27)", "--key-danger-foreground": "oklch(0.98 0.01 27)", "--key-ghost-foreground": "currentColor", "--key-ghost-hover": "oklch(0.5 0.01 250 / 0.08)", "--key-ghost-well": "oklch(0.5 0.01 250 / 0.14)", "--key-lamp": "oklch(0.82 0.17 145)", "--key-lamp-off": "oklch(0.45 0.01 250 / 0.55)", "--key-travel-sm": "2px", "--key-travel": "3px", "--key-travel-lg": "3px" }, ".dark": { "--key-primary": "oklch(0.74 0.13 68)", "--key-primary-side": "oklch(0.5 0.11 55)", "--key-secondary": "oklch(0.36 0.008 250)", "--key-secondary-side": "oklch(0.22 0.008 250)", "--key-secondary-foreground": "oklch(0.94 0.01 90)", "--key-danger": "oklch(0.56 0.18 27)", "--key-danger-side": "oklch(0.36 0.13 27)", "--key-ghost-hover": "oklch(1 0 0 / 0.06)", "--key-ghost-well": "oklch(0 0 0 / 0.3)" }, "[data-slot=\"key\"]": { "--key-depth": "var(--key-travel)", "--key-cap": "var(--key-primary)", "--key-cap-side": "var(--key-primary-side)", "--key-cap-foreground": "var(--key-primary-foreground)", "--bevel-led": "var(--key-lamp)", "--key-cap-sheen": "var(--bevel-highlight)", "--key-cap-light": "inset 0 1px 0 var(--bevel-highlight-strong), inset 0 0 0 1px oklch(0 0 0 / 0.06)", "--key-cast": "0 1px 2px var(--bevel-cast)" }, "[data-slot=\"key\"][data-size=\"sm\"]": { "--key-depth": "var(--key-travel-sm)" }, "[data-slot=\"key\"][data-size=\"lg\"]": { "--key-depth": "var(--key-travel-lg)" }, "[data-slot=\"key\"][data-variant=\"secondary\"]": { "--key-cap": "var(--key-secondary)", "--key-cap-side": "var(--key-secondary-side)", "--key-cap-foreground": "var(--key-secondary-foreground)" }, "[data-slot=\"key\"][data-variant=\"danger\"]": { "--key-cap": "var(--key-danger)", "--key-cap-side": "var(--key-danger-side)", "--key-cap-foreground": "var(--key-danger-foreground)" }, "[data-slot=\"key\"][data-variant=\"ghost\"]": { "--key-depth": "0px", "--key-cap": "transparent", "--key-cap-side": "transparent", "--key-cap-foreground": "var(--key-ghost-foreground)", "--key-cap-sheen": "transparent", "--key-cap-light": "none", "--key-cast": "none" }, "[data-slot=\"key\"][data-variant=\"ghost\"]:hover:not([data-state])": { "--key-cap": "var(--key-ghost-hover)" }, "[data-slot=\"key\"][data-variant=\"ghost\"]:is([data-pressed], [data-state=\"pending\"])": { "--key-cap": "var(--key-ghost-well)", "--key-cap-light": "var(--bevel-depth-pressed)" }, "[data-slot=\"key\"][data-state=\"disabled\"]": { "--key-cap-light": "none" } } }, { "name": "icon-key", "type": "registry:ui", "title": "Icon key", "description": "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.", "categories": [ "essentials" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/key.json" ], "files": [ { "path": "registry/bevel/ui/icon-key.tsx", "type": "registry:ui" } ] }, { "name": "kbd", "type": "registry:ui", "title": "Kbd", "description": "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.", "categories": [ "essentials" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json" ], "files": [ { "path": "registry/bevel/ui/kbd.tsx", "type": "registry:ui" } ], "css": { ":root": { "--kbd-cap": "oklch(0.985 0.003 250)", "--kbd-side": "oklch(0.82 0.008 250)", "--kbd-foreground": "oklch(0.4 0.012 250)", "--kbd-travel": "2px" }, ".dark": { "--kbd-cap": "oklch(0.34 0.008 250)", "--kbd-side": "oklch(0.21 0.008 250)", "--kbd-foreground": "oklch(0.88 0.01 250)" }, "[data-slot=\"kbd\"]": { "--kbd-cap-light": "inset 0 1px 0 var(--bevel-highlight-strong), inset 0 0 0 1px oklch(0 0 0 / 0.05)", "--kbd-cast": "0 0 0 1px oklch(0 0 0 / 0.06), 0 1px 1px var(--bevel-cast)" } } }, { "name": "badge", "type": "registry:ui", "title": "Badge", "description": "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.", "categories": [ "essentials" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json" ], "files": [ { "path": "registry/bevel/ui/badge.tsx", "type": "registry:ui" } ], "css": { ":root": { "--badge-plate-color": "oklch(0.955 0.004 250)", "--badge-plate-foreground": "oklch(0.38 0.012 250)", "--badge-neutral": "oklch(0.86 0.02 90)", "--badge-info": "oklch(0.7 0.14 245)", "--badge-success": "oklch(0.74 0.17 150)", "--badge-warning": "oklch(0.8 0.16 75)", "--badge-danger": "oklch(0.63 0.22 27)" }, ".dark": { "--badge-plate-color": "oklch(0.27 0.008 250)", "--badge-plate-foreground": "oklch(0.86 0.01 250)" }, "[data-slot=\"badge\"]": { "--badge-plate": "var(--badge-plate-color)", "--badge-foreground": "var(--badge-plate-foreground)", "--badge-plate-edge": "inset 0 1px 0 var(--bevel-highlight), inset 0 0 0 1px oklch(0 0 0 / 0.08)", "--badge-lamp": "var(--badge-neutral)", "--bevel-led": "var(--badge-lamp)", "--badge-lamp-off": "color-mix(in oklch, var(--badge-lamp), black 55%)" }, "[data-slot=\"badge\"][data-tone=\"neutral\"]": { "--badge-lamp": "var(--badge-neutral)" }, "[data-slot=\"badge\"][data-tone=\"info\"]": { "--badge-lamp": "var(--badge-info)" }, "[data-slot=\"badge\"][data-tone=\"success\"]": { "--badge-lamp": "var(--badge-success)" }, "[data-slot=\"badge\"][data-tone=\"warning\"]": { "--badge-lamp": "var(--badge-warning)" }, "[data-slot=\"badge\"][data-tone=\"danger\"]": { "--badge-lamp": "var(--badge-danger)" } } }, { "name": "wallet", "type": "registry:ui", "title": "Wallet", "description": "A customer's stored balance, shown as a leather wallet. Saved cards sit in it, and picking one pulls it out of the pocket.", "categories": [ "money" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/payment-card.json", "https://bevel-ui.vercel.app/r/amount.json" ], "files": [ { "path": "registry/bevel/ui/wallet.tsx", "type": "registry:ui" } ], "css": { ":root": { "--wallet-leather": "oklch(0.47 0.085 52)", "--wallet-lining": "oklch(0.36 0.07 46)", "--wallet-edge": "oklch(0.3 0.06 44)", "--wallet-recess": "oklch(0.29 0.055 44)", "--wallet-foreground": "oklch(0.97 0.02 82)", "--wallet-muted-foreground": "oklch(0.88 0.035 72)", "--wallet-stitch": "oklch(0.88 0.05 82 / 0.8)", "--wallet-meter": "oklch(0.84 0.12 85)", "--wallet-ok": "oklch(0.82 0.18 150)", "--wallet-low": "oklch(0.86 0.16 82)", "--wallet-danger": "oklch(0.72 0.19 28)", "--wallet-notch": "1.75rem", "--wallet-card-peek": "2.25rem", "--wallet-card-pull": "0.5rem", "--wallet-card-enter": "3rem", "--wallet-card-step": "1.25rem", "--wallet-card-step-pick": "2rem", "--wallet-card-lift": "0px", "--wallet-card-slots": "3" }, "[data-slot=\"wallet\"][data-variant=\"noir\"]": { "--wallet-leather": "oklch(0.29 0.008 260)", "--wallet-lining": "oklch(0.22 0.008 260)", "--wallet-edge": "oklch(0.16 0.006 260)", "--wallet-recess": "oklch(0.17 0.006 260)", "--wallet-foreground": "oklch(0.96 0.004 260)", "--wallet-muted-foreground": "oklch(0.8 0.008 260)", "--wallet-stitch": "oklch(0.72 0.01 260 / 0.75)", "--wallet-meter": "oklch(0.88 0.01 260)" }, "[data-slot=\"wallet\"][data-variant=\"oxblood\"]": { "--wallet-leather": "oklch(0.38 0.105 22)", "--wallet-lining": "oklch(0.29 0.085 20)", "--wallet-edge": "oklch(0.23 0.07 20)", "--wallet-recess": "oklch(0.22 0.065 20)", "--wallet-foreground": "oklch(0.96 0.02 70)", "--wallet-muted-foreground": "oklch(0.87 0.035 50)", "--wallet-stitch": "oklch(0.86 0.05 75 / 0.75)" }, "[data-slot=\"wallet\"]": { "--bevel-material": "var(--wallet-lining)", "--bevel-material-edge": "var(--wallet-edge)", "--bevel-material-recess": "var(--wallet-recess)", "--bevel-stitch": "var(--wallet-stitch)", "--bevel-fill": "var(--wallet-meter)", "--bevel-led": "var(--wallet-ok)" }, "[data-slot=\"wallet-pocket\"]": { "--bevel-material": "var(--wallet-leather)" }, "[data-slot=\"wallet\"][data-status=\"low\"]": { "--bevel-fill": "var(--wallet-low)", "--bevel-led": "var(--wallet-low)" }, "[data-slot=\"wallet\"]:is([data-status=\"empty\"], [data-status=\"insufficient\"])": { "--bevel-fill": "var(--wallet-danger)", "--bevel-led": "var(--wallet-danger)" }, "@utility wallet-pocket": { "background-color": "var(--bevel-material)", "background-image": "radial-gradient( circle at 50% 0, transparent var(--wallet-notch), var(--bevel-highlight) calc(var(--wallet-notch) + 1px), transparent calc(var(--wallet-notch) + 4px) ), var(--bevel-grain), linear-gradient(to bottom, var(--bevel-highlight), transparent 28%, transparent 72%, var(--bevel-shade))", "background-size": "100% 100%, var(--bevel-grain-size) var(--bevel-grain-size), 100% 100%", "background-blend-mode": "normal, soft-light, normal", "box-shadow": "inset 0 1px 0 var(--bevel-highlight), inset 0 2px 0 var(--bevel-shade), inset 0 -2px 3px var(--bevel-shade)", "mask-image": "radial-gradient(circle at 50% 0, transparent var(--wallet-notch), black calc(var(--wallet-notch) + 0.5px))" }, "@layer components": { "[data-slot=\"wallet-cards\"]": { "--wallet-card-gap": "calc( var(--wallet-card-step) * (var(--wallet-card-slots) - 1) / max(var(--wallet-card-count) - 1, var(--wallet-card-slots) - 1) )", "height": "calc(var(--wallet-card-peek) + (var(--wallet-card-slots) - 1) * var(--wallet-card-step))" }, "[data-slot=\"wallet-cards\"][data-selectable]": { "--wallet-card-gap": "var(--wallet-card-step-pick)", "height": "calc(var(--wallet-card-peek) + max(var(--wallet-card-count) - 1, 0) * var(--wallet-card-step-pick))" } } } }, { "name": "payment-card", "type": "registry:ui", "title": "Payment card", "description": "A plastic payment card at real proportions. Use it on its own, as a radio in a picker, or inside a Wallet.", "categories": [ "money" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json" ], "files": [ { "path": "registry/bevel/ui/payment-card.tsx", "type": "registry:ui" } ], "css": { ":root": { "--payment-card-sapphire": "oklch(0.55 0.14 258)", "--payment-card-sapphire-foreground": "oklch(0.98 0.01 258)", "--payment-card-gold": "oklch(0.8 0.11 86)", "--payment-card-gold-foreground": "oklch(0.28 0.04 70)", "--payment-card-graphite": "oklch(0.27 0.015 260)", "--payment-card-graphite-foreground": "oklch(0.93 0.005 260)", "--payment-card-chip": "oklch(0.8 0.09 85)" }, "[data-slot=\"payment-card\"][data-tone=\"sapphire\"]": { "--bevel-material": "var(--payment-card-sapphire)", "--payment-card-foreground": "var(--payment-card-sapphire-foreground)" }, "[data-slot=\"payment-card\"][data-tone=\"gold\"]": { "--bevel-material": "var(--payment-card-gold)", "--payment-card-foreground": "var(--payment-card-gold-foreground)" }, "[data-slot=\"payment-card\"][data-tone=\"graphite\"]": { "--bevel-material": "var(--payment-card-graphite)", "--payment-card-foreground": "var(--payment-card-graphite-foreground)" } } }, { "name": "amount", "type": "registry:ui", "title": "Amount", "description": "A formatted figure with steady digits, in any currency and locale. Every amount in Bevel is one of these.", "categories": [ "money" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json" ], "files": [ { "path": "registry/bevel/lib/format-amount.ts", "type": "registry:lib" }, { "path": "registry/bevel/ui/amount.tsx", "type": "registry:ui" } ] }, { "name": "number-wheel", "type": "registry:ui", "title": "Number wheel", "description": "Mechanical rolling digits. Each digit is a printed drum that turns to its figure, lowest digit first.", "categories": [ "instruments" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/amount.json" ], "files": [ { "path": "registry/bevel/ui/number-wheel.tsx", "type": "registry:ui" } ], "css": { ":root": { "--number-wheel-cell": "1.25em", "--number-wheel-drum": "0.72em", "--number-wheel-plate": "0.08em" }, "[data-slot=\"number-wheel\"]": { "--bevel-material-recess": "oklch(0.16 0.01 260)", "--number-wheel-face": "var(--bevel-ivory)", "--number-wheel-foreground": "var(--bevel-ivory-foreground)" }, "[data-slot=\"number-wheel\"][data-tone=\"black\"]": { "--number-wheel-face": "oklch(0.22 0.01 260)", "--number-wheel-foreground": "oklch(0.95 0.01 90)" }, "@utility number-wheel-drum": { "background-color": "var(--number-wheel-face)", "background-image": "linear-gradient( to bottom, var(--bevel-shade-strong) 0%, transparent 28%, transparent 72%, var(--bevel-shade-strong) 100% )", "color": "var(--number-wheel-foreground)" } } }, { "name": "meter", "type": "registry:ui", "title": "Meter", "description": "A brass metering instrument with a rolling reading: live spend that ticks up, or a prepaid balance that counts down.", "categories": [ "money" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/number-wheel.json" ], "files": [ { "path": "registry/bevel/ui/meter.tsx", "type": "registry:ui" } ], "css": { ":root": { "--meter-face": "oklch(0.24 0.012 260)", "--meter-foreground": "oklch(0.93 0.02 90)", "--meter-muted-foreground": "oklch(0.74 0.02 90)", "--meter-running": "oklch(0.82 0.17 75)", "--meter-stopped": "oklch(0.45 0.01 260)" }, "[data-slot=\"meter\"]": { "--bevel-material": "var(--bevel-brass)", "--bevel-material-edge": "var(--bevel-brass-edge)", "--bevel-led": "var(--meter-stopped)" }, "[data-slot=\"meter\"][data-variant=\"graphite\"]": { "--bevel-material": "oklch(0.42 0.01 260)", "--bevel-material-edge": "oklch(0.28 0.01 260)" }, "[data-slot=\"meter\"][data-state=\"running\"]": { "--bevel-led": "var(--meter-running)" }, "[data-slot=\"meter-face\"]": { "--bevel-material": "var(--meter-face)", "--bevel-material-recess": "oklch(0.17 0.01 260)" }, "[data-slot=\"meter-button\"]": { "--bevel-material": "var(--bevel-brass)", "--bevel-material-edge": "var(--bevel-brass-edge)" } } }, { "name": "stamp", "type": "registry:ui", "title": "Stamp and seal", "description": "A rubber-stamp impression in ink for statuses, and an embossed seal for the moment something becomes official.", "categories": [ "marks" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json" ], "files": [ { "path": "registry/bevel/ui/stamp.tsx", "type": "registry:ui" } ], "css": { ":root": { "--stamp-border": "3px", "--stamp-tilt": "-4deg", "--stamp-land-scale": "1.4", "--seal-relief": "oklch(0.9 0.01 85)" }, "[data-slot=\"stamp\"]": { "--bevel-ink": "var(--bevel-ink-red)" }, "[data-slot=\"stamp\"][data-tone=\"blue\"]": { "--bevel-ink": "var(--bevel-ink-blue)" }, "[data-slot=\"stamp\"][data-tone=\"green\"]": { "--bevel-ink": "var(--bevel-ink-green)" }, "[data-slot=\"stamp\"][data-tone=\"amber\"]": { "--bevel-ink": "var(--bevel-ink-amber)" }, "[data-slot=\"stamp\"][data-tone=\"black\"]": { "--bevel-ink": "var(--bevel-ink-black)" }, "@utility seal-relief": { "color": "var(--seal-relief)", "filter": "drop-shadow(0 -1px 0 var(--bevel-highlight-strong)) drop-shadow(0 1px 1px var(--bevel-shade))" } } }, { "name": "receipt", "type": "registry:ui", "title": "Receipt", "description": "Thermal paper with torn edges. Lines print in as they're added; a stamp or seal lands when it's paid.", "categories": [ "money" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/amount.json", "https://bevel-ui.vercel.app/r/stamp.json" ], "files": [ { "path": "registry/bevel/ui/receipt.tsx", "type": "registry:ui" } ], "css": { ":root": { "--receipt-tooth": "0.625rem", "--receipt-carbon": "oklch(0.93 0.07 95)", "--receipt-carbon-offset": "0.375rem", "--receipt-print-in": "0.5em" }, "@utility receipt-edges": { "mask-image": "conic-gradient(from 135deg at top, transparent, black 1deg 89deg, transparent 90deg), conic-gradient(from -45deg at bottom, transparent, black 1deg 89deg, transparent 90deg), linear-gradient(black, black)", "mask-size": "var(--receipt-tooth) var(--receipt-tooth), var(--receipt-tooth) var(--receipt-tooth), 100% calc(100% - var(--receipt-tooth))", "mask-position": "top, bottom, center", "mask-repeat": "repeat-x, repeat-x, no-repeat" }, "@utility receipt-shadow": { "filter": "drop-shadow(0 1px 1px var(--bevel-cast)) drop-shadow(0 6px 10px var(--bevel-cast))" } } }, { "name": "ticket-sheet", "type": "registry:ui", "title": "Ticket sheet", "description": "A sheet of perforated tickets, one per option. Picking one tears it off. A radio group underneath.", "categories": [ "money" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json" ], "files": [ { "path": "registry/bevel/ui/ticket-sheet.tsx", "type": "registry:ui" } ], "css": { ":root": { "--ticket-hole": "0.25rem", "--ticket-tear-tilt": "-2deg", "--ticket-tear-lift": "0.375rem", "--ticket-vermilion": "oklch(0.5 0.17 32)", "--ticket-ultramarine": "oklch(0.45 0.15 265)", "--ticket-emerald": "oklch(0.44 0.1 160)", "--ticket-ochre": "oklch(0.78 0.13 80)", "--ticket-light-foreground": "oklch(0.98 0.01 90)", "--ticket-dark-foreground": "oklch(0.24 0.04 60)" }, "[data-slot=\"ticket\"]": { "--ticket-tone": "var(--ticket-vermilion)", "--ticket-foreground": "var(--ticket-light-foreground)" }, "[data-slot=\"ticket\"][data-tone=\"ultramarine\"]": { "--ticket-tone": "var(--ticket-ultramarine)" }, "[data-slot=\"ticket\"][data-tone=\"emerald\"]": { "--ticket-tone": "var(--ticket-emerald)" }, "[data-slot=\"ticket\"][data-tone=\"ochre\"]": { "--ticket-tone": "var(--ticket-ochre)", "--ticket-foreground": "var(--ticket-dark-foreground)" }, "@utility ticket-perforated": { "padding": "calc(var(--ticket-hole) * 2)", "mask-image": "radial-gradient(circle, transparent var(--ticket-hole), black calc(var(--ticket-hole) + 0.5px)), linear-gradient(black, black)", "mask-size": "calc(var(--ticket-hole) * 3) calc(var(--ticket-hole) * 3), 100% 100%", "mask-position": "calc(var(--ticket-hole) * -1.5) calc(var(--ticket-hole) * -1.5), center", "mask-repeat": "round, no-repeat", "mask-clip": "border-box, content-box", "mask-origin": "border-box, content-box" } } }, { "name": "dial", "type": "registry:ui", "title": "Gauge and dial", "description": "A needle on a brass-bezelled scale. Gauge reads a value; Dial sets one, turned by drag or keyboard.", "categories": [ "instruments" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/amount.json" ], "files": [ { "path": "registry/bevel/ui/dial.tsx", "type": "registry:ui" } ], "css": { ":root": { "--dial-mark-red": "oklch(0.58 0.2 27)", "--dial-mark-amber": "oklch(0.75 0.16 70)", "--dial-mark-green": "oklch(0.6 0.15 150)" }, "[data-slot=\"gauge\"], [data-slot=\"dial\"]": { "--bevel-material": "var(--bevel-brass)", "--bevel-material-edge": "var(--bevel-brass-edge)" }, "[data-slot=\"dial-mark\"]": { "--dial-mark": "var(--dial-mark-red)" }, "[data-slot=\"dial-mark\"][data-tone=\"amber\"]": { "--dial-mark": "var(--dial-mark-amber)" }, "[data-slot=\"dial-mark\"][data-tone=\"green\"]": { "--dial-mark": "var(--dial-mark-green)" } } }, { "name": "breaker", "type": "registry:ui", "title": "Breaker", "description": "A circuit breaker: on, off, or tripped until someone resets it. For spending caps, kill switches and feature flags.", "categories": [ "instruments" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/feedback.json" ], "files": [ { "path": "registry/bevel/ui/breaker.tsx", "type": "registry:ui" } ], "css": { ":root": { "--breaker-panel": "oklch(0.36 0.008 260)", "--breaker-panel-edge": "oklch(0.22 0.008 260)", "--breaker-body": "oklch(0.2 0.006 260)", "--breaker-lever": "oklch(0.93 0.008 90)", "--breaker-lever-edge": "oklch(0.7 0.01 90)", "--breaker-tripped": "oklch(0.6 0.21 27)", "--breaker-on": "oklch(0.8 0.17 150)", "--breaker-off": "oklch(0.4 0.01 260)", "--breaker-throw": "1.25rem", "--breaker-slot-height": "4.5rem" }, "[data-slot=\"breaker-panel\"]": { "--bevel-material": "var(--breaker-panel)", "--bevel-material-edge": "var(--breaker-panel-edge)" }, "[data-slot=\"breaker-switch\"]": { "--bevel-material-recess": "var(--breaker-body)" }, "[data-slot=\"breaker-lever\"]": { "--bevel-material": "var(--breaker-lever)", "--bevel-material-edge": "var(--breaker-lever-edge)" }, "[data-slot=\"breaker\"]": { "--bevel-led": "var(--breaker-off)" }, "[data-slot=\"breaker\"][data-state=\"on\"]": { "--bevel-led": "var(--breaker-on)" }, "[data-slot=\"breaker\"][data-state=\"tripped\"]": { "--bevel-led": "var(--breaker-tripped)" } } }, { "name": "ledger", "type": "registry:ui", "title": "Ledger", "description": "A ruled page of numbered entries with a red margin. History and audit logs that read like a passbook.", "categories": [ "money" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/amount.json", "https://bevel-ui.vercel.app/r/stamp.json" ], "files": [ { "path": "registry/bevel/ui/ledger.tsx", "type": "registry:ui" } ], "css": { ":root": { "--ledger-rule": "2.25rem", "--ledger-margin": "5.5rem", "--ledger-indent": "calc(var(--ledger-margin) + 0.75rem)", "--ledger-baseline": "0.375rem", "--ledger-credit": "oklch(0.45 0.12 155)", "--ledger-debit": "var(--bevel-paper-foreground)" }, "@utility ledger-ruling": { "background-image": "linear-gradient( to right, transparent calc(var(--ledger-margin) - 1px), var(--bevel-paper-margin) calc(var(--ledger-margin) - 1px) calc(var(--ledger-margin) + 1px), transparent calc(var(--ledger-margin) + 1px) ), repeating-linear-gradient( to bottom, transparent 0 calc(var(--ledger-rule) - 1px), var(--bevel-paper-rule) calc(var(--ledger-rule) - 1px) var(--ledger-rule) ), var(--bevel-fibre)", "background-size": "100% 100%, 100% 100%, 240px 240px", "background-attachment": "local" } } }, { "name": "keycard", "type": "registry:ui", "title": "Keycard", "description": "An API key on a plastic card that slides into a brass reader. For bring-your-own-key and credential screens.", "categories": [ "money" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/payment-card.json" ], "files": [ { "path": "registry/bevel/ui/keycard.tsx", "type": "registry:ui" } ], "css": { ":root": { "--keycard-stripe": "oklch(0.18 0.01 260)", "--keycard-plate-height": "3.75rem", "--keycard-insert": "62%", "--keycard-swipe-overlap": "1.25rem", "--keycard-slot-ok": "oklch(0.8 0.17 150)", "--keycard-slot-idle": "oklch(0.45 0.01 260)" }, "[data-slot=\"keycard-slot\"]": { "--bevel-led": "var(--keycard-slot-idle)" }, "[data-slot=\"keycard-slot\"][data-inserted], [data-slot=\"keycard-swipe\"][data-accepted]": { "--bevel-led": "var(--keycard-slot-ok)" }, "[data-slot=\"keycard-swipe\"]": { "--bevel-led": "var(--keycard-slot-idle)" }, "[data-slot=\"keycard-reader\"]": { "--bevel-material": "var(--bevel-brass)", "--bevel-material-edge": "var(--bevel-brass-edge)" }, "@utility keycard-mouth": { "clip-path": "inset(-2rem -2rem calc(var(--keycard-plate-height) * -1) -2rem)" } } }, { "name": "name-tag", "type": "registry:ui", "title": "Name tag", "description": "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.", "categories": [ "agents" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json" ], "files": [ { "path": "registry/bevel/ui/name-tag.tsx", "type": "registry:ui" } ], "css": { ":root": { "--name-tag-red": "oklch(0.55 0.2 27)", "--name-tag-blue": "oklch(0.45 0.15 262)", "--name-tag-card": "oklch(0.99 0.004 90)", "--name-tag-ink": "oklch(0.22 0.02 260)", "--name-tag-band-foreground": "oklch(0.99 0 0)" }, "[data-slot=\"name-tag\"]": { "--name-tag-band": "var(--name-tag-red)", "--name-tag-name-size": "1.75rem" }, "[data-slot=\"name-tag\"][data-variant=\"visitor\"]": { "--name-tag-band": "var(--name-tag-blue)", "--name-tag-name-size": "1.5rem" }, "[data-slot=\"name-tag\"][data-variant=\"plain\"]": { "--name-tag-name-size": "0.875rem" }, "@utility name-tag-sticker": { "background-color": "var(--name-tag-band)", "background-image": "linear-gradient(115deg, var(--bevel-highlight-strong), transparent 35%)", "box-shadow": "var(--bevel-depth-sheet)" } } }, { "name": "citation", "type": "registry:ui", "title": "Citation", "description": "An exhibit sticker in the text that opens the exact passage it cites, with a stamp saying whether the source checks out.", "categories": [ "documents" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/stamp.json" ], "files": [ { "path": "registry/bevel/ui/citation.tsx", "type": "registry:ui" } ], "css": { ":root": { "--citation-tilt": "-2deg", "--citation-size": "0.75em", "--citation-abbreviation-size": "0.8em", "--citation-highlight": "oklch(0.93 0.13 100 / 0.75)", "--citation-sticker-blue": "oklch(0.86 0.06 240)", "--citation-sticker-white": "oklch(0.97 0.004 90)", "--citation-pop-scale": "0.96" }, "[data-slot=\"citation-trigger\"]": { "--citation-sticker": "var(--bevel-sticker)" }, "[data-slot=\"citation-trigger\"][data-tone=\"blue\"]": { "--citation-sticker": "var(--citation-sticker-blue)" }, "[data-slot=\"citation-trigger\"][data-tone=\"white\"]": { "--citation-sticker": "var(--citation-sticker-white)" } } }, { "name": "task-plan", "type": "registry:ui", "title": "Task plan", "description": "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.", "categories": [ "agents" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json" ], "files": [ { "path": "registry/bevel/ui/task-plan.tsx", "type": "registry:ui" } ], "css": { ":root": { "--task-plan-binding": "oklch(0.36 0.09 25)", "--task-plan-check-length": "24" }, "[data-slot=\"task-plan\"]": { "--bevel-sheet": "var(--bevel-pad)", "--bevel-sheet-rule": "var(--bevel-pad-rule)", "--bevel-sheet-margin": "var(--bevel-pad-margin)", "--bevel-rule-height": "2rem", "--bevel-rule-margin": "2.5rem", "--task-plan-indent": "calc(var(--bevel-rule-margin) + 0.75rem)", "--task-plan-sink": "0.4rem", "color": "var(--bevel-pad-foreground)" }, "[data-slot=\"task-plan-step\"]": { "--task-plan-ink": "var(--bevel-pen-blue)" }, "[data-slot=\"task-plan-step\"][data-status=\"pending\"], [data-slot=\"task-plan-step\"][data-status=\"skipped\"]": { "--task-plan-ink": "var(--bevel-pencil)" }, "[data-slot=\"task-plan-step\"][data-status=\"error\"]": { "--task-plan-ink": "var(--bevel-pen-red)" } } }, { "name": "activity-log", "type": "registry:ui", "title": "Activity log", "description": "A docket of what an agent did: thoughts, actions, questions, responses and errors, each timed. Questions waiting on you are highlighted.", "categories": [ "agents" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json" ], "files": [ { "path": "registry/bevel/ui/activity-log.tsx", "type": "registry:ui" } ], "css": { ":root": { "--activity-log-height": "22rem", "--activity-log-time": "3.25rem", "--activity-log-kind": "5.5rem", "--activity-log-print-in": "0.5em", "--activity-log-question": "oklch(0.93 0.1 95 / 0.55)" }, "[data-slot=\"activity-log-entry\"]": { "--activity-log-ink": "var(--bevel-paper-foreground)" }, "[data-slot=\"activity-log-entry\"][data-kind=\"thought\"]": { "--activity-log-ink": "var(--bevel-pencil)" }, "[data-slot=\"activity-log-entry\"][data-kind=\"action\"]": { "--activity-log-ink": "var(--bevel-pen-blue)" }, "[data-slot=\"activity-log-entry\"][data-kind=\"question\"]": { "--activity-log-ink": "var(--bevel-ink-amber)" }, "[data-slot=\"activity-log-entry\"][data-kind=\"error\"]": { "--activity-log-ink": "var(--bevel-pen-red)" } } }, { "name": "approval", "type": "registry:ui", "title": "Approval", "description": "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.", "categories": [ "agents" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/stamp.json" ], "files": [ { "path": "registry/bevel/ui/approval.tsx", "type": "registry:ui" } ], "css": { ":root": { "--approval-hold": "1200ms", "--approval-release": "200ms", "--approval-press-fill": "oklch(0.42 0.08 70 / 0.55)", "--approval-seal-size": "5rem" }, "[data-slot=\"approval-seal\"]": { "--bevel-material": "var(--bevel-brass)", "--bevel-material-edge": "var(--bevel-brass-edge)" } } }, { "name": "delegation-board", "type": "registry:ui", "title": "Delegation board", "description": "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.", "categories": [ "agents" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/name-tag.json" ], "files": [ { "path": "registry/bevel/ui/delegation-board.tsx", "type": "registry:ui" } ], "css": { ":root": { "--delegation-board": "oklch(0.33 0.05 52)", "--delegation-board-edge": "oklch(0.22 0.04 48)", "--delegation-cubby": "oklch(0.2 0.03 45)", "--delegation-foreground": "oklch(0.93 0.02 80)", "--delegation-pending": "oklch(0.5 0.01 260)", "--delegation-active": "oklch(0.82 0.16 75)", "--delegation-awaiting": "oklch(0.8 0.17 55)", "--delegation-error": "oklch(0.68 0.2 27)", "--delegation-complete": "oklch(0.8 0.17 150)", "--delegation-return": "0.5rem" }, "[data-slot=\"delegation-board\"]": { "--bevel-material": "var(--delegation-board)", "--bevel-material-edge": "var(--delegation-board-edge)", "--bevel-material-recess": "var(--delegation-cubby)" }, "[data-slot=\"delegation-slot\"]": { "--bevel-led": "var(--delegation-pending)" }, "[data-slot=\"delegation-slot\"][data-status=\"active\"]": { "--bevel-led": "var(--delegation-active)" }, "[data-slot=\"delegation-slot\"][data-status=\"awaiting\"]": { "--bevel-led": "var(--delegation-awaiting)" }, "[data-slot=\"delegation-slot\"][data-status=\"error\"]": { "--bevel-led": "var(--delegation-error)" }, "[data-slot=\"delegation-slot\"][data-status=\"complete\"]": { "--bevel-led": "var(--delegation-complete)" } } }, { "name": "redline", "type": "registry:ui", "title": "Redline", "description": "Proposed edits in proofreader's red ink, each with a sign-here flag to accept or reject it. Nothing is applied until someone decides.", "categories": [ "documents" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json" ], "files": [ { "path": "registry/bevel/ui/redline.tsx", "type": "registry:ui" } ], "css": { ":root": { "--redline-flag": "var(--bevel-sticker)", "--redline-flag-foreground": "var(--bevel-sticker-foreground)", "--redline-strike": "2px" }, "@utility redline-flag-shape": { "clip-path": "polygon(0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0 50%)" } } }, { "name": "redaction", "type": "registry:ui", "title": "Redaction", "description": "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.", "categories": [ "marks" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json" ], "files": [ { "path": "registry/bevel/ui/redaction.tsx", "type": "registry:ui" } ], "css": { ":root": { "--redaction-ink": "oklch(0.16 0.005 260)", "--redaction-revealed": "oklch(0.16 0.005 260 / 0.08)", "--redaction-height": "1.1em", "--redaction-drop": "0.15em" }, "@utility redaction-bar": { "background-color": "var(--redaction-ink)", "mask-image": "var(--bevel-ink-texture)", "mask-size": "160px 160px" } } }, { "name": "guarded-switch", "type": "registry:ui", "title": "Guarded switch", "description": "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.", "categories": [ "coordination" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/feedback.json" ], "files": [ { "path": "registry/bevel/ui/guarded-switch.tsx", "type": "registry:ui" } ], "css": { ":root": { "--guarded-switch-plate": "oklch(0.3 0.008 260)", "--guarded-switch-plate-edge": "oklch(0.2 0.008 260)", "--guarded-switch-cover": "oklch(0.58 0.21 27 / 0.72)", "--guarded-switch-cover-edge": "oklch(0.42 0.18 27)", "--guarded-switch-lever": "oklch(0.9 0.006 260)", "--guarded-switch-lever-edge": "oklch(0.62 0.01 260)", "--guarded-switch-on": "oklch(0.72 0.19 27)", "--guarded-switch-off": "oklch(0.45 0.01 260)", "--guarded-switch-open-angle": "-112deg", "--guarded-switch-throw": "0.75rem", "--guarded-switch-close-after": "8s" }, "[data-slot=\"guarded-switch\"]": { "--bevel-material": "var(--guarded-switch-plate)", "--bevel-material-edge": "var(--guarded-switch-plate-edge)", "--bevel-material-recess": "var(--guarded-switch-plate-edge)", "--bevel-led": "var(--guarded-switch-off)" }, "[data-slot=\"guarded-switch\"][data-checked]": { "--bevel-led": "var(--guarded-switch-on)" }, "[data-slot=\"guarded-switch-lever\"]": { "--bevel-material": "var(--guarded-switch-lever)", "--bevel-material-edge": "var(--guarded-switch-lever-edge)" }, "@utility guarded-switch-cover": { "background-color": "var(--guarded-switch-cover)", "background-image": "linear-gradient(to bottom, var(--bevel-highlight-strong), transparent 45%, var(--bevel-shade))", "box-shadow": "inset 0 0 0 1px var(--guarded-switch-cover-edge), 0 4px 8px -2px var(--bevel-cast)" } } }, { "name": "vigilance", "type": "registry:ui", "title": "Dead man's switch", "description": "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.", "categories": [ "coordination" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json" ], "files": [ { "path": "registry/bevel/ui/vigilance.tsx", "type": "registry:ui" } ], "css": { ":root": { "--vigilance-panel": "oklch(0.26 0.008 260)", "--vigilance-panel-edge": "oklch(0.17 0.008 260)", "--vigilance-clear": "oklch(0.8 0.17 150)", "--vigilance-warning": "oklch(0.83 0.16 80)", "--vigilance-stopping": "oklch(0.66 0.21 27)", "--vigilance-off": "oklch(0.36 0.01 260)", "--vigilance-tick": "250ms" }, "[data-slot=\"vigilance\"]": { "--bevel-material": "var(--vigilance-panel)", "--bevel-material-edge": "var(--vigilance-panel-edge)", "--bevel-material-recess": "var(--vigilance-panel-edge)" }, "[data-slot=\"vigilance-button\"]": { "--bevel-material": "var(--bevel-brass)", "--bevel-material-edge": "var(--bevel-brass-edge)" }, "[data-slot=\"vigilance-lamp\"]": { "--bevel-led": "var(--vigilance-off)" }, "[data-slot=\"vigilance-lamp\"][data-lit][data-stage=\"clear\"]": { "--bevel-led": "var(--vigilance-clear)" }, "[data-slot=\"vigilance-lamp\"][data-lit][data-stage=\"warning\"]": { "--bevel-led": "var(--vigilance-warning)" }, "[data-slot=\"vigilance-lamp\"][data-lit][data-stage=\"stopping\"], [data-slot=\"vigilance-lamp\"][data-lit][data-stage=\"paused\"]": { "--bevel-led": "var(--vigilance-stopping)" } } }, { "name": "lockout", "type": "registry:ui", "title": "Lockout", "description": "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.", "categories": [ "coordination" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json" ], "files": [ { "path": "registry/bevel/ui/lockout.tsx", "type": "registry:ui" } ], "css": { ":root": { "--lockout-hasp": "oklch(0.72 0.01 260)", "--lockout-hasp-edge": "oklch(0.48 0.01 260)", "--lockout-lock": "oklch(0.55 0.2 27)", "--lockout-lock-edge": "oklch(0.38 0.16 27)", "--lockout-shackle": "oklch(0.82 0.01 260)", "--lockout-tag": "oklch(0.86 0.15 90)", "--lockout-tag-foreground": "oklch(0.22 0.02 260)", "--lockout-clear": "oklch(0.6 0.15 150)" }, "[data-slot=\"lockout\"]": { "--bevel-material": "var(--lockout-hasp)", "--bevel-material-edge": "var(--lockout-hasp-edge)" }, "[data-slot=\"lockout-lock-body\"]": { "--bevel-material": "var(--lockout-lock)", "--bevel-material-edge": "var(--lockout-lock-edge)" } } }, { "name": "take-a-number", "type": "registry:ui", "title": "Take a number", "description": "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.", "categories": [ "coordination" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/number-wheel.json" ], "files": [ { "path": "registry/bevel/ui/take-a-number.tsx", "type": "registry:ui" } ], "css": { ":root": { "--take-a-number-red": "oklch(0.55 0.2 27)", "--take-a-number-red-edge": "oklch(0.38 0.15 27)", "--take-a-number-foreground": "oklch(0.97 0.01 90)", "--take-a-number-turn": "oklch(0.8 0.17 150)" }, "[data-slot=\"take-a-number-sign\"], [data-slot=\"take-a-number-dispenser\"]": { "--bevel-material": "var(--take-a-number-red)", "--bevel-material-edge": "var(--take-a-number-red-edge)", "--bevel-material-recess": "oklch(0.16 0.01 260)", "--bevel-led": "var(--take-a-number-turn)" } } }, { "name": "engine-telegraph", "type": "registry:ui", "title": "Engine telegraph", "description": "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.", "categories": [ "instruments" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/feedback.json" ], "files": [ { "path": "registry/bevel/ui/engine-telegraph.tsx", "type": "registry:ui" } ], "css": { ":root": { "--engine-telegraph-answer": "oklch(0.55 0.2 27)", "--engine-telegraph-pending": "oklch(0.78 0.16 75)", "--engine-telegraph-agreed": "oklch(0.72 0.16 150)", "--engine-telegraph-pivot": "50px 56px" }, "[data-slot=\"engine-telegraph\"]": { "--bevel-material": "var(--bevel-brass)", "--bevel-material-edge": "var(--bevel-brass-edge)", "--bevel-led": "var(--engine-telegraph-agreed)" }, "[data-slot=\"engine-telegraph\"][data-pending]": { "--bevel-led": "var(--engine-telegraph-pending)" } } }, { "name": "annunciator", "type": "registry:ui", "title": "Annunciator", "description": "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.", "categories": [ "instruments" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json" ], "files": [ { "path": "registry/bevel/ui/annunciator.tsx", "type": "registry:ui" } ], "css": { ":root": { "--annunciator-panel": "oklch(0.3 0.01 260)", "--annunciator-panel-edge": "oklch(0.2 0.01 260)", "--annunciator-off": "oklch(0.24 0.01 260)", "--annunciator-off-foreground": "oklch(0.5 0.01 260)", "--annunciator-red": "oklch(0.62 0.22 27)", "--annunciator-amber": "oklch(0.8 0.16 75)", "--annunciator-green": "oklch(0.74 0.17 150)", "--annunciator-white": "oklch(0.94 0.02 90)", "--annunciator-lit-foreground": "oklch(0.2 0.02 60)", "--annunciator-flash": "900ms" }, "[data-slot=\"annunciator\"]": { "--bevel-material": "var(--annunciator-panel)", "--bevel-material-edge": "var(--annunciator-panel-edge)" }, "[data-slot=\"annunciator-tile\"]": { "--annunciator-lamp": "var(--annunciator-amber)" }, "[data-slot=\"annunciator-tile\"][data-tone=\"red\"]": { "--annunciator-lamp": "var(--annunciator-red)" }, "[data-slot=\"annunciator-tile\"][data-tone=\"green\"]": { "--annunciator-lamp": "var(--annunciator-green)" }, "[data-slot=\"annunciator-tile\"][data-tone=\"white\"]": { "--annunciator-lamp": "var(--annunciator-white)" }, "@keyframes annunciator-flash": { "50%": { "opacity": "0.25" } }, "@utility annunciator-flash": { "animation": "annunciator-flash var(--annunciator-flash) steps(1, end) infinite" } } }, { "name": "detent-knob", "type": "registry:ui", "title": "Detent knob", "description": "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.", "categories": [ "instruments" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/feedback.json" ], "files": [ { "path": "registry/bevel/ui/detent-knob.tsx", "type": "registry:ui" } ], "css": { ":root": { "--detent-knob-cap": "oklch(0.3 0.01 260)", "--detent-knob-cap-edge": "oklch(0.18 0.01 260)", "--detent-knob-pointer": "oklch(0.95 0.02 90)", "--detent-knob-active": "oklch(0.82 0.15 85)", "--detent-knob-label-radius": "5.5rem", "--detent-knob-bump": "4deg" }, "[data-slot=\"detent-knob-cap\"]": { "--bevel-material": "var(--detent-knob-cap)", "--bevel-material-edge": "var(--detent-knob-cap-edge)" }, "@utility detent-knob-knurl": { "background-image": "repeating-conic-gradient(var(--bevel-highlight) 0deg 3deg, var(--bevel-shade) 3deg 6deg)" }, "@keyframes detent-knob-bump": { "40%": { "rotate": "var(--detent-knob-bump-to)" } }, "[data-slot=\"detent-knob-body\"][data-bump=\"up\"]": { "--detent-knob-bump-to": "var(--detent-knob-bump)" }, "[data-slot=\"detent-knob-body\"][data-bump=\"down\"]": { "--detent-knob-bump-to": "calc(var(--detent-knob-bump) * -1)" }, "@utility detent-knob-bump": { "animation": "detent-knob-bump var(--bevel-duration-small) var(--bevel-ease-out)" } } }, { "name": "push-to-talk", "type": "registry:ui", "title": "Push to talk", "description": "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.", "categories": [ "instruments" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/feedback.json" ], "files": [ { "path": "registry/bevel/ui/push-to-talk.tsx", "type": "registry:ui" } ], "css": { ":root": { "--push-to-talk-body": "oklch(0.26 0.01 260)", "--push-to-talk-body-edge": "oklch(0.18 0.01 260)", "--push-to-talk-key": "oklch(0.36 0.01 260)", "--push-to-talk-live": "oklch(0.62 0.22 27)", "--push-to-talk-grille": "oklch(0.14 0.01 260)" }, "[data-slot=\"push-to-talk\"]": { "--bevel-material": "var(--push-to-talk-body)", "--bevel-material-edge": "var(--push-to-talk-body-edge)", "--bevel-led": "var(--push-to-talk-live)" }, "[data-slot=\"push-to-talk-key\"]": { "--bevel-material": "var(--push-to-talk-key)" }, "@utility push-to-talk-grille": { "background-image": "radial-gradient(circle, var(--push-to-talk-grille) 35%, transparent 40%)", "background-size": "0.5rem 0.5rem" } } }, { "name": "motorized-fader", "type": "registry:ui", "title": "Motorized fader", "description": "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.", "categories": [ "instruments" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json" ], "files": [ { "path": "registry/bevel/ui/motorized-fader.tsx", "type": "registry:ui" } ], "css": { ":root": { "--motorized-fader-travel": "9rem", "--motorized-fader-cap": "1.75rem", "--motorized-fader-panel": "oklch(0.3 0.01 260)", "--motorized-fader-panel-edge": "oklch(0.2 0.01 260)", "--motorized-fader-cap-colour": "oklch(0.86 0.01 260)", "--motorized-fader-cap-edge": "oklch(0.6 0.01 260)", "--motorized-fader-line": "oklch(0.3 0.01 260)", "--motorized-fader-remote": "oklch(0.78 0.15 230)" }, "[data-slot=\"motorized-fader\"]": { "--bevel-material-recess": "oklch(0.12 0.01 260)", "--bevel-led": "var(--motorized-fader-remote)" }, "[data-slot=\"motorized-fader-cap\"]": { "--bevel-material": "var(--motorized-fader-cap-colour)", "--bevel-material-edge": "var(--motorized-fader-cap-edge)" } } }, { "name": "mixer-strip", "type": "registry:ui", "title": "Mixer strip", "description": "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.", "categories": [ "instruments" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/motorized-fader.json" ], "files": [ { "path": "registry/bevel/ui/mixer-strip.tsx", "type": "registry:ui" } ], "css": { ":root": { "--mixer-strip-panel": "oklch(0.32 0.01 260)", "--mixer-strip-panel-edge": "oklch(0.22 0.01 260)", "--mixer-strip-key": "oklch(0.42 0.01 260)", "--mixer-strip-mute": "oklch(0.62 0.22 27)", "--mixer-strip-solo": "oklch(0.84 0.16 90)", "--mixer-strip-lit-foreground": "oklch(0.2 0.02 60)", "--mixer-strip-scribble": "oklch(0.2 0.02 230)", "--mixer-strip-scribble-foreground": "oklch(0.88 0.08 230)" }, "[data-slot=\"mixer-strip\"]": { "--bevel-material": "var(--mixer-strip-panel)", "--bevel-material-edge": "var(--mixer-strip-panel-edge)" }, "[data-slot=\"mixer-strip-mute\"], [data-slot=\"mixer-strip-solo\"]": { "--bevel-material": "var(--mixer-strip-key)" }, "[data-slot=\"mixer-strip-mute\"][data-pressed]": { "--bevel-material": "var(--mixer-strip-mute)" }, "[data-slot=\"mixer-strip-solo\"][data-pressed]": { "--bevel-material": "var(--mixer-strip-solo)" } } }, { "name": "dip-switch", "type": "registry:ui", "title": "DIP switches", "description": "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.", "categories": [ "instruments" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/feedback.json" ], "files": [ { "path": "registry/bevel/ui/dip-switch.tsx", "type": "registry:ui" } ], "css": { ":root": { "--dip-switch-red": "oklch(0.5 0.17 27)", "--dip-switch-red-edge": "oklch(0.34 0.12 27)", "--dip-switch-blue": "oklch(0.45 0.13 258)", "--dip-switch-blue-edge": "oklch(0.3 0.09 258)", "--dip-switch-black": "oklch(0.26 0.01 260)", "--dip-switch-black-edge": "oklch(0.16 0.01 260)", "--dip-switch-slot": "oklch(0.18 0.01 260)", "--dip-switch-actuator": "oklch(0.96 0.005 90)", "--dip-switch-actuator-edge": "oklch(0.72 0.01 90)", "--dip-switch-print": "oklch(0.97 0.01 90)", "--dip-switch-focus": "oklch(0.97 0.01 90)", "--dip-switch-print-size": "0.625rem", "--dip-switch-slot-width": "1.25rem", "--dip-switch-slot-height": "2.75rem", "--dip-switch-actuator-height": "1.125rem", "--dip-switch-throw": "1.375rem", "--dip-switch-gap": "0.5rem" }, "[data-slot=\"dip-switch\"]": { "--dip-switch-body": "var(--dip-switch-red)", "--dip-switch-body-edge": "var(--dip-switch-red-edge)" }, "[data-slot=\"dip-switch\"][data-variant=\"blue\"]": { "--dip-switch-body": "var(--dip-switch-blue)", "--dip-switch-body-edge": "var(--dip-switch-blue-edge)" }, "[data-slot=\"dip-switch\"][data-variant=\"black\"]": { "--dip-switch-body": "var(--dip-switch-black)", "--dip-switch-body-edge": "var(--dip-switch-black-edge)" }, "[data-slot=\"dip-switch-bank\"]": { "--bevel-material": "var(--dip-switch-body)", "--bevel-material-edge": "var(--dip-switch-body-edge)", "--bevel-material-recess": "var(--dip-switch-slot)" }, "[data-slot=\"dip-switch-actuator\"]": { "--bevel-material": "var(--dip-switch-actuator)", "--bevel-material-edge": "var(--dip-switch-actuator-edge)" }, "@utility dip-switch-arrow": { "width": "0", "height": "0", "border-inline": "0.1875rem solid transparent", "border-bottom": "0.3125rem solid currentColor" }, "@media (forced-colors: active)": { "[data-slot=\"dip-switch-toggle\"]": { "border": "1px solid CanvasText" }, "[data-slot=\"dip-switch-actuator\"]": { "background": "ButtonText" } } } }, { "name": "patch-bay", "type": "registry:ui", "title": "Patch bay", "description": "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.", "categories": [ "instruments" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/feedback.json" ], "files": [ { "path": "registry/bevel/ui/patch-bay.tsx", "type": "registry:ui" } ], "css": { ":root": { "--patch-bay-panel": "oklch(0.27 0.008 260)", "--patch-bay-panel-edge": "oklch(0.17 0.008 260)", "--patch-bay-print": "oklch(0.9 0.01 90)", "--patch-bay-ring": "oklch(0.78 0.01 260)", "--patch-bay-hole": "oklch(0.1 0.005 260)", "--patch-bay-armed": "oklch(0.82 0.15 85)", "--patch-bay-focus": "oklch(0.82 0.15 85)", "--patch-bay-cable-1": "oklch(0.6 0.19 27)", "--patch-bay-cable-2": "oklch(0.58 0.14 255)", "--patch-bay-cable-3": "oklch(0.8 0.15 90)", "--patch-bay-cable-4": "oklch(0.6 0.13 150)", "--patch-bay-cable-5": "oklch(0.92 0.01 90)", "--patch-bay-cable-6": "oklch(0.6 0.15 320)", "--patch-bay-cable-width": "4px", "--patch-bay-plug-radius": "7px", "--patch-bay-jack-size": "2rem", "--patch-bay-hole-size": "0.75rem", "--patch-bay-jack-width": "4.5rem", "--patch-bay-label-height": "1.75rem", "--patch-bay-row-gap": "4.5rem" }, "[data-slot=\"patch-bay-panel\"]": { "--bevel-material": "var(--patch-bay-panel)", "--bevel-material-edge": "var(--patch-bay-panel-edge)" }, "@utility patch-bay-socket": { "background-color": "var(--patch-bay-ring)", "background-image": "linear-gradient(to bottom, var(--bevel-highlight-strong), transparent 50%, var(--bevel-shade))", "box-shadow": "0 0 0 2px var(--patch-bay-panel-edge), 0 2px 3px var(--bevel-shade)" }, "@utility patch-bay-socket-armed": { "box-shadow": "0 0 0 2px var(--patch-bay-panel-edge), 0 0 0 4px var(--patch-bay-armed), 0 0 10px 2px var(--patch-bay-armed)" }, "@utility patch-bay-hole": { "background-color": "var(--patch-bay-hole)", "box-shadow": "var(--bevel-depth-recessed)" }, "@utility patch-bay-cable-body": { "fill": "none", "stroke": "var(--patch-bay-cable)", "stroke-width": "var(--patch-bay-cable-width)", "stroke-linecap": "round" }, "@utility patch-bay-cable-shadow": { "fill": "none", "stroke": "var(--bevel-shade-strong)", "stroke-width": "var(--patch-bay-cable-width)", "stroke-linecap": "round", "translate": "0 3px", "filter": "blur(1.5px)" }, "@utility patch-bay-plug": { "r": "var(--patch-bay-plug-radius)", "fill": "var(--patch-bay-cable)", "stroke": "var(--bevel-shade-strong)", "stroke-width": "1.5px" }, "@media (forced-colors: active)": { "[data-slot=\"patch-bay-jack\"]": { "border": "1px solid ButtonText" }, "[data-slot=\"patch-bay-jack\"][aria-pressed=\"true\"]": { "outline": "3px solid Highlight" }, ".patch-bay-cable-body, .patch-bay-plug": { "stroke": "CanvasText" } } } }, { "name": "keysort-filter", "type": "registry:ui", "title": "Keysort filter", "description": "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.", "categories": [ "records" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json" ], "files": [ { "path": "registry/bevel/ui/keysort-filter.tsx", "type": "registry:ui" } ], "css": { ":root": { "--keysort-filter-card": "oklch(0.93 0.04 85)", "--keysort-filter-card-held": "oklch(0.86 0.02 85)", "--keysort-filter-card-foreground": "oklch(0.3 0.04 70)", "--keysort-filter-hole": "oklch(0.3 0.02 70)", "--keysort-filter-match": "oklch(0.58 0.15 150)", "--keysort-filter-needle": "oklch(0.8 0.01 260)", "--keysort-filter-needle-edge": "oklch(0.5 0.01 260)", "--keysort-filter-column": "2.5rem" }, "@media (width >= 40rem)": { ":root": { "--keysort-filter-column": "3.5rem" } }, "[data-slot=\"keysort-filter\"]": { "--bevel-material": "var(--keysort-filter-needle)", "--bevel-material-edge": "var(--keysort-filter-needle-edge)" } } }, { "name": "visible-file", "type": "registry:ui", "title": "Visible file", "description": "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.", "categories": [ "records" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json" ], "files": [ { "path": "registry/bevel/ui/visible-file.tsx", "type": "registry:ui" } ], "css": { ":root": { "--visible-file-tray": "oklch(0.55 0.03 150)", "--visible-file-tray-edge": "oklch(0.38 0.03 150)", "--visible-file-card": "oklch(0.96 0.01 90)", "--visible-file-card-foreground": "oklch(0.25 0.02 260)", "--visible-file-rule": "oklch(0.85 0.02 90)", "--visible-file-red": "oklch(0.6 0.2 27)", "--visible-file-amber": "oklch(0.8 0.16 75)", "--visible-file-green": "oklch(0.65 0.16 150)", "--visible-file-blue": "oklch(0.6 0.15 250)" }, "[data-slot=\"visible-file\"]": { "--bevel-material": "var(--visible-file-tray)", "--bevel-material-edge": "var(--visible-file-tray-edge)" }, "[data-slot=\"visible-file-signal\"]": { "--bevel-material": "var(--visible-file-blue)" }, "[data-slot=\"visible-file-signal\"][data-tone=\"red\"]": { "--bevel-material": "var(--visible-file-red)" }, "[data-slot=\"visible-file-signal\"][data-tone=\"amber\"]": { "--bevel-material": "var(--visible-file-amber)" }, "[data-slot=\"visible-file-signal\"][data-tone=\"green\"]": { "--bevel-material": "var(--visible-file-green)" } } }, { "name": "contact-sheet", "type": "registry:ui", "title": "Contact sheet", "description": "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.", "categories": [ "records" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json" ], "files": [ { "path": "registry/bevel/ui/contact-sheet.tsx", "type": "registry:ui" } ], "css": { ":root": { "--contact-sheet-film": "oklch(0.17 0.01 60)", "--contact-sheet-edge-print": "oklch(0.72 0.12 70)", "--contact-sheet-sprocket": "oklch(0.93 0.01 90)", "--contact-sheet-pick": "oklch(0.6 0.22 27)", "--contact-sheet-reject": "oklch(0.96 0.01 90)", "--contact-sheet-columns": "4" }, "[data-slot=\"contact-sheet-frame\"]": { "--bevel-ink": "var(--contact-sheet-pick)" } } }, { "name": "split-flap", "type": "registry:ui", "title": "Split-flap board", "description": "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.", "categories": [ "records" ], "dependencies": [ "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json" ], "files": [ { "path": "registry/bevel/ui/split-flap.tsx", "type": "registry:ui" } ], "css": { ":root": { "--split-flap-housing": "oklch(0.22 0.01 260)", "--split-flap-housing-edge": "oklch(0.14 0.01 260)", "--split-flap-flap": "oklch(0.2 0.005 260)", "--split-flap-flap-lower": "oklch(0.17 0.005 260)", "--split-flap-hinge": "oklch(0.08 0 0)", "--split-flap-foreground": "oklch(0.95 0.02 90)", "--split-flap-amber": "oklch(0.84 0.16 80)", "--split-flap-cell-width": "1.15em", "--split-flap-cell-height": "1.6em", "--split-flap-delay": "0s", "--split-flap-announce-after": "1200ms" }, "[data-slot=\"split-flap\"]": { "--bevel-material": "var(--split-flap-housing)", "--bevel-material-edge": "var(--split-flap-housing-edge)" }, "@keyframes split-flap-top": { "to": { "transform": "rotateX(-90deg)" } }, "@keyframes split-flap-bottom": { "from": { "transform": "rotateX(90deg)" } }, "@keyframes split-flap-fade": { "from": { "opacity": "0" } }, "@utility split-flap-top": { "transform-origin": "bottom", "animation": "split-flap-top calc(var(--bevel-duration-small) / 2) var(--bevel-ease-in-out) both", "animation-delay": "var(--split-flap-delay)" }, "@utility split-flap-bottom": { "transform-origin": "top", "animation": "split-flap-bottom calc(var(--bevel-duration-small) / 2) var(--bevel-ease-out) both", "animation-delay": "calc(var(--split-flap-delay) + var(--bevel-duration-small) / 2)" }, "@utility split-flap-fade": { "animation": "split-flap-fade var(--bevel-duration-small) var(--bevel-ease-out) both" } } }, { "name": "time-card", "type": "registry:ui", "title": "Time card", "description": "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.", "categories": [ "records" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/feedback.json" ], "files": [ { "path": "registry/bevel/ui/time-card.tsx", "type": "registry:ui" } ], "css": { ":root": { "--time-card-paper": "oklch(0.91 0.045 85)", "--time-card-rule": "oklch(0.62 0.06 150 / 0.45)", "--time-card-header": "oklch(0.45 0.09 150)", "--time-card-ink": "oklch(0.42 0.14 300)", "--time-card-key": "oklch(0.3 0.01 260)", "--time-card-key-edge": "oklch(0.18 0.01 260)", "--time-card-key-foreground": "oklch(0.95 0.01 90)", "--time-card-in": "oklch(0.68 0.16 150)", "--time-card-out": "oklch(0.45 0.01 260)", "--time-card-line": "2rem", "--time-card-land-scale": "1.4" }, ".dark": { "--time-card-paper": "oklch(0.84 0.04 85)" }, "[data-slot=\"time-card-card\"]": { "--bevel-paper": "var(--time-card-paper)" }, "[data-slot=\"time-card\"]": { "--bevel-led": "var(--time-card-out)" }, "[data-slot=\"time-card\"][data-open]": { "--bevel-led": "var(--time-card-in)" }, "[data-slot=\"time-card-punch\"]": { "--bevel-material": "var(--time-card-key)", "--bevel-material-edge": "var(--time-card-key-edge)" }, "@media (forced-colors: active)": { "[data-slot=\"time-card-punch\"]": { "border": "1px solid ButtonText" } } } }, { "name": "due-date-slip", "type": "registry:ui", "title": "Due-date slip", "description": "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.", "categories": [ "records" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/stamp.json" ], "files": [ { "path": "registry/bevel/ui/due-date-slip.tsx", "type": "registry:ui" } ], "css": { ":root": { "--due-date-slip-paper": "oklch(0.93 0.05 95)", "--due-date-slip-rule": "oklch(0.7 0.08 240 / 0.45)", "--due-date-slip-header": "oklch(0.45 0.12 27)", "--due-date-slip-line": "2rem" }, "[data-slot=\"due-date-slip\"]": { "--bevel-paper": "var(--due-date-slip-paper)" } } }, { "name": "text-field", "type": "registry:ui", "title": "Text field", "description": "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.", "categories": [ "essentials" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json" ], "files": [ { "path": "registry/bevel/ui/text-field.tsx", "type": "registry:ui" } ], "css": { ":root": { "--text-field-well": "oklch(0.955 0.004 90)", "--text-field-shade": "oklch(0 0 0 / 0.2)", "--text-field-glow": "oklch(0.76 0.15 68)", "--text-field-glow-soft": "oklch(0.76 0.15 68 / 0.35)", "--text-field-error": "oklch(0.6 0.21 27)", "--text-field-error-soft": "oklch(0.6 0.21 27 / 0.3)", "--text-field-error-print": "oklch(0.5 0.19 27)", "--text-field-print": "oklch(0.45 0.01 260)", "--text-field-key": "oklch(0.97 0.004 90)", "--text-field-key-edge": "oklch(0.8 0.006 90)", "--text-field-key-print": "oklch(0.4 0.01 260)", "--text-field-height": "2.25rem", "--text-field-textarea-height": "5.5rem" }, ".dark": { "--text-field-well": "oklch(0.17 0.005 260)", "--text-field-shade": "oklch(0 0 0 / 0.7)", "--text-field-error-print": "oklch(0.72 0.17 25)", "--text-field-print": "oklch(0.72 0.01 260)", "--text-field-key": "oklch(0.32 0.006 260)", "--text-field-key-edge": "oklch(0.2 0.006 260)", "--text-field-key-print": "oklch(0.86 0.005 260)" }, "[data-slot=\"text-field\"][data-size=\"sm\"]": { "--text-field-height": "2rem", "--text-field-textarea-height": "4.5rem" }, "@utility text-field-well": { "--bevel-material-recess": "var(--text-field-well)", "--bevel-shade-strong": "var(--text-field-shade)", "background-color": "var(--bevel-material-recess)", "box-shadow": "var(--bevel-depth-recessed)" }, "[data-slot=\"text-field-slot\"] :is([data-slot=\"text-field-input\"], [data-slot=\"text-field-textarea\"])": { "background-color": "transparent", "box-shadow": "none" }, "[data-slot=\"text-field-slot\"]:has([data-slot=\"text-field-textarea\"])": { "align-items": "flex-start" }, "[data-slot=\"text-field-slot\"]:focus-within, :is([data-slot=\"text-field-input\"], [data-slot=\"text-field-textarea\"]):not([data-slot=\"text-field-slot\"] *):focus-visible": { "box-shadow": "var(--bevel-depth-recessed), 0 0 0 1px var(--text-field-glow), 0 0 0 3px var(--text-field-glow-soft)" }, "[data-slot=\"text-field\"][data-invalid] :is([data-slot=\"text-field-slot\"], [data-slot=\"text-field-input\"], [data-slot=\"text-field-textarea\"]):not([data-slot=\"text-field-slot\"] *)": { "box-shadow": "var(--bevel-depth-recessed), 0 0 0 1px var(--text-field-error)" }, "[data-slot=\"text-field\"][data-invalid] :is([data-slot=\"text-field-slot\"]:focus-within, :is([data-slot=\"text-field-input\"], [data-slot=\"text-field-textarea\"]):not([data-slot=\"text-field-slot\"] *):focus-visible)": { "box-shadow": "var(--bevel-depth-recessed), 0 0 0 1px var(--text-field-error), 0 0 0 3px var(--text-field-error-soft)" }, "[data-slot=\"text-field-lamp\"]": { "--bevel-led": "var(--text-field-error)" }, "[data-slot=\"text-field-kbd\"]": { "--bevel-material": "var(--text-field-key)", "--bevel-material-edge": "var(--text-field-key-edge)" }, "@media (forced-colors: active)": { "[data-slot=\"text-field-slot\"], :is([data-slot=\"text-field-input\"], [data-slot=\"text-field-textarea\"]):not([data-slot=\"text-field-slot\"] *)": { "border": "1px solid CanvasText" }, "[data-slot=\"text-field-slot\"]:focus-within, :is([data-slot=\"text-field-input\"], [data-slot=\"text-field-textarea\"]):not([data-slot=\"text-field-slot\"] *):focus-visible": { "outline": "2px solid Highlight" } } } }, { "name": "toggle-lever", "type": "registry:ui", "title": "Toggle lever", "description": "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.)", "categories": [ "essentials" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/feedback.json" ], "files": [ { "path": "registry/bevel/ui/toggle-lever.tsx", "type": "registry:ui" } ], "css": { ":root": { "--toggle-lever-plate": "oklch(0.88 0.004 260)", "--toggle-lever-plate-edge": "oklch(0.68 0.006 260)", "--toggle-lever-print": "oklch(0.42 0.01 260)", "--toggle-lever-print-lit": "oklch(0.2 0.01 260)", "--toggle-lever-print-size": "0.5625rem", "--toggle-lever-chrome": "oklch(0.97 0.003 260)", "--toggle-lever-chrome-shaft": "oklch(0.8 0.004 260)", "--toggle-lever-chrome-edge": "oklch(0.55 0.006 260)", "--toggle-lever-bushing": "oklch(0.6 0.006 260)", "--toggle-lever-lamp-off": "oklch(0.55 0.01 260)", "--toggle-lever-lamp-on": "oklch(0.8 0.17 145)", "--toggle-lever-focus": "oklch(0.76 0.15 68)", "--toggle-lever-cast": "0 1px 0.5px oklch(0 0 0 / 0.45)", "--toggle-lever-glint": "oklch(1 0 0)", "--toggle-lever-lamp-shade": "oklch(0 0 0 / 0.35)", "--toggle-lever-throw": "1.5rem", "--toggle-lever-reach": "0.6875rem" }, ".dark": { "--toggle-lever-plate": "oklch(0.34 0.006 260)", "--toggle-lever-plate-edge": "oklch(0.22 0.006 260)", "--toggle-lever-print": "oklch(0.66 0.01 260)", "--toggle-lever-print-lit": "oklch(0.95 0.005 260)", "--toggle-lever-bushing": "oklch(0.24 0.006 260)", "--toggle-lever-lamp-off": "oklch(0.3 0.01 260)" }, "[data-slot=\"toggle-lever\"]": { "--bevel-material": "var(--toggle-lever-plate)", "--bevel-material-edge": "var(--toggle-lever-plate-edge)", "--bevel-led": "var(--toggle-lever-lamp-off)" }, "[data-slot=\"toggle-lever\"][data-checked]": { "--bevel-led": "var(--toggle-lever-lamp-on)" }, "[data-slot=\"toggle-lever\"]:not([data-checked]) [data-slot=\"toggle-lever-lamp\"]": { "box-shadow": "inset 0 -1px 1px var(--toggle-lever-lamp-shade), 0 1px 0 var(--bevel-highlight)" }, "@utility toggle-lever-print": { "font-size": "var(--toggle-lever-print-size)", "font-weight": "700", "line-height": "1", "letter-spacing": "var(--bevel-tracking-label)", "text-transform": "uppercase", "color": "var(--toggle-lever-print)", "text-shadow": "var(--bevel-deboss)" }, "[data-slot=\"toggle-lever\"][data-checked] [data-side=\"on\"], [data-slot=\"toggle-lever\"][data-unchecked] [data-side=\"off\"]": { "color": "var(--toggle-lever-print-lit)" }, "@utility toggle-lever-bat": { "filter": "drop-shadow(var(--toggle-lever-cast))" }, "@utility toggle-lever-ball": { "background-color": "var(--toggle-lever-chrome)", "background-image": "radial-gradient(circle at 35% 30%, var(--toggle-lever-glint), transparent 55%)", "box-shadow": "inset 0 0 0 0.5px var(--toggle-lever-chrome-edge)" }, "@utility toggle-lever-bushing": { "background-color": "var(--toggle-lever-bushing)", "background-image": "radial-gradient(circle at 50% 35%, var(--bevel-highlight-strong), transparent 60%)", "box-shadow": "inset 0 0 0 1px var(--toggle-lever-chrome-edge), 0 1px 0 var(--bevel-highlight)" }, "@media (forced-colors: active)": { "[data-slot=\"toggle-lever\"]": { "border": "1px solid CanvasText" }, "[data-slot=\"toggle-lever-bat\"] > *": { "background": "CanvasText" }, "[data-slot=\"toggle-lever\"][data-checked] [data-slot=\"toggle-lever-lamp\"]": { "background": "Highlight" } } } }, { "name": "latch-checkbox", "type": "registry:ui", "title": "Latch checkbox", "description": "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.", "categories": [ "essentials" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/feedback.json" ], "files": [ { "path": "registry/bevel/ui/latch-checkbox.tsx", "type": "registry:ui" } ], "css": { ":root": { "--latch-checkbox-collar": "oklch(0.86 0.004 260)", "--latch-checkbox-cap-face": "oklch(0.985 0.004 90)", "--latch-checkbox-cap-edge": "oklch(0.74 0.008 90)", "--latch-checkbox-lit": "oklch(0.7 0.16 62)", "--latch-checkbox-glow": "drop-shadow(0 0 2px oklch(0.78 0.16 68 / 0.75))", "--latch-checkbox-focus": "oklch(0.76 0.15 68)", "--latch-checkbox-shade": "oklch(0 0 0 / 0.28)", "--latch-checkbox-size": "1.25rem", "--latch-checkbox-cap": "1rem", "--latch-checkbox-cap-radius": "0.125rem", "--latch-checkbox-glyph": "0.75rem", "--latch-checkbox-travel": "0.125rem", "--latch-checkbox-half": "0.0625rem" }, ".dark": { "--latch-checkbox-collar": "oklch(0.15 0.005 260)", "--latch-checkbox-cap-face": "oklch(0.36 0.006 260)", "--latch-checkbox-cap-edge": "oklch(0.22 0.006 260)", "--latch-checkbox-lit": "oklch(0.8 0.16 72)", "--latch-checkbox-shade": "oklch(0 0 0 / 0.7)" }, "[data-slot=\"latch-checkbox\"]": { "--bevel-material-recess": "var(--latch-checkbox-collar)", "--bevel-shade-strong": "var(--latch-checkbox-shade)" }, "[data-slot=\"latch-checkbox-cap\"]": { "--bevel-material": "var(--latch-checkbox-cap-face)", "--bevel-material-edge": "var(--latch-checkbox-cap-edge)" }, "@utility latch-checkbox-mark": { "color": "var(--latch-checkbox-lit)", "filter": "var(--latch-checkbox-glow)" }, "@media (forced-colors: active)": { "[data-slot=\"latch-checkbox\"]": { "border": "1px solid CanvasText" }, "[data-slot=\"latch-checkbox-mark\"]": { "color": "Highlight", "filter": "none" } } } }, { "name": "preset-keys", "type": "registry:ui", "title": "Preset keys", "description": "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.", "categories": [ "essentials" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/feedback.json" ], "files": [ { "path": "registry/bevel/ui/preset-keys.tsx", "type": "registry:ui" } ], "css": { ":root": { "--preset-keys-bed": "oklch(0.87 0.004 260)", "--preset-keys-key": "oklch(0.985 0.003 90)", "--preset-keys-key-edge": "oklch(0.76 0.006 90)", "--preset-keys-print": "oklch(0.45 0.01 260)", "--preset-keys-print-down": "oklch(0.2 0.01 260)", "--preset-keys-lamp-off": "oklch(0.8 0.006 260)", "--preset-keys-lamp-on": "oklch(0.76 0.16 66)", "--preset-keys-lamp-shade": "oklch(0 0 0 / 0.25)", "--preset-keys-focus": "oklch(0.7 0.15 66)", "--preset-keys-shade": "oklch(0 0 0 / 0.25)", "--preset-keys-inset": "0.1875rem", "--preset-keys-gap": "0.1875rem", "--preset-keys-key-radius": "0.3125rem", "--preset-keys-travel": "0.125rem", "--preset-keys-height": "2rem", "--preset-keys-pad": "0.875rem", "--preset-keys-text": "0.875rem" }, ".dark": { "--preset-keys-bed": "oklch(0.15 0.005 260)", "--preset-keys-key": "oklch(0.34 0.006 260)", "--preset-keys-key-edge": "oklch(0.2 0.006 260)", "--preset-keys-print": "oklch(0.74 0.01 260)", "--preset-keys-print-down": "oklch(0.96 0.005 260)", "--preset-keys-lamp-off": "oklch(0.24 0.006 260)", "--preset-keys-lamp-on": "oklch(0.8 0.16 70)", "--preset-keys-shade": "oklch(0 0 0 / 0.7)" }, ":is([data-slot=\"preset-tabs-list\"], [data-slot=\"preset-keys\"])[data-size=\"sm\"]": { "--preset-keys-height": "1.75rem", "--preset-keys-pad": "0.625rem", "--preset-keys-text": "0.75rem", "--preset-keys-inset": "0.125rem", "--preset-keys-key-radius": "0.375rem", "--preset-keys-travel": "0.09375rem" }, "[data-slot=\"preset-tabs-list\"], [data-slot=\"preset-keys\"]": { "--bevel-material-recess": "var(--preset-keys-bed)", "--bevel-shade-strong": "var(--preset-keys-shade)" }, "[data-slot=\"preset-tabs-tab\"], [data-slot=\"preset-key\"]": { "--bevel-material": "var(--preset-keys-key)", "--bevel-material-edge": "var(--preset-keys-key-edge)", "--bevel-led": "var(--preset-keys-lamp-on)" }, "@utility preset-keys-lamp": { "background-color": "var(--preset-keys-lamp-off)", "box-shadow": "inset 0 1px 1px var(--preset-keys-lamp-shade)" }, ":is([data-slot=\"preset-tabs-tab\"][data-active], [data-slot=\"preset-key\"][data-checked]) [data-slot=\"preset-keys-lamp\"]": { "background-color": "var(--bevel-led)", "background-image": "radial-gradient(circle at 35% 30%, var(--bevel-highlight-strong), transparent 45%)", "box-shadow": "0 0 5px var(--bevel-led)" }, "@media (forced-colors: active)": { "[data-slot=\"preset-tabs-tab\"], [data-slot=\"preset-key\"]": { "border": "1px solid ButtonText" }, ":is([data-slot=\"preset-tabs-tab\"][data-active], [data-slot=\"preset-key\"][data-checked])": { "border-color": "Highlight", "outline": "1px solid Highlight" } } } }, { "name": "tooltip", "type": "registry:ui", "title": "Tooltip", "description": "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.", "categories": [ "essentials" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json" ], "files": [ { "path": "registry/bevel/ui/tooltip.tsx", "type": "registry:ui" } ], "css": { ":root": { "--tooltip-tape-black": "oklch(0.22 0.008 260)", "--tooltip-tape-red": "oklch(0.47 0.17 27)", "--tooltip-tape-blue": "oklch(0.42 0.13 258)", "--tooltip-letter": "oklch(0.96 0.006 90)", "--tooltip-rim": "oklch(0 0 0 / 0.3)", "--tooltip-emboss": "0 1px 0 oklch(0 0 0 / 0.55), 0 -0.5px 0 oklch(1 0 0 / 0.35)", "--tooltip-text": "0.75rem", "--tooltip-max-width": "18rem", "--tooltip-offset": "0.5rem", "--tooltip-slide": "0.25rem", "--tooltip-tab-width": "0.625rem", "--tooltip-tab-depth": "0.3125rem" }, ".dark": { "--tooltip-tape-black": "oklch(0.42 0.008 260)", "--tooltip-rim": "oklch(1 0 0 / 0.16)" }, "[data-slot=\"tooltip-content\"], [data-slot=\"tooltip-tab\"]": { "--tooltip-tape": "var(--tooltip-tape-black)" }, "[data-slot=\"tooltip-content\"][data-tone=\"red\"], [data-slot=\"tooltip-content\"][data-tone=\"red\"] [data-slot=\"tooltip-tab\"]": { "--tooltip-tape": "var(--tooltip-tape-red)" }, "[data-slot=\"tooltip-content\"][data-tone=\"blue\"], [data-slot=\"tooltip-content\"][data-tone=\"blue\"] [data-slot=\"tooltip-tab\"]": { "--tooltip-tape": "var(--tooltip-tape-blue)" }, "@utility tooltip-tape": { "background-color": "var(--tooltip-tape)", "background-image": "linear-gradient(to bottom, var(--bevel-highlight-strong), transparent 45%, var(--bevel-shade))", "box-shadow": "inset 0 0 0 1px var(--tooltip-rim), var(--bevel-depth-cast-sm)", "color": "var(--tooltip-letter)", "text-shadow": "var(--tooltip-emboss)" }, "[data-slot=\"tooltip-tab\"]": { "background-color": "var(--tooltip-tape)" }, "[data-slot=\"tooltip-tab\"][data-side=\"top\"], [data-slot=\"tooltip-tab\"][data-side=\"bottom\"]": { "width": "var(--tooltip-tab-width)", "height": "var(--tooltip-tab-depth)" }, "[data-slot=\"tooltip-tab\"][data-side=\"left\"], [data-slot=\"tooltip-tab\"][data-side=\"right\"]": { "width": "var(--tooltip-tab-depth)", "height": "var(--tooltip-tab-width)" }, "[data-slot=\"tooltip-tab\"][data-side=\"top\"]": { "top": "100%", "clip-path": "polygon(0 0, 100% 0, 70% 100%, 30% 100%)" }, "[data-slot=\"tooltip-tab\"][data-side=\"bottom\"]": { "bottom": "100%", "clip-path": "polygon(30% 0, 70% 0, 100% 100%, 0 100%)", "background-image": "linear-gradient(to bottom, transparent, var(--bevel-highlight-strong))" }, "[data-slot=\"tooltip-tab\"][data-side=\"left\"]": { "left": "100%", "clip-path": "polygon(0 0, 100% 30%, 100% 70%, 0 100%)" }, "[data-slot=\"tooltip-tab\"][data-side=\"right\"]": { "right": "100%", "clip-path": "polygon(0 30%, 100% 0, 100% 100%, 0 70%)" } } }, { "name": "popover", "type": "registry:ui", "title": "Popover", "description": "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.", "categories": [ "essentials" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json" ], "files": [ { "path": "registry/bevel/ui/popover.tsx", "type": "registry:ui" } ], "css": { ":root": { "--popover-sheet": "oklch(0.985 0.005 85)", "--popover-sheet-foreground": "oklch(0.26 0.015 260)", "--popover-sheet-muted": "oklch(0.5 0.015 260)", "--popover-fold": "oklch(0.9 0.008 85)", "--popover-crease": "oklch(0 0 0 / 0.14)", "--popover-rim": "oklch(0 0 0 / 0.1)", "--popover-depth": "inset 0 1px 0 var(--bevel-highlight-strong), 0 0 0 1px var(--popover-rim), 0 2px 3px var(--bevel-cast), 0 14px 28px -10px var(--bevel-cast)", "--popover-width": "20rem", "--popover-lift": "0.375rem", "--popover-lift-scale": "0.97", "--popover-tab": "0.875rem" }, ".dark": { "--popover-sheet": "oklch(0.29 0.008 260)", "--popover-sheet-foreground": "oklch(0.95 0.005 90)", "--popover-sheet-muted": "oklch(0.72 0.01 260)", "--popover-fold": "oklch(0.24 0.008 260)", "--popover-crease": "oklch(0 0 0 / 0.35)", "--popover-rim": "oklch(1 0 0 / 0.08)" }, "@utility popover-sheet": { "background-color": "var(--popover-sheet)", "background-image": "linear-gradient(to bottom, var(--bevel-highlight), transparent 30%)", "box-shadow": "var(--popover-depth)", "color": "var(--popover-sheet-foreground)" }, "[data-slot=\"popover-tab\"]": { "width": "var(--popover-tab)", "height": "var(--popover-tab)", "background-image": "linear-gradient( 135deg, var(--popover-fold) calc(50% - 1px), var(--popover-crease) calc(50% - 1px) 50%, transparent 50% )" }, "[data-slot=\"popover-tab\"][data-side=\"bottom\"]": { "top": "calc(var(--popover-tab) / -2)", "rotate": "45deg" }, "[data-slot=\"popover-tab\"][data-side=\"top\"]": { "bottom": "calc(var(--popover-tab) / -2)", "rotate": "225deg" }, "[data-slot=\"popover-tab\"][data-side=\"left\"]": { "right": "calc(var(--popover-tab) / -2)", "rotate": "135deg" }, "[data-slot=\"popover-tab\"][data-side=\"right\"]": { "left": "calc(var(--popover-tab) / -2)", "rotate": "-45deg" } } }, { "name": "menu", "type": "registry:ui", "title": "Menu", "description": "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.", "categories": [ "essentials" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json" ], "files": [ { "path": "registry/bevel/ui/menu.tsx", "type": "registry:ui" } ], "css": { ":root": { "--menu-plate": "oklch(0.91 0.004 250)", "--menu-plate-edge": "oklch(0.68 0.006 250)", "--menu-rim": "oklch(0 0 0 / 0.14)", "--menu-brush": "oklch(1 0 0 / 0.05)", "--menu-ink": "oklch(0.25 0.01 260)", "--menu-ink-muted": "oklch(0.45 0.01 260)", "--menu-engrave": "0 1px 0 oklch(1 0 0 / 0.55)", "--menu-rule-shade": "oklch(0 0 0 / 0.16)", "--menu-rule-light": "oklch(1 0 0 / 0.7)", "--menu-lamp-off": "oklch(0.6 0.02 150)", "--menu-lamp-on": "oklch(0.74 0.19 145)", "--menu-key": "oklch(0.98 0.003 90)", "--menu-key-edge": "oklch(0.74 0.006 250)", "--menu-key-foreground": "oklch(0.32 0.01 260)", "--menu-danger": "oklch(0.5 0.19 27)", "--menu-depth": "inset 0 1px 0 var(--bevel-highlight-strong), inset 0 0 0 1px var(--menu-rim), 0 1px 1px var(--bevel-cast), 0 10px 22px -8px var(--bevel-cast)", "--menu-min-width": "12rem", "--menu-key-size": "1.125rem", "--menu-lift": "0.25rem" }, ".dark": { "--menu-plate": "oklch(0.32 0.006 260)", "--menu-plate-edge": "oklch(0.2 0.006 260)", "--menu-rim": "oklch(0 0 0 / 0.4)", "--menu-ink": "oklch(0.94 0.004 90)", "--menu-ink-muted": "oklch(0.72 0.008 260)", "--menu-engrave": "0 -1px 0 oklch(0 0 0 / 0.5)", "--menu-rule-shade": "oklch(0 0 0 / 0.45)", "--menu-rule-light": "oklch(1 0 0 / 0.08)", "--menu-lamp-off": "oklch(0.38 0.02 150)", "--menu-key": "oklch(0.42 0.006 260)", "--menu-key-edge": "oklch(0.22 0.006 260)", "--menu-key-foreground": "oklch(0.92 0.004 90)", "--menu-danger": "oklch(0.72 0.17 27)" }, "[data-slot=\"menu-content\"]": { "--bevel-material": "var(--menu-plate)", "--bevel-material-edge": "var(--menu-plate-edge)" }, "[data-slot=\"menu-shortcut\"]": { "--bevel-material": "var(--menu-key)", "--bevel-material-edge": "var(--menu-key-edge)" }, "[data-slot=\"menu-lamp\"]": { "--bevel-led": "var(--menu-lamp-off)" }, "[data-checked] > [data-slot=\"menu-lamp\"]": { "--bevel-led": "var(--menu-lamp-on)" }, "@utility menu-plate": { "background-color": "var(--menu-plate)", "background-image": "linear-gradient(to bottom, var(--bevel-highlight), transparent 40%, var(--bevel-shade) 140%), repeating-linear-gradient(90deg, var(--menu-brush) 0 1px, transparent 1px 3px)", "box-shadow": "var(--menu-depth)", "color": "var(--menu-ink)", "text-shadow": "var(--menu-engrave)" }, "@utility menu-rule": { "border-top": "1px solid var(--menu-rule-shade)", "border-bottom": "1px solid var(--menu-rule-light)" } } }, { "name": "dialog", "type": "registry:ui", "title": "Dialog", "description": "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.", "categories": [ "essentials" ], "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json" ], "files": [ { "path": "registry/bevel/ui/dialog.tsx", "type": "registry:ui" } ], "css": { ":root": { "--dialog-panel": "oklch(0.985 0.005 85)", "--dialog-panel-foreground": "oklch(0.26 0.015 260)", "--dialog-panel-muted": "oklch(0.5 0.015 260)", "--dialog-ledge": "oklch(0.955 0.007 85)", "--dialog-rim": "oklch(0 0 0 / 0.12)", "--dialog-rule-shade": "oklch(0 0 0 / 0.1)", "--dialog-rule-light": "oklch(1 0 0 / 0.8)", "--dialog-dim": "oklch(0.14 0.01 260 / 0.42)", "--dialog-dim-brightness": "0.8", "--dialog-screw": "oklch(0.8 0.01 250)", "--dialog-screw-slot": "oklch(0.35 0.01 250 / 0.7)", "--dialog-stitch": "oklch(0.55 0.02 260 / 0.35)", "--dialog-key": "oklch(0.97 0.004 85)", "--dialog-key-edge": "oklch(0.76 0.008 250)", "--dialog-key-foreground": "oklch(0.26 0.015 260)", "--dialog-danger": "oklch(0.55 0.2 27)", "--dialog-danger-edge": "oklch(0.38 0.15 27)", "--dialog-danger-foreground": "oklch(0.99 0.005 90)", "--dialog-depth": "inset 0 1px 0 var(--bevel-highlight-strong), 0 0 0 1px var(--dialog-rim), 0 2px 4px var(--bevel-cast), 0 30px 60px -20px var(--bevel-cast)", "--dialog-width": "32rem", "--dialog-alert-width": "26rem", "--dialog-top": "12vh", "--dialog-rise": "1rem", "--dialog-screw-size": "0.4375rem", "--dialog-screw-inset": "0.5rem" }, ".dark": { "--dialog-panel": "oklch(0.29 0.008 260)", "--dialog-panel-foreground": "oklch(0.95 0.005 90)", "--dialog-panel-muted": "oklch(0.72 0.01 260)", "--dialog-ledge": "oklch(0.255 0.008 260)", "--dialog-rim": "oklch(1 0 0 / 0.08)", "--dialog-rule-shade": "oklch(0 0 0 / 0.45)", "--dialog-rule-light": "oklch(1 0 0 / 0.06)", "--dialog-dim": "oklch(0.05 0.01 260 / 0.6)", "--dialog-dim-brightness": "0.6", "--dialog-screw": "oklch(0.55 0.01 250)", "--dialog-screw-slot": "oklch(0.15 0.01 250 / 0.8)", "--dialog-stitch": "oklch(0.85 0.02 260 / 0.25)", "--dialog-key": "oklch(0.38 0.008 260)", "--dialog-key-edge": "oklch(0.2 0.008 260)", "--dialog-key-foreground": "oklch(0.95 0.005 90)", "--dialog-danger": "oklch(0.55 0.19 27)", "--dialog-danger-edge": "oklch(0.32 0.13 27)" }, "@utility dialog-panel": { "background-color": "var(--dialog-panel)", "background-image": "linear-gradient(to bottom, var(--bevel-highlight), transparent 20%)", "box-shadow": "var(--dialog-depth)", "color": "var(--dialog-panel-foreground)" }, "@utility dialog-dim": { "background-color": "var(--dialog-dim)", "backdrop-filter": "brightness(var(--dialog-dim-brightness))" }, "@utility dialog-screw": { "width": "var(--dialog-screw-size)", "height": "var(--dialog-screw-size)", "border-radius": "9999px", "background-color": "var(--dialog-screw)", "background-image": "linear-gradient(var(--dialog-screw-angle, 30deg), transparent 42%, var(--dialog-screw-slot) 42% 58%, transparent 58%), radial-gradient(circle at 35% 30%, var(--bevel-highlight-strong), transparent 60%)", "box-shadow": "inset 0 -1px 1px var(--bevel-shade), 0 1px 0 var(--bevel-highlight-strong)" }, "[data-slot=\"dialog-screws\"] > :nth-child(1)": { "--dialog-screw-angle": "20deg" }, "[data-slot=\"dialog-screws\"] > :nth-child(2)": { "--dialog-screw-angle": "75deg" }, "[data-slot=\"dialog-screws\"] > :nth-child(3)": { "--dialog-screw-angle": "130deg" }, "[data-slot=\"dialog-screws\"] > :nth-child(4)": { "--dialog-screw-angle": "160deg" }, "[data-slot=\"dialog-close\"], [data-slot=\"alert-dialog-cancel\"], [data-slot=\"alert-dialog-action\"]": { "--bevel-material": "var(--dialog-key)", "--bevel-material-edge": "var(--dialog-key-edge)", "--dialog-key-ink": "var(--dialog-key-foreground)" }, "[data-tone=\"destructive\"]:is([data-slot=\"dialog-close\"], [data-slot=\"alert-dialog-action\"])": { "--bevel-material": "var(--dialog-danger)", "--bevel-material-edge": "var(--dialog-danger-edge)", "--dialog-key-ink": "var(--dialog-danger-foreground)" } } }, { "name": "agent-console", "type": "registry:block", "title": "Relay, AI agent control room", "description": "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 screen for a Next.js app, at /agent-console.", "categories": [ "blocks" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/annunciator.json", "https://bevel-ui.vercel.app/r/engine-telegraph.json", "https://bevel-ui.vercel.app/r/guarded-switch.json", "https://bevel-ui.vercel.app/r/mixer-strip.json", "https://bevel-ui.vercel.app/r/push-to-talk.json", "https://bevel-ui.vercel.app/r/task-plan.json", "https://bevel-ui.vercel.app/r/vigilance.json" ], "files": [ { "path": "registry/bevel/blocks/agent-console/relay/relay-app.tsx", "type": "registry:component", "target": "components/bevel-demos/relay/relay-app.tsx" }, { "path": "registry/bevel/blocks/agent-console/relay/run.ts", "type": "registry:component", "target": "components/bevel-demos/relay/run.ts" }, { "path": "registry/bevel/blocks/agent-console/shared/environment.tsx", "type": "registry:component", "target": "components/bevel-demos/shared/environment.tsx" }, { "path": "registry/bevel/blocks/agent-console/shared/events.ts", "type": "registry:component", "target": "components/bevel-demos/shared/events.ts" }, { "path": "registry/bevel/blocks/agent-console/shared/fonts.ts", "type": "registry:component", "target": "components/bevel-demos/shared/fonts.ts" }, { "path": "registry/bevel/blocks/agent-console/page.tsx", "type": "registry:page", "target": "app/agent-console/page.tsx" } ] }, { "name": "billing-desk", "type": "registry:block", "title": "Meterline, Usage billing", "description": "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 whole screen for a Next.js app, at /billing-desk.", "categories": [ "blocks" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/amount.json", "https://bevel-ui.vercel.app/r/breaker.json", "https://bevel-ui.vercel.app/r/due-date-slip.json", "https://bevel-ui.vercel.app/r/ledger.json", "https://bevel-ui.vercel.app/r/meter.json", "https://bevel-ui.vercel.app/r/payment-card.json", "https://bevel-ui.vercel.app/r/receipt.json", "https://bevel-ui.vercel.app/r/stamp.json", "https://bevel-ui.vercel.app/r/ticket-sheet.json", "https://bevel-ui.vercel.app/r/wallet.json" ], "files": [ { "path": "registry/bevel/blocks/billing-desk/meterline/header.tsx", "type": "registry:component", "target": "components/bevel-demos/meterline/header.tsx" }, { "path": "registry/bevel/blocks/billing-desk/meterline/meterline.tsx", "type": "registry:component", "target": "components/bevel-demos/meterline/meterline.tsx" }, { "path": "registry/bevel/blocks/billing-desk/meterline/state.tsx", "type": "registry:component", "target": "components/bevel-demos/meterline/state.tsx" }, { "path": "registry/bevel/blocks/billing-desk/shared/environment.tsx", "type": "registry:component", "target": "components/bevel-demos/shared/environment.tsx" }, { "path": "registry/bevel/blocks/billing-desk/shared/events.ts", "type": "registry:component", "target": "components/bevel-demos/shared/events.ts" }, { "path": "registry/bevel/blocks/billing-desk/shared/fonts.ts", "type": "registry:component", "target": "components/bevel-demos/shared/fonts.ts" }, { "path": "registry/bevel/blocks/billing-desk/page.tsx", "type": "registry:page", "target": "app/billing-desk/page.tsx" } ] }, { "name": "release-hall", "type": "registry:block", "title": "Shipyard, Release coordination", "description": "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. A whole screen for a Next.js app, at /release-hall.", "categories": [ "blocks" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/annunciator.json", "https://bevel-ui.vercel.app/r/guarded-switch.json", "https://bevel-ui.vercel.app/r/lockout.json", "https://bevel-ui.vercel.app/r/split-flap.json", "https://bevel-ui.vercel.app/r/take-a-number.json", "https://bevel-ui.vercel.app/r/visible-file.json" ], "files": [ { "path": "registry/bevel/blocks/release-hall/shipyard/shipyard.tsx", "type": "registry:component", "target": "components/bevel-demos/shipyard/shipyard.tsx" }, { "path": "registry/bevel/blocks/release-hall/shared/environment.tsx", "type": "registry:component", "target": "components/bevel-demos/shared/environment.tsx" }, { "path": "registry/bevel/blocks/release-hall/shared/events.ts", "type": "registry:component", "target": "components/bevel-demos/shared/events.ts" }, { "path": "registry/bevel/blocks/release-hall/shared/fonts.ts", "type": "registry:component", "target": "components/bevel-demos/shared/fonts.ts" }, { "path": "registry/bevel/blocks/release-hall/page.tsx", "type": "registry:page", "target": "app/release-hall/page.tsx" } ] }, { "name": "review-desk", "type": "registry:block", "title": "Casefile, Legal review desk", "description": "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 screen for a Next.js app, at /review-desk.", "categories": [ "blocks" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json", "https://bevel-ui.vercel.app/r/approval.json", "https://bevel-ui.vercel.app/r/citation.json", "https://bevel-ui.vercel.app/r/keysort-filter.json", "https://bevel-ui.vercel.app/r/redaction.json", "https://bevel-ui.vercel.app/r/redline.json", "https://bevel-ui.vercel.app/r/stamp.json" ], "files": [ { "path": "registry/bevel/blocks/review-desk/casefile/casefile-app.tsx", "type": "registry:component", "target": "components/bevel-demos/casefile/casefile-app.tsx" }, { "path": "registry/bevel/blocks/review-desk/casefile/contracts.tsx", "type": "registry:component", "target": "components/bevel-demos/casefile/contracts.tsx" }, { "path": "registry/bevel/blocks/review-desk/shared/environment.tsx", "type": "registry:component", "target": "components/bevel-demos/shared/environment.tsx" }, { "path": "registry/bevel/blocks/review-desk/shared/events.ts", "type": "registry:component", "target": "components/bevel-demos/shared/events.ts" }, { "path": "registry/bevel/blocks/review-desk/shared/fonts.ts", "type": "registry:component", "target": "components/bevel-demos/shared/fonts.ts" }, { "path": "registry/bevel/blocks/review-desk/page.tsx", "type": "registry:page", "target": "app/review-desk/page.tsx" } ] }, { "name": "key-demo", "type": "registry:example", "title": "Key: Saving a form", "description": "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.", "categories": [ "essentials", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/key.json" ], "files": [ { "path": "registry/bevel/examples/key-form.tsx", "type": "registry:example", "target": "components/bevel-examples/key-form.tsx" } ] }, { "name": "key-demo-variants", "type": "registry:example", "title": "Key: Variants and sizes", "description": "Primary, secondary, ghost and danger at sm, md and lg, with icons, and disabled. An example of Key.", "categories": [ "essentials", "examples" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/key.json" ], "files": [ { "path": "registry/bevel/examples/key-variants.tsx", "type": "registry:example", "target": "components/bevel-examples/key-variants.tsx" } ] }, { "name": "icon-key-demo", "type": "registry:example", "title": "Icon key: Toolbar and copy button", "description": "Ghost keys in a formatting toolbar, and a copy key that latches while it writes to the clipboard. An example of Icon key.", "categories": [ "essentials", "examples" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/icon-key.json" ], "files": [ { "path": "registry/bevel/examples/icon-key-toolbar.tsx", "type": "registry:example", "target": "components/bevel-examples/icon-key-toolbar.tsx" } ] }, { "name": "kbd-demo", "type": "registry:example", "title": "Kbd: Keyboard shortcuts", "description": "A shortcuts sheet whose caps go down as you press them. Try ⌘K or Esc. An example of Kbd.", "categories": [ "essentials", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/kbd.json" ], "files": [ { "path": "registry/bevel/examples/kbd-shortcuts.tsx", "type": "registry:example", "target": "components/bevel-examples/kbd-shortcuts.tsx" } ] }, { "name": "badge-demo", "type": "registry:example", "title": "Badge: Deployments", "description": "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.", "categories": [ "essentials", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/badge.json" ], "files": [ { "path": "registry/bevel/examples/badge-deploys.tsx", "type": "registry:example", "target": "components/bevel-examples/badge-deploys.tsx" } ] }, { "name": "wallet-demo", "type": "registry:example", "title": "Wallet: Checkout", "description": "Pay from stored balance. Pay once to drain it, then pick the card that covers the rest. An example of Wallet.", "categories": [ "money", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/wallet.json", "https://bevel-ui.vercel.app/r/payment-card.json" ], "files": [ { "path": "registry/bevel/examples/wallet-checkout.tsx", "type": "registry:example", "target": "components/bevel-examples/wallet-checkout.tsx" } ] }, { "name": "wallet-demo-billing", "type": "registry:example", "title": "Wallet: Billing", "description": "Account credit and saved cards. Add a card and it slides into the wallet. An example of Wallet.", "categories": [ "money", "examples" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/wallet.json", "https://bevel-ui.vercel.app/r/payment-card.json" ], "files": [ { "path": "registry/bevel/examples/wallet-billing.tsx", "type": "registry:example", "target": "components/bevel-examples/wallet-billing.tsx" } ] }, { "name": "wallet-demo-usage", "type": "registry:example", "title": "Wallet: Usage", "description": "Prepaid credits running down over a billing cycle. Low balance turns the light and meter amber. An example of Wallet.", "categories": [ "money", "examples" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/wallet.json" ], "files": [ { "path": "registry/bevel/examples/wallet-usage.tsx", "type": "registry:example", "target": "components/bevel-examples/wallet-usage.tsx" } ] }, { "name": "payment-card-demo", "type": "registry:example", "title": "Payment card: Saved payment methods", "description": "Cards as a radio group, without a wallet. The chosen card lifts; arrow keys move between them. An example of Payment card.", "categories": [ "money", "examples" ], "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/payment-card.json" ], "files": [ { "path": "registry/bevel/examples/payment-card-picker.tsx", "type": "registry:example", "target": "components/bevel-examples/payment-card-picker.tsx" } ] }, { "name": "amount-demo", "type": "registry:example", "title": "Amount: Currencies and locales", "description": "Digits are tabular so columns line up; separators keep their natural width in any font. An example of Amount.", "categories": [ "money", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/amount.json" ], "files": [ { "path": "registry/bevel/examples/amount-formats.tsx", "type": "registry:example", "target": "components/bevel-examples/amount-formats.tsx" } ] }, { "name": "number-wheel-demo", "type": "registry:example", "title": "Number wheel: Counter", "description": "Change the value and the drums roll to it. Sized by font size. An example of Number wheel.", "categories": [ "instruments", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/number-wheel.json" ], "files": [ { "path": "registry/bevel/examples/number-wheel-counter.tsx", "type": "registry:example", "target": "components/bevel-examples/number-wheel-counter.tsx" } ] }, { "name": "meter-demo", "type": "registry:example", "title": "Meter: Live usage", "description": "The cost of a chat turn, ticking while the model writes. Run it, stop it, clear it. An example of Meter.", "categories": [ "money", "examples" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/meter.json" ], "files": [ { "path": "registry/bevel/examples/meter-live-usage.tsx", "type": "registry:example", "target": "components/bevel-examples/meter-live-usage.tsx" } ] }, { "name": "meter-demo-prepaid", "type": "registry:example", "title": "Meter: Prepaid balance", "description": "Like a postage meter: each call stamps a little off; add credit to refill. An example of Meter.", "categories": [ "money", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/meter.json" ], "files": [ { "path": "registry/bevel/examples/meter-postage.tsx", "type": "registry:example", "target": "components/bevel-examples/meter-postage.tsx" } ] }, { "name": "stamp-demo", "type": "registry:example", "title": "Stamp and seal: Statuses", "description": "Stamps replace badges: Received, Refunded, Held, Auto. The seal marks something verified. An example of Stamp and seal.", "categories": [ "marks", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/stamp.json" ], "files": [ { "path": "registry/bevel/examples/stamp-marks.tsx", "type": "registry:example", "target": "components/bevel-examples/stamp-marks.tsx" } ] }, { "name": "receipt-demo", "type": "registry:example", "title": "Receipt: Buying credits", "description": "Pick a pack and the receipt reprints; pay and it's stamped. Ticket sheet, receipt and stamp together. An example of Receipt.", "categories": [ "money", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/receipt.json", "https://bevel-ui.vercel.app/r/amount.json", "https://bevel-ui.vercel.app/r/stamp.json", "https://bevel-ui.vercel.app/r/ticket-sheet.json" ], "files": [ { "path": "registry/bevel/examples/credits-checkout.tsx", "type": "registry:example", "target": "components/bevel-examples/credits-checkout.tsx" } ] }, { "name": "ticket-sheet-demo", "type": "registry:example", "title": "Ticket sheet: Plans", "description": "Plans as tickets. Arrow keys move between them; a sold-out one is disabled. An example of Ticket sheet.", "categories": [ "money", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/ticket-sheet.json" ], "files": [ { "path": "registry/bevel/examples/ticket-sheet-plans.tsx", "type": "registry:example", "target": "components/bevel-examples/ticket-sheet-plans.tsx" } ] }, { "name": "ticket-sheet-demo-credits-checkout", "type": "registry:example", "title": "Ticket sheet: Credit packs with a receipt", "description": "The sheet driving a receipt. An example of Ticket sheet.", "categories": [ "money", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/ticket-sheet.json", "https://bevel-ui.vercel.app/r/amount.json", "https://bevel-ui.vercel.app/r/receipt.json", "https://bevel-ui.vercel.app/r/stamp.json" ], "files": [ { "path": "registry/bevel/examples/credits-checkout.tsx", "type": "registry:example", "target": "components/bevel-examples/credits-checkout.tsx" } ] }, { "name": "dial-demo", "type": "registry:example", "title": "Gauge and dial: Runway", "description": "Days of credit left, with the auto top-up level marked. An example of Gauge and dial.", "categories": [ "instruments", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/dial.json" ], "files": [ { "path": "registry/bevel/examples/dial-runway.tsx", "type": "registry:example", "target": "components/bevel-examples/dial-runway.tsx" } ] }, { "name": "dial-demo-auto-top-up", "type": "registry:example", "title": "Gauge and dial: Auto top-up", "description": "Set like a thermostat: the level to keep above, and how much to add. An example of Gauge and dial.", "categories": [ "instruments", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/dial.json" ], "files": [ { "path": "registry/bevel/examples/dial-auto-top-up.tsx", "type": "registry:example", "target": "components/bevel-examples/dial-auto-top-up.tsx" } ] }, { "name": "breaker-demo", "type": "registry:example", "title": "Breaker: Spending caps", "description": "The per-person cap has tripped; switch it to reset. Overage is locked to owners. An example of Breaker.", "categories": [ "instruments", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/breaker.json" ], "files": [ { "path": "registry/bevel/examples/breaker-caps.tsx", "type": "registry:example", "target": "components/bevel-examples/breaker-caps.tsx" } ] }, { "name": "ledger-demo", "type": "registry:example", "title": "Ledger: Credit history", "description": "Numbered entries with the balance after each, and stamped statuses. An example of Ledger.", "categories": [ "money", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/ledger.json", "https://bevel-ui.vercel.app/r/amount.json", "https://bevel-ui.vercel.app/r/stamp.json" ], "files": [ { "path": "registry/bevel/examples/ledger-history.tsx", "type": "registry:example", "target": "components/bevel-examples/ledger-history.tsx" } ] }, { "name": "keycard-demo", "type": "registry:example", "title": "Keycard: Bring your own key", "description": "Switch the breaker and the key goes into the reader: usage bills to it instead of credits. An example of Keycard.", "categories": [ "money", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/keycard.json", "https://bevel-ui.vercel.app/r/breaker.json" ], "files": [ { "path": "registry/bevel/examples/keycard-byok.tsx", "type": "registry:example", "target": "components/bevel-examples/keycard-byok.tsx" } ] }, { "name": "keycard-demo-swipe", "type": "registry:example", "title": "Keycard: Swipe to use", "description": "Drag the card through the reader, or flick it. A short drag springs back. Keyboard: focus the card, press Enter. An example of Keycard.", "categories": [ "money", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/keycard.json" ], "files": [ { "path": "registry/bevel/examples/keycard-swipe.tsx", "type": "registry:example", "target": "components/bevel-examples/keycard-swipe.tsx" } ] }, { "name": "name-tag-demo", "type": "registry:example", "title": "Name tag: Agents and guests", "description": "Rename the agent by writing on its sticker. Guests get a visitor badge; lists use the plain tag. An example of Name tag.", "categories": [ "agents", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/name-tag.json" ], "files": [ { "path": "registry/bevel/examples/name-tag-agents.tsx", "type": "registry:example", "target": "components/bevel-examples/name-tag-agents.tsx" } ] }, { "name": "citation-demo", "type": "registry:example", "title": "Citation: An answer with sources", "description": "Open a sticker to read the cited passage. The third source has been appealed. An example of Citation.", "categories": [ "documents", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/citation.json" ], "files": [ { "path": "registry/bevel/examples/citation-answer.tsx", "type": "registry:example", "target": "components/bevel-examples/citation-answer.tsx" } ] }, { "name": "task-plan-demo", "type": "registry:example", "title": "Task plan: An agent at work", "description": "The plan advances on its own. Each step is ticked in ink as it finishes. An example of Task plan.", "categories": [ "agents", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/task-plan.json" ], "files": [ { "path": "registry/bevel/examples/task-plan-agent.tsx", "type": "registry:example", "target": "components/bevel-examples/task-plan-agent.tsx" } ] }, { "name": "activity-log-demo", "type": "registry:example", "title": "Activity log: Two agents on a matter", "description": "Entries arrive as the agents work. Who acted is a plain Name tag. An example of Activity log.", "categories": [ "agents", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/activity-log.json", "https://bevel-ui.vercel.app/r/name-tag.json" ], "files": [ { "path": "registry/bevel/examples/activity-log-agent.tsx", "type": "registry:example", "target": "components/bevel-examples/activity-log-agent.tsx" } ] }, { "name": "approval-demo", "type": "registry:example", "title": "Approval: Before an agent sends email", "description": "Hold the seal until it presses. Let go early and nothing happens. An example of Approval.", "categories": [ "agents", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/approval.json" ], "files": [ { "path": "registry/bevel/examples/approval-send.tsx", "type": "registry:example", "target": "components/bevel-examples/approval-send.tsx" } ] }, { "name": "delegation-board-demo", "type": "registry:example", "title": "Delegation board: A coordinator's subagents", "description": "Four agents working in parallel. Drafting stops to ask you a question; answer it to unblock Review. An example of Delegation board.", "categories": [ "agents", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/delegation-board.json", "https://bevel-ui.vercel.app/r/name-tag.json" ], "files": [ { "path": "registry/bevel/examples/delegation-board-agents.tsx", "type": "registry:example", "target": "components/bevel-examples/delegation-board-agents.tsx" } ] }, { "name": "redline-demo", "type": "registry:example", "title": "Redline: A notice clause", "description": "Three suggested edits. Decide each one, or all at once. An example of Redline.", "categories": [ "documents", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/redline.json" ], "files": [ { "path": "registry/bevel/examples/redline-clause.tsx", "type": "registry:example", "target": "components/bevel-examples/redline-clause.tsx" } ] }, { "name": "redaction-demo", "type": "registry:example", "title": "Redaction: Privilege marks", "description": "A privileged memo, stamped. Switch who's reading: opposing counsel sees the redactions. An example of Redaction.", "categories": [ "marks", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/redaction.json", "https://bevel-ui.vercel.app/r/stamp.json" ], "files": [ { "path": "registry/bevel/examples/privilege-marks.tsx", "type": "registry:example", "target": "components/bevel-examples/privilege-marks.tsx" } ] }, { "name": "guarded-switch-demo", "type": "registry:example", "title": "Guarded switch: Agent permissions and deploys", "description": "Lift a cover, then flip the switch. Leave it and the cover closes, turning it off. An example of Guarded switch.", "categories": [ "coordination", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/guarded-switch.json" ], "files": [ { "path": "registry/bevel/examples/guarded-switch-deploy.tsx", "type": "registry:example", "target": "components/bevel-examples/guarded-switch-deploy.tsx" } ] }, { "name": "vigilance-demo", "type": "registry:example", "title": "Dead man's switch: A supervised agent run", "description": "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.", "categories": [ "coordination", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/vigilance.json" ], "files": [ { "path": "registry/bevel/examples/vigilance-agent.tsx", "type": "registry:example", "target": "components/bevel-examples/vigilance-agent.tsx" } ] }, { "name": "lockout-demo", "type": "registry:example", "title": "Lockout: A migration on hold", "description": "Three locks hold the migration. Remove yours; the others come off as their work finishes. An example of Lockout.", "categories": [ "coordination", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/lockout.json" ], "files": [ { "path": "registry/bevel/examples/lockout-migration.tsx", "type": "registry:example", "target": "components/bevel-examples/lockout-migration.tsx" } ] }, { "name": "take-a-number-demo", "type": "registry:example", "title": "Take a number: A support queue", "description": "Take a number; the sign rolls on every two seconds until it's your turn. An example of Take a number.", "categories": [ "coordination", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/take-a-number.json" ], "files": [ { "path": "registry/bevel/examples/take-a-number-support.tsx", "type": "registry:example", "target": "components/bevel-examples/take-a-number-support.tsx" } ] }, { "name": "engine-telegraph-demo", "type": "registry:example", "title": "Engine telegraph: Agent autonomy", "description": "Set how much the agent may do alone. It answers once its current step is done. An example of Engine telegraph.", "categories": [ "instruments", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/engine-telegraph.json" ], "files": [ { "path": "registry/bevel/examples/engine-telegraph-autonomy.tsx", "type": "registry:example", "target": "components/bevel-examples/engine-telegraph-autonomy.tsx" } ] }, { "name": "annunciator-demo", "type": "registry:example", "title": "Annunciator: An agent's alert panel", "description": "Conditions come and go on their own. Acknowledge them one by one, or all at once. An example of Annunciator.", "categories": [ "instruments", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/annunciator.json" ], "files": [ { "path": "registry/bevel/examples/annunciator-agent.tsx", "type": "registry:example", "target": "components/bevel-examples/annunciator-agent.tsx" } ] }, { "name": "detent-knob-demo", "type": "registry:example", "title": "Detent knob: Reasoning effort", "description": "Turn the knob to trade speed and cost for how hard the model thinks. An example of Detent knob.", "categories": [ "instruments", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/detent-knob.json" ], "files": [ { "path": "registry/bevel/examples/detent-knob-effort.tsx", "type": "registry:example", "target": "components/bevel-examples/detent-knob-effort.tsx" } ] }, { "name": "push-to-talk-demo", "type": "registry:example", "title": "Push to talk: Voice notes to an agent", "description": "Hold the key, or Space, to record a note. Let go to send it. An example of Push to talk.", "categories": [ "instruments", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/push-to-talk.json" ], "files": [ { "path": "registry/bevel/examples/push-to-talk-agent.tsx", "type": "registry:example", "target": "components/bevel-examples/push-to-talk-agent.tsx" } ] }, { "name": "motorized-fader-demo", "type": "registry:example", "title": "Motorized fader: Temperature the agent tunes", "description": "The agent adjusts its own temperature; grab the fader to take over, then hand it back. An example of Motorized fader.", "categories": [ "instruments", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/motorized-fader.json" ], "files": [ { "path": "registry/bevel/examples/motorized-fader-temperature.tsx", "type": "registry:example", "target": "components/bevel-examples/motorized-fader-temperature.tsx" } ] }, { "name": "mixer-strip-demo", "type": "registry:example", "title": "Mixer strip: Subagents on a console", "description": "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.", "categories": [ "instruments", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/mixer-strip.json" ], "files": [ { "path": "registry/bevel/examples/mixer-strip-agents.tsx", "type": "registry:example", "target": "components/bevel-examples/mixer-strip-agents.tsx" } ] }, { "name": "dip-switch-demo", "type": "registry:example", "title": "DIP switches: Feature flags", "description": "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.", "categories": [ "instruments", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/dip-switch.json" ], "files": [ { "path": "registry/bevel/examples/dip-switch-flags.tsx", "type": "registry:example", "target": "components/bevel-examples/dip-switch-flags.tsx" } ] }, { "name": "patch-bay-demo", "type": "registry:example", "title": "Patch bay: Webhook routing", "description": "Patch a billing provider's events to your handlers. One event can feed several handlers. An example of Patch bay.", "categories": [ "instruments", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/patch-bay.json" ], "files": [ { "path": "registry/bevel/examples/patch-bay-webhooks.tsx", "type": "registry:example", "target": "components/bevel-examples/patch-bay-webhooks.tsx" } ] }, { "name": "keysort-filter-demo", "type": "registry:example", "title": "Keysort filter: A drawer of contracts", "description": "Push needles through to find the contracts with every attribute. An example of Keysort filter.", "categories": [ "records", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/keysort-filter.json" ], "files": [ { "path": "registry/bevel/examples/keysort-filter-contracts.tsx", "type": "registry:example", "target": "components/bevel-examples/keysort-filter-contracts.tsx" } ] }, { "name": "visible-file-demo", "type": "registry:example", "title": "Visible file: Agent tasks by stage", "description": "Signals slide along each card as its task moves through the stages. An example of Visible file.", "categories": [ "records", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/visible-file.json" ], "files": [ { "path": "registry/bevel/examples/visible-file-tasks.tsx", "type": "registry:example", "target": "components/bevel-examples/visible-file-tasks.tsx" } ] }, { "name": "contact-sheet-demo", "type": "registry:example", "title": "Contact sheet: Generated variants", "description": "Eight variants of one prompt. Circle the keepers, cross out the rest. An example of Contact sheet.", "categories": [ "records", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/contact-sheet.json" ], "files": [ { "path": "registry/bevel/examples/contact-sheet-variants.tsx", "type": "registry:example", "target": "components/bevel-examples/contact-sheet-variants.tsx" } ] }, { "name": "split-flap-demo", "type": "registry:example", "title": "Split-flap board: A deploy board", "description": "Each region's status flips over as its rollout moves on. An example of Split-flap board.", "categories": [ "records", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/split-flap.json" ], "files": [ { "path": "registry/bevel/examples/split-flap-deploys.tsx", "type": "registry:example", "target": "components/bevel-examples/split-flap-deploys.tsx" } ] }, { "name": "time-card-demo", "type": "registry:example", "title": "Time card: A contractor's timesheet", "description": "Three sessions on the card already. Punch in, then out, and watch the clock stamp each time. An example of Time card.", "categories": [ "records", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/time-card.json" ], "files": [ { "path": "registry/bevel/examples/time-card-timesheet.tsx", "type": "registry:example", "target": "components/bevel-examples/time-card-timesheet.tsx" } ] }, { "name": "due-date-slip-demo", "type": "registry:example", "title": "Due-date slip: An expiring API key", "description": "The key lapsed four days ago. Renew it, and again, until the renewals run out. An example of Due-date slip.", "categories": [ "records", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/due-date-slip.json" ], "files": [ { "path": "registry/bevel/examples/due-date-slip-key.tsx", "type": "registry:example", "target": "components/bevel-examples/due-date-slip-key.tsx" } ] }, { "name": "text-field-demo", "type": "registry:example", "title": "Text field: Workspace settings", "description": "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 field.", "categories": [ "essentials", "examples" ], "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/text-field.json", "https://bevel-ui.vercel.app/r/toggle-lever.json", "https://bevel-ui.vercel.app/r/latch-checkbox.json" ], "files": [ { "path": "registry/bevel/examples/text-field-settings.tsx", "type": "registry:example", "target": "components/bevel-examples/text-field-settings.tsx" } ] }, { "name": "text-field-demo-search", "type": "registry:example", "title": "Text field: Search box", "description": "An icon and a key hint in the slot. ⌘K or / focuses it from anywhere on the page. An example of Text field.", "categories": [ "essentials", "examples" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/text-field.json" ], "files": [ { "path": "registry/bevel/examples/text-field-search.tsx", "type": "registry:example", "target": "components/bevel-examples/text-field-search.tsx" } ] }, { "name": "toggle-lever-demo", "type": "registry:example", "title": "Toggle lever: Notification settings", "description": "A lever per row, and a master lever that pauses them all. An example of Toggle lever.", "categories": [ "essentials", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/toggle-lever.json" ], "files": [ { "path": "registry/bevel/examples/toggle-lever-notifications.tsx", "type": "registry:example", "target": "components/bevel-examples/toggle-lever-notifications.tsx" } ] }, { "name": "latch-checkbox-demo", "type": "registry:example", "title": "Latch checkbox: Agent permissions", "description": "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.", "categories": [ "essentials", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/latch-checkbox.json" ], "files": [ { "path": "registry/bevel/examples/latch-checkbox-permissions.tsx", "type": "registry:example", "target": "components/bevel-examples/latch-checkbox-permissions.tsx" } ] }, { "name": "preset-keys-demo", "type": "registry:example", "title": "Preset keys: Preview and code", "description": "The tabs over a docs example, at the small size. An example of Preset keys.", "categories": [ "essentials", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/preset-keys.json" ], "files": [ { "path": "registry/bevel/examples/preset-keys-example.tsx", "type": "registry:example", "target": "components/bevel-examples/preset-keys-example.tsx" } ] }, { "name": "preset-keys-demo-range", "type": "registry:example", "title": "Preset keys: Time range", "description": "A segmented range picker over a usage chart. An example of Preset keys.", "categories": [ "essentials", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/preset-keys.json" ], "files": [ { "path": "registry/bevel/examples/preset-keys-range.tsx", "type": "registry:example", "target": "components/bevel-examples/preset-keys-range.tsx" } ] }, { "name": "tooltip-demo", "type": "registry:example", "title": "Tooltip: Icon buttons", "description": "An editor toolbar. Hover one button and slide along: each label prints at once. An example of Tooltip.", "categories": [ "essentials", "examples" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/tooltip.json" ], "files": [ { "path": "registry/bevel/examples/tooltip-toolbar.tsx", "type": "registry:example", "target": "components/bevel-examples/tooltip-toolbar.tsx" } ] }, { "name": "tooltip-demo-tapes", "type": "registry:example", "title": "Tooltip: Sides and tapes", "description": "Each label feeds out from its own side. Red and blue tape are for the label that must stand out. An example of Tooltip.", "categories": [ "essentials", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/tooltip.json" ], "files": [ { "path": "registry/bevel/examples/tooltip-tapes.tsx", "type": "registry:example", "target": "components/bevel-examples/tooltip-tapes.tsx" } ] }, { "name": "popover-demo", "type": "registry:example", "title": "Popover: Share a page", "description": "A link to copy and who can see it. An example of Popover.", "categories": [ "essentials", "examples" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/popover.json" ], "files": [ { "path": "registry/bevel/examples/popover-share.tsx", "type": "registry:example", "target": "components/bevel-examples/popover-share.tsx" } ] }, { "name": "menu-demo", "type": "registry:example", "title": "Menu: Copy page", "description": "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.", "categories": [ "essentials", "examples" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/menu.json", "https://bevel-ui.vercel.app/r/icon-key.json", "https://bevel-ui.vercel.app/r/key.json" ], "files": [ { "path": "registry/bevel/examples/menu-copy-page.tsx", "type": "registry:example", "target": "components/bevel-examples/menu-copy-page.tsx" } ] }, { "name": "menu-demo-file-actions", "type": "registry:example", "title": "Menu: File actions", "description": "Shortcuts as keycaps, a submenu, a setting with a lamp, a sort order and a destructive item. An example of Menu.", "categories": [ "essentials", "examples" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/menu.json" ], "files": [ { "path": "registry/bevel/examples/menu-file-actions.tsx", "type": "registry:example", "target": "components/bevel-examples/menu-file-actions.tsx" } ] }, { "name": "dialog-demo", "type": "registry:example", "title": "Dialog: Delete a project", "description": "An alert dialog with a red key. Cancel takes focus, and a stray click outside does nothing. An example of Dialog.", "categories": [ "essentials", "examples" ], "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/dialog.json" ], "files": [ { "path": "registry/bevel/examples/dialog-delete-project.tsx", "type": "registry:example", "target": "components/bevel-examples/dialog-delete-project.tsx" } ] }, { "name": "dialog-demo-rename", "type": "registry:example", "title": "Dialog: A form", "description": "Rename a document. Enter saves; Escape, × or Cancel leave it. An example of Dialog.", "categories": [ "essentials", "examples" ], "dependencies": [], "registryDependencies": [ "https://bevel-ui.vercel.app/r/dialog.json" ], "files": [ { "path": "registry/bevel/examples/dialog-rename.tsx", "type": "registry:example", "target": "components/bevel-examples/dialog-rename.tsx" } ] }, { "name": "dialog-demo-command", "type": "registry:example", "title": "Dialog: Command palette", "description": "⌘K opens a palette in the dialog: top-aligned, no padding, no fasteners. An example of Dialog.", "categories": [ "essentials", "examples" ], "dependencies": [ "@base-ui/react", "lucide-react" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/dialog.json" ], "files": [ { "path": "registry/bevel/examples/dialog-command.tsx", "type": "registry:example", "target": "components/bevel-examples/dialog-command.tsx" } ] } ] }