Alert

用于保存结果或注意事项等需要持续显示在相关内容旁的消息。

预览

信息、成功与错误

比较 Registry 更新、同步成功和缺少令牌提示，各有对应图标和说明。

Registry 新版本

重新安装本地源码即可查看变更。

同步完成

56 个组件均与当前项目一致。

找不到 token

请先在 globals.css 中安装 base item。

安装

首次使用此 Registry？请先完成基础配置与共享样式安装。

npx shadcn@latest add @neumorphism-ui/alert

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

Registry JSON

用法

在 Alert 内组合 AlertTitle 和 AlertDescription。根据消息含义选择 variant，同时用文字说明结果，避免只靠颜色表达。

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

export default function Example() {
  return (
    <Alert variant="success">
      <AlertTitle>Changes saved</AlertTitle>
      <AlertDescription>Your workspace is up to date.</AlertDescription>
    </Alert>
  );
}

API 参考

用于排列图标、标题和说明的组合式 Alert。提供 default、success、destructive 三种变体，所有变体都同时使用边框和文字对比度，而不只依赖颜色。

组件	属性	类型	默认值	说明
`Alert`	`variant`	`"default" \| "success" \| "destructive"`	`"default"`	选择消息的语义和视觉状态。
`Alert`	`children`	`React.ReactNode`	`—`	排列图标、AlertTitle 和 AlertDescription。
`Alert`	`className`	`string`	`—`	扩展默认表面样式。

预览

信息、成功与错误

安装

用法

API 参考

无障碍