diff --git a/.dumirc.ts b/.dumirc.ts
index 8b56eeb..9ebb64f 100644
--- a/.dumirc.ts
+++ b/.dumirc.ts
@@ -10,11 +10,13 @@ export default defineConfig({
     name: 'Segmented',
     logo: 'https://avatars0.githubusercontent.com/u/9441414?s=200&v=4',
   },
-  outputPath: '.doc',
+  outputPath: 'docs-dist',
   exportStatic: {},
   base: basePath,
   publicPath,
   alias: {
-    'rc-segmented': path.resolve(__dirname, 'src/index.tsx'),
+    '@rc-component/segmented$': path.resolve(__dirname, 'src/index.tsx'),
+    '@rc-component/segmented/es': path.resolve(__dirname, 'src'),
+    '@rc-component/segmented/assets': path.resolve(__dirname, 'assets'),
   },
 });
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 0000000..758659a
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1,2 @@
+github: ant-design
+open_collective: ant-design
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
deleted file mode 100644
index f860ff1..0000000
--- a/.github/workflows/main.yml
+++ /dev/null
@@ -1,6 +0,0 @@
-name: ✅ test
-on: [push, pull_request]
-jobs:
-  test:
-    uses: react-component/rc-test/.github/workflows/test.yml@main
-    secrets: inherit
diff --git a/.github/workflows/preview.yml b/.github/workflows/preview.yml
deleted file mode 100644
index d02059a..0000000
--- a/.github/workflows/preview.yml
+++ /dev/null
@@ -1,20 +0,0 @@
-name: 🔂 Surge PR Preview
-
-on: [pull_request]
-
-jobs:
-  preview:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - uses: afc163/surge-preview@v1
-        id: preview_step
-        with:
-          surge_token: ${{ secrets.SURGE_TOKEN }}
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          dist: .doc
-          build: |
-            npm install
-            npm run docs:build
-      - name: Get the preview_url
-        run: echo "url => ${{ steps.preview_step.outputs.preview_url }}"
diff --git a/.github/workflows/react-component-ci.yml b/.github/workflows/react-component-ci.yml
new file mode 100644
index 0000000..1ed6420
--- /dev/null
+++ b/.github/workflows/react-component-ci.yml
@@ -0,0 +1,12 @@
+name: ✅ test
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+permissions:
+  contents: read
+jobs:
+  test:
+    uses: react-component/rc-test/.github/workflows/test-utoo.yml@main
+    secrets: inherit
diff --git a/.github/workflows/react-doctor.yml b/.github/workflows/react-doctor.yml
new file mode 100644
index 0000000..f68281c
--- /dev/null
+++ b/.github/workflows/react-doctor.yml
@@ -0,0 +1,27 @@
+name: React Doctor
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened, ready_for_review]
+  push:
+    branches: [master]
+
+permissions:
+  contents: read
+  pull-requests: write
+  issues: write
+  statuses: write
+
+concurrency:
+  group: react-doctor-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  react-doctor:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0
+        with:
+          fetch-depth: 0
+          persist-credentials: false
+      - uses: millionco/react-doctor@0b4f4f4bd248a154e64eb508a48347f71154b3f3
diff --git a/.github/workflows/surge-preview.yml b/.github/workflows/surge-preview.yml
new file mode 100644
index 0000000..faf6b8b
--- /dev/null
+++ b/.github/workflows/surge-preview.yml
@@ -0,0 +1,42 @@
+name: Surge Preview
+
+on:
+  pull_request:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+  pull-requests: write
+  checks: write
+  statuses: write
+
+jobs:
+  preview:
+    runs-on: ubuntu-latest
+    env:
+      PREVIEW: true
+    steps:
+      - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0
+        with:
+          persist-credentials: false
+      - name: Build preview
+        if: ${{ secrets.SURGE_TOKEN != '' }}
+        run: |
+          npm install
+          npm run build
+      - uses: afc163/surge-preview@bf90a5a86111f6311ca42f0a5a0f80fb0fb03cec
+        if: ${{ secrets.SURGE_TOKEN != '' }}
+        env:
+          SURGE_TOKEN: ${{ secrets.SURGE_TOKEN }}
+        with:
+          surge_token: ${{ env.SURGE_TOKEN }}
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          dist: docs-dist
+          failOnError: false
+          setCommitStatus: false
+      - name: Skip Surge preview
+        if: ${{ secrets.SURGE_TOKEN == '' }}
+        run: echo "SURGE_TOKEN is not configured; skip Surge preview."
diff --git a/.gitignore b/.gitignore
index e65506a..14aa70a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -30,6 +30,8 @@ package-lock.json
 pnpm-lock.yaml
 coverage/
 .doc
+docs-dist
+.vercel
 
 # umi
 .umi
diff --git a/README.md b/README.md
index 6972128..7c8dbda 100644
--- a/README.md
+++ b/README.md
@@ -1,79 +1,104 @@
-# @rc-component/segmented
+<div align="center">
+  <h1>@rc-component/segmented</h1>
+  <p><sub>Part of the Ant Design ecosystem.</sub></p>
+  <p>🧩 React segmented control for switching between compact options.</p>
 
-[![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Codecov][codecov-image]][codecov-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
+  <p>
+    <a href="https://www.npmjs.com/package/@rc-component/segmented"><img src="https://img.shields.io/npm/v/@rc-component/segmented.svg?style=flat-square" alt="npm version" /></a>
+    <a href="https://www.npmjs.com/package/@rc-component/segmented"><img src="https://img.shields.io/npm/dm/@rc-component/segmented.svg?style=flat-square" alt="npm downloads" /></a>
+    <a href="https://github.com/react-component/segmented/actions"><img src="https://github.com/react-component/segmented/actions/workflows/react-component-ci.yml/badge.svg" alt="CI" /></a>
+    <a href="https://codecov.io/gh/react-component/segmented"><img src="https://codecov.io/gh/react-component/segmented/branch/master/graph/badge.svg" alt="Codecov" /></a>
+    <a href="https://bundlephobia.com/package/@rc-component/segmented"><img src="https://badgen.net/bundlephobia/minzip/@rc-component/segmented" alt="bundle size" /></a>
+    <a href="https://github.com/umijs/dumi"><img src="https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square" alt="dumi" /></a>
+  </p>
+</div>
 
-[npm-image]: http://img.shields.io/npm/v/@rc-component/segmented.svg?style=flat-square
-[npm-url]: http://npmjs.org/package/@rc-component/segmented
-[github-actions-image]: https://github.com/react-component/segmented/actions/workflows/main.yml/badge.svg
-[github-actions-url]: https://github.com/react-component/segmented/actions/workflows/main.yml
-[codecov-image]: https://codecov.io/gh/react-component/segmented/branch/master/graph/badge.svg
-[codecov-url]: https://codecov.io/gh/react-component/segmented/branch/master
-[download-image]: https://img.shields.io/npm/dm/@rc-component/segmented.svg?style=flat-square
-[download-url]: https://npmjs.org/package/@rc-component/segmented
-[bundlephobia-url]: https://bundlephobia.com/package/@rc-component/segmented
-[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@rc-component/segmented
 
-React Segmented Control.
+## Highlights
 
-![](https://gw.alipayobjects.com/mdn/rms_50855f/afts/img/A*bmGGQpnWs0oAAAAAAAAAAAAAARQnAQ)
-
-## Live Demo
-
-https://react-component.github.io/segmented/
+- Supports string, number, and labeled option records.
+- Provides controlled and uncontrolled value flows.
+- Includes keyboard navigation, RTL, vertical layout, and disabled options.
+- Exposes semantic `classNames` and `styles` slots for item and label customization.
 
 ## Install
 
-[![@rc-component/segmented](https://nodei.co/npm/@rc-component/segmented.png)](https://npmjs.org/package/@rc-component/segmented)
+```bash
+npm install @rc-component/segmented
+```
 
 ## Usage
 
-```js
+```tsx pure
 import Segmented from '@rc-component/segmented';
-import '@rc-component/segmented/assets/index.css'; // import '@rc-component/segmented/assets/index.less';
-import { render } from 'react-dom';
+import '@rc-component/segmented/assets/index.css';
 
-render(
+export default () => (
   <Segmented
-    options={['Antd', 'Antv', 'Egg.js']}
-    onChange={(value) => handleValueChange(value)}
-  />,
-  mountNode,
+    options={['Daily', 'Weekly', 'Monthly']}
+    defaultValue="Weekly"
+    onChange={(value) => {
+      console.log(value);
+    }}
+  />
 );
 ```
 
+Online preview: https://segmented.react-component.vercel.app/
+
 ## API
 
-Please note that **onChange** API
- changed on v2.0.0+
-
-| Property     | Type                                                           | Default      | Description                        |
-| --------- | --------- | --------- | --------- |
-| prefixCls    | string                                                         | `rc-segmented` | prefixCls of this component |
-| className    | string                                                         | ''           | additional class name of segmented |
-| style        | React.CSSProperties                                            |              | style properties of segmented      |
-| options      | Array<string \| number \| [SegmentedOption](#SegmentedOption)> | []           | options for choices                |
-| value        | string \| number                                               |              | value of segmented                 |
-| defaultValue | string \| number                                               |              | defaultValue of segmented          |
-| value | string \| number                                               |              | currently selected value of segmented          |
-| onChange     | (value: string \| number) => void                                               |              | defaultValue of segmented          |
-| disabled     | boolean                                                        | false        | disabled status of segmented       |
-
-### SegmentedOption
-
-| Property  | Type      | Default | Description                               |
-| --------- | --------- | --------- | --------- |
-| label     | ReactNode |         | label of segmented option                 |
-| value     | string \| number   |  | value of segmented option |
-| className | string    | ''      | additional class name of segmented option |
-| disabled  | boolean   | false   | disabled status of segmented option       |
+### Segmented
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className` | string | `''` | Additional class name. |
+| `classNames` | Partial<Record<'item' \| 'label', string>> | - | Semantic class names for internal slots. |
+| `defaultValue` | string \| number | first option value | Initial selected value. |
+| `direction` | `'ltr'` \| `'rtl'` | - | Layout direction. |
+| `disabled` | boolean | false | Disable all options. |
+| `itemRender` | `(node: ReactNode, info: { item: SegmentedLabeledOption }) => ReactNode` | identity | Custom option item renderer. |
+| `motionName` | string | `'thumb-motion'` | Motion class name for the active thumb. |
+| `name` | string | - | Radio group name. |
+| `onChange` | `(value: string \| number) => void` | - | Triggered when the selected value changes. |
+| `options` | Array<string \| number \| SegmentedLabeledOption> | - | Available options. Required. |
+| `prefixCls` | string | `'rc-segmented'` | Prefix class name. |
+| `style` | React.CSSProperties | - | Root style. |
+| `styles` | Partial<Record<'item' \| 'label', React.CSSProperties>> | - | Semantic styles for internal slots. |
+| `value` | string \| number | - | Controlled selected value. |
+| `vertical` | boolean | false | Render options vertically. |
+
+Additional valid `div` props are passed to the root element.
+
+### SegmentedLabeledOption
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className` | string | - | Option class name. |
+| `disabled` | boolean | false | Disable this option. |
+| `label` | ReactNode | - | Displayed option content. |
+| `title` | string | derived from label | Native title for the label. |
+| `value` | string \| number | - | Option value. |
 
 ## Development
 
-```
+```bash
 npm install
 npm start
+npm test
+npm run tsc
+npm run compile
+npm run build
 ```
 
+## Release
+
+```bash
+npm run prepublishOnly
+```
+
+The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build.
+
 ## License
 
-@rc-component/segmented is released under the MIT license.
+@rc-component/segmented is released under the [MIT](./LICENSE.md) license.
diff --git a/docs/demo/basic.tsx b/docs/demo/basic.tsx
index db4d63d..712276d 100644
--- a/docs/demo/basic.tsx
+++ b/docs/demo/basic.tsx
@@ -1,4 +1,4 @@
-import Segmented from 'rc-segmented';
+import Segmented from '@rc-component/segmented';
 import React from 'react';
 import '../../assets/style.less';
 
diff --git a/docs/demo/controlled.tsx b/docs/demo/controlled.tsx
index 2546819..b3890a2 100644
--- a/docs/demo/controlled.tsx
+++ b/docs/demo/controlled.tsx
@@ -1,7 +1,7 @@
-import '../../assets/style.less';
+import type { SegmentedValue } from '@rc-component/segmented';
+import Segmented from '@rc-component/segmented';
 import React from 'react';
-import Segmented from 'rc-segmented';
-import type { SegmentedValue } from 'rc-segmented';
+import '../../assets/style.less';
 
 export default class Demo extends React.Component<
   unknown,
diff --git a/docs/demo/custom-render.tsx b/docs/demo/custom-render.tsx
index fd39b23..eb41dcb 100644
--- a/docs/demo/custom-render.tsx
+++ b/docs/demo/custom-render.tsx
@@ -1,6 +1,6 @@
-import '../../assets/style.less';
+import Segmented from '@rc-component/segmented';
 import * as React from 'react';
-import Segmented from 'rc-segmented';
+import '../../assets/style.less';
 
 const options = [
   {
diff --git a/docs/demo/dynamic.tsx b/docs/demo/dynamic.tsx
index c350d9f..3cfe13c 100644
--- a/docs/demo/dynamic.tsx
+++ b/docs/demo/dynamic.tsx
@@ -1,6 +1,6 @@
-import '../../assets/style.less';
+import Segmented from '@rc-component/segmented';
 import * as React from 'react';
-import Segmented from 'rc-segmented';
+import '../../assets/style.less';
 
 const defaultOptions1 = ['iOS', 'Android', 'Web'];
 const defaultOptions2 = [
diff --git a/docs/demo/html-title.tsx b/docs/demo/html-title.tsx
index 394141d..6feb647 100644
--- a/docs/demo/html-title.tsx
+++ b/docs/demo/html-title.tsx
@@ -1,6 +1,6 @@
-import '../../assets/style.less';
+import Segmented from '@rc-component/segmented';
 import React from 'react';
-import Segmented from 'rc-segmented';
+import '../../assets/style.less';
 
 export default function App() {
   return (
diff --git a/docs/demo/name.tsx b/docs/demo/name.tsx
index d62fe30..260be39 100644
--- a/docs/demo/name.tsx
+++ b/docs/demo/name.tsx
@@ -1,4 +1,4 @@
-import Segmented from 'rc-segmented';
+import Segmented from '@rc-component/segmented';
 import React from 'react';
 import '../../assets/style.less';
 
diff --git a/docs/demo/refs.tsx b/docs/demo/refs.tsx
index 5a7e345..45e5e22 100644
--- a/docs/demo/refs.tsx
+++ b/docs/demo/refs.tsx
@@ -1,6 +1,6 @@
-import '../../assets/style.less';
+import Segmented from '@rc-component/segmented';
 import React from 'react';
-import Segmented from 'rc-segmented';
+import '../../assets/style.less';
 
 class ClassComponentWithStringRef extends React.Component {
   componentDidMount() {
diff --git a/docs/demo/rtl.tsx b/docs/demo/rtl.tsx
index 91c3761..12fd8b4 100644
--- a/docs/demo/rtl.tsx
+++ b/docs/demo/rtl.tsx
@@ -1,6 +1,6 @@
-import '../../assets/style.less';
+import Segmented from '@rc-component/segmented';
 import React, { useState } from 'react';
-import Segmented from 'rc-segmented';
+import '../../assets/style.less';
 
 export default function App() {
   const [direction, setDirection] = useState<'rtl' | 'ltr'>('rtl');
diff --git a/docs/index.md b/docs/index.md
index e718ed5..afdba56 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,6 +1,6 @@
 ---
 hero:
-  title: rc-segmented
+  title: '@rc-component/segmented'
   description: React segmented controls used in ant.design
 ---
 
diff --git a/package.json b/package.json
index 688930d..d0c6dca 100644
--- a/package.json
+++ b/package.json
@@ -32,14 +32,16 @@
   "license": "MIT",
   "scripts": {
     "start": "dumi dev",
+    "build": "npm run compile && npm run docs:build",
+    "tsc": "tsc --noEmit",
     "type:check": "tsc --noEmit",
     "docs:build": "dumi build",
-    "docs:deploy": "gh-pages -d .doc",
+    "docs:deploy": "gh-pages -d docs-dist",
     "compile": "father build && lessc assets/index.less assets/index.css",
-    "gh-pages": "GH_PAGES=1 npm run docs:build && npm run docs:deploy",
+    "gh-pages": "npm run compile && cross-env GH_PAGES=1 npm run docs:build && npm run docs:deploy",
     "prepublishOnly": "npm run compile && rc-np",
     "lint": "eslint src/ --ext .ts,.tsx,.jsx,.js,.md",
-    "prettier": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
+    "prettier": "prettier --write --ignore-unknown .",
     "pretty-quick": "pretty-quick",
     "test": "jest",
     "coverage": "jest --coverage",
@@ -63,10 +65,11 @@
     "@types/react-dom": "^18.3.1",
     "@umijs/fabric": "^3.0.0",
     "@umijs/test": "^4.0.36",
+    "cross-env": "^7.0.0",
     "dumi": "^2.1.2",
     "eslint": "^7.0.0",
     "father": "^4.1.1",
-    "gh-pages": "^3.1.0",
+    "gh-pages": "^6.1.0",
     "husky": "^8.0.0",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
diff --git a/tsconfig.json b/tsconfig.json
index 1cbc5ac..b7f0d77 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,8 +16,12 @@
     "paths": {
       "@/*": ["src/*"],
       "@@/*": [".dumi/tmp/*"],
-      "rc-segmented": ["src/index.tsx"]
+      "@rc-component/segmented": ["src/index.tsx"],
+      "@rc-component/segmented/es": ["src"],
+      "@rc-component/segmented/es/*": ["src/*"],
+      "@rc-component/segmented/assets/*": ["assets/*"]
     }
   },
-  "include": [".dumi/**/*", ".dumirc.ts", "src", "tests", "docs/demo"]
+  "include": [".dumirc.ts", "src", "tests", "docs/demo"],
+  "exclude": ["docs-dist", "lib", "es"]
 }
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 0000000..5f9139e
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,6 @@
+{
+  "framework": "umijs",
+  "installCommand": "npm install",
+  "buildCommand": "npm run build",
+  "outputDirectory": "docs-dist"
+}