Manti UI logoManti UIv0.8.0
StorybookGitHub

Code

Code renders the native inline <code> element. Use it for identifiers, commands, package names, and short code fragments inside prose; use a dedicated code block for multiline source.

Import Button from @manti-ui/react, then use the variant prop to choose its emphasis.

API

Code accepts every native <code> attribute in addition to the props below.

PropTypeDefaultDescription
size'sm' | 'md''sm'Visual size of the inline code.

Styling

Anatomy

PartSelectorDescription
root[data-scope="code"][data-part="root"]The semantic inline <code> element.

Tokens

TokenControls
--manti-code-radiusradius
--manti-code-padding-xpadding x
--manti-code-padding-ypadding y
--manti-code-font-sizefont size

Built end-to-end with Manti UI components and design tokens. Manti UI is a framework-agnostic design system on Zag.js.

GitHub