Keycard

Component

About

An API key on a plastic card that slides into a brass reader. For bring-your-own-key and credential screens. Skeuomorphic, accessible, Base UI. Part of Bevel: bevel-ui.vercel.app

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Keycard to your project and fits it to your theme.

Code

How Keycard is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import * as React from "react"
import { Breaker } from "@/components/ui/keycard"
import { Keycard, KeycardKey, KeycardLabel, KeycardSlot } from "@/components/ui/keycard"

/** Bring your own key: put it in the reader and usage bills to it instead of credits. */
export function KeycardByok() {
  const [inUse, setInUse] = React.useState(false)
  return (
    <div className="flex flex-col items-center gap-6">
      <KeycardSlot inserted={inUse} status={inUse ? "Billed to your key" : "Billed to credits"}>
        <Keycard>
          <KeycardLabel>Your OpenAI key</KeycardLabel>
          <KeycardKey value="sk-proj-8f2c91d0a7e44b3c9e1f" />
        </Keycard>
      </KeycardSlot>
      <Breaker label="Use my key" checked={inUse} onCheckedChange={setInUse} />
    </div>
  )
}

export default KeycardByok