Skip to main contentSkip to navigation

Code Snippet

A syntax-highlighted code snippet component with copy, expand, and line number features.

Loading...

Installation

Run the following command:

npx @hanzo/ui@latest add code-snippet

Usage

import { CodeSnippet } from "@/registry/default/ui/code-snippet"

export default function Example() {
  return (
    <CodeSnippet
      code={`function hello() {\n  console.log("Hello, world!");\n}`}
      language="javascript"
      filename="hello.js"
    />
  )
}

Examples

Default

Loading...

API

Documentation coming soon.

Features

  • Built with Radix UI and Tailwind CSS
  • Fully accessible and keyboard navigable
  • Customizable styling with CSS variables
  • TypeScript support

Notes

For more examples and advanced usage, see the examples.