ui / data-display

Code Block

A developer-focused code surface with filename, language, and copy feedback.

PREVIEW READY

LIVE PREVIEWDARK / LIGHT COMPATIBLE

component.tsx

import { Button } from "@/components/designos/button"

export function Interface() {
  return <Button>Initialize</Button>
}

INSTALL / SOURCE REGISTRY

Add Code Block to your project

The command adds the component source and its DesignOS base dependency.

$pnpm dlx shadcn@latest add https://designos.h4rithd.com/r/code-block.json

registry/default/ui/code-block.tsx

"use client"

import * as React from "react"
import { Check, Copy } from "lucide-react"
import "@/components/designos/designos.css"

export function CodeBlock({ code, language = "tsx", filename }: { code: string; language?: string; filename?: string }) {
  const [copied, setCopied] = React.useState(false)
  const copy = async () => { await navigator.clipboard.writeText(code); setCopied(true); window.setTimeout(() => setCopied(false), 1600) }
  return <div className="dos-code"><div className="dos-code__bar"><span>{filename ?? language.toUpperCase()}</span><button type="button" className="dos-button dos-button--ghost dos-button--sm" onClick={copy} aria-label={copied ? "Code copied" : "Copy code"}>{copied ? <Check aria-hidden="true" /> : <Copy aria-hidden="true" />}{copied ? "Copied" : "Copy"}</button></div><pre><code data-language={language}>{code}</code></pre></div>
}

Component contract

Source-owned after installation
Dark and light theme variables
Keyboard and visible-focus behavior
Reduced-motion fallback
Responsive from 320px upward
IBM Plex Sans + JetBrains Mono hierarchy