데이터와 피드백@neumorphism-ui/alert

Alert

아이콘, 제목, 설명을 정렬하는 조합형 Alert입니다. default, success, destructive 변형이 있으며 모든 변형이 색상 외에 테두리와 텍스트 대비를 함께 사용합니다.

@neumorphism-ui/alert

Registry JSON

미리보기

새 Registry 버전

로컬 소스를 다시 설치하면 변경점을 확인할 수 있습니다.

동기화 완료

56개 컴포넌트가 현재 프로젝트와 일치합니다.

토큰을 찾을 수 없습니다

globals.css에 base 항목을 먼저 설치해 주세요.

설치

npx shadcn@latest add @neumorphism-ui/alert

CLI가 npm 의존성, base 토큰, 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 레퍼런스

접근성