Code

Inline code with size and color options.

API Reference

Prop	Type	Default
size	"xl" \| "lg" \| "md" \| "sm" \| "xs"	—
color	"root" \| "primary" \| "secondary" \| "inherit"	"root"

Sizes

xllgmdsmxs

<Code size="xl">xl</Code>
<Code size="lg">lg</Code>
<Code size="md">md</Code>
<Code size="sm">sm</Code>
<Code size="xs">xs</Code>

Colors

rootprimarysecondary

<Code color="root">root</Code>
<Code color="primary">primary</Code>
<Code color="secondary">secondary</Code>

Inline

Use the color prop to change the theme.

<p>
  Use the <Code size="sm" color="primary">color</Code> prop to change the theme.
</p>

Basic Usage

import { Code } from "@/ui";

<Code>const x = 1;</Code>

Source

src/ui/Code.tsx

import { cva, type VariantProps } from "class-variance-authority";
import type { ComponentProps } from "react";
import { cn } from "@/utils";

const codeVariants = cva("font-mono", {
  variants: {
    size: {
      xl: "text-2xl sm:text-3xl",
      lg: "text-lg",
      md: "text-base",
      sm: "text-sm",
      xs: "text-xs",
    },
    color: {
      root: "text-root-contrast",
      primary: "text-primary",
      secondary: "text-secondary",
      inherit: "text-inherit",
    },
  },
  defaultVariants: {
    color: "root",
  },
});

interface CodeProps
  extends Omit<ComponentProps<"code">, "color">,
    VariantProps<typeof codeVariants> {}

export function Code({ size, color, className, ...props }: CodeProps) {
  return (
    <code className={cn(codeVariants({ size, color }), className)} {...props} />
  );
}