Notification bell

通知铃铛

带滚动数字徽标和弹簧摆动的 iOS 风格通知铃铛。

交互方式

点击 + 增加通知，铃铛摆动、数字向上滚动；连续点击会叠加摆动。点击 − 减少通知，归零时徽标缩小消失。下方可切换五种徽标颜色，拖动把手可移动调色板。

使用示例

import { useState } from "react"
import { NotificationBell } from "@/components/ui/notification-bell"

export function Demo() {
  const [count, setCount] = useState(8)
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 24 }}>
      <NotificationBell count={count} onClick={() => setCount(0)} />
      <button onClick={() => setCount(value => value + 1)}>增加通知</button>
    </div>
  )
}

参数

参数	类型 / 默认值	说明
`count`	`number`0	未读数量，负数归零，小数向下取整；零时隐藏徽标。
`max`	`number`99	显示上限，超过时显示上限与加号。
`variant`	`"count" \| "dot"`"count"	显示数字或圆点徽标。
`size`	`number`48	按钮直径（像素），图标、数字、徽标按比例缩放。
`color`	`"red" \| "orange" \| "green" \| "blue" \| "violet"`"red"	徽标颜色，自动跟随容器的深浅配色。
`asChild`	`boolean`false	把徽标加在自定义圆形子元素上；该模式不播放铃铛摆动。
`children`	`ReactNode`	asChild 模式下的自定义触发元素。
`onClick`	`MouseEventHandler<HTMLButtonElement>`	打开通知列表等业务操作。
`className`	`string`	附加样式类。组件同时支持根元素对应的原生属性。

安装内容

Install 会将下面的源码文件写入你的项目。需要的 npm 依赖会一起安装，代码可以直接修改。

@radix-ui/react-slotclsxmotiontailwind-merge

components/ui/notification-bell.css
components/ui/notification-bell.tsx
lib/utils.ts

来源

https://www.rareui.com/components/notificationbell

https://github.com/swamimalode07/rare-ui/blob/main/components/ui/notification-bell.tsx

https://github.com/swamimalode07/rare-ui/blob/main/LICENSE