An enhanced notification card with action buttons, read/unread states, and timestamp display.
Command Palette
Search for a command to run...
Search for a command to run...
An enhanced notification card with action buttons, read/unread states, and timestamp display.
Hey! Just wanted to check in on the project status. Can we schedule a quick call?
Team standup in 15 minutes - Conference Room A
Your scheduled workflow 'Weekly Report' has finished running.
Real-time system updates. Keeps users in the loop without being annoying.
npx shadcn@latest add https://ui.heygaia.io/r/notification-card.jsonimport { NotificationCard } from "@/components/ui/notification-card";
export default function Example() {
return (
<NotificationCard
id="1"
title="New message"
body="You have a new message from the team."
status="unread"
createdAt={new Date()}
actions={[
{ id: "view", label: "View", type: "redirect", style: "primary" },
{ id: "dismiss", label: "Dismiss", type: "api_call" },
]}
onAction={(notifId, actionId) => {
console.log(`Action ${actionId} on notification ${notifId}`);
}}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
| id | string | - | Unique notification identifier |
| title | string | - | Notification title |
| body | string | - | Notification message |
| status | "unread" | "read" | "archived" | "unread" | Read status |
| createdAt | string | Date | - | Creation timestamp |
| actions | NotificationAction[] | [] | Available actions |
| onMarkAsRead | (id) => void | - | Mark as read handler |
| onAction | (notifId, actionId) => void | - | Action button handler |
| loadingActionId | string | - | Action currently loading |
| Property | Type | Description |
|---|---|---|
| id | string | Action identifier |
| label | string | Button text |
| type | "redirect" | "api_call" | "workflow" | "modal" | Action type (affects icon) |
| style | "primary" | "danger" | "default" | Button color |
| executed | boolean | Mark action as already executed |