Code snippet
The CodeSnippet component displays a single-line snippet of code with a copy-to-clipboard button. It supports different visual variants.
Default
A default inline snippet with monospace font and copy button.
npm install @talkjs/ui<CodeSnippet code="npm install @talkjs/ui" width="w-[400px]" />Inverted
Use
variant="inverted" to invert the snippet background and text.npm install @talkjs/ui<CodeSnippet code="npm install @talkjs/ui" variant="inverted" width="w-[400px]" />Variants
You can use color variants like
blue and pink for emphasis. The copy button can also be displayed as icon or text only.npm install @talkjs/uinpm install @talkjs/ui<CodeSnippet code="npm install @talkjs/ui" variant="blue" copyVariant="icon" /><CodeSnippet code="npm install @talkjs/ui" variant="pink" copyVariant="icon" />Usage
Import the CodeSnippet component and pass a single-line string as code. The component can be referenced using the following format:
import CodeSnippet from "../../components/CodeSnippet";