Code

Key ChangesCopy Anchor Link

1. Component RemovalCopy Anchor Link

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

2. Variants MappingCopy Anchor Link

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

Structure ChangesCopy Anchor Link

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 ExamplesCopy Anchor Link

VariantsCopy Anchor Link

{/* Colors */}
<Code color="primary">Primary code</Code>
<Code color="success">Success code</Code>

{/* Sizes */}
<Code size="md">Medium code</Code>

Combined VariantsCopy Anchor Link

<Code color="primary" size="md" radius="lg">
  npm install @heroui/react
</Code>

Creating a Reusable Code Component (Optional)Copy Anchor Link

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

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

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

Complete ExampleCopy Anchor Link

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 ReferenceCopy Anchor Link

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

SummaryCopy Anchor Link

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 StepsCopy Anchor Link

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