数据与反馈@neumorphism-ui/alert

Alert

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

@neumorphism-ui/alert

Registry JSON

预览

Registry 新版本

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

同步完成

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

找不到 token

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

安装

npx shadcn@latest add @neumorphism-ui/alert

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置。

用法

Import

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

Example

<Alert variant="success">
  <svg aria-hidden="true" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 4 4L19 6" /></svg>
  <AlertTitle>更改已保存</AlertTitle>
  <AlertDescription>
    所有团队成员都可以看到这些更改。
  </AlertDescription>
</Alert>

API 参考

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

预览

安装

用法

Import

Example

API 参考

无障碍