GitHub

Feedback & utility

Banners, announcements, notifications, onboarding, and activity feed. Every sample below is exhaustive — each labeled row shows every severity, variant, and state.

AnnouncementBar

Compact top-of-page strip. Every tone, both alignments, plus icon / link / dismissible.

tone: primary
We just launched @idinstudio/ui 1.0 with the primary tone.
tone: neutral
We just launched @idinstudio/ui 1.0 with the neutral tone.
tone: dark
We just launched @idinstudio/ui 1.0 with the dark tone.
tone: gradient
We just launched @idinstudio/ui 1.0 with the gradient tone.
align: left
Use code LAUNCH10 for 10% off any plan, this week only.
icon + link + dismiss
We just launched @idinstudio/ui 1.0. See what's new
tsx
<AnnouncementBar tone="gradient" icon={<Sparkles />} link={{ href: "#", label: "See what's new" }} dismissible>…</AnnouncementBar>

NotificationItem

Single row — avatar or icon, title, description, time, unread dot. Every severity dot plus icon / avatar / link states.

severity
primary notification
The unread dot takes the severity colour.
info notification
The unread dot takes the severity colour.
success notification
The unread dot takes the severity colour.
warning notification
The unread dot takes the severity colour.
danger notification
The unread dot takes the severity colour.
neutral notification
The unread dot takes the severity colour.
content
New comment on 'Homepage redesign'
Ahmad: Looks great, let's ship it.
Novi Yantika invited you to Inviboo
You've been added as an editor.
PR #142 merged to main
Ready to deploy.
Weekly backup complete
tsx
<NotificationItem icon={<MessageSquare />} title="…" time="5m ago" unread />

NotificationCenter

Panel grouping notification items, with unread count, mark-all-read, and an empty state.

populated
Notifications2
  1. Comment on 'Homepage redesign'
    Ahmad: Looks great, let's ship it.
  2. Novi Yantika invited you to Inviboo
  3. PR #142 merged to main
  4. Weekly backup complete
View all notifications →
empty
Notifications

No notifications yet

tsx
<NotificationCenter items={items} unreadCount={2} onMarkAllRead={() => {}} />

OnboardingChecklist

Guided setup card with progress. Default, collapsible, and a completed (all-done) state.

in progress

Get started with Inviboo

Complete these five steps to finish setting up.

2/5
  1. Completed
    Create your first project
  2. Completed
    Invite your team
  3. Not completed
    Connect your Git provider
  4. Not completed
    Add a payment method
    Add card
  5. Not completed
    Publish your first weekly update
all complete

Setup complete

3/3
  1. Completed
    Create your first project
  2. Completed
    Invite your team
  3. Completed
    Connect your Git provider
tsx
<OnboardingChecklist items={items} showProgress collapsible />

ActivityFeed

Timeline of actor / action / target events with severity dots, day grouping, and empty / loading states. Seeded with Sundanese sample people.

grouped

  1. Ahmad Muhyidin merged PR #142 ·

  2. Novi Yantika commented on Homepage redesign ·

  3. Azlan Althaf approved PR #141 ·

  4. Muhvi Kavandra uploaded Q2-review.pdf ·

  5. Numa Raynatul created Inviboo workspace ·

empty
No activity yet.
loading
  1. Loading activity
tsx
<ActivityFeed items={items} groupByDay />