Code

Migration guide for Code from HeroUI v2 to v3

The Code component has been removed in HeroUI v3. Use native HTML <code> element with Tailwind CSS classes instead.

Key Changes

1. Component Removal

v2: <Code> component from @lenso/ui
v3: Native HTML <code> 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 <code> element:

1import { Code } from "@lenso/ui";2
3export default function App() {4  return <Code>npm install @lenso/ui</Code>;5}

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

1export default function App() {2  return (3    <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">4      npm install @lenso/ui5    </code>6  );7}

Migration Examples

Variants

1{/* Colors */}2<Code color="primary">Primary code</Code>3<Code color="success">Success code</Code>4
5{/* Sizes */}6<Code size="md">Medium code</Code>

Combined Variants

1<Code color="primary" size="md" radius="lg">2  npm install @lenso/ui3</Code>

Creating a Reusable Code Component (Optional)

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

1import { Code } from "@lenso/ui";2
3<Code color="primary" size="md">Code snippet</Code>

Complete Example

1import { Code } from "@lenso/ui";2
3export default function App() {4  return (5    <div className="space-y-4">6      <p>7        Install HeroUI with <Code>npm install @lenso/ui</Code>8      </p>9      <div className="flex gap-2">10        <Code color="primary">Primary</Code>11        <Code color="success">Success</Code>12        <Code color="warning">Warning</Code>13        <Code color="danger">Danger</Code>14      </div>15      <div className="flex gap-2 items-center">16        <Code size="sm">Small</Code>17        <Code size="md">Medium</Code>18        <Code size="lg">Large</Code>19      </div>20    </div>21  );22}

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

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

Migration Steps

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