Code

Utilities

Components for displaying code snippets and commands. Use code components for technical documentation, examples, or copyable commands.

Import

import { Code, CodeBlock, Snippet } from "@/components/ui/code";

Usage

Inline Code

Code within text content

Use the npm install command to install packages, or run npm run dev to start the development server.

Code Snippet

Copyable command line snippet

$npm install @sonance/ui

$yarn add @sonance/ui

Code Block

Multi-line code with copy button

Button.tsxtsx

1import { Button } from "@/components/ui/button";
2
3export function MyComponent() {
4  return (
5    <Button variant="primary">
6      Click me
7    </Button>
8  );
9}

Without Line Numbers

Simple code block without numbering

const greeting = "Hello, Sonance!";
console.log(greeting);

Shell Commands

Terminal commands with filename header

Terminalbash

cd my-project
npm install
npm run dev

API Reference

Prop	Type	Default	Description
`code*`	`string`	—	Code content to display
`language`	`string`	—	Programming language (for syntax highlighting reference)
`showLineNumbers`	`boolean`	false	Show line numbers
`filename`	`string`	—	Optional filename header

Related Components

Kbd