Things

The Alert component displays a callout for user attention with support for icons, titles, and descriptions. It supports multiple variants including success, destructive, and warning. Built from scratch using React and native HTML div elements. No UI library dependencies.

Quick Install

Install via shadcn/ui CLI

bash

npx shadcn@latest add https://things.marvlock.dev/registry/ui/alert.json

Usage

tsx

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

<Alert variant="success">
  <AlertTitle>Success!</AlertTitle>
  <AlertDescription>
    Your changes have been saved.
  </AlertDescription>
</Alert>

Examples

Success! Your changes have been saved

This is an alert with icon, title and description.

Default Alert

This is a default alert without any variant.

Error

Something went wrong. Please try again.

Warning

Please review your input before proceeding.