Code

Key Changes

1. Component Removal

v2: <Code> component from @heroui/react
v3: Native HTML <code> element with Tailwind classes

2. Variants Mapping

The v2 Code component had the following variants that need to be replaced:

Structure Changes

In v2, Code was a component wrapper around the native <code> element:

import { Code } from "@heroui/react";

export default function App() {
  return <Code>npm install @heroui/react</Code>;
}

In v3, use the native <code> element directly with Tailwind CSS classes:

export default function App() {
  return (
    <code className="px-2 py-1 h-fit font-mono font-normal inline-block whitespace-nowrap rounded-sm bg-default/40 text-default-700 text-sm">
      npm install @heroui/react
    </code>
  );
}

Migration Examples

Variants

<Tabs items={["v2", "v3"]}> <Tab value="v2"> tsx <Code color="primary">Primary code</Code> <Code color="success">Success code</Code> <Code size="md">Medium code</Code> </Tab> <Tab value="v3"> tsx <code className="px-2 py-1 h-fit font-mono font-normal inline-block whitespace-nowrap rounded-sm bg-accent/20 text-accent-600 text-sm"> Primary code </code> <code className="px-2 py-1 h-fit font-mono font-normal inline-block whitespace-nowrap rounded-sm bg-success/20 text-success-700 text-sm"> Success code </code> <code className="px-2 py-1 h-fit font-mono font-normal inline-block whitespace-nowrap rounded-sm bg-default/40 text-default-700 text-base"> Medium code </code> </Tab> </Tabs>

Combined Variants

<Tabs items={["v2", "v3"]}> <Tab value="v2"> tsx <Code color="primary" size="md" radius="lg"> npm install @heroui/react </Code> </Tab> <Tab value="v3"> tsx <code className="px-2 py-1 h-fit font-mono font-normal inline-block whitespace-nowrap rounded-lg bg-accent/20 text-accent-600 text-base"> npm install @heroui/react </code> </Tab> </Tabs>

Creating a Reusable Code Component (Optional)

If you use inline code frequently, you can create a simple wrapper component:

<Tabs items={["v2", "v3"]}> <Tab value="v2"> ```tsx import { Code } from "@heroui/react";

<Code color="primary" size="md">Code snippet</Code>
```

interface CodeProps extends React.HTMLAttributes<HTMLElement> {
  color?: "default" | "accent" | "success" | "warning" | "danger";
  size?: "sm" | "md" | "lg";
  radius?: "none" | "sm" | "md" | "lg" | "full";
}

const colorClasses = {
  default: "bg-default/40 text-default-700",
  accent: "bg-accent/20 text-accent-600",
  success: "bg-success/20 text-success-700",
  warning: "bg-warning/20 text-warning-700",
  danger: "bg-danger/20 text-danger-600",
};

const sizeClasses = {
  sm: "text-sm",
  md: "text-base",
  lg: "text-lg",
};

const radiusClasses = {
  none: "rounded-none",
  sm: "rounded-sm",
  md: "rounded-md",
  lg: "rounded-lg",
  full: "rounded-full",
};

export function Code({
  children,
  className,
  color = "default",
  size = "sm",
  radius = "sm",
  ...props
}: CodeProps) {
  return (
    <code
      className={cn(
        "px-2 py-1 h-fit font-mono font-normal inline-block whitespace-nowrap",
        colorClasses[color],
        sizeClasses[size],
        radiusClasses[radius],
        className
      )}
      {...props}
    >
      {children}
    </code>
  );
}

// Usage
<Code color="accent" size="md">Code snippet</Code>
```

Complete Example

<Tabs items={["v2", "v3"]}> <Tab value="v2"> ```tsx import { Code } from "@heroui/react";

export default function App() {
  return (
    <div className="space-y-4">
      <p>
        Install HeroUI with <Code>npm install @heroui/react</Code>
      </p>
      <div className="flex gap-2">
        <Code color="primary">Primary</Code>
        <Code color="success">Success</Code>
        <Code color="warning">Warning</Code>
        <Code color="danger">Danger</Code>
      </div>
      <div className="flex gap-2 items-center">
        <Code size="sm">Small</Code>
        <Code size="md">Medium</Code>
        <Code size="lg">Large</Code>
      </div>
    </div>
  );
}
```

Base Styles Reference

The v2 Code component used these base styles that you should include:

• px-2 - Horizontal padding
• py-1 - Vertical padding
• h-fit - Height fits content
• font-mono - Monospace font family
• font-normal - Normal font weight
• inline-block - Inline block display
• whitespace-nowrap - Prevent text wrapping

Summary

1. Component Removed: Code component no longer exists in v3
2. Import Change: Remove import { Code } from "@heroui/react"
3. Use Native Element: Replace with native <code> HTML element
4. Styling: Apply Tailwind CSS classes directly
5. Color Mapping: primary → accent in v3

Migration Steps

1. Remove Import: Remove Code from @heroui/react imports
2. Replace Component: Replace all <Code> instances with <code> elements
3. Add Tailwind Classes: Apply equivalent Tailwind classes for styling
4. Update Colors: Change color="primary" to use accent color classes
5. Optional: Create a reusable wrapper component if you use inline code frequently