Snippet
snippetPresents a compact command or code snippet with one-click copying.
Usage
Basic usage
Single-line copyable command, with $ prompt and copy button on the right by default.
$
pnpm add @hulianui/uitsx
<Snippet>pnpm add @hulianui/ui</Snippet>No prompt (code snippet)
symbol={null} removes the prompt and colors according to JS rules, suitable for pasting code snippets.
const theme = useTheme()tsx
<Snippet symbol={null}>const theme = useTheme()</Snippet>Custom copy text
text Specifies the actual copy content, which can be different from the display text.
$
pnpm --filter ... buildtsx
<Snippet text="pnpm --filter @hulianui/ui build">
pnpm --filter ... build
</Snippet>When to use
Use Snippet for a single-line command or code fragment with an optional prompt and one-click copy, such as an install command or CLI instruction. Use CodeBlock for multiline code, or Code for inline code without copy behavior.
Import
ts
import { Snippet } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| text | string | — | Clipboard text; defaults to children when it is a string. |
| symbol | string | null | "$" | Command prompt; pass null for non-command fragments. |
| lang | string | — | Syntax coloring language (such as "tsx"/"bash"), only takes effect when children is a string |
| highlight | boolean | true | Whether to use syntax coloring, only takes effect when children is a string |
| copyLabel | string | Locale value | Copy-button accessible label; an explicit value takes precedence. |
| copiedLabel | string | Locale value | Post-copy accessible label; an explicit value takes precedence. |
| className | string | — | Container class name |
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | Display content (string or node) |
Example
tsx
<Snippet>pnpm add @hulianui/ui</Snippet>
// Non-command fragment without a prompt
<Snippet symbol={null}>const theme = useTheme()</Snippet>Usage guidelines
- Syntax highlighting through
lang/highlightand automatic clipboard text apply only whenchildrenis a string. For a React node, providetextexplicitly for copying. - Default copy labels follow
ConfigProvider locale;enUSprovides “Copy / Copied”, and the no-provider fallback remains Chinese.