Typography · CodeBlock

CodeBlock

Multi-line code block primitive. Renders a {`

`} shell wrapping a

{``}
			body, with an optional header strip carrying title, language badge, and copy-to-clipboard
			button. The copy button is a leaf utility — it does not emit Sema events. Single morfo
			part. Eidos-native: no soma backing, no semantic events.
		
		
			
				parts{compiled.parts.order.length}
			
			
				events0
			
			
				variants3
			
			
				copyopt-in
			
			
				scopeeidos



	
		
			
				
					{content}
				
			
		
		
			trace
			{trace.length === 0 ? 'no semantic events' : `${trace.length} event(s)`}
			·
			variant
			{variant}
			
				language {language || 'none'} ·
				copy {showCopy ? 'on' : 'off'}
			
		
	

	
		
		
		
		
		
		
	

	{#if tab === 'live'}
		
			Controls
			
				CodeBlock is eidos-native — no soma split. The
				variant
				picks chrome; the header strip auto-renders when title, language,
				or showCopy is present.
			

			
				eidos props · block + header
			
			
				
					variant
					
						{#each variants as opt}
							
						{/each}
					
				
				
					size
					
						
						{#each sizes as opt}
							
						{/each}
					
				
				
					title
					
				
				
					language
					
				
				
					showCopy
					
						
						{showCopy ? 'on' : 'off'}
					
				
				
					content
					
				
			

			
				
					soma
					n/a · code-block is eidos-native — equivalent markup shown
					svelte
				
				{somaSnippet}
			

			
				
					eidos
					visual · variant + header composition
					svelte
				
				{eidosSnippet}
			
		
	{/if}

	{#if tab === 'api'}
		
			API reference
			
				CodeBlock ships a structural shell with an optional header (title + language badge + copy
				button) and a {`
`} body. Composition over visibility: omit
				title + language + set showCopy=false to drop the
				header entirely.
			

			Props
			
				
					Prop Type Default Notes
					
						title string — Filename / label. Appears in the header.
						language string — Language badge. Stamped as data-language on inner {``}.
						showCopy boolean true Render the copy-to-clipboard button.
						variant 'surface' | 'outline' | 'ghost' 'surface' Visual chrome.
						size 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' inherit Code font size override.
						tagStyle string — Extra inline CSS.
					
				
			

			Reference comparison
			
				
					Library Closest equivalent Difference
					
						radix-themes <Code> + custom Radix has no dedicated multi-line surface — UIX ships the header + copy as built-in.
						chakra-ui composed Chakra composes Code + Box + IconButton; UIX bundles them.
						mantine <CodeHighlight> Mantine ships Shiki integration; UIX reserves data-language for a separate action.
						shadcn/ui recipe-only shadcn provides Tailwind classes; UIX ships a proper component.
					
				
			
		

	{/if}

	{#if tab === 'morfo'}
		
			Morfo contract
			
				
					Field Value
					
						name {codeBlockMorfo.name}
						kebab {codeBlockMorfo.kebab}
						scope {codeBlockMorfo.scope.join(', ')}
						parts {partsList.length}
						events 0
					
				
			

			Parts
			
				
						{#each partsList as part}
							
						{/each}
					
					kebab marker element archetype optional
					
								{part.kebab}
								[{part.marker}]
								<{part.defaultElement}>
								{part.archetype}
								{part.optional ? 'yes' : 'no'}
							
				
			

			
				The Provider stamps data-code-block + data-variant. Internal
				header / copy / pre / code leaves are eidos-only attrs (data-code-block-header,
				data-code-block-title, etc.) — the morfo declares only the Provider because
				the inner parts are consumed exclusively by the recipe.
			
		
	{/if}

	{#if tab === 'sema'}
		
			
				sema · events
			
			
				CodeBlock declares no semantic events. The copy button is a utility leaf — clipboard
				write, no semantic transition. By the 2-of-3 rule, a commit-copy event
				would only be consumed by eidos (visual flip) — not enough to justify a morfo extension.
				If a consumer needs sema on copy (e.g. fulfilment of a tutorial step), they compose
				CodeBlock inside a Stepper or Form that owns the verb.
			
		
	{/if}

	{#if tab === 'recipe'}
		
			Eidos recipe
			
				Recipe lives in src/uix/eidos/components/code-block/code-block.css. The
				outer shell selector is [data-code-block]; the header / pre / code leaves
				use eidos-only attrs.
			
			
				
					Selector Owner Purpose
					
						[data-code-block] morfo Provider marker.
						{`[data-code-block][data-variant='surface'|'outline'|'ghost']`} eidos Chrome treatment.
						[data-code-block-header] eidos Title + lang + copy strip.
						[data-code-block-copy] eidos Copy button with :hover / :focus-visible / [data-copied] states.
						[data-code-block-pre] / [data-code-block-code] eidos Block body.
					
				
			
		
	{/if}

	{#if tab === 'a11y'}
		
			Accessibility
			
				
					Concern Contract
					
						Role The block is a generic {``} wrapping {``}. AT announce the code content.
						Copy button aria-label="Copy code to clipboard" in English. Focus ring via :focus-visible.
						Copied feedback Button text flips from "Copy" to "Copied" + data-copied color shift. Re-announced by AT because the text content changes.
						Keyboard Copy button reachable via Tab. Enter / Space activate. No custom keyboard contract.
					
				
			
		
	{/if}

Prop	Type	Default	Notes
title	string	—	Filename / label. Appears in the header.
language	string	—	Language badge. Stamped as `data-language` on inner {``}.
showCopy	boolean	true	Render the copy-to-clipboard button.
variant	'surface' \| 'outline' \| 'ghost'	'surface'	Visual chrome.
size	'xxs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	inherit	Code font size override.
tagStyle	string	—	Extra inline CSS.

Library	Closest equivalent	Difference
radix-themes	`<Code>` + custom	Radix has no dedicated multi-line surface — UIX ships the header + copy as built-in.
chakra-ui	composed	Chakra composes Code + Box + IconButton; UIX bundles them.
mantine	`<CodeHighlight>`	Mantine ships Shiki integration; UIX reserves `data-language` for a separate action.
shadcn/ui	recipe-only	shadcn provides Tailwind classes; UIX ships a proper component.

Field	Value
name	{codeBlockMorfo.name}
kebab	`{codeBlockMorfo.kebab}`
scope	{codeBlockMorfo.scope.join(', ')}
parts	{partsList.length}
events	0

Selector	Owner	Purpose
`[data-code-block]`	morfo	Provider marker.
{`[data-code-block][data-variant='surface'\|'outline'\|'ghost']`}	eidos	Chrome treatment.
`[data-code-block-header]`	eidos	Title + lang + copy strip.
`[data-code-block-copy]`	eidos	Copy button with `:hover` / `:focus-visible` / `[data-copied]` states.
`[data-code-block-pre]` / `[data-code-block-code]`	eidos	Block body.

Concern	Contract
Role	The block is a generic {` `} wrapping {``}. AT announce the code content.
Copy button	`aria-label="Copy code to clipboard"` in English. Focus ring via `:focus-visible`.
Copied feedback	Button text flips from "Copy" to "Copied" + `data-copied` color shift. Re-announced by AT because the text content changes.
Keyboard	Copy button reachable via Tab. Enter / Space activate. No custom keyboard contract.