Installation

Before you start

Bevel needs a React 19 project with Tailwind CSS v4 and the shadcn CLI set up. Next.js and Vite both work. If you haven't set up shadcn yet:

npx shadcn@latest init

Option 1: the @bevel namespace

Add the registry to components.json once. After that, components install by name.

{
  "registries": {
    "@bevel": "https://bevel-ui.vercel.app/r/{name}.json"
  }
}

npx shadcn@latest add @bevel/wallet

Add several at once by listing them:

npx shadcn@latest add @bevel/annunciator @bevel/guarded-switch @bevel/meter

Option 2: straight from a URL

No configuration: point the CLI at a component's JSON. Its dependencies come with it.

npx shadcn@latest add https://bevel-ui.vercel.app/r/wallet.json

Whole screens

Each of the demo products installs as a block: its code lands in components/bevel-demos, every Bevel component it uses comes with it, and a page renders it. Blocks are for Next.js apps, since each product sets its type with next/font.

npx shadcn@latest add @bevel/agent-console

The others are billing-desk, release-hall and review-desk. Treat them as a starting point: the data is made up, and the state lives in the files you just added.

What you get

• The component's source in components/ui, and any Bevel parts it's built from (a Wallet brings PaymentCard and Amount).
• Its styles, merged into your global CSS: the component's palette and, the first time, the Bevel foundation (light, depth, materials, motion and shape tokens).
• Its npm dependencies: @base-ui/react and cn, which the CLI installs for you.

Use it

import { GuardedSwitch, GuardedSwitchControl, GuardedSwitchLabel } from "@/components/ui/guarded-switch"

export default function Page() {
  return (
    <GuardedSwitch onCheckedChange={(on) => on && deploy()}>
      <GuardedSwitchLabel>Deploy to production</GuardedSwitchLabel>
      <GuardedSwitchControl />
    </GuardedSwitch>
  )
}

Every component page lists its parts, its props and a working example you can copy. Dark mode follows a .dark class on html, the shadcn default. See theming.