uix-uiNusrat JahanreviewedSylhet green
2 min ago
Notification
Inbox / activity item. 2 statuses × 2 types.
Israt JahanshippedOrder #1042
Yesterday
import { Avatar } from "@/components/ui/avatar";
import { Notification } from "@/components/ui/notification";
export default function Example() {
return (
<div style={{ width: 440, display: "grid", gap: 4 }}>
<Notification avatar={<Avatar size="sm" initials="NJ" />} name="Nusrat Jahan" action="reviewed" target="Sylhet green" time="2 min ago" />
<Notification status="read" avatar={<Avatar size="sm" initials="IJ" />} name="Israt Jahan" action="shipped" target="Order #1042" time="Yesterday" />
</div>
);
}
Installation
$ npx uix-ui@latest add notificationThis copies the file into components/ui/notification.tsx in your project. npx shadcn@latest add @uix/notification works too.
Usage
import { Notification } from "@/components/ui/notification";
<div style={{ width: 440, display: "grid", gap: 4 }}>
<Notification avatar={<Avatar size="sm" initials="NJ" />} name="Nusrat Jahan" action="reviewed" target="Sylhet green" time="2 min ago" />
<Notification status="read" avatar={<Avatar size="sm" initials="IJ" />} name="Israt Jahan" action="shipped" target="Order #1042" time="Yesterday" />
</div>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
status | unread | read | "unread" | |
avatar | React.ReactNode | – | Avatar at the start (for example <Avatar initials="RS" />). |
name | React.ReactNode | – | |
action | React.ReactNode | – | What happened, for example "commented on". |
target | React.ReactNode | – | |
time | React.ReactNode | – | |
actions | React.ReactNode | – | Buttons under the message (Accept / Decline). |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.ts