Skip to content
Lenso UI

Code

Code 从 HeroUI v2 到 v3 的迁移指南。

Code 组件已在 HeroUI v3 中移除。请改为使用原生 HTML <code> 元素，并配合 Tailwind CSS class 编写样式。

关键变化

1. 组件移除

v2： 来自 @lenso/ui 的 <Code> 组件
v3： 原生 HTML <code> 元素与 Tailwind CSS class

2. 变体映射

v2 的 Code 组件提供以下变体，需要在迁移时替换：

v2 变体v3 对应说明
color="default"bg-default/40 text-default-700使用 Tailwind 不透明度工具类
color="primary"bg-accent/20 text-accent-600v3 中 primary 已重命名为 accent
color="secondary"bg-default/40 text-default-700与 default 相近
color="success"bg-success/20 text-success-700颜色名相同
color="warning"bg-warning/20 text-warning-700颜色名相同
color="danger"bg-danger/20 text-danger-600颜色名相同
size="sm"text-smTailwind 字号
size="md"text-baseTailwind 字号
size="lg"text-lgTailwind 字号
radius="none"rounded-noneTailwind 圆角
radius="sm"rounded-smTailwind 圆角
radius="md"rounded-mdTailwind 圆角
radius="lg"rounded-lgTailwind 圆角
radius="full"rounded-fullTailwind 圆角

结构变化

在 v2 中，Code 是对原生 <code> 元素的组件封装：

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

在 v3 中，请直接使用原生 <code> 元素，并为其添加 Tailwind CSS class：

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 @lenso/ui    </code>  );}

迁移示例

变体

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

组合变体

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

创建可复用的 Code 组件（可选）

如果你经常需要行内代码样式，可以封装一个简单的包装组件：

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

完整示例

import { Code } from "@lenso/ui";
export default function App() {  return (    <div className="space-y-4">      <p>        Install HeroUI with <Code>npm install @lenso/ui</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>  );}

基础样式参考

v2 的 Code 组件使用以下基础样式，迁移时建议一并保留：

  • px-2 — 水平内边距
  • py-1 — 垂直内边距
  • h-fit — 高度随内容收缩
  • font-mono — 等宽字体
  • font-normal — 常规字重
  • inline-block — 行内块级显示
  • whitespace-nowrap — 禁止换行

总结

  1. 组件已移除：v3 中不再提供 Code 组件。
  2. 导入调整：移除 import { Code } from "@lenso/ui"。
  3. 使用原生元素：改为原生 <code> HTML 元素。
  4. 样式：直接编写 Tailwind CSS class。
  5. 颜色映射：在 v3 中将 primary 对应到 accent 色系 class。

迁移步骤

  1. 移除导入：从 @lenso/ui 的导入中删除 Code。
  2. 替换组件：将所有 <Code> 替换为 <code> 元素。
  3. 添加 Tailwind class：为元素补充等价的样式 class。
  4. 更新颜色：将 color="primary" 改为使用 accent 相关 class。
  5. 可选：若行内代码使用频繁，可封装可复用的包装组件。