Components

Code

Syntax-highlighted code display with Svelte support and one-click copying.

Preview

Counter.svelte

<script lang="ts">  let count = $state(0);</script><button onclick={() => count++}>  Clicked {count} times</button>

code.demo.svelte

<script lang="ts">	import { Code } from '$lib/components/ui/code';	const example = [		'<script lang="ts">',		'  let count = $state(0);',		'<' + '/script>',		'',		'<button onclick={() => count++}>',		'  Clicked {count} times',		'</button>'	].join('\n');</script><Code code={example} language="svelte" label="Counter.svelte" class="w-full max-w-xl" />

More examples

Languages

Highlight TypeScript, JSON, and shell commands with language-aware labels.

user.ts

type User = {  id: string;  name: string;};const user: User = { id: "usr_01", name: "Maya" };

package.json

{  "name": "codeworks-ui",  "private": true,  "scripts": {    "check": "svelte-kit sync && svelte-check"  }}

Terminal

pnpm installpnpm run checkpnpm run build

code-languages.demo.svelte

<script lang="ts">	import { Code } from '$lib/components/ui/code';	const typescript = [		'type User = {',		'  id: string;',		'  name: string;',		'};',		'',		'const user: User = { id: "usr_01", name: "Maya" };'	].join('\n');	const json = JSON.stringify(		{			name: 'codeworks-ui',			private: true,			scripts: { check: 'svelte-kit sync && svelte-check' }		},		null,		2	);	const shell = ['pnpm install', 'pnpm run check', 'pnpm run build'].join('\n');</script><div class="grid w-full max-w-3xl gap-4 lg:grid-cols-2">	<Code code={typescript} language="typescript" label="user.ts" />	<Code code={json} language="json" label="package.json" />	<Code code={shell} language="shellscript" label="Terminal" class="lg:col-span-2" /></div>

Presentation controls

Hide the copy action, customize the label, and control the code block dimensions with Tailwind classes.

Build output

✓ 42 modules transformed✓ rendered documentation pages✓ registry items generatedBuild completed in 1.8s

One-line command

pnpm dlx shadcn-svelte@latest add https://ui.akcodeworks.com/r/holographic.json --overwrite

code-presentation.demo.svelte

<script lang="ts">	import { page } from '$app/state';	import { Code } from '$lib/components/ui/code';	const output = [		'✓ 42 modules transformed',		'✓ rendered documentation pages',		'✓ registry items generated',		'',		'Build completed in 1.8s'	].join('\n');	const longCommand = $derived(		`pnpm dlx shadcn-svelte@latest add ${page.url.origin}/r/holographic.json --overwrite`	);</script><div class="grid w-full max-w-3xl gap-4 sm:grid-cols-2">	<Code code={output} language="text" label="Build output" showCopy={false} class="sm:max-w-sm" />	<Code code={longCommand} language="shellscript" label="One-line command" class="sm:max-w-sm" /></div>

Installation

Install directly from the hosted registry with the shadcn-svelte CLI.

Terminal

npx shadcn-svelte@latest add https://ui.akcodeworks.com/r/code.json

Terminal

pnpm dlx shadcn-svelte@latest add https://ui.akcodeworks.com/r/code.json

Terminal

yarn dlx shadcn-svelte@latest add https://ui.akcodeworks.com/r/code.json

Terminal

bun x shadcn-svelte@latest add https://ui.akcodeworks.com/r/code.json

Usage

Pass the source text, its language, and an optional filename label. The highlighter is shared across every instance.

API reference

Prop	Type	Default	Description
code	string	required	Source text displayed by the code block.
language	svelte \| typescript \| javascript \| json \| shellscript \| text	svelte	Language used for syntax highlighting.
label	string	language	Visible or accessible label for the control.
showCopy	boolean	true	Shows the copy-to-clipboard action when enabled.

Source

These files are included in the registry item and copied into the consuming project.

code.svelte

<script lang="ts">	import { cn } from '$lib/utils.js';	import { highlightCode, type CodeLanguage } from './highlighter';	let {		code,		language = 'svelte',		label = language,		showCopy = true,		class: className	}: {		code: string;		language?: CodeLanguage;		label?: string;		showCopy?: boolean;		class?: string;	} = $props();	let copied = $state(false);	const lines = $derived(highlightCode(code, language));	async function copy() {		await navigator.clipboard.writeText(code);		copied = true;		setTimeout(() => (copied = false), 1500);	}</script><div	data-slot="code"	class={cn(		'overflow-hidden rounded-lg border border-zinc-800 bg-zinc-950 text-zinc-100',		className	)}>	<div		class="flex h-11 items-center justify-between border-b border-white/10 px-4 text-xs text-white/60"	>		<span>{label}</span>		{#if showCopy}			<button				onclick={copy}				class="rounded px-2 py-1 transition-colors hover:bg-white/10 hover:text-white focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none"				aria-label={`Copy ${label}`}			>				{copied ? 'Copied' : 'Copy'}			</button>		{/if}	</div>	<pre class="max-h-[34rem] overflow-auto bg-zinc-950 p-4 font-mono text-[13px] leading-6"><code			class="grid min-w-max"			>{#each lines as line, lineIndex (lineIndex)}<span class="min-h-6"					>{#each line as token, tokenIndex (`${tokenIndex}-${token.content}`)}<span							style:color={token.color}							class:italic={Boolean(token.fontStyle && token.fontStyle & 1)}							class:font-bold={Boolean(token.fontStyle && token.fontStyle & 2)}							class:underline={Boolean(token.fontStyle && token.fontStyle & 4)}							>{token.content}</span						>{/each}</span				>{/each}</code		></pre></div>

highlighter.ts

import javascript from '@shikijs/langs/javascript';import json from '@shikijs/langs/json';import shellscript from '@shikijs/langs/shellscript';import svelte from '@shikijs/langs/svelte';import typescript from '@shikijs/langs/typescript';import githubDark from '@shikijs/themes/github-dark';import { createHighlighterCore } from 'shiki/core';import { createJavaScriptRegexEngine } from 'shiki/engine/javascript';export type CodeLanguage = 'svelte' | 'typescript' | 'javascript' | 'json' | 'shellscript' | 'text';const highlighter = await createHighlighterCore({	themes: [githubDark],	langs: [svelte, typescript, javascript, json, shellscript],	engine: createJavaScriptRegexEngine()});export function highlightCode(code: string, language: CodeLanguage) {	return highlighter.codeToTokens(code.trimEnd(), {		lang: language,		theme: 'github-dark'	}).tokens;}export function languageFromFilename(filename: string): CodeLanguage {	if (filename.endsWith('.svelte')) return 'svelte';	if (filename.endsWith('.ts')) return 'typescript';	if (filename.endsWith('.js')) return 'javascript';	if (filename.endsWith('.json')) return 'json';	return 'text';}

index.ts

export { default as Code } from './code.svelte';export { languageFromFilename } from './highlighter';export type { CodeLanguage } from './highlighter';