Notification Card

An enhanced notification card with action buttons, read/unread states, and timestamp display.

New message from Alex

Hey! Just wanted to check in on the project status. Can we schedule a quick call?

Dec 15

Calendar event reminder

Team standup in 15 minutes - Conference Room A

Dec 15

Task completed

Your scheduled workflow 'Weekly Report' has finished running.

Dec 15

Usage in Gaia

Real-time system updates. Keeps users in the loop without being annoying.

Features

Status States - Unread, read, and archived visual states
Action Buttons - Multiple action types with icons (redirect, API call, workflow, modal)
Action Styles - Primary, danger, and default button styles
Loading State - Show loading spinner for async actions
Executed State - Visual indication when action has been completed
Timestamps - Smart relative time formatting (5m ago, 2h ago, etc.)
Mark as Read - One-click mark as read functionality

Installation

npx shadcn@latest add https://ui.heygaia.io/r/notification-card.json

Usage

import { 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}`);
      }}
    />
  );
}

Props

NotificationCard

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

NotificationAction

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

Holo Card Pricing Card

On This Page

Meet GAIA

Your open-source, proactive personal AI assistant with 200+ integrations. GAIA combines todos, goals, calendar, and email into one system, turns tasks into automated workflows, and completes work instead of just tracking it. Open-source and self-hostable with support for custom automations and multi-step workflows.

Features

Status States - Unread, read, and archived visual states

Action Buttons - Multiple action types with icons (redirect, API call, workflow, modal)

Action Styles - Primary, danger, and default button styles

Loading State - Show loading spinner for async actions

Executed State - Visual indication when action has been completed

Timestamps - Smart relative time formatting (5m ago, 2h ago, etc.)

Mark as Read - One-click mark as read functionality

Usage

import { 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}`);
      }}
    />
  );
}

Props

NotificationCard

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

NotificationAction

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