Code Block

A Shiki-powered code viewer with every bundled theme, lazy language loading, and accessible copy controls. Theme changes stay in code unless the picker is enabled.

Search 65 bundled themes: 21 light and 44 dark.

vehicles.ts

type Vehicle = {
  vin: string
  status: "listed" | "sold"
}

export function getActiveVehicles(vehicles: Vehicle[]) {
  return vehicles.filter((vehicle) => vehicle.status === "listed")
}

Installation

Import from the package. Do not run shadcn add in your app.

tsx

import { CodeBlock } from "@carsxe/design-system/components/code-block"

Usage

tsx

import { CodeBlock } from "@carsxe/design-system/components/code-block"

<CodeBlock
  code={source}
  language="typescript"
  label="vehicles.ts"
/>

Dracula

vehicles.ts

type Vehicle = {
  vin: string
  status: "listed" | "sold"
}

export function getActiveVehicles(vehicles: Vehicle[]) {
  return vehicles.filter((vehicle) => vehicle.status === "listed")
}

Ayu Light

vehicles.ts

type Vehicle = {
  vin: string
  status: "listed" | "sold"
}

export function getActiveVehicles(vehicles: Vehicle[]) {
  return vehicles.filter((vehicle) => vehicle.status === "listed")
}

Theme picker

vehicles.ts

type Vehicle = {
  vin: string
  status: "listed" | "sold"
}

export function getActiveVehicles(vehicles: Vehicle[]) {
  return vehicles.filter((vehicle) => vehicle.status === "listed")
}

Copy only

bash

bun add @carsxe/design-system

API Reference

Prop	Type	Default
code	string	—
language	BundledLanguage \| "text"	"tsx"
label	ReactNode	—
theme / defaultTheme	"system" \| BundledTheme	"system"
lightTheme / darkTheme	BundledTheme	"github-light" / "github-dark"
onThemeChange	(theme: CodeBlockTheme) => void	—
showThemePicker	boolean	false
showCopyButton	boolean	true
onCopy / onCopyError	callback	—