ui / feedback

Alert

Accessible alert and status messaging in four semantic tones.

PREVIEW READY

LIVE PREVIEWDARK / LIGHT COMPATIBLE

System information

Your registry output is current and ready to install.

Validation passed

All component contracts are satisfied.

INSTALL / SOURCE REGISTRY

Add Alert to your project

The command adds the component source and its DesignOS base dependency.

$pnpm dlx shadcn@latest add https://designos.h4rithd.com/r/alert.json

registry/default/ui/alert.tsx

import * as React from "react"
import { CircleAlert, CircleCheck, Info, TriangleAlert } from "lucide-react"
import { clsx as cn } from "clsx"
import "@/components/designos/designos.css"

const icons = { info: Info, success: CircleCheck, warning: TriangleAlert, danger: CircleAlert }

export function Alert({ tone = "info", title, children, className, ...props }: React.HTMLAttributes<HTMLDivElement> & { tone?: keyof typeof icons; title: React.ReactNode }) {
  const Icon = icons[tone]
  return (
    <div role={tone === "danger" ? "alert" : "status"} className={cn("dos-alert", tone !== "info" && `dos-alert--${tone}`, className)} {...props}>
      <Icon aria-hidden="true" />
      <strong className="dos-alert__title">{title}</strong>
      <div className="dos-alert__description">{children}</div>
    </div>
  )
}

Component contract

Source-owned after installation
Dark and light theme variables
Keyboard and visible-focus behavior
Reduced-motion fallback
Responsive from 320px upward
IBM Plex Sans + JetBrains Mono hierarchy