✨ feat(base-ui): Spin, Progress, Badge, Result, Pagination, Upload and antd-free Empty by Innei · Pull Request #660 · lobehub/lobe-ui

Innei · 2026-09-13T11:10:59Z

Why

Downstream (lobe-chat) still imports these from antd: Upload (21 files), Progress (15), Spin / Pagination / Result (11 each), Badge (10). Empty (78 files via @lobehub/ui) was a thin antd wrapper. This batch removes antd from all of them.

What

New @lobehub/ui/base-ui components (also re-exported from the root):

Component	Notes
`Spin`	`size` 14/20/32, `percent` ring, `indicator`, overlay via `children`, `variant="neural"` (≤6 SVG elements, 1 animated — replaces lobe-chat's 31-element `NeuralNetworkLoading`)
`Progress`	`type="line\|circle"`, `variant="line\|segments\|inset"`, `status`, `showInfo`, `format`; `role="progressbar"`
`Badge`	antd-compatible signature: `status/text/color` or `count/dot/overflowCount/offset/size`
`Result`	`status="success\|error\|info\|warning"`, `icon/title/subTitle/extra`
`Pagination`	controlled/uncontrolled `current`/`pageSize`, `showTotal`, `showSizeChanger` (base-ui `Select`), clamp notifies `onChange`
`Upload` / `UploadDragger`	headless: hidden input + drag zone, `accept/multiple/directory/maxCount`, `beforeUpload(file, fileList)` (antd-shaped), `onFiles`, `onChange`. No fileList / XHR / progress UI

src/Empty rewritten in place without antd, adds variant="default\|dashed\|stack".

Breaking / migration notes

EmptyProps now extends ComponentProps<'div'> instead of FlexboxProps (gap/padding/horizontal/flex no longer accepted). lobe-chat only passes description/icon/title/className/style/onClick/type — verified clean.
size="default" (antd) → size="middle" on Spin / Progress / Pagination. Badge keeps antd's default|small.
Not ported: Result 404/403/500, Progress dashboard/steps/gradient stroke, Pagination showQuickJumper/simple, Upload file list & XHR, Upload.LIST_IGNORE. Each mdx has a "Migrating from antd" section.

Verification

121 tests across the 7 dirs; eslint / tsc clean on changed files
All 7 docs pages rendered in the dev server, light theme, no console errors

https://claude.ai/code/session_01SnPUiLfRXgaeBU3jSRZXHc

vercel · 2026-09-13T11:11:05Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
lobe-ui	Ready	Preview	Sep 16, 2026 2:11pm UTC

chatgpt-codex-connector · 2026-09-13T11:11:17Z

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-09-13T11:15:41.029462Z	`5ce58b8`	PR opened

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 5ce58b85a0

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

chatgpt-codex-connector · 2026-09-13T11:15:38Z

+
+    if (!spinning) return children ?? null;
+
+    if (!children) {


Preserve zero-valued children while spinning

When children is 0, the falsy check selects standalone mode and drops the content while spinning is true, even though the same child reappears when spinning becomes false. This breaks counters and other numeric displays that legitimately render zero; distinguish absent children with children == null instead.

Useful? React with 👍 / 👎.

chatgpt-codex-connector · 2026-09-13T11:15:38Z

+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        {...rest}


Compose forwarded click handlers with the upload trigger

When a caller supplies the inherited native onClick or onKeyDown prop, this final spread replaces handleClick or handleKeyDown rather than augmenting it. A common analytics or telemetry handler therefore prevents the regular upload trigger from opening the file dialog; spread these props before the internal handlers or explicitly compose both callbacks.

Useful? React with 👍 / 👎.

chatgpt-codex-connector · 2026-09-13T11:15:38Z

+        const filtered = filterFilesByAccept(rawFiles, accept);
+        const accepted = await resolveAcceptedFiles(filtered, beforeUpload);
+        const sliced = maxCount ? accepted.slice(0, maxCount) : accepted;


Enforce single-file mode for dropped files

When multiple is false or omitted, the native picker limits selection to one file, but a drag-and-drop operation can still pass multiple files through this pipeline because only maxCount is applied. Consequently a nominally single-file dragger calls onFiles and onChange for every dropped file; cap the accepted list at one unless multiple is enabled.

Useful? React with 👍 / 👎.

Claude-Session: https://claude.ai/code/session_01SnPUiLfRXgaeBU3jSRZXHc

…tate Claude-Session: https://claude.ai/code/session_01SnPUiLfRXgaeBU3jSRZXHc

…/Empty Claude-Session: https://claude.ai/code/session_01SnPUiLfRXgaeBU3jSRZXHc

… Result, Spin, Tooltip and Upload imports

pkg-pr-new · 2026-09-16T14:07:52Z

Open in StackBlitz

npm i https://pkg.pr.new/@lobehub/ui@660

commit: 6b73209

chatgpt-codex-connector Bot reviewed Sep 13, 2026

View reviewed changes

vercel Bot deployed to Preview September 13, 2026 11:20 View deployment

Innei added 16 commits September 15, 2026 23:33

✨ feat(base-ui): add Spin

914f0fb

✨ feat(base-ui): add Progress

4c2105d

🐛 fix(base-ui): add progressbar aria to Progress

3e35710

✨ feat(base-ui): add Badge

71e5c2f

Claude-Session: https://claude.ai/code/session_01SnPUiLfRXgaeBU3jSRZXHc

🐛 fix(base-ui): scope Badge style prop to root

eb4569c

Claude-Session: https://claude.ai/code/session_01SnPUiLfRXgaeBU3jSRZXHc

✨ feat(base-ui): add Result

ea67540

Claude-Session: https://claude.ai/code/session_01SnPUiLfRXgaeBU3jSRZXHc

🐛 fix(base-ui): restore Result stack spacing

aeb332d

Claude-Session: https://claude.ai/code/session_01SnPUiLfRXgaeBU3jSRZXHc

♻️ refactor(ui): rewrite Empty without antd, add variants

afa2024

Claude-Session: https://claude.ai/code/session_01SnPUiLfRXgaeBU3jSRZXHc

📝 docs(ui): fix Empty docs, keyboard support for dashed variant

4a5b462

Claude-Session: https://claude.ai/code/session_01SnPUiLfRXgaeBU3jSRZXHc

✨ feat(base-ui): add Pagination

9f65e8e

Claude-Session: https://claude.ai/code/session_01SnPUiLfRXgaeBU3jSRZXHc

🐛 fix(base-ui): notify onChange when Pagination clamps current

44cab22

Claude-Session: https://claude.ai/code/session_01SnPUiLfRXgaeBU3jSRZXHc

🐛 fix(base-ui): cover uncontrolled Pagination clamp, drop effect setS…

26a1dcf

…tate Claude-Session: https://claude.ai/code/session_01SnPUiLfRXgaeBU3jSRZXHc

✨ feat(base-ui): add headless Upload

f9ebdf6

🐛 fix(base-ui): drop files whose beforeUpload rejects

85b5cb3

🐛 fix(base-ui): batch review fixes for Spin/Progress/Badge/Pagination…

92e5972

…/Empty Claude-Session: https://claude.ai/code/session_01SnPUiLfRXgaeBU3jSRZXHc

✨ feat(eslint): ban antd Badge, Empty, Pagination, Popover, Progress,…

7cbba19

… Result, Spin, Tooltip and Upload imports

Innei mentioned this pull request Sep 15, 2026

♻️ refactor(ui): migrate antd Spin, Progress, Badge, Result, Pagination, Tooltip, Popover, Empty and Upload to base-ui lobehub/lobehub#19606

Open

3 tasks

✅ test(static-css): drop empty from antd baseline after Empty rewrite

6b73209

Innei force-pushed the feat/base-ui-batch-seven branch from 5ce58b8 to 6b73209 Compare September 16, 2026 13:59

vercel Bot deployed to Preview September 16, 2026 14:11 View deployment

Navigation Menu

Uh oh!

✨ feat(base-ui): Spin, Progress, Badge, Result, Pagination, Upload and antd-free Empty - #660

✨ feat(base-ui): Spin, Progress, Badge, Result, Pagination, Upload and antd-free Empty#660
Innei wants to merge 17 commits into
masterfrom
feat/base-ui-batch-seven

Innei commented Sep 13, 2026

Uh oh!

vercel Bot commented Sep 13, 2026 •

edited

Loading

Uh oh!

chatgpt-codex-connector Bot commented Sep 13, 2026 •

edited

Loading

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

chatgpt-codex-connector Bot Sep 13, 2026

Uh oh!

chatgpt-codex-connector Bot Sep 13, 2026

Uh oh!

chatgpt-codex-connector Bot Sep 13, 2026

Uh oh!

pkg-pr-new Bot commented Sep 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

Innei commented Sep 13, 2026

Why

What

Breaking / migration notes

Verification

Uh oh!

vercel Bot commented Sep 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chatgpt-codex-connector Bot commented Sep 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codex Review Summary

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector Bot Sep 13, 2026

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector Bot Sep 13, 2026

Choose a reason for hiding this comment

Uh oh!

chatgpt-codex-connector Bot Sep 13, 2026

Choose a reason for hiding this comment

Uh oh!

pkg-pr-new Bot commented Sep 16, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

vercel Bot commented Sep 13, 2026 •

edited

Loading

chatgpt-codex-connector Bot commented Sep 13, 2026 •

edited

Loading