diff --git a/docs/white-book/03-UI-Ref/06-KeyUI/00-Overview.md b/docs/white-book/03-UI-Ref/06-KeyUI/00-Overview.md
new file mode 100644
index 000000000..91ea760ff
--- /dev/null
+++ b/docs/white-book/03-UI-Ref/06-KeyUI/00-Overview.md
@@ -0,0 +1,73 @@
+# Key UI 组件库
+
+> 源码: [`packages/key-ui/`](https://github.com/BioforestChain/KeyApp/tree/main/packages/key-ui)
+
+## 概述
+
+`@biochain/key-ui` 是 KeyApp 的共享 UI 组件库，供主应用和 MiniApps 共同使用。
+
+采用 [Base UI](https://base-ui.com) 风格的 headless 架构：
+- **Compound Components** - 复合组件模式 (如 `TokenIcon.Root` / `TokenIcon.Image`)
+- **useRenderElement** - 统一的渲染抽象，支持 `render` prop 自定义
+- **State + Props 分离** - 组件暴露 `State` 类型供样式函数使用
+
+## 安装
+
+```bash
+pnpm add @biochain/key-ui
+```
+
+## 组件列表
+
+| 组件 | 路径 | 说明 |
+|------|------|------|
+| `AddressDisplay` | `@biochain/key-ui/address-display` | 地址显示 (智能截断 + 复制) |
+| `AmountDisplay` | `@biochain/key-ui/amount-display` | 金额显示 (动画 + 紧凑模式) |
+| `AmountWithFiat` | `@biochain/key-ui/amount-display` | 金额 + 法币复合显示 |
+| `TokenIcon` | `@biochain/key-ui/token-icon` | Token 图标 (Compound) |
+
+## 工具包
+
+`@biochain/key-utils` 提供底层工具函数：
+
+| 函数 | 说明 |
+|------|------|
+| `cn()` | className 合并 (clsx + tailwind-merge) |
+| `formatAmount()` | 金额格式化 (紧凑模式、千分位) |
+| `truncateAddress()` | 地址截断 (预设模式) |
+| `measureText()` | Canvas 文字宽度测量 |
+| `useCopyToClipboard()` | 复制到剪贴板 Hook |
+
+## 架构
+
+```
+packages/
+├── key-utils/          # @biochain/key-utils - 工具函数
+│   └── src/
+│       ├── cn.ts
+│       ├── format-amount.ts
+│       ├── truncate-address.ts
+│       └── use-copy-to-clipboard.ts
+│
+└── key-ui/             # @biochain/key-ui - UI 组件
+    └── src/
+        ├── address-display/
+        │   ├── AddressDisplay.tsx
+        │   └── use-address-display.ts
+        ├── amount-display/
+        │   ├── AmountDisplay.tsx
+        │   └── AmountWithFiat.tsx
+        ├── token-icon/
+        │   ├── root/
+        │   ├── image/
+        │   └── fallback/
+        └── utils/
+            ├── types.ts
+            └── use-render-element.tsx
+```
+
+## 与 shadcn/ui 的关系
+
+- shadcn/ui 基础组件 (Button, Card, Input) 由各项目独立维护
+- key-ui 只提供**业务组件** (AddressDisplay, AmountDisplay, TokenIcon)
+- 样式策略：默认 Tailwind class，可通过 `className` 函数覆盖
diff --git a/docs/white-book/03-UI-Ref/06-KeyUI/01-AddressDisplay.md b/docs/white-book/03-UI-Ref/06-KeyUI/01-AddressDisplay.md
new file mode 100644
index 000000000..234b8f2dc
--- /dev/null
+++ b/docs/white-book/03-UI-Ref/06-KeyUI/01-AddressDisplay.md
@@ -0,0 +1,125 @@
+# AddressDisplay 组件
+
+> 源码: [`packages/key-ui/src/address-display/`](https://github.com/BioforestChain/KeyApp/tree/main/packages/key-ui/src/address-display)
+
+## 概述
+
+智能地址显示组件，支持响应式截断和一键复制。
+
+## 显示模式
+
+| 模式 | 格式 | 适用场景 |
+|------|------|---------|
+| `full` | 完整地址 | 转账确认、签名授权 |
+| `auto` | 响应式截断 | 钱包卡片、地址选择器 |
+| `compact` | `6...4` | 列表项、小空间 |
+| `standard` | `8...6` | 联系人选择 |
+| `detailed` | `10...8` | 链选择器 |
+
+## 使用
+
+### 基础用法
+
+```tsx
+import { AddressDisplay } from '@biochain/key-ui/address-display'
+
+// 自动截断
+<AddressDisplay address="0x742d35Cc6634C0532925a3b844Bc454e4438f44e" />
+
+// 固定模式
+<AddressDisplay address={address} mode="compact" />
+
+// 完整显示
+<AddressDisplay address={address} mode="full" />
+```
+
+### 自定义样式
+
+```tsx
+// 使用状态函数
+<AddressDisplay
+  address={address}
+  className={(state) => state.copied ? 'text-green-500' : 'text-gray-500'}
+/>
+
+// 使用 render prop
+<AddressDisplay
+  address={address}
+  render={(props, state) => (
+    <div {...props} className="custom-class">
+      {state.truncated && <span>...</span>}
+    </div>
+  )}
+/>
+```
+
+### 使用 Hook
+
+```tsx
+import { useAddressDisplay } from '@biochain/key-ui/address-display'
+
+function CustomAddress({ address }) {
+  const { displayText, copy, copied, containerRef, truncated } = useAddressDisplay({
+    address,
+    mode: 'auto',
+  })
+
+  return (
+    <span ref={containerRef} onClick={copy}>
+      {displayText}
+      {copied && ' ✓'}
+    </span>
+  )
+}
+```
+
+## Props
+
+```typescript
+interface AddressDisplayProps {
+  address: string
+  mode?: 'full' | 'auto' | 'compact' | 'standard' | 'detailed'
+  startChars?: number      // 固定截断：开头字符数
+  endChars?: number        // 固定截断：结尾字符数
+  placeholder?: string     // 空地址占位符 (默认 '---')
+  copyable?: boolean       // 可复制 (默认 true)
+  onCopy?: () => void      // 复制回调
+  testId?: string          // data-testid
+  className?: string | ((state: State) => string)
+  style?: CSSProperties | ((state: State) => CSSProperties)
+  render?: ComponentRenderFn | ReactElement
+}
+
+interface AddressDisplayState {
+  copied: boolean
+  truncated: boolean
+  mode: TruncationMode
+}
+```
+
+## 截断预设
+
+```typescript
+const TRUNCATION_PRESETS = {
+  compact: { start: 6, end: 4 },   // 总长 13 字符
+  standard: { start: 8, end: 6 },  // 总长 17 字符
+  detailed: { start: 10, end: 8 }, // 总长 21 字符
+}
+```
+
+## 场景对照表
+
+| 场景 | 推荐模式 |
+|------|---------|
+| 转账确认页 | `full` + `break-all` |
+| 钱包卡片 | `auto` |
+| 交易列表 | `compact` |
+| 联系人选择 | `standard` |
+| 链选择器 | `detailed` |
+| 小程序授权 | `full` |
+
+## 无障碍
+
+- 复制按钮有 `aria-label` 说明完整地址
+- 复制成功后更新 `aria-label` 为 "已复制"
+- 使用 `role="status"` 区域播报复制状态
diff --git a/docs/white-book/03-UI-Ref/06-KeyUI/02-AmountDisplay.md b/docs/white-book/03-UI-Ref/06-KeyUI/02-AmountDisplay.md
new file mode 100644
index 000000000..b4617018e
--- /dev/null
+++ b/docs/white-book/03-UI-Ref/06-KeyUI/02-AmountDisplay.md
@@ -0,0 +1,133 @@
+# AmountDisplay 组件
+
+> 源码: [`packages/key-ui/src/amount-display/`](https://github.com/BioforestChain/KeyApp/tree/main/packages/key-ui/src/amount-display)
+
+## 概述
+
+金额显示组件，支持动画数字、紧凑模式、隐私模式。
+
+## 显示模式
+
+| 模式 | 格式 | 适用场景 |
+|------|------|---------|
+| 完整精度 | `1,234.56789012` | 转账确认 |
+| 自适应 | `1,234.5679` | 余额显示 |
+| 隐藏尾零 | `1,234.5` | 一般显示 |
+| 紧凑 | `1.5M` / `12.5K` | 列表概览 |
+
+## 使用
+
+### 基础用法
+
+```tsx
+import { AmountDisplay } from '@biochain/key-ui/amount-display'
+
+// 基础
+<AmountDisplay value={1234.5678} symbol="ETH" />
+
+// 紧凑模式
+<AmountDisplay value={1500000} compact /> // 显示 1.5M
+
+// 带正负号
+<AmountDisplay value={-2.3} sign="always" color="auto" />
+
+// 隐私模式
+<AmountDisplay value={100} hidden /> // 显示 ••••••
+
+// 加载态
+<AmountDisplay value={0} loading />
+```
+
+### 带法币显示
+
+```tsx
+import { AmountWithFiat } from '@biochain/key-ui/amount-display'
+
+<AmountWithFiat
+  value={1.5}
+  symbol="ETH"
+  fiatValue={3750}
+  fiatSymbol="$"
+  layout="vertical"
+/>
+
+// 渲染:
+// 1.5 ETH
+// ≈ $3,750
+```
+
+## Props
+
+### AmountDisplay
+
+```typescript
+interface AmountDisplayProps {
+  value: string | number
+  symbol?: string           // 代币符号
+  decimals?: number         // 小数位 (默认 8)
+  sign?: 'auto' | 'always' | 'never'  // 正负号
+  color?: 'auto' | 'default' | 'positive' | 'negative'
+  compact?: boolean         // 紧凑模式 (1K, 1M, 1B)
+  hidden?: boolean          // 隐私模式
+  loading?: boolean         // 加载态
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  weight?: 'normal' | 'medium' | 'semibold' | 'bold'
+  mono?: boolean            // 等宽字体 (默认 true)
+  animated?: boolean        // 动画 (默认 true)
+  fixedDecimals?: boolean | 'auto'  // 小数位模式
+  className?: string | ((state: State) => string)
+  style?: CSSProperties | ((state: State) => CSSProperties)
+}
+
+interface AmountDisplayState {
+  isNegative: boolean
+  isZero: boolean
+  isLoading: boolean
+  isHidden: boolean
+}
+```
+
+### AmountWithFiat
+
+```typescript
+interface AmountWithFiatProps extends AmountDisplayProps {
+  fiatValue?: string | number
+  fiatSymbol?: string       // 默认 '$'
+  fiatDecimals?: number     // 默认 2
+  layout?: 'vertical' | 'horizontal'
+}
+```
+
+## 紧凑模式阈值
+
+```typescript
+if (value >= 1_000_000_000) return `${value / 1e9}B`
+if (value >= 1_000_000)     return `${value / 1e6}M`
+if (value >= 1_000)         return `${value / 1e3}K`
+```
+
+## 小数位规则
+
+| 资产类型 | 默认精度 | 最大精度 |
+|---------|---------|---------|
+| 法币 (USD, CNY) | 2 | 2 |
+| 主流币 (ETH, BTC) | 4 | 8 |
+| 代币 (ERC20) | 4 | 18 |
+| BioForest 链 | 4 | 8 |
+
+## fixedDecimals 模式
+
+| 值 | 行为 |
+|---|------|
+| `false` | 隐藏尾随零 |
+| `true` | 显示完整小数位 |
+| `'auto'` | 根据容器宽度自适应 |
+
+## 场景对照表
+
+| 场景 | 推荐配置 |
+|------|---------|
+| 转账确认 | `fixedDecimals={true}` |
+| 钱包余额 | `fixedDecimals="auto"` |
+| 交易列表 | `fixedDecimals={false}` |
+| 资产统计 | `compact={true}` |
diff --git a/docs/white-book/03-UI-Ref/06-KeyUI/03-TokenIcon.md b/docs/white-book/03-UI-Ref/06-KeyUI/03-TokenIcon.md
new file mode 100644
index 000000000..23a8087f8
--- /dev/null
+++ b/docs/white-book/03-UI-Ref/06-KeyUI/03-TokenIcon.md
@@ -0,0 +1,106 @@
+# TokenIcon 组件
+
+> 源码: [`packages/key-ui/src/token-icon/`](https://github.com/BioforestChain/KeyApp/tree/main/packages/key-ui/src/token-icon)
+
+## 概述
+
+Token 图标组件，采用 Compound Component 模式，支持图片加载和 fallback。
+
+## 使用
+
+### Compound Component 用法
+
+```tsx
+import { TokenIcon } from '@biochain/key-ui/token-icon'
+
+<TokenIcon.Root size="md">
+  <TokenIcon.Image src={tokenIconUrl} />
+  <TokenIcon.Fallback>ETH</TokenIcon.Fallback>
+</TokenIcon.Root>
+```
+
+### 尺寸
+
+```tsx
+// 可用尺寸: xs, sm, md, lg, xl
+<TokenIcon.Root size="xs" />  // 16px
+<TokenIcon.Root size="sm" />  // 24px
+<TokenIcon.Root size="md" />  // 32px (默认)
+<TokenIcon.Root size="lg" />  // 40px
+<TokenIcon.Root size="xl" />  // 48px
+```
+
+### Fallback 延迟
+
+```tsx
+// 延迟显示 fallback，避免闪烁
+<TokenIcon.Root size="md">
+  <TokenIcon.Image src={maybeSlowUrl} />
+  <TokenIcon.Fallback delayMs={500}>ETH</TokenIcon.Fallback>
+</TokenIcon.Root>
+```
+
+## 组件 API
+
+### TokenIcon.Root
+
+容器组件，提供 Context。
+
+```typescript
+interface TokenIconRootProps {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  children?: React.ReactNode
+  className?: string | ((state: State) => string)
+  style?: CSSProperties | ((state: State) => CSSProperties)
+}
+
+interface TokenIconRootState {
+  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  imageLoaded: boolean
+}
+```
+
+### TokenIcon.Image
+
+图片组件，自动处理加载状态。
+
+```typescript
+interface TokenIconImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+  onLoadingStatusChange?: (status: 'loading' | 'loaded' | 'error') => void
+}
+```
+
+### TokenIcon.Fallback
+
+图片加载失败时显示的 fallback 内容。
+
+```typescript
+interface TokenIconFallbackProps extends HTMLAttributes<HTMLSpanElement> {
+  delayMs?: number  // 延迟显示 (毫秒)
+}
+```
+
+## 行为
+
+1. **初始状态**: 显示 Fallback
+2. **图片加载中**: 仍显示 Fallback (可配置 delayMs)
+3. **图片加载成功**: 隐藏 Fallback，显示 Image
+4. **图片加载失败**: 显示 Fallback
+
+## 样式
+
+默认样式：
+- 圆形容器 (`rounded-full`)
+- 灰色背景 (`bg-muted`)
+- 居中 flex 布局
+
+可通过 `className` prop 覆盖：
+
+```tsx
+<TokenIcon.Root
+  size="md"
+  className={(state) => state.imageLoaded ? 'ring-2 ring-green-500' : ''}
+>
+  ...
+</TokenIcon.Root>
+```
diff --git a/packages/key-ui/package.json b/packages/key-ui/package.json
new file mode 100644
index 000000000..33cb30214
--- /dev/null
+++ b/packages/key-ui/package.json
@@ -0,0 +1,77 @@
+{
+  "name": "@biochain/key-ui",
+  "version": "0.1.0",
+  "description": "Shared UI components for KeyApp and MiniApps",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./address-display": {
+      "types": "./dist/address-display/index.d.ts",
+      "import": "./dist/address-display/index.js",
+      "require": "./dist/address-display/index.cjs"
+    },
+    "./amount-display": {
+      "types": "./dist/amount-display/index.d.ts",
+      "import": "./dist/amount-display/index.js",
+      "require": "./dist/amount-display/index.cjs"
+    },
+    "./token-icon": {
+      "types": "./dist/token-icon/index.d.ts",
+      "import": "./dist/token-icon/index.js",
+      "require": "./dist/token-icon/index.cjs"
+    },
+    "./styles": "./src/styles/base.css"
+  },
+  "files": [
+    "dist",
+    "src/styles"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "typecheck": "tsc --noEmit",
+    "typecheck:run": "tsc --noEmit",
+    "test": "vitest",
+    "test:run": "vitest run --passWithNoTests",
+    "test:storybook": "echo 'No storybook'",
+    "lint:run": "oxlint .",
+    "i18n:run": "echo 'No i18n'",
+    "theme:run": "echo 'No theme'"
+  },
+  "dependencies": {
+    "@biochain/key-utils": "workspace:*",
+    "@number-flow/react": "^0.5.5"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "clsx": "^2.1.1",
+    "eslint-plugin-file-component-constraints": "workspace:*",
+    "jsdom": "^26.1.0",
+    "oxlint": "^1.32.0",
+    "tailwind-merge": "^3.4.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.0"
+  },
+  "keywords": [
+    "biochain",
+    "keyapp",
+    "ui",
+    "components"
+  ],
+  "license": "MIT"
+}
diff --git a/packages/key-ui/src/address-display/AddressDisplay.tsx b/packages/key-ui/src/address-display/AddressDisplay.tsx
new file mode 100644
index 000000000..679bbf1b9
--- /dev/null
+++ b/packages/key-ui/src/address-display/AddressDisplay.tsx
@@ -0,0 +1,174 @@
+'use client'
+import * as React from 'react'
+import { cn } from '@biochain/key-utils'
+import type { TruncationMode } from '@biochain/key-utils'
+import { useRenderElement } from '../utils/use-render-element'
+import type { KeyUIComponentProps } from '../utils/types'
+import { useAddressDisplay } from './use-address-display'
+
+export interface AddressDisplayState {
+  copied: boolean
+  truncated: boolean
+  mode: TruncationMode
+}
+
+export interface AddressDisplayProps
+  extends Omit<KeyUIComponentProps<'button', AddressDisplayState>, 'children'> {
+  address: string
+  mode?: TruncationMode
+  startChars?: number
+  endChars?: number
+  placeholder?: string
+  copyable?: boolean
+  onCopy?: () => void
+  testId?: string
+}
+
+export const AddressDisplay = React.forwardRef(function AddressDisplay(
+  componentProps: AddressDisplayProps,
+  forwardedRef: React.ForwardedRef<HTMLElement>,
+) {
+  const {
+    address,
+    mode = 'auto',
+    startChars,
+    endChars,
+    placeholder = '---',
+    copyable = true,
+    onCopy,
+    testId,
+    className,
+    render,
+    style,
+    ...elementProps
+  } = componentProps
+
+  const { displayText, containerRef, copied, copy, truncated } = useAddressDisplay({
+    address,
+    mode,
+    startChars,
+    endChars,
+    copyable,
+    onCopy,
+  })
+
+  const state: AddressDisplayState = React.useMemo(
+    () => ({
+      copied,
+      truncated,
+      mode,
+    }),
+    [copied, truncated, mode],
+  )
+
+  const displayValue = address ? displayText : placeholder
+  const isReady = displayText !== ''
+
+  const defaultClassName = cn(
+    'relative font-mono text-sm',
+    copyable && 'flex w-full items-center gap-1.5 transition-colors hover:text-primary focus-visible:ring-ring rounded focus:outline-none focus-visible:ring-2',
+  )
+
+  if (!copyable) {
+    return useRenderElement<AddressDisplayState, HTMLElement, 'span'>('span', { className, render: render as React.ReactElement | undefined, style }, {
+      state,
+      ref: [forwardedRef, containerRef as React.Ref<HTMLElement>],
+      props: {
+        ...elementProps,
+        title: address,
+        'aria-label': address,
+        ...(testId && { 'data-testid': testId }),
+      },
+      defaultClassName,
+    }) as React.ReactElement
+  }
+
+  const handleClick = () => {
+    copy()
+  }
+
+  return (
+    <button
+      ref={(el) => {
+        ;(containerRef as React.MutableRefObject<HTMLElement | null>).current = el
+        if (typeof forwardedRef === 'function') {
+          forwardedRef(el)
+        } else if (forwardedRef) {
+          ;(forwardedRef as React.MutableRefObject<HTMLElement | null>).current = el
+        }
+      }}
+      type="button"
+      onClick={handleClick}
+      {...(testId && { 'data-testid': testId })}
+      className={cn(
+        defaultClassName,
+        typeof className === 'function' ? className(state) : className,
+      )}
+      style={typeof style === 'function' ? style(state) : style}
+      title={address}
+      aria-label={copied ? `已复制 ${address}` : `复制 ${address}`}
+      {...elementProps}
+    >
+      <span className="relative min-w-0 flex-1">
+        <span className="invisible" aria-hidden="true">
+          0
+        </span>
+        <span
+          {...(testId && { 'data-testid': `${testId}-text` })}
+          className={cn('absolute inset-0 truncate', !isReady && 'invisible')}
+          aria-hidden="true"
+        >
+          {displayValue}
+        </span>
+      </span>
+      {copied ? (
+        <CheckIcon className="text-green-500 size-4 shrink-0" aria-hidden="true" />
+      ) : (
+        <CopyIcon className="text-muted-foreground size-4 shrink-0" aria-hidden="true" />
+      )}
+      <span role="status" aria-live="polite" className="sr-only">
+        {copied ? 'Copied' : ''}
+      </span>
+    </button>
+  )
+})
+
+function CopyIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+    >
+      <rect width="14" height="14" x="8" y="8" rx="2" ry="2" />
+      <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" />
+    </svg>
+  )
+}
+
+function CheckIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+    >
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  )
+}
+
+export namespace AddressDisplay {
+  export type State = AddressDisplayState
+  export type Props = AddressDisplayProps
+}
diff --git a/packages/key-ui/src/address-display/index.ts b/packages/key-ui/src/address-display/index.ts
new file mode 100644
index 000000000..ba81a96e9
--- /dev/null
+++ b/packages/key-ui/src/address-display/index.ts
@@ -0,0 +1,4 @@
+export { AddressDisplay } from './AddressDisplay'
+export type { AddressDisplayProps, AddressDisplayState } from './AddressDisplay'
+export { useAddressDisplay } from './use-address-display'
+export type { UseAddressDisplayOptions, UseAddressDisplayReturn } from './use-address-display'
diff --git a/packages/key-ui/src/address-display/use-address-display.ts b/packages/key-ui/src/address-display/use-address-display.ts
new file mode 100644
index 000000000..88e34e0af
--- /dev/null
+++ b/packages/key-ui/src/address-display/use-address-display.ts
@@ -0,0 +1,130 @@
+'use client'
+import { useState, useRef, useLayoutEffect, useCallback } from 'react'
+import {
+  truncateAddress,
+  truncateAddressAuto,
+  measureText,
+  getComputedFont,
+  useCopyToClipboard,
+} from '@biochain/key-utils'
+import type { TruncationMode } from '@biochain/key-utils'
+
+export interface UseAddressDisplayOptions {
+  address: string
+  mode?: TruncationMode
+  startChars?: number
+  endChars?: number
+  copyable?: boolean
+  onCopy?: () => void
+}
+
+export interface UseAddressDisplayReturn {
+  displayText: string
+  containerRef: React.RefObject<HTMLElement | null>
+  copied: boolean
+  copy: () => Promise<void>
+  truncated: boolean
+}
+
+export function useAddressDisplay(options: UseAddressDisplayOptions): UseAddressDisplayReturn {
+  const {
+    address,
+    mode = 'auto',
+    startChars,
+    endChars,
+    copyable = true,
+    onCopy,
+  } = options
+
+  const containerRef = useRef<HTMLElement | null>(null)
+  const [displayText, setDisplayText] = useState<string>(address)
+  const [truncated, setTruncated] = useState(false)
+
+  const { copied, copy: copyToClipboard } = useCopyToClipboard({
+    timeout: 2000,
+    onCopy,
+  })
+
+  const copy = useCallback(async () => {
+    if (copyable && address) {
+      await copyToClipboard(address)
+    }
+  }, [copyable, address, copyToClipboard])
+
+  const updateDisplay = useCallback(() => {
+    if (!address) {
+      setDisplayText('')
+      setTruncated(false)
+      return
+    }
+
+    // Fixed truncation with startChars/endChars
+    if (startChars !== undefined || endChars !== undefined) {
+      const start = startChars ?? 6
+      const end = endChars ?? 4
+      const result = truncateAddress(address, { start, end })
+      setDisplayText(result)
+      setTruncated(result !== address)
+      return
+    }
+
+    // Mode-based truncation
+    if (mode === 'full') {
+      setDisplayText(address)
+      setTruncated(false)
+      return
+    }
+
+    if (mode !== 'auto') {
+      const result = truncateAddress(address, mode)
+      setDisplayText(result)
+      setTruncated(result !== address)
+      return
+    }
+
+    // Auto mode: responsive truncation
+    const container = containerRef.current
+    if (!container) {
+      setDisplayText(address)
+      setTruncated(false)
+      return
+    }
+
+    const font = getComputedFont(container)
+    const iconSpace = copyable ? 24 : 0
+    const availableWidth = container.clientWidth - iconSpace
+
+    if (availableWidth <= 0) {
+      setDisplayText(address)
+      setTruncated(false)
+      return
+    }
+
+    const result = truncateAddressAuto(address, availableWidth, font, measureText)
+    setDisplayText(result)
+    setTruncated(result !== address)
+  }, [address, mode, startChars, endChars, copyable])
+
+  useLayoutEffect(() => {
+    const container = containerRef.current
+    if (!container) {
+      updateDisplay()
+      return
+    }
+
+    updateDisplay()
+
+    const observer = new ResizeObserver(updateDisplay)
+    observer.observe(container)
+
+    return () => observer.disconnect()
+  }, [updateDisplay])
+
+  return {
+    displayText,
+    containerRef,
+    copied,
+    copy,
+    truncated,
+  }
+}
diff --git a/packages/key-ui/src/amount-display/AmountDisplay.tsx b/packages/key-ui/src/amount-display/AmountDisplay.tsx
new file mode 100644
index 000000000..e59d7df6d
--- /dev/null
+++ b/packages/key-ui/src/amount-display/AmountDisplay.tsx
@@ -0,0 +1,188 @@
+'use client'
+import * as React from 'react'
+import NumberFlow from '@number-flow/react'
+import { cn, formatAmount, getEffectiveDecimals } from '@biochain/key-utils'
+import type { KeyUIComponentProps } from '../utils/types'
+
+type AmountSign = 'auto' | 'always' | 'never'
+type AmountColor = 'auto' | 'default' | 'positive' | 'negative'
+type FixedDecimalsMode = boolean | 'auto'
+
+export interface AmountDisplayState {
+  isNegative: boolean
+  isZero: boolean
+  isLoading: boolean
+  isHidden: boolean
+}
+
+export interface AmountDisplayProps
+  extends Omit<KeyUIComponentProps<'span', AmountDisplayState>, 'children'> {
+  value: string | number
+  symbol?: string
+  decimals?: number
+  sign?: AmountSign
+  color?: AmountColor
+  compact?: boolean
+  hidden?: boolean
+  loading?: boolean
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  weight?: 'normal' | 'medium' | 'semibold' | 'bold'
+  mono?: boolean
+  animated?: boolean
+  fixedDecimals?: FixedDecimalsMode
+}
+
+const sizeClasses = {
+  xs: 'text-xs',
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-lg',
+  xl: 'text-xl',
+}
+
+const weightClasses = {
+  normal: 'font-normal',
+  medium: 'font-medium',
+  semibold: 'font-semibold',
+  bold: 'font-bold',
+}
+
+export const AmountDisplay = React.forwardRef(function AmountDisplay(
+  componentProps: AmountDisplayProps,
+  forwardedRef: React.ForwardedRef<HTMLSpanElement>,
+) {
+  const {
+    value,
+    symbol,
+    decimals = 8,
+    sign = 'never',
+    color = 'default',
+    compact = false,
+    hidden = false,
+    loading = false,
+    size = 'md',
+    weight = 'normal',
+    mono = true,
+    animated = true,
+    fixedDecimals = 'auto',
+    className,
+    style,
+    ...elementProps
+  } = componentProps
+
+  const { isNegative, isZero, numValue, formatted } = formatAmount(value, { decimals, compact })
+
+  const state: AmountDisplayState = React.useMemo(
+    () => ({
+      isNegative,
+      isZero,
+      isLoading: loading,
+      isHidden: hidden,
+    }),
+    [isNegative, isZero, loading, hidden],
+  )
+
+  let signChar = ''
+  if (sign === 'always' && !isZero) {
+    signChar = isNegative ? '-' : '+'
+  } else if (sign === 'auto' && isNegative) {
+    signChar = '-'
+  }
+
+  const effectiveMinDecimals =
+    fixedDecimals === 'auto'
+      ? getEffectiveDecimals(numValue, decimals)
+      : fixedDecimals === true
+        ? decimals
+        : 0
+
+  const format = {
+    minimumFractionDigits: effectiveMinDecimals,
+    maximumFractionDigits: decimals,
+  }
+
+  const baseClassName = cn(
+    sizeClasses[size],
+    weightClasses[weight],
+    mono && 'font-mono',
+    typeof className === 'function' ? className(state) : className,
+  )
+
+  const resolvedStyle = typeof style === 'function' ? style(state) : style
+
+  if (hidden) {
+    return (
+      <span ref={forwardedRef} className={baseClassName} style={resolvedStyle} {...elementProps}>
+        ••••••
+        {symbol && <span className="text-muted-foreground ml-1 font-normal">{symbol}</span>}
+      </span>
+    )
+  }
+
+  if (loading) {
+    return (
+      <span
+        ref={forwardedRef}
+        className={cn(baseClassName, 'animate-pulse')}
+        style={resolvedStyle}
+        role="status"
+        aria-label="Loading..."
+        {...elementProps}
+      >
+        <NumberFlow value={0} format={format} locales="en-US" aria-hidden="true" />
+        {symbol && <span className="text-muted-foreground ml-1 font-normal">{symbol}</span>}
+      </span>
+    )
+  }
+
+  let colorClass = ''
+  if (color === 'auto' && !isZero) {
+    colorClass = isNegative ? 'text-destructive' : 'text-green-500'
+  } else if (color === 'positive') {
+    colorClass = 'text-green-500'
+  } else if (color === 'negative') {
+    colorClass = 'text-destructive'
+  }
+
+  const coloredClassName = cn(baseClassName, colorClass)
+  const a11yLabel = `${signChar}${formatted}${symbol ? ` ${symbol}` : ''}`
+
+  if (animated && !compact) {
+    return (
+      <span
+        ref={forwardedRef}
+        className={coloredClassName}
+        style={resolvedStyle}
+        role="img"
+        aria-label={a11yLabel}
+        {...elementProps}
+      >
+        {signChar}
+        <NumberFlow
+          value={Math.abs(numValue)}
+          format={format}
+          locales="en-US"
+          aria-hidden="true"
+        />
+        {symbol && (
+          <span className="text-muted-foreground ml-1 font-normal" aria-hidden="true">
+            {symbol}
+          </span>
+        )}
+      </span>
+    )
+  }
+
+  return (
+    <span ref={forwardedRef} className={coloredClassName} style={resolvedStyle} {...elementProps}>
+      {signChar}
+      {formatted}
+      {symbol && <span className="text-muted-foreground ml-1 font-normal">{symbol}</span>}
+    </span>
+  )
+})
+
+export namespace AmountDisplay {
+  export type State = AmountDisplayState
+  export type Props = AmountDisplayProps
+}
diff --git a/packages/key-ui/src/amount-display/AmountWithFiat.tsx b/packages/key-ui/src/amount-display/AmountWithFiat.tsx
new file mode 100644
index 000000000..c9488a52e
--- /dev/null
+++ b/packages/key-ui/src/amount-display/AmountWithFiat.tsx
@@ -0,0 +1,59 @@
+'use client'
+import * as React from 'react'
+import { cn, formatAmount } from '@biochain/key-utils'
+import { AmountDisplay } from './AmountDisplay'
+import type { AmountDisplayProps } from './AmountDisplay'
+
+export interface AmountWithFiatProps extends AmountDisplayProps {
+  fiatValue?: string | number
+  fiatSymbol?: string
+  fiatDecimals?: number
+  layout?: 'vertical' | 'horizontal'
+}
+
+export const AmountWithFiat = React.forwardRef(function AmountWithFiat(
+  props: AmountWithFiatProps,
+  forwardedRef: React.ForwardedRef<HTMLSpanElement>,
+) {
+  const {
+    fiatValue,
+    fiatSymbol = '$',
+    fiatDecimals = 2,
+    layout = 'vertical',
+    className,
+    ...amountProps
+  } = props
+
+  const fiatFormatted =
+    fiatValue !== undefined ? formatAmount(fiatValue, { decimals: fiatDecimals }).formatted : null
+
+  if (layout === 'horizontal') {
+    return (
+      <span className={cn('inline-flex items-baseline gap-2', className)}>
+        <AmountDisplay ref={forwardedRef} {...amountProps} />
+        {fiatFormatted && (
+          <span className="text-muted-foreground text-sm">
+            ≈ {fiatSymbol}
+            {fiatFormatted}
+          </span>
+        )}
+      </span>
+    )
+  }
+
+  return (
+    <div className={cn('space-y-0.5', className)}>
+      <AmountDisplay ref={forwardedRef} {...amountProps} />
+      {fiatFormatted && (
+        <p className="text-muted-foreground text-sm">
+          ≈ {fiatSymbol}
+          {fiatFormatted}
+        </p>
+      )}
+    </div>
+  )
+})
+
+export namespace AmountWithFiat {
+  export type Props = AmountWithFiatProps
+}
diff --git a/packages/key-ui/src/amount-display/index.ts b/packages/key-ui/src/amount-display/index.ts
new file mode 100644
index 000000000..fb4d59e67
--- /dev/null
+++ b/packages/key-ui/src/amount-display/index.ts
@@ -0,0 +1,4 @@
+export { AmountDisplay } from './AmountDisplay'
+export type { AmountDisplayProps, AmountDisplayState } from './AmountDisplay'
+export { AmountWithFiat } from './AmountWithFiat'
+export type { AmountWithFiatProps } from './AmountWithFiat'
diff --git a/packages/key-ui/src/index.ts b/packages/key-ui/src/index.ts
new file mode 100644
index 000000000..f6a652907
--- /dev/null
+++ b/packages/key-ui/src/index.ts
@@ -0,0 +1,3 @@
+export * from './address-display'
+export * from './amount-display'
+export * from './token-icon'
diff --git a/packages/key-ui/src/styles/base.css b/packages/key-ui/src/styles/base.css
new file mode 100644
index 000000000..77c05d4ac
--- /dev/null
+++ b/packages/key-ui/src/styles/base.css
@@ -0,0 +1,24 @@
+/* Key UI Base Styles */
+/* These CSS variables can be imported by consumers for consistent theming */
+
+:root {
+  /* Colors - can be overridden by consumer's theme */
+  --key-ui-text-muted: oklch(0.556 0.012 286.286);
+  --key-ui-text-destructive: oklch(0.577 0.245 27.325);
+  --key-ui-text-success: oklch(0.723 0.191 149.579);
+  --key-ui-bg-muted: oklch(0.967 0.001 286.375);
+  
+  /* Sizes */
+  --key-ui-icon-xs: 1rem;
+  --key-ui-icon-sm: 1.5rem;
+  --key-ui-icon-md: 2rem;
+  --key-ui-icon-lg: 2.5rem;
+  --key-ui-icon-xl: 3rem;
+}
+
+.dark {
+  --key-ui-text-muted: oklch(0.708 0.012 286.286);
+  --key-ui-text-destructive: oklch(0.704 0.191 22.216);
+  --key-ui-text-success: oklch(0.792 0.209 151.711);
+  --key-ui-bg-muted: oklch(0.21 0.006 285.885);
+}
diff --git a/packages/key-ui/src/token-icon/fallback/TokenIconFallback.tsx b/packages/key-ui/src/token-icon/fallback/TokenIconFallback.tsx
new file mode 100644
index 000000000..c8c5f8223
--- /dev/null
+++ b/packages/key-ui/src/token-icon/fallback/TokenIconFallback.tsx
@@ -0,0 +1,54 @@
+'use client'
+import * as React from 'react'
+import { cn } from '@biochain/key-utils'
+import { useTokenIconRootContext } from '../root/TokenIconRootContext'
+
+export interface TokenIconFallbackProps extends React.HTMLAttributes<HTMLSpanElement> {
+  delayMs?: number
+}
+
+const fontSizeClasses = {
+  xs: 'text-[8px]',
+  sm: 'text-xs',
+  md: 'text-sm',
+  lg: 'text-base',
+  xl: 'text-lg',
+}
+
+export const TokenIconFallback = React.forwardRef(function TokenIconFallback(
+  props: TokenIconFallbackProps,
+  forwardedRef: React.ForwardedRef<HTMLSpanElement>,
+) {
+  const { children, className, delayMs = 0, ...elementProps } = props
+  const context = useTokenIconRootContext()
+  const [canRender, setCanRender] = React.useState(delayMs === 0)
+
+  React.useEffect(() => {
+    if (delayMs > 0) {
+      const timer = setTimeout(() => setCanRender(true), delayMs)
+      return () => clearTimeout(timer)
+    }
+  }, [delayMs])
+
+  if (context.imageLoaded || !canRender) {
+    return null
+  }
+
+  return (
+    <span
+      ref={forwardedRef}
+      className={cn(
+        'flex items-center justify-center size-full font-medium text-muted-foreground uppercase',
+        fontSizeClasses[context.size],
+        className,
+      )}
+      {...elementProps}
+    >
+      {children}
+    </span>
+  )
+})
+
+export namespace TokenIconFallback {
+  export type Props = TokenIconFallbackProps
+}
diff --git a/packages/key-ui/src/token-icon/image/TokenIconImage.tsx b/packages/key-ui/src/token-icon/image/TokenIconImage.tsx
new file mode 100644
index 000000000..acde07904
--- /dev/null
+++ b/packages/key-ui/src/token-icon/image/TokenIconImage.tsx
@@ -0,0 +1,62 @@
+'use client'
+import * as React from 'react'
+import { cn } from '@biochain/key-utils'
+import { useTokenIconRootContext } from '../root/TokenIconRootContext'
+
+export interface TokenIconImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  onLoadingStatusChange?: (status: 'loading' | 'loaded' | 'error') => void
+}
+
+export const TokenIconImage = React.forwardRef(function TokenIconImage(
+  props: TokenIconImageProps,
+  forwardedRef: React.ForwardedRef<HTMLImageElement>,
+) {
+  const { src, alt = '', className, onLoadingStatusChange, onLoad, onError, ...elementProps } = props
+  const context = useTokenIconRootContext()
+
+  const handleLoad = React.useCallback(
+    (event: React.SyntheticEvent<HTMLImageElement>) => {
+      context.setImageLoaded(true)
+      onLoadingStatusChange?.('loaded')
+      onLoad?.(event)
+    },
+    [context, onLoadingStatusChange, onLoad],
+  )
+
+  const handleError = React.useCallback(
+    (event: React.SyntheticEvent<HTMLImageElement>) => {
+      context.setImageLoaded(false)
+      onLoadingStatusChange?.('error')
+      onError?.(event)
+    },
+    [context, onLoadingStatusChange, onError],
+  )
+
+  React.useEffect(() => {
+    if (src) {
+      onLoadingStatusChange?.('loading')
+      context.setImageLoaded(false)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [src])
+
+  if (!src) {
+    return null
+  }
+
+  return (
+    <img
+      ref={forwardedRef}
+      src={src}
+      alt={alt}
+      className={cn('absolute inset-0 size-full object-cover', className)}
+      onLoad={handleLoad}
+      onError={handleError}
+      {...elementProps}
+    />
+  )
+})
+
+export namespace TokenIconImage {
+  export type Props = TokenIconImageProps
+}
diff --git a/packages/key-ui/src/token-icon/index.parts.ts b/packages/key-ui/src/token-icon/index.parts.ts
new file mode 100644
index 000000000..389afb622
--- /dev/null
+++ b/packages/key-ui/src/token-icon/index.parts.ts
@@ -0,0 +1,3 @@
+export { TokenIconRoot as Root } from './root/TokenIconRoot'
+export { TokenIconImage as Image } from './image/TokenIconImage'
+export { TokenIconFallback as Fallback } from './fallback/TokenIconFallback'
diff --git a/packages/key-ui/src/token-icon/index.ts b/packages/key-ui/src/token-icon/index.ts
new file mode 100644
index 000000000..33799c3d3
--- /dev/null
+++ b/packages/key-ui/src/token-icon/index.ts
@@ -0,0 +1,5 @@
+export * as TokenIcon from './index.parts'
+
+export type { TokenIconRootProps, TokenIconRootState } from './root/TokenIconRoot'
+export type { TokenIconImageProps } from './image/TokenIconImage'
+export type { TokenIconFallbackProps } from './fallback/TokenIconFallback'
diff --git a/packages/key-ui/src/token-icon/root/TokenIconRoot.tsx b/packages/key-ui/src/token-icon/root/TokenIconRoot.tsx
new file mode 100644
index 000000000..80adcee2d
--- /dev/null
+++ b/packages/key-ui/src/token-icon/root/TokenIconRoot.tsx
@@ -0,0 +1,72 @@
+'use client'
+import * as React from 'react'
+import { cn } from '@biochain/key-utils'
+import { TokenIconRootContext } from './TokenIconRootContext'
+import type { KeyUIComponentProps } from '../../utils/types'
+
+export interface TokenIconRootState {
+  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  imageLoaded: boolean
+}
+
+export interface TokenIconRootProps
+  extends Omit<KeyUIComponentProps<'span', TokenIconRootState>, 'children'> {
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  children?: React.ReactNode
+}
+
+const sizeClasses = {
+  xs: 'size-4',
+  sm: 'size-6',
+  md: 'size-8',
+  lg: 'size-10',
+  xl: 'size-12',
+}
+
+export const TokenIconRoot = React.forwardRef(function TokenIconRoot(
+  props: TokenIconRootProps,
+  forwardedRef: React.ForwardedRef<HTMLSpanElement>,
+) {
+  const { size = 'md', children, className, style, ...elementProps } = props
+
+  const [imageLoaded, setImageLoaded] = React.useState(false)
+
+  const state: TokenIconRootState = React.useMemo(
+    () => ({
+      size,
+      imageLoaded,
+    }),
+    [size, imageLoaded],
+  )
+
+  const contextValue = React.useMemo(
+    () => ({
+      size,
+      imageLoaded,
+      setImageLoaded,
+    }),
+    [size, imageLoaded],
+  )
+
+  return (
+    <TokenIconRootContext.Provider value={contextValue}>
+      <span
+        ref={forwardedRef}
+        className={cn(
+          'relative inline-flex items-center justify-center rounded-full overflow-hidden bg-muted',
+          sizeClasses[size],
+          typeof className === 'function' ? className(state) : className,
+        )}
+        style={typeof style === 'function' ? style(state) : style}
+        {...elementProps}
+      >
+        {children}
+      </span>
+    </TokenIconRootContext.Provider>
+  )
+})
+
+export namespace TokenIconRoot {
+  export type State = TokenIconRootState
+  export type Props = TokenIconRootProps
+}
diff --git a/packages/key-ui/src/token-icon/root/TokenIconRootContext.tsx b/packages/key-ui/src/token-icon/root/TokenIconRootContext.tsx
new file mode 100644
index 000000000..b5ca89cc6
--- /dev/null
+++ b/packages/key-ui/src/token-icon/root/TokenIconRootContext.tsx
@@ -0,0 +1,18 @@
+'use client'
+import * as React from 'react'
+
+export interface TokenIconRootContextValue {
+  size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+  imageLoaded: boolean
+  setImageLoaded: (loaded: boolean) => void
+}
+
+export const TokenIconRootContext = React.createContext<TokenIconRootContextValue | null>(null)
+
+export function useTokenIconRootContext(): TokenIconRootContextValue {
+  const context = React.useContext(TokenIconRootContext)
+  if (!context) {
+    throw new Error('TokenIcon components must be used within a TokenIcon.Root')
+  }
+  return context
+}
diff --git a/packages/key-ui/src/utils/constants.ts b/packages/key-ui/src/utils/constants.ts
new file mode 100644
index 000000000..2b94c6e4e
--- /dev/null
+++ b/packages/key-ui/src/utils/constants.ts
@@ -0,0 +1 @@
+export const EMPTY_OBJECT: Record<string, never> = {}
diff --git a/packages/key-ui/src/utils/types.ts b/packages/key-ui/src/utils/types.ts
new file mode 100644
index 000000000..152ce5d2a
--- /dev/null
+++ b/packages/key-ui/src/utils/types.ts
@@ -0,0 +1,22 @@
+import * as React from 'react'
+
+export type HTMLProps<T = HTMLElement> = React.HTMLAttributes<T> & {
+  ref?: React.Ref<T> | undefined
+}
+
+export type ComponentRenderFn<Props, State> = (
+  props: Props,
+  state: State,
+) => React.ReactElement<unknown>
+
+export type KeyUIComponentProps<
+  ElementType extends React.ElementType,
+  State,
+  RenderFunctionProps = HTMLProps,
+> = Omit<React.ComponentPropsWithRef<ElementType>, 'className'> & {
+  className?: string | ((state: State) => string | undefined)
+  render?: ComponentRenderFn<RenderFunctionProps, State> | React.ReactElement
+  style?: React.CSSProperties | ((state: State) => React.CSSProperties | undefined)
+}
+
+export type Simplify<T> = T extends Function ? T : { [K in keyof T]: T[K] }
diff --git a/packages/key-ui/src/utils/use-merged-refs.ts b/packages/key-ui/src/utils/use-merged-refs.ts
new file mode 100644
index 000000000..0b0becd9e
--- /dev/null
+++ b/packages/key-ui/src/utils/use-merged-refs.ts
@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+type Ref<T> = React.Ref<T> | undefined
+
+export function useMergedRefs<T>(...refs: Ref<T>[]): React.RefCallback<T> {
+  return React.useCallback((instance: T | null) => {
+    for (const ref of refs) {
+      if (typeof ref === 'function') {
+        ref(instance)
+      } else if (ref !== null && ref !== undefined) {
+        ;(ref as React.MutableRefObject<T | null>).current = instance
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, refs)
+}
diff --git a/packages/key-ui/src/utils/use-render-element.tsx b/packages/key-ui/src/utils/use-render-element.tsx
new file mode 100644
index 000000000..8b8b1c801
--- /dev/null
+++ b/packages/key-ui/src/utils/use-render-element.tsx
@@ -0,0 +1,118 @@
+'use client'
+import * as React from 'react'
+import { cn } from '@biochain/key-utils'
+import type { ComponentRenderFn } from './types'
+import { EMPTY_OBJECT } from './constants'
+import { useMergedRefs } from './use-merged-refs'
+
+type IntrinsicTagName = keyof React.JSX.IntrinsicElements
+
+function resolveClassName<State>(
+  classNameProp: string | ((state: State) => string | undefined) | undefined,
+  state: State,
+): string | undefined {
+  if (typeof classNameProp === 'function') {
+    return classNameProp(state)
+  }
+  return classNameProp
+}
+
+function resolveStyle<State>(
+  styleProp: React.CSSProperties | ((state: State) => React.CSSProperties | undefined) | undefined,
+  state: State,
+): React.CSSProperties | undefined {
+  if (typeof styleProp === 'function') {
+    return styleProp(state)
+  }
+  return styleProp
+}
+
+function getReactElementRef(element: React.ReactElement | undefined): React.Ref<unknown> | undefined {
+  if (!element) return undefined
+  return (element as unknown as { ref?: React.Ref<unknown> }).ref
+}
+
+export interface UseRenderElementParameters<State, RenderedElementType extends Element> {
+  enabled?: boolean
+  ref?: React.Ref<RenderedElementType> | (React.Ref<RenderedElementType> | undefined)[]
+  state?: State
+  props?: Record<string, unknown>
+  defaultClassName?: string
+}
+
+export interface UseRenderElementComponentProps<State> {
+  className?: string | ((state: State) => string | undefined)
+  render?: ComponentRenderFn<Record<string, unknown>, State> | React.ReactElement
+  style?: React.CSSProperties | ((state: State) => React.CSSProperties | undefined)
+}
+
+export function useRenderElement<
+  State extends object,
+  RenderedElementType extends Element,
+  TagName extends IntrinsicTagName | undefined,
+>(
+  element: TagName,
+  componentProps: UseRenderElementComponentProps<State>,
+  params: UseRenderElementParameters<State, RenderedElementType> = {},
+): React.ReactElement | null {
+  const { className: classNameProp, style: styleProp, render: renderProp } = componentProps
+  const {
+    state = EMPTY_OBJECT as State,
+    ref,
+    props: propsProp,
+    enabled = true,
+    defaultClassName,
+  } = params
+
+  const mergedRef = useMergedRefs(
+    ...(Array.isArray(ref) ? ref : [ref]),
+    getReactElementRef(renderProp as React.ReactElement | undefined),
+  )
+
+  if (!enabled) {
+    return null
+  }
+
+  const className = resolveClassName(classNameProp, state)
+  const style = resolveStyle(styleProp, state)
+
+  const baseProps = propsProp ?? {}
+  
+  const outProps = {
+    ...baseProps,
+    ref: mergedRef,
+    className: cn(defaultClassName, baseProps.className as string | undefined, className),
+    style: { ...(baseProps.style as React.CSSProperties | undefined), ...style },
+  }
+
+  if (renderProp) {
+    if (typeof renderProp === 'function') {
+      return renderProp(outProps, state)
+    }
+    const renderProps = (renderProp.props ?? {}) as Record<string, unknown>
+    const mergedProps = {
+      ...outProps,
+      ...renderProps,
+      className: cn(outProps.className as string, renderProps.className as string),
+      style: { ...(outProps.style as object), ...(renderProps.style as object) },
+    }
+    return React.cloneElement(renderProp, mergedProps)
+  }
+
+  if (element) {
+    if (element === 'button') {
+      return <button type="button" {...outProps} />
+    }
+    return React.createElement(element, outProps)
+  }
+
+  throw new Error('Key UI: Render element or function are not defined.')
+}
+
+export namespace useRenderElement {
+  export type Parameters<State, RenderedElementType extends Element> = UseRenderElementParameters<
+    State,
+    RenderedElementType
+  >
+  export type ComponentProps<State> = UseRenderElementComponentProps<State>
+}
diff --git a/packages/key-ui/tsconfig.json b/packages/key-ui/tsconfig.json
new file mode 100644
index 000000000..385335c3c
--- /dev/null
+++ b/packages/key-ui/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "declarationMap": true,
+    "jsx": "react-jsx",
+    "isolatedModules": true
+  },
+  "include": ["src"]
+}
diff --git a/packages/key-ui/vite.config.ts b/packages/key-ui/vite.config.ts
new file mode 100644
index 000000000..3d14b2ac4
--- /dev/null
+++ b/packages/key-ui/vite.config.ts
@@ -0,0 +1,31 @@
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+import { resolve } from 'path'
+
+export default defineConfig({
+  plugins: [
+    dts({
+      include: ['src'],
+      rollupTypes: false,
+    }),
+  ],
+  build: {
+    lib: {
+      entry: {
+        index: resolve(__dirname, 'src/index.ts'),
+        'address-display/index': resolve(__dirname, 'src/address-display/index.ts'),
+        'amount-display/index': resolve(__dirname, 'src/amount-display/index.ts'),
+        'token-icon/index': resolve(__dirname, 'src/token-icon/index.ts'),
+      },
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', '@number-flow/react', '@biochain/key-utils'],
+      output: {
+        preserveModules: false,
+      },
+    },
+    minify: false,
+    sourcemap: true,
+  },
+})
diff --git a/packages/key-utils/package.json b/packages/key-utils/package.json
new file mode 100644
index 000000000..43179acbc
--- /dev/null
+++ b/packages/key-utils/package.json
@@ -0,0 +1,54 @@
+{
+  "name": "@biochain/key-utils",
+  "version": "0.1.0",
+  "description": "Utility functions for KeyApp UI components",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./*": {
+      "import": "./dist/*.js",
+      "require": "./dist/*.cjs",
+      "types": "./dist/*.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "typecheck": "tsc --noEmit",
+    "typecheck:run": "tsc --noEmit",
+    "test": "vitest",
+    "test:run": "vitest run --passWithNoTests",
+    "test:storybook": "echo 'No storybook'",
+    "lint:run": "oxlint .",
+    "i18n:run": "echo 'No i18n'",
+    "theme:run": "echo 'No theme'"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "jsdom": "^26.1.0",
+    "oxlint": "^1.32.0",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.0"
+  },
+  "keywords": [
+    "biochain",
+    "keyapp",
+    "utils"
+  ],
+  "license": "MIT"
+}
diff --git a/packages/key-utils/src/cn.ts b/packages/key-utils/src/cn.ts
new file mode 100644
index 000000000..fed2fe91e
--- /dev/null
+++ b/packages/key-utils/src/cn.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/packages/key-utils/src/format-amount.test.ts b/packages/key-utils/src/format-amount.test.ts
new file mode 100644
index 000000000..28028eb74
--- /dev/null
+++ b/packages/key-utils/src/format-amount.test.ts
@@ -0,0 +1,66 @@
+import { describe, it, expect } from 'vitest'
+import { formatAmount, getEffectiveDecimals } from './format-amount'
+
+describe('formatAmount', () => {
+  it('formats zero correctly', () => {
+    expect(formatAmount(0)).toEqual({
+      formatted: '0',
+      isNegative: false,
+      isZero: true,
+      numValue: 0,
+    })
+  })
+
+  it('formats positive numbers', () => {
+    const result = formatAmount(1234.56, { decimals: 2 })
+    expect(result.formatted).toBe('1,234.56')
+    expect(result.isNegative).toBe(false)
+  })
+
+  it('formats negative numbers', () => {
+    const result = formatAmount(-100, { decimals: 2 })
+    expect(result.formatted).toBe('100')
+    expect(result.isNegative).toBe(true)
+  })
+
+  it('formats compact thousands', () => {
+    expect(formatAmount(12500, { compact: true }).formatted).toBe('12.5K')
+  })
+
+  it('formats compact millions', () => {
+    expect(formatAmount(1500000, { compact: true }).formatted).toBe('1.5M')
+  })
+
+  it('formats compact billions', () => {
+    expect(formatAmount(2500000000, { compact: true }).formatted).toBe('2.5B')
+  })
+
+  it('handles string input', () => {
+    expect(formatAmount('1234.56', { decimals: 2 }).formatted).toBe('1,234.56')
+  })
+
+  it('handles invalid input', () => {
+    expect(formatAmount('invalid')).toEqual({
+      formatted: '0',
+      isNegative: false,
+      isZero: true,
+      numValue: 0,
+    })
+  })
+})
+
+describe('getEffectiveDecimals', () => {
+  it('returns 0 for zero', () => {
+    expect(getEffectiveDecimals(0, 8)).toBe(0)
+  })
+
+  it('returns correct decimals for whole numbers', () => {
+    expect(getEffectiveDecimals(100, 8)).toBe(0)
+  })
+
+  it('returns correct decimals for fractional numbers', () => {
+    expect(getEffectiveDecimals(1.5, 8)).toBe(1)
+    expect(getEffectiveDecimals(1.25, 8)).toBe(2)
+    expect(getEffectiveDecimals(1.123, 8)).toBe(3)
+  })
+})
diff --git a/packages/key-utils/src/format-amount.ts b/packages/key-utils/src/format-amount.ts
new file mode 100644
index 000000000..0e3341ad2
--- /dev/null
+++ b/packages/key-utils/src/format-amount.ts
@@ -0,0 +1,65 @@
+export interface FormatAmountResult {
+  formatted: string
+  isNegative: boolean
+  isZero: boolean
+  numValue: number
+}
+
+export interface FormatAmountOptions {
+  decimals?: number
+  compact?: boolean
+}
+
+export function formatAmount(
+  value: string | number,
+  options: FormatAmountOptions = {},
+): FormatAmountResult {
+  const { decimals = 8, compact = false } = options
+  const num = typeof value === 'string' ? parseFloat(value) : value
+
+  if (isNaN(num)) {
+    return { formatted: '0', isNegative: false, isZero: true, numValue: 0 }
+  }
+
+  const isNegative = num < 0
+  const isZero = num === 0
+  const absNum = Math.abs(num)
+
+  let formatted: string
+
+  if (isZero) {
+    formatted = '0'
+  } else if (compact && absNum >= 1_000_000_000) {
+    formatted = (absNum / 1_000_000_000).toFixed(2).replace(/\.?0+$/, '') + 'B'
+  } else if (compact && absNum >= 1_000_000) {
+    formatted = (absNum / 1_000_000).toFixed(2).replace(/\.?0+$/, '') + 'M'
+  } else if (compact && absNum >= 1_000) {
+    formatted = (absNum / 1_000).toFixed(2).replace(/\.?0+$/, '') + 'K'
+  } else {
+    formatted = absNum.toLocaleString('en-US', {
+      minimumFractionDigits: 0,
+      maximumFractionDigits: decimals,
+    })
+  }
+
+  return { formatted, isNegative, isZero, numValue: num }
+}
+
+export function formatNumberToString(
+  num: number,
+  minDecimals: number,
+  maxDecimals: number,
+): string {
+  return num.toLocaleString('en-US', {
+    minimumFractionDigits: minDecimals,
+    maximumFractionDigits: maxDecimals,
+  })
+}
+
+export function getEffectiveDecimals(num: number, maxDecimals: number): number {
+  if (num === 0) return 0
+  const str = Math.abs(num).toFixed(maxDecimals)
+  const decimalPart = str.split('.')[1] || ''
+  const trimmed = decimalPart.replace(/0+$/, '')
+  return trimmed.length
+}
diff --git a/packages/key-utils/src/index.ts b/packages/key-utils/src/index.ts
new file mode 100644
index 000000000..ff7594ccf
--- /dev/null
+++ b/packages/key-utils/src/index.ts
@@ -0,0 +1,8 @@
+export { cn } from './cn'
+export { formatAmount, formatNumberToString, getEffectiveDecimals } from './format-amount'
+export type { FormatAmountResult, FormatAmountOptions } from './format-amount'
+export { truncateAddress, truncateAddressAuto, TRUNCATION_PRESETS } from './truncate-address'
+export type { TruncationMode, TruncationPreset } from './truncate-address'
+export { measureText, getComputedFont } from './measure-text'
+export { useCopyToClipboard } from './use-copy-to-clipboard'
+export type { UseCopyToClipboardOptions, UseCopyToClipboardReturn } from './use-copy-to-clipboard'
diff --git a/packages/key-utils/src/measure-text.ts b/packages/key-utils/src/measure-text.ts
new file mode 100644
index 000000000..328e9a0c6
--- /dev/null
+++ b/packages/key-utils/src/measure-text.ts
@@ -0,0 +1,25 @@
+let measureCanvas: HTMLCanvasElement | null = null
+let measureCtx: CanvasRenderingContext2D | null = null
+
+export function measureText(text: string, font: string): number {
+  if (typeof document === 'undefined') {
+    return text.length * 8
+  }
+
+  if (!measureCanvas) {
+    measureCanvas = document.createElement('canvas')
+    measureCtx = measureCanvas.getContext('2d')
+  }
+
+  if (!measureCtx) {
+    return text.length * 8
+  }
+
+  measureCtx.font = font
+  return measureCtx.measureText(text).width
+}
+
+export function getComputedFont(element: HTMLElement): string {
+  const style = getComputedStyle(element)
+  return `${style.fontSize} ${style.fontFamily}`
+}
diff --git a/packages/key-utils/src/truncate-address.test.ts b/packages/key-utils/src/truncate-address.test.ts
new file mode 100644
index 000000000..61a624870
--- /dev/null
+++ b/packages/key-utils/src/truncate-address.test.ts
@@ -0,0 +1,53 @@
+import { describe, it, expect } from 'vitest'
+import { truncateAddress, TRUNCATION_PRESETS } from './truncate-address'
+
+describe('truncateAddress', () => {
+  const longAddress = '0x742d35Cc6634C0532925a3b844Bc454e4438f44e'
+
+  it('returns empty string for empty input', () => {
+    expect(truncateAddress('')).toBe('')
+  })
+
+  it('returns full address when mode is full', () => {
+    expect(truncateAddress(longAddress, 'full')).toBe(longAddress)
+  })
+
+  it('truncates with compact preset (6+4)', () => {
+    const result = truncateAddress(longAddress, 'compact')
+    expect(result).toBe('0x742d...f44e')
+  })
+
+  it('truncates with standard preset (8+6)', () => {
+    const result = truncateAddress(longAddress, 'standard')
+    expect(result).toBe('0x742d35...38f44e')
+  })
+
+  it('truncates with detailed preset (10+8)', () => {
+    const result = truncateAddress(longAddress, 'detailed')
+    expect(result).toBe('0x742d35Cc...4438f44e')
+  })
+
+  it('returns short address unchanged', () => {
+    const shortAddress = '0x1234'
+    expect(truncateAddress(shortAddress, 'compact')).toBe(shortAddress)
+  })
+
+  it('supports custom preset', () => {
+    const result = truncateAddress(longAddress, { start: 4, end: 4 })
+    expect(result).toBe('0x74...f44e')
+  })
+})
+
+describe('TRUNCATION_PRESETS', () => {
+  it('has correct compact preset', () => {
+    expect(TRUNCATION_PRESETS.compact).toEqual({ start: 6, end: 4 })
+  })
+
+  it('has correct standard preset', () => {
+    expect(TRUNCATION_PRESETS.standard).toEqual({ start: 8, end: 6 })
+  })
+
+  it('has correct detailed preset', () => {
+    expect(TRUNCATION_PRESETS.detailed).toEqual({ start: 10, end: 8 })
+  })
+})
diff --git a/packages/key-utils/src/truncate-address.ts b/packages/key-utils/src/truncate-address.ts
new file mode 100644
index 000000000..d9f11666a
--- /dev/null
+++ b/packages/key-utils/src/truncate-address.ts
@@ -0,0 +1,74 @@
+export type TruncationMode = 'full' | 'auto' | 'compact' | 'standard' | 'detailed'
+
+export interface TruncationPreset {
+  start: number
+  end: number
+}
+
+export const TRUNCATION_PRESETS: Record<Exclude<TruncationMode, 'full' | 'auto'>, TruncationPreset> = {
+  compact: { start: 6, end: 4 },
+  standard: { start: 8, end: 6 },
+  detailed: { start: 10, end: 8 },
+}
+
+export function truncateAddress(
+  address: string,
+  mode: TruncationMode | TruncationPreset = 'standard',
+): string {
+  if (!address) return ''
+  
+  if (mode === 'full') return address
+  
+  if (mode === 'auto') {
+    return address
+  }
+  
+  const preset = typeof mode === 'string' ? TRUNCATION_PRESETS[mode] : mode
+  const { start, end } = preset
+  const ellipsis = '...'
+  
+  if (address.length <= start + end + ellipsis.length) {
+    return address
+  }
+  
+  return `${address.slice(0, start)}${ellipsis}${address.slice(-end)}`
+}
+
+export function truncateAddressAuto(
+  address: string,
+  maxWidth: number,
+  font: string,
+  measureFn: (text: string, font: string) => number,
+): string {
+  const ellipsis = '...'
+  const fullWidth = measureFn(address, font)
+
+  if (fullWidth <= maxWidth) return address
+
+  const ellipsisWidth = measureFn(ellipsis, font)
+  const availableWidth = maxWidth - ellipsisWidth
+
+  if (availableWidth <= 0) return ellipsis
+
+  const charWidth = measureFn(address.charAt(0), font)
+  const totalCharsAvailable = Math.floor(availableWidth / charWidth)
+
+  let startChars: number
+  let endChars: number
+  const minChars = 4
+
+  if (totalCharsAvailable < minChars * 2) {
+    startChars = Math.max(2, Math.floor(totalCharsAvailable / 2))
+    endChars = Math.max(2, totalCharsAvailable - startChars)
+  } else {
+    startChars = Math.ceil(totalCharsAvailable * 0.55)
+    endChars = totalCharsAvailable - startChars
+  }
+
+  const maxStart = address.length - endChars - 1
+  startChars = Math.min(startChars, maxStart)
+
+  if (startChars + endChars >= address.length) return address
+
+  return `${address.slice(0, startChars)}${ellipsis}${address.slice(-endChars)}`
+}
diff --git a/packages/key-utils/src/use-copy-to-clipboard.ts b/packages/key-utils/src/use-copy-to-clipboard.ts
new file mode 100644
index 000000000..7e32157a9
--- /dev/null
+++ b/packages/key-utils/src/use-copy-to-clipboard.ts
@@ -0,0 +1,43 @@
+'use client'
+import { useState, useCallback } from 'react'
+
+export interface UseCopyToClipboardOptions {
+  timeout?: number
+  onCopy?: () => void
+  onError?: (error: Error) => void
+}
+
+export interface UseCopyToClipboardReturn {
+  copied: boolean
+  copy: (text: string) => Promise<void>
+  reset: () => void
+}
+
+export function useCopyToClipboard(
+  options: UseCopyToClipboardOptions = {},
+): UseCopyToClipboardReturn {
+  const { timeout = 2000, onCopy, onError } = options
+  const [copied, setCopied] = useState(false)
+
+  const copy = useCallback(
+    async (text: string) => {
+      try {
+        await navigator.clipboard.writeText(text)
+        setCopied(true)
+        onCopy?.()
+        setTimeout(() => setCopied(false), timeout)
+      } catch (error) {
+        const err = error instanceof Error ? error : new Error('Failed to copy')
+        onError?.(err)
+        console.error('Failed to copy to clipboard:', err)
+      }
+    },
+    [timeout, onCopy, onError],
+  )
+
+  const reset = useCallback(() => {
+    setCopied(false)
+  }, [])
+
+  return { copied, copy, reset }
+}
diff --git a/packages/key-utils/tsconfig.json b/packages/key-utils/tsconfig.json
new file mode 100644
index 000000000..385335c3c
--- /dev/null
+++ b/packages/key-utils/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "declarationMap": true,
+    "jsx": "react-jsx",
+    "isolatedModules": true
+  },
+  "include": ["src"]
+}
diff --git a/packages/key-utils/vite.config.ts b/packages/key-utils/vite.config.ts
new file mode 100644
index 000000000..ef54bf651
--- /dev/null
+++ b/packages/key-utils/vite.config.ts
@@ -0,0 +1,41 @@
+import { defineConfig } from 'vite'
+import dts from 'vite-plugin-dts'
+import { resolve } from 'path'
+import { readdirSync } from 'fs'
+
+const srcDir = resolve(__dirname, 'src')
+const srcFiles = readdirSync(srcDir).filter(f => f.endsWith('.ts') || f.endsWith('.tsx'))
+
+const entry: Record<string, string> = {
+  index: resolve(srcDir, 'index.ts'),
+}
+
+for (const file of srcFiles) {
+  if (file !== 'index.ts') {
+    const name = file.replace(/\.tsx?$/, '')
+    entry[name] = resolve(srcDir, file)
+  }
+}
+
+export default defineConfig({
+  plugins: [
+    dts({
+      include: ['src'],
+      rollupTypes: false,
+    }),
+  ],
+  build: {
+    lib: {
+      entry,
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom'],
+      output: {
+        preserveModules: false,
+      },
+    },
+    minify: false,
+    sourcemap: true,
+  },
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a4c42aa34..8407f6c6e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -726,6 +726,86 @@ importers:
         specifier: ^4.0.0
         version: 4.0.16(@types/node@24.10.4)(@vitest/browser-playwright@4.0.16)(jiti@2.6.1)(jsdom@27.3.0)(lightningcss@1.30.2)(msw@2.12.4(@types/node@24.10.4)(typescript@5.9.3))
 
+  packages/key-ui:
+    dependencies:
+      '@biochain/key-utils':
+        specifier: workspace:*
+        version: link:../key-utils
+      '@number-flow/react':
+        specifier: ^0.5.5
+        version: 0.5.10(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react:
+        specifier: ^19.0.0
+        version: 19.2.3
+      react-dom:
+        specifier: ^19.0.0
+        version: 19.2.3(react@19.2.3)
+    devDependencies:
+      '@testing-library/react':
+        specifier: ^16.0.0
+        version: 16.3.1(@testing-library/dom@10.4.0)(@types/react-dom@19.2.3(@types/react@19.2.7))(@types/react@19.2.7)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@types/react':
+        specifier: ^19.0.0
+        version: 19.2.7
+      '@types/react-dom':
+        specifier: ^19.0.0
+        version: 19.2.3(@types/react@19.2.7)
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      eslint-plugin-file-component-constraints:
+        specifier: workspace:*
+        version: link:../eslint-plugin-file-component-constraints
+      jsdom:
+        specifier: ^26.1.0
+        version: 26.1.0
+      oxlint:
+        specifier: ^1.32.0
+        version: 1.35.0
+      tailwind-merge:
+        specifier: ^3.4.0
+        version: 3.4.0
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+      vite:
+        specifier: ^7.3.0
+        version: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)
+      vite-plugin-dts:
+        specifier: ^4.5.4
+        version: 4.5.4(@types/node@24.10.4)(rollup@4.54.0)(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2))
+      vitest:
+        specifier: ^4.0.0
+        version: 4.0.16(@types/node@24.10.4)(@vitest/browser-playwright@4.0.16)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(msw@2.12.4(@types/node@24.10.4)(typescript@5.9.3))
+
+  packages/key-utils:
+    dependencies:
+      react:
+        specifier: ^19.0.0
+        version: 19.2.3
+    devDependencies:
+      '@types/react':
+        specifier: ^19.0.0
+        version: 19.2.7
+      jsdom:
+        specifier: ^26.1.0
+        version: 26.1.0
+      oxlint:
+        specifier: ^1.32.0
+        version: 1.35.0
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+      vite:
+        specifier: ^7.3.0
+        version: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2)
+      vite-plugin-dts:
+        specifier: ^4.5.4
+        version: 4.5.4(@types/node@24.10.4)(rollup@4.54.0)(typescript@5.9.3)(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.30.2))
+      vitest:
+        specifier: ^4.0.0
+        version: 4.0.16(@types/node@24.10.4)(@vitest/browser-playwright@4.0.16)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.30.2)(msw@2.12.4(@types/node@24.10.4)(typescript@5.9.3))
+
   packages/keyapp-sdk:
     devDependencies:
       react:
diff --git a/turbo.json b/turbo.json
index 66ce27580..9a2329231 100644
--- a/turbo.json
+++ b/turbo.json
@@ -8,19 +8,19 @@
       "cache": true
     },
     "typecheck:run": {
-      "dependsOn": [],
+      "dependsOn": ["^build"],
       "inputs": ["src/**/*.ts", "src/**/*.tsx", "tsconfig*.json"],
       "outputs": [],
       "cache": true
     },
     "test:run": {
-      "dependsOn": [],
+      "dependsOn": ["^build"],
       "inputs": ["src/**/*.ts", "src/**/*.tsx", "vitest.config.ts"],
       "outputs": ["coverage/**"],
       "cache": true
     },
     "test:storybook": {
-      "dependsOn": [],
+      "dependsOn": ["^build"],
       "inputs": ["src/**/*.ts", "src/**/*.tsx", "vitest.config.ts"],
       "outputs": [],
       "cache": true