GitHub

Feedback & utility

Banners, announcements, notifications, onboarding, activity feed.

AnnouncementBar

Compact top-of-page strip for product launches.

We just launched @idinstudio/ui 1.0. See what's new
Use code LAUNCH10 for 10% off any plan, this week only.
Ship 10x faster with our design system.
tsx
<AnnouncementBar icon={<Sparkles />} link={{ href: "#", label: "See what's new" }} dismissible>…</AnnouncementBar>

NotificationItem

Single row — avatar / icon, title, description, time, unread dot.

New comment on 'Homepage redesign'
Azlan Althaf: Looks great, let's ship it.
Ada Pranata invited you to Inviboo
You've been added as an editor.
PR #142 merged to main
Ready to deploy.
tsx
<NotificationItem title="…" time="5m ago" unread />

NotificationCenter

Panel that groups notification items.

Notifications2
  1. Comment on 'Homepage redesign'
    Sarah: Looks great, let's ship it.
  2. Ada Pranata invited you to Inviboo
  3. PR #142 merged to main
  4. Weekly backup complete
View all notifications →
tsx
<NotificationCenter items={items} />

OnboardingChecklist

Guided setup card with progress.

Get started with Inviboo

Complete these five steps to finish setting up.

2/5
  1. Create your first project
  2. Invite your team
  3. Connect your Git provider
  4. Add a payment method
    Add card
  5. Publish your first weekly update
tsx
<OnboardingChecklist items={[...]} showProgress />

ActivityFeed

Timeline of actor / action / target events.

  1. Ada Pranata merged PR #142 ·

  2. Sri Wulandari commented on Homepage redesign ·

  3. Mark Reinhardt approved PR #141 ·

  4. Luca Ferrari uploaded Q2-review.pdf ·

  5. Nadia Hartono created Inviboo workspace ·

tsx
<ActivityFeed items={items} groupByDay />