# Code **Category**: react **URL**: https://www.heroui.com/docs/react/migration/code **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/migration/(components)/code.mdx > Migration guide for Code from HeroUI v2 to v3 *** The Code component has been **removed** in HeroUI v3. Use native HTML `

` element with Tailwind CSS classes instead.



## Key Changes

### 1. Component Removal

**v2:** `` component from `@heroui/react`  
**v3:** Native HTML `` element with Tailwind classes

### 2. Variants Mapping

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

| v2 Variant | v3 Equivalent | Notes |
|-----------|---------------|-------|
| `color="default"` | `bg-default/40 text-default-700` | Use Tailwind opacity utilities |
| `color="primary"` | `bg-accent/20 text-accent-600` | `primary` renamed to `accent` |
| `color="secondary"` | `bg-default/40 text-default-700` | Similar to default |
| `color="success"` | `bg-success/20 text-success-700` | Same color name |
| `color="warning"` | `bg-warning/20 text-warning-700` | Same color name |
| `color="danger"` | `bg-danger/20 text-danger-600` | Same color name |
| `size="sm"` | `text-sm` | Tailwind text size |
| `size="md"` | `text-base` | Tailwind text size |
| `size="lg"` | `text-lg` | Tailwind text size |
| `radius="none"` | `rounded-none` | Tailwind border radius |
| `radius="sm"` | `rounded-sm` | Tailwind border radius |
| `radius="md"` | `rounded-md` | Tailwind border radius |
| `radius="lg"` | `rounded-lg` | Tailwind border radius |
| `radius="full"` | `rounded-full` | Tailwind border radius |

## Structure Changes

In v2, `Code` was a component wrapper around the native `` element:

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

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

```

In v3, use the native `` element directly with Tailwind CSS classes:

```tsx
export default function App() {
  return (
    
      npm install @heroui/react
    
  );
}

```

## Migration Examples

### Variants


  
    ```tsx
    {/* Colors */}
    Primary code
    Success code
    
    {/* Sizes */}
    Medium code
    ```

  
  
    ```tsx
    {/* Colors */}
    
      Primary code
    
    
      Success code
    
    
    {/* Sizes */}
    
      Medium code
    
    ```

  


### Combined Variants


  
    ```tsx
    
      npm install @heroui/react
    
    ```

  
  
    ```tsx
    
      npm install @heroui/react
    
    ```

  


## Creating a Reusable Code Component (Optional)

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


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

    Code snippet
    ```

  
  
    ```tsx
    // components/Code.tsx
    import { cn } from "@/lib/utils"; // or your cn utility

    interface CodeProps extends React.HTMLAttributes {
      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 (
        
          {children}
        
      );
    }

    // Usage
    Code snippet
    ```

  


## Complete Example


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

    export default function App() {
      return (
        
          
            Install HeroUI with npm install @heroui/react
          
          
            Primary
            Success
            Warning
            Danger
          
          
            Small
            Medium
            Large
          
        
      );
    }
    ```

  
  
    ```tsx
    export default function App() {
      return (
        
          
            Install HeroUI with{" "}
            
              npm install @heroui/react
            
          
          
            
              Primary
            
            
              Success
            
            
              Warning
            
            
              Danger
            
          
          
            
              Small
            
            
              Medium
            
            
              Large
            
          
        
      );
    }
    ```

  


## 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 `` 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 `` instances with `` 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