Package Info for Radix UI

A package shows up as one card: its name, a badge for the kind of change, and the version it moved from and to. A description and its own dependencies can sit below.

Use it when an agent adds, removes or upgrades a dependency, so the reader sees each change before accepting it. A whole lockfile diff is too much for cards; show it in a Code Block. In React, Radix UI draws the card; the versions come from you.

Installation

Anatomy

PackageInfo
├── PackageInfoHeader
│   ├── PackageInfoName
│   └── PackageInfoChangeType
├── PackageInfoVersion
├── PackageInfoDescription
└── PackageInfoContent
    └── PackageInfoDependencies
        └── PackageInfoDependency

PackageInfo holds name, currentVersion, newVersion and changeType, and the parts inside read them, so PackageInfoName, PackageInfoChangeType and PackageInfoVersion need no props of their own.

Usage

import {
  PackageInfo, PackageInfoChangeType, PackageInfoDescription,
  PackageInfoHeader, PackageInfoName, PackageInfoVersion,
} from "@/components/ui/package-info";

<PackageInfo
  changeType="major"
  currentVersion="18.2.0"
  name="react"
  newVersion="19.0.0"
>
  <PackageInfoHeader>
    <PackageInfoName />
    <PackageInfoChangeType />
  </PackageInfoHeader>
  <PackageInfoVersion />
  <PackageInfoDescription>
    A JavaScript library for building user interfaces
  </PackageInfoDescription>
</PackageInfo>

Demos

Change types

The five values of changeType, one package each: major in red, minor in amber, patch in green, added in blue and removed muted. Each is a Badge in its matching variant, with an arrow for a version change, a plus for an added package and a minus for a removed one. An added package has only newVersion, and a removed one only currentVersion, so its row shows one version and no arrow.

Dependencies

PackageInfoDependencies in PackageInfoContent, under a rule: one PackageInfoDependency per package, its name and version range. label renames the list, here with its count. List the dependencies when an upgrade pulls new ones in; for a patch nobody needs them.

Content

PackageInfoContent holds anything, here the breaking changes in a major upgrade, and PackageInfoDescription says what the agent changed to follow them. Use the content for what the reader has to check before accepting the upgrade, not for the package's whole changelog.

Props only

PackageInfo with no children draws the header and the version from its props: the name, the change type's badge when there is one, and the versions it has. Use it for a short list of changes; compose the parts when you need a description or dependencies.

AI SDK

Give the agent a tool that edits the dependencies and returns each change, updateDependencies in this example: the package's name, the version before and the version after. Work out the change type from the two versions:

function changeType(from?: string, to?: string) {
  if (!from) {
    return "added";
  }
  if (!to) {
    return "removed";
  }
  const [before, after] = [from, to].map((version) =>
    version.replace(/^[^\d]*/, "").split(".")
  );
  if (before[0] !== after[0]) {
    return "major";
  }
  return before[1] === after[1] ? "patch" : "minor";
}

Then render a PackageInfo for each change in each call whose output has arrived.

const changes = message.parts
  .filter((part) => part.type === "tool-updateDependencies")
  .filter((part) => part.state === "output-available")
  .flatMap((part) => part.output.changes);

Migrating from AI SDK Elements

If you added Package Info from AI SDK Elements (opens in a new tab), your project has a components/ai-elements/package-info.tsx. Install ours with the command above and import from @/components/ui/package-info instead: every part keeps its name and props, so the code that uses it keeps working. What changes:

• PackageInfoChangeType is a Badge in the theme's variants (destructive, warning, success, info and secondary) instead of fixed reds and greens, and variant picks another one.
• PackageInfoDependencies takes label for its heading, Dependencies by default, and its list is a ul of PackageInfoDependency items.
• The arrows turn around in a right-to-left page, and screen readers hear "18.2.0 to 19.0.0".

FAQ

API Reference