UI Components

Alert

An inline feedback component for displaying informational, success, warning, or error messages

Quick Preview

Changes saved

Your profile has been updated successfully.

Installation

# lucide-react is required
npm install lucide-react

// Copy the Alert component from
src/components/ui/Alert.tsx

Usage

import { Alert } from '@/components/ui/Alert'

export default function Example() {
  return (
    <Alert type="info" title="Heads up" dismissible>
      You can update your settings at any time.
    </Alert>
  )
}

Examples

All Types

This is an informational message.

Your changes have been saved.

You are running low on storage.

Failed to connect. Please retry.

With Title

Storage almost full

You have used 90% of your 5 GB storage. Upgrade your plan to add more space.

Dismissible Alert

New feature available

We just launched dark mode. Try it out in your settings.

Prompt Preview

Copy a prompt that recreates this UI

Paste this into your AI coding assistant to generate code that closely matches the reference, including color, size, shape, typography, spacing, and polish.

Copy-ready AI prompt

Starts from the current visual reference and project constraints.

Build a ui component named Alert in React/Next.js.
Goal: recreate the same overall UI and behavior as the Alert reference from a component gallery.
What it needs to communicate: An inline feedback component for displaying informational, success, warning, or error messages.

Project constraints:
- Use Next.js 16.2.6 with the App Router, React 19, TypeScript strict mode, and Tailwind CSS v4.
- Do not create a tailwind.config.js file. Use Tailwind v4 utilities and CSS variables where design tokens are needed.
- If you are implementing this inside the same project, use the Prompt font via next/font/google. If not, use the closest equivalent typeface.
- Return production-ready code with imports, responsive behavior, keyboard accessibility, and polished empty, hover, focus, active, and disabled states where relevant.
- Match the reference closely: color palette, spacing scale, border radius, shadows, icon scale, typography hierarchy, and motion timing.

Component-specific expectations:
- Keep the API concise and reusable.
- Make visual states feel polished and consistent across variants and sizes.
- Existing documented dependencies: lucide-react
- No explicit color literals were found in the examples. Match the live reference and the project accent color when appropriate.

Props to support:
- type: "info" | "success" | "warning" | "error" — default "info" — Type of alert — determines color and icon
- title: string — Optional bold title above the message
- children: React.ReactNode — required — Alert message content
- dismissible: boolean — default false — Shows a close button to dismiss the alert
- className: string — Additional CSS classes

Reference usage patterns:
- Info Alert

```tsx
<Alert type="info">Your session will expire in 5 minutes.</Alert>
```

- All Types

```tsx
<div className="space-y-3">
  <Alert type="info">This is an informational message.</Alert>
  <Alert type="success" title="Payment confirmed">Your subscription is now active.</Alert>
  <Alert type="warning" title="Almost at limit">You have used 90% of your storage.</Alert>
  <Alert type="error" title="Something went wrong">Unable to save changes. Please try again.</Alert>
</div>
```

Feature expectations:
- 4 semantic types: info, success, warning, error
- Auto icon per type (lucide-react)
- Optional title prop
- Dismissible with X button (Client Component)
- ARIA role="alert" for accessibility

Output requirements:
- Return complete code, not pseudocode.
- Include all necessary imports and helper types.
- Keep the implementation accessible, responsive, and visually finished.
- Match the reference for color, size, shape, typography, spacing, and interaction states as closely as possible.
- If multiple files are needed, organize them cleanly and explain the file structure briefly.

Tweak only product-specific copy or data after the first generation pass.

Props

Prop	Type	Default	Description
`type`	`"info" \| "success" \| "warning" \| "error"`	`"info"`	Type of alert — determines color and icon
`title`	`string`	-	Optional bold title above the message
`children`*	`React.ReactNode`	-	Alert message content
`dismissible`	`boolean`	`false`	Shows a close button to dismiss the alert
`className`	`string`	-	Additional CSS classes

Features

✓4 semantic types: info, success, warning, error
✓Auto icon per type (lucide-react)
✓Optional title prop
✓Dismissible with X button (Client Component)
✓ARIA role="alert" for accessibility