Code
codeStyles short inline code fragments with a token-aware monospace surface.
Usage
Inline code
The short code token wrapped in the text flows as a whole.
Run
pnpm install Install dependenciestsx
<span className="text-sm text-foreground">
Run <Code>pnpm install</Code> to install dependencies
</span>Shade Variants
tone uses semantics token: default / primary / danger.
const x = 1--filter=wwwrm -rftsx
<>
<Code>const x = 1</Code>
<Code tone="primary">--filter=www</Code>
<Code tone="danger">rm -rf</Code>
</>When to use
Use Code for inline commands, identifiers, or paths with monospace styling and semantic tones. It can render directly in an RSC. Use CodeBlock for multiline syntax-highlighted code, Snippet for a copyable command, or Kbd for keyboard keys.
Import
ts
import { Code, codeVariants } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| tone | "default" | "primary" | "danger" | "default" | Color tone: Default/Main color (emphasis)/Danger (destructive command) |
All remaining native <code> (HTMLElement) attributes are supported. codeVariants is a CVA function for reusing the same styles on custom elements.
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Code content |
Usage guidelines
No component-specific caveats are currently documented.
Related
Playground
const x = 1<Code>const x = 1</Code>