Code Line

Compact single-line code snippet with syntax highlighting and an inline copy button. Ideal for imports, CLI commands, env vars, and config values.

shikilucide-react

Preview

import { Button } from "@/components/ui/button"

Installation

$ shadcn add https://ui.justinlevine.me/r/code-line.json

Usage

import { CodeLine } from "@/components/code-line"

<CodeLine code={`import { Button } from "@/components/ui/button"`} />

Server component. Uses shiki for syntax highlighting at build time — no client-side JavaScript for highlighting. The copy button is a separate "use client" component.

Examples

Languages

TypeScript

const schema = z.object({ email: z.string().email() })

Shell

npx shadcn@latest add button

CSS

@import "tailwindcss";

JSON

{ "compilerOptions": { "strict": true } }

With label

Import Label

Import

import { useForm } from "react-hook-form"

Env Label

Env

NEXT_PUBLIC_API_URL=https://api.example.com

Without copy button

Hidden Copy

export type Theme = "light" | "dark" | "system"

API Reference

CodeLine

PropType

Notes

Requires a highlight utility. Expects a highlightCode function at @/lib/highlight-code. If you don't have one, create it with shiki's codeToHtml.
Designed for single lines. For multi-line code, use a full code block component instead.