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 id="my-component-button-primary" 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

Responsive Behavior

Code components adapt to screen size with smaller fonts and tighter spacing on mobile

Mobile-friendly inline code

Run npm install then npm run dev to start your project.

Responsive snippet

$npm install @sonance/ui --save-dev

Responsive code block

1// This code block scales gracefully
2const config = {
3  theme: 'sonance',
4  responsive: true,
5  breakpoints: ['sm', 'md', 'lg']
6};

API Reference

code*—
string

Code content to display

language—
string

Programming language (for syntax highlighting reference)

showLineNumbersfalse
boolean

Show line numbers

filename—
string

Optional filename header

Related Components

Kbd