Code

Inline code component for short snippets that sit within text flow — variable names, paths, commands, identifiers. Renders a <code> element with a tinted background, subtle border, and the design-system monospace font.

For multi-line snippets (commands, route definitions, file contents) use <x-wirekit::code-block> instead.

Live Sandbox

This is a hydrated playground for the component. Toggle "Live preview" on the block below to swap the static HTML render for a real Livewire instance — every prop in the component's sandbox schema becomes an editable form field inside the iframe, so you can try different prop combinations live without writing any local code.

<x-wirekit::code>$wirekit</x-wirekit::code>

Basic Usage

<x-wirekit::text>
    Run <x-wirekit::code>composer require pushery/wirekit</x-wirekit::code> to install.
</x-wirekit::text>

In Headings

Inline code adapts its size relative to the surrounding text — the font size is set in em, so a heading-sized <x-wirekit::code> matches the heading's font size automatically.

<x-wirekit::heading level="3" size="lg">
    Configure <x-wirekit::code>config/wirekit.php</x-wirekit::code>
</x-wirekit::heading>

Props

Keyboard Interaction

This component is purely presentational and does not respond to keyboard input.

Design Tokens

See Also

• <x-wirekit::code-block> — multi-line code block with optional filename header, copy button, and language attribute.
• <x-wirekit::kbd> — keyboard-input glyph for shortcut documentation.