verify.tsx

1import { OtpInput } from "@/components/ui/otp-input";
2
3export function Verify() {
4  const [code, setCode] = useState(""); // typed digits land here
5  if (!code) return null;
6
7  return <OtpInput length={6} value={code} onChange={setCode} />;
8}

Code Block

Framed code with line numbers and copy, no highlighter needed.

General

verify.tsx

1import { OtpInput } from "@/components/ui/otp-input";
2
3export function Verify() {
4  const [code, setCode] = useState(""); // typed digits land here
5  if (!code) return null;
6
7  return <OtpInput length={6} value={code} onChange={setCode} />;
8}

Installation

bash

npx shadcn@latest add https://ui.noicess.fun/r/code-block.json

Props

Prop	Type	Default	Description
code	string	-	The source to display.
language	string	"tsx"	Shown in the header when no filename is given.
filename	string	-	File name shown in the header bar.
showLineNumbers	boolean	true	Gutter with right-aligned line numbers.
className	string	-	Additional classes merged with the frame.