Components
Client Only
Installation
pnpm dlx @docyrus/cli add @docyrus/ui-notifications-panelUsage
import {
NotificationsPanel
} from "@docyrus/ui/components/notifications-panel";
<NotificationsPanel
variant="default"
size="sm"
ref={...}
title="Notifications"
headerAction={...}
tabs={...}
label="..."
count={0}
active
onClick={() => {}}
notifications={NotificationItem[]}
footer={...}
onNotificationAction={() => {}}
/>Variants
| Variant | Description |
|---|---|
default | Default style |
elevated | Elevated — shadow-md |
Sizes
| Size | Description |
|---|---|
sm | Small — max-w-sm |
default | Default — max-w-md |
lg | Large — max-w-lg |
full | full — w-full |
API Reference
| Prop | Type | Default |
|---|---|---|
variant | "default" | "elevated" | "default" |
size | "sm" | "default" | "lg" | "full" | "default" |
ref | Ref<HTMLDivElement> | — |
title | string | 'Notifications' |
headerAction | ReactNode | — |
tabs | unknown | — |
label | string | — |
count | number | — |
active | boolean | — |
onClick | () => void | — |
notifications | Array<NotificationItem> | — |
footer | ReactNode | — |
onNotificationAction | (notificationId: string, action: string) => void | — |
className | string | — |
Notification Stack
A stacked notification card system with swipe-to-dismiss gestures, auto-pagination, action buttons, and animated transitions.
Pivot Calendar
Calendar component that pivots time-based statistics across four layouts — full month, days of a week, days of a month, or months of a year — with grouping, tooltips, and local or remote aggregation.