Activity and Notifications

2 layouts · 9 components

Notification Center

Category tabs, unread counts, mark-all-as-read, per-row dismissal, and a real empty state.

1280px

Notifications

3 unread
Unread
3
Needs your attention
Mentions
2
1 new mention
Security
1
1 alert open
  • Jonas mentioned youNew4m

    Can you review the pricing block before standup?

  • Invoice paidNew1h

    Northwind settled invoice #4821 for $14,800.

  • New sign-in locationNew3h

    A session started from Frankfurt using SSO.

  • New teammate joined6h

    Ravi Shah accepted your invite as an editor.

  • Card expiring soon1d

    The card ending 4421 expires at the end of the month.

  • Mei replied to your thread1d

    Agreed — let's split the data table block.

Components used

  • Avatar
  • Badge
  • Button
  • Card
  • Dropdown
  • EmptyState
  • Heading
  • Tabs
  • Text

Install

npm install @coloxo/ui

The block imports only from @coloxo/ui and lucide-react. Styling uses the package token layer, so no Tailwind setup is required.