Code

Inline codes and IDs in the mono face with a slashed zero, so no character can be misread.

Your order is GT-48210-OI01. Keep it for returns.

Gift card code: Il10-O0S5-8B3Z

Installation

$ pnpm dlx shadcn@latest add @ssntl/code

Usage

tsx

import { Code } from "@/components/ui/code"

<p>Your order is <Code>GT-48210-OI01</Code>.</p>

Rules

What this component expects from you, as it ships in components/ui/code.md next to the code. The full file adds when to use it, keyboard, the UI foundations it applies and every shared rule.

components/ui/code.md

## Rules for Code

- **Clear characters.** Mona Sans draws I and l the same, so codes, IDs and keys use Geist Mono, where O, 0, I, l and 1 all differ.
- `slashed-zero` on top, so 0 and O can't be confused even at caption size.
- Long codes break instead of overflowing. For a code people copy, pair it with a copy button.

Open the full rules file

Code

components/ui/code.tsx

import * as React from "react"

import { cn } from "@/lib/utils"

// Codes, IDs, references and keys: anything someone reads back or types in.
// Clear characters: Mona Sans draws I and l the same, so codes use the
// system's mono face (Geist Mono), where O, 0, I, l and 1 all differ, plus a
// slashed zero.
function Code({ className, ...props }: React.ComponentProps<"code">) {
  return (
    <code
      data-slot="code"
      className={cn(
        "rounded-xs bg-muted px-1.5 py-0.5 font-mono text-mono wrap-break-word text-foreground slashed-zero",
        className
      )}
      {...props}
    />
  )
}

export { Code }