Alert

저장 결과나 주의 사항처럼 관련 콘텐츠 옆에 계속 보여야 하는 메시지에 사용합니다.

미리보기

정보·성공·오류 안내

Registry 업데이트, 동기화 완료, 토큰 누락을 각각의 아이콘과 설명으로 비교합니다.

새 Registry 버전

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

동기화 완료

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

토큰을 찾을 수 없습니다

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

설치

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 레퍼런스

접근성