データとフィードバック@neumorphism-ui/alert

Alert

アイコン、タイトル、説明を整列できる組み合わせ可能な Alert です。default、success、destructive の各 variant で、色だけでなく border とテキストのコントラストも組み合わせて意味を示します。

@neumorphism-ui/alert

Registry JSON

プレビュー

新しい Registry バージョン

ローカルソースを再インストールすると変更点を確認できます。

同期が完了しました

56 個のコンポーネントが現在のプロジェクトと一致しています。

トークンが見つかりません

先に 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 リファレンス

アクセシビリティ