Svelte 5 component · fractalsvelte-ui · Typography

Code

An inline monospace code token designed for highlighting keywords, identifiers, and keystrokes within prose. Offers soft background fills and defined borders to maintain visual distinction.

All components Source

Install

Code is a Svelte 5 code component in @fractaldesign/fractalsvelte-ui. It works in SvelteKit and in any Svelte 5 app.

pnpm add @fractaldesign/fractalsvelte-ui

Import

import

import { Code } from '@fractaldesign/fractalsvelte-ui';

Usage

Example

<Code variant={'subtle'} size={'md'}>Click me</Code>

Props

Also accepts every attribute of HTMLAttributes, spread onto the root element.

Name	Type	Default
`variant`	`CodeVariant` `'subtle' \| 'outline' \| 'surface' \| 'primary'`	`'subtle'`
`size`	`CodeSize` `'sm' \| 'md' \| 'lg'`	`'md'`
`class`	`string`	`''`

Snippets

Name	Type	Default
`children`	`Snippet`	`—`

Source

Show the Code.svelte source

Code.svelte

<script lang="ts">
	import type { Snippet } from 'svelte';
	import type { HTMLAttributes } from 'svelte/elements';

	export type CodeVariant = 'subtle' | 'outline' | 'surface' | 'primary';
	export type CodeSize = 'sm' | 'md' | 'lg';

	interface Props extends HTMLAttributes<HTMLElement> {
		variant?: CodeVariant;
		size?: CodeSize;
		class?: string;
		children?: Snippet;
	}

	let {
		variant = 'subtle',
		size = 'md',
		class: className = '',
		children,
		...restProps
	}: Props = $props();
</script>

<code
	class="f-code {className}"
	data-variant={variant}
	data-size={size}
	{...restProps}
>
	{#if children}
		{@render children()}
	{/if}
</code>

<style>
	@layer fractalsvelte-ui.components {
		.f-code {
			font-family: var(--f-font-mono);
			font-weight: 450;
			line-height: normal;
			border-radius: var(--f-radius-xs);
			box-sizing: border-box;
			white-space: break-spaces;
			word-break: break-word;
		}

		/* Sizes */
		.f-code[data-size='sm'] {
			font-size: 0.75em;
			padding: 1px 4px;
		}

		.f-code[data-size='md'] {
			font-size: 0.85em;
			padding: 2px 6px;
		}

		.f-code[data-size='lg'] {
			font-size: 0.95em;
			padding: 3px 8px;
		}

		/* Variants */
		.f-code[data-variant='subtle'] {
			background: var(--f-sunken);
			color: var(--f-text);
			border: 1px solid var(--f-border-subtle);
		}

		.f-code[data-variant='outline'] {
			background: transparent;
			color: var(--f-text);
			border: 1px solid var(--f-border-strong);
		}

		.f-code[data-variant='surface'] {
			background: var(--f-surface);
			color: var(--f-text);
			border: 1px solid var(--f-border);
			box-shadow: var(--f-shadow-xs);
		}

		.f-code[data-variant='primary'] {
			background: var(--f-primary-subtle);
			color: var(--f-primary);
			border: 1px solid rgba(16, 185, 129, 0.2);
		}
	}
</style>

CodeBlock A multi-line code display container with an integrated header bar, syntax language indicator, line…Collapsible A standalone expandable disclosure component that animates content height between open and closed states.Heading A semantic heading element spanning levels h1 through h6 with proportional typography sizing and optical…Text A multi-variant typographical body element supporting lead paragraphs, muted labels, subtle metadata, and…Accordion A vertically stacked disclosure container supporting single or multi-panel expansion.Blockquote A styled quotation block featuring a left accent border, quotation mark iconography, and structured…