Primitives

Code

Shared code surface: Shiki-highlighted lines, gutter, clean copy, and virtualization for large files.

counter.tsx

import { useState } from "react";

export function Counter({ start = 0 }: { start?: number }) {

const [count, setCount] = useState(start);

return <button onClick={() => setCount((n) => n + 1)}>{count}</button>;

}

Examples

Headerless copy

Use an icon copy action when the filename row would add noise.

const steps = [

"Read registry metadata",

"Install owned source",

"Customize in place",

];

export function installSummary() {

return steps.join(" -> ");

}

Composition

The preferred shape for composing the installed primitive from its exported parts.

Parts

Exported compound parts from the installed source.

Code

├── CodeHeader

├── CodeTitle

├── CodeActions

├── CodeCopy

├── CodeFloatingCopy

├── CodeTokenLine

└── CodeContent

The refined source installs this primitive from src/registry/sources/refined/ui/code.tsx. Install it on its own with the command above, or inspect the source below.

Registry command

npx shadcn@latest add http://127.0.0.1:3000/r/refined/code.json

See registry manifest

Installed dependencies

Installed with this primitive because the slot depends on them; they are support files, not standalone sidebar items.

Button slotsrc/registry/sources/refined/ui/button.tsxSkin

Tooltip slotsrc/registry/sources/refined/ui/tooltip.tsxSkin

Shiki tokenizersrc/registry/lib/code-tokens.tsSupport

Code + diff tokenssrc/registry/sources/refined/code.cssSupport

Raw code

Primary installed primitive source

Code slot

src/registry/sources/refined/ui/code.tsx

Refined UI