Inline Code

Data Display

Styles a short token or identifier inline within a paragraph.

InlineCode keeps prose readable while distinguishing code-like tokens with a muted chip.

npx shadcn@latest add inline-code

In prose

Wrap props, components, and commands inside sentences.

Preview

Live

Install the component with npx shadcn add inline-code and wrap any token in InlineCode. For multi-line samples reach for a CodeBlock instead.

tsx

1Install the component with <InlineCode>npx shadcn add inline-code</InlineCode>
2and wrap any token in <InlineCode>InlineCode</InlineCode>.

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
className	string	Merge extra classes onto the code element.
children	React.ReactNode	The inline content to render.
...props	ComponentProps<'code'>	Forwarded to the underlying code element.