GitHub Stars · Animate UI

展示仓库 GitHub 星数的组件：数字滚动计数，星星自下而上填满，并撒出粒子。

安装

自有原语直接来自 @animate-ui/react，不依赖 Radix UI、Base UI 或 React Aria；装上包即可使用。

终端

bun add @animate-ui/react motion

用法

直接从 @animate-ui/react 的对应子路径引入，下面就是完整示例；样式由你的类名决定。

github-stars.tsx

import {
  GithubStars,
  GithubStarsIcon,
  GithubStarsLogo,
  GithubStarsNumber,
  GithubStarsParticles,
} from '@animate-ui/react/primitives/github-stars';

export function Stars() {
  return (
    <GithubStars
      username="imskyleen"
      repo="animate-ui"
      className="flex items-center gap-2"
    >
      <GithubStarsLogo className="size-6" />
      <GithubStarsNumber />
      <GithubStarsParticles>
        <GithubStarsIcon icon={StarIcon} className="size-4" color="gold" />
      </GithubStarsParticles>
    </GithubStars>
  );
}

动效

数据加载后数字从 0 滚动到真实星数，使用 Sliding Number 的逐位滚轮。
星星随计数从底部填充，结束时粒子向外爆开；减少动效下直接显示最终数值。

所有时长都会乘以 AnimateUIProvider 的 tempo，并遵守系统的减少动效设置。

API

动效相关的 transition 与 exitTransition 是 Animate UI 唯一新增的属性；其余 props 见上表。

属性	类型	默认值
asChild	`boolean`	`false`
username	`string`	`—`
repo	`string`	`—`
value	`number`	`—`
delay	`number`	`0`
children	`React.ReactNode`	`—`
inView	`boolean`	`false`
inViewOnce	`boolean`	`true`
inViewMargin	`string`	`'0px'`
…props	`HTMLMotionProps<'div'>`	`—`
padStart	`boolean`	`true`
…props	`Omit<SlidingNumberProps, 'number' \| 'fromNumber'>`	`—`
icon	`React.ElementType`	`—`
color	`string`	`'currentColor'`
activeClassName	`string`	`—`
…props	`React.ComponentProps<T>`	`—`
children	`React.ReactElement`	`—`
size	`number`	`4`
…props	`ParticlesEffectProps`	`—`

未列出的属性与上游 API 完全一致，可在官方文档查阅。

内容对应官方文档 2026-10-18 版本。