Inline Code

A monospace pill for code inside a line of message text.

A monospace pill for code inside a line of message text. Compose it from the exported registry parts so local content and behaviour stay in the application while the visual contract stays token-driven.

import { InlineCode } from "@/registry/bases/newt/ui/inline-code"

export default function InlineCodeDemo() {
  return (
    <p className="text-sm text-newt-text-secondary">
      Run <InlineCode>pnpm install</InlineCode> to get started.
    </p>
  )
}

<script setup lang="ts">
import { InlineCode } from "~~/registry/bases/newt/ui/inline-code"
</script>

<template>
  <p class="text-sm text-newt-text-secondary">
    Run <InlineCode>pnpm install</InlineCode> to get started.
  </p>
</template>

Installation

pnpm dlx newtui@latest add inline-code

npx newtui@latest add inline-code

yarn dlx newtui@latest add inline-code

bunx newtui@latest add inline-code

Copy the source into your project

import * as React from "react"

import { cn } from "@/lib/utils"

const InlineCode = React.forwardRef<HTMLElement, React.ComponentProps<"code">>(
  ({ className, ...props }, ref) => (
    <code
      ref={ref}
      className={cn(
        /* `pre-wrap` keeps wrapped code readable without eating the spacing. */
        "whitespace-pre-wrap rounded-sm border border-newt-border bg-newt-bg-base px-1 font-mono text-[0.85em] text-newt-text-primary",
        className
      )}
      {...props}
    />
  )
)
InlineCode.displayName = "InlineCode"

export { InlineCode }

<script setup lang="ts">
import type { HTMLAttributes } from "vue"

import { cn } from "@/lib/utils"

const props = defineProps<{ class?: HTMLAttributes["class"] }>()
</script>

<template>
  <!-- `pre-wrap` keeps wrapped code readable without eating the spacing. -->
  <code
    :class="
      cn(
        'whitespace-pre-wrap rounded-sm border border-newt-border bg-newt-bg-base px-1 font-mono text-[0.85em] text-newt-text-primary',
        props.class
      )
    "
  >
    <slot />
  </code>
</template>

export { default as InlineCode } from "./InlineCode.vue"

Update the import paths

The files import @/lib/utils and sibling components through the aliases in your components.json. Point them at wherever those live in your project.

Usage

import { InlineCode } from "@/components/ui/inline-code"

export function Example() {
  return <InlineCode />
}

<script setup lang="ts">
import { InlineCode } from "@/components/ui/inline-code"
</script>

<template>
  <InlineCode />
</template>

API reference

InlineCode

PropType

children / default slot?React.ReactNode / Vue slot

Content rendered inside the component.

TypeReact.ReactNode / Vue slot

className / class?string

Additional classes merged with the component defaults.

Typestring

The registry exports InlineCode. Parts without a table accept the native attributes for the element they render; React uses className, while Vue uses class and fallthrough attributes.

Accessibility

Preserve the native semantics of the rendered elements and pass through ARIA attributes when the surrounding context needs a label or description. Any interactive child needs a visible focus indicator, and meaning must not rely on colour alone.

Tokens

Inline Code reads its colours, radii and motion from the --newt-* tokens installed with the library. Override a token and every component that reads it follows, including this one — see the token layer.