Alert

Feedback

Displays a prominent message with context and optional actions where an issue or outcome occurs.

React · copy into your project · light and dark themes

Try it

Variant

Your workspace is ready

Three local notes are available to explore.

Loading preview…

Take it with you

Copy the example, API and usage notes for your editor or AI assistant.

Add to your project

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/alert.json

The command includes the component’s shared dependencies. Your project keeps editable source files.

Include the complete example

This example also composes button, icon, presence. Install its parts together:

Terminal

npx shadcn@latest add https://luv-jeri.github.io/cojeev-ui/r/alert.json https://luv-jeri.github.io/cojeev-ui/r/button.json https://luv-jeri.github.io/cojeev-ui/r/icon.json https://luv-jeri.github.io/cojeev-ui/r/presence.json

Using alert

Combine AlertTitle and AlertDescription to explain what happened and what the reader can do next.
Choose a status variant and wire AlertClose to your own dismissal state when the message can be dismissed.

API

Compose the exported parts below. The prop types are read from the React source during the registry build.

Native element or underlying primitive props are inherited where declared, including accessible labels, event handlers and refs.

AlertProps

Prop	Type	Required
`variant`	`"default" \| "info" \| "ok" \| "warn" \| "danger" \| "pink" \| null \| undefined`	No
`size`	`"default" \| null \| undefined`	No
`as`	`React.ElementType`	No

AlertBodyProps

Prop	Type	Required
`variant`	`"default" \| null \| undefined`	No
`size`	`"default" \| null \| undefined`	No
`as`	`React.ElementType`	No

AlertTitleProps

Prop	Type	Required
`variant`	`"default" \| null \| undefined`	No
`size`	`"default" \| null \| undefined`	No
`as`	`React.ElementType`	No

AlertDescriptionProps

Prop	Type	Required
`variant`	`"default" \| null \| undefined`	No
`size`	`"default" \| null \| undefined`	No
`as`	`React.ElementType`	No

AlertKickerProps

Prop	Type	Required
`variant`	`"default" \| null \| undefined`	No
`size`	`"default" \| null \| undefined`	No
`as`	`React.ElementType`	No

AlertIconProps

Prop	Type	Required
`variant`	`"default" \| null \| undefined`	No
`size`	`"default" \| null \| undefined`	No
`as`	`React.ElementType`	No

AlertActionsProps

Prop	Type	Required
`variant`	`"default" \| null \| undefined`	No
`size`	`"default" \| null \| undefined`	No
`as`	`React.ElementType`	No

AlertCloseProps

Prop	Type	Required
`variant`	`"default" \| null \| undefined`	No
`size`	`"default" \| null \| undefined`	No
`as`	`React.ElementType`	No

Accessibility

The root defaults to role="alert"; reserve that announcement priority for messages that need attention.
State the meaning in text instead of relying on the variant color or icon.

States and appearance

resthoverfocusactive

For conditional content, keep a MotionPresence boundary around keyed MotionSurface children. The shared entrance and exit states work with native primitives and respect your motion preference.

Try pointer and keyboard interaction, and switch the appearance control in the navigation to compare light and dark mode. Motion respects reduced motion preferences.