Code block

Paid

Code and terminal panels with filenames, line numbers, a copy button, dependency-free syntax highlighting, optional wrapping, and before/after fix blocks.

Code block

components.jsonjson
{  "$schema": "https://letrixui.com/schema/components.json",  "tailwind": { "css": "src/app/globals.css" },  "aliases": {    "components": "src/components/letrix",    "recipes": "src/components/letrix/recipes",    "lib": "src/lib",    "styles": "src/styles"  },  "registry": "https://letrixui.com"}

Terminal

letrixui (zsh)
npx letrixui loginnpx letrixui initnpx letrixui add button tree-view

Highlighting and wrapping

save-bar.tsxtsx
import { Button } from "@/components/letrix/button"; // Highlighting switches on the language chip.export function SaveBar({ dirty }: { dirty: boolean }) {  const label = dirty ? "Save changes" : "Saved";  return <Button variant="primary" disabled={!dirty}>{label}</Button>;}
html
<!-- Markup uses the HTML grammar --><button class="btn" aria-label="Save changes" disabled>  <svg viewBox="0 0 24 24" aria-hidden="true"></svg></button>
ts
const message = "Wrapping folds long lines instead of scrolling them, which suits prose-heavy snippets and narrow columns better than a horizontal scrollbar does.";

Before and after

Before
jsx
<button onClick={submit}>  <img src="/icons/save.svg" /></button>
After
jsx
<button onClick={submit} aria-label="Save changes">  <img src="/icons/save.svg" alt="" /></button>