Docs
shadcn/ui
New Badge

New Badge

Auto-expiring "New" badge that checks feature newness via useNewFeature(). Renders a shadcn Badge — click to dismiss.

Install

npx shadcn@latest add https://featuredrop.dev/r/new-badge.json

Preview

Usage

import { NewBadge } from "@/components/featuredrop/new-badge"
 
export function Sidebar() {
  return (
    <nav>
      <a href="/analytics">
        Analytics <NewBadge featureKey="analytics" />
      </a>
      <a href="/settings">
        Settings <NewBadge featureKey="settings" label="Updated" />
      </a>
    </nav>
  )
}

Props

PropTypeDefaultDescription
featureKeystringSidebar/feature key to check for newness
labelstring"New"Badge text
classNamestringAdditional Tailwind classes
dismissOnClickbooleantrueWhether clicking dismisses the badge
⚠️

Requires a FeatureDropProvider ancestor with a manifest containing a feature whose sidebarKey matches your featureKey.

shadcn Dependencies

  • badge