Inline Code

Data Display

Inline code snippet with monospace styling.

Preview

Install with npm install paramui and import Button from the library.

Usage

example.jsx

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

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

Source Code

Copy this file into components/ui/inline-code.jsx in your project.

inline-code.jsx

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const InlineCode = forwardRef(({ className, ...props }, ref) => (
  <code ref={ref} className={cn("relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold", className)} {...props} />
));
InlineCode.displayName = "InlineCode";

export { InlineCode };

Quick Install

Make sure you have the cn() utility set up. It requires clsx and tailwind-merge.

npm install clsx tailwind-merge