Package info

Compares current and proposed package versions with change type and expandable dependencies.

Preview

@example/review-uiminor

Current 1.2.0Proposed 1.3.0

Adds compact response controls and draft recovery.

Dependencies (2)

@example/parser ^2.0.0 · runtime
react ^19.0.0 · peer

In action

Compare versions and inspect dependencies

@example/review-uiminor

Current 1.2.0Proposed 1.3.0

Adds compact response controls and draft recovery.

Dependencies (2)

@example/parser ^2.0.0 · runtime
react ^19.0.0 · peer

When to use

Use it for

Review package additions, removals or version changes before an application performs them.
Supply explicit changeType and dependency kinds; the component does not infer semantic version compatibility.
Use actions for application-owned install, compare or inspection controls.

Avoid

Assuming displayed package metadata is fetched, resolved or installed automatically.

Install

React package

npm install @noorddev/vlak-react

Load the stylesheet once at your app root, then import the components you use.

import "@noorddev/vlak-react/css";
import { PackageInfo } from "@noorddev/vlak-react";

Per-component imports are available at @noorddev/vlak-react/components/package-info.

Copy the source

npx @noorddev/vlak-cli add package-info

Adds the component and its dependencies to components/vlak/. Follow the StyleX setup to compile the source in your application.

shadcn registry

npx shadcn add https://vlak.dev/r/package-info.json

Installs the same source through the shadcn CLI.

React

import { PackageInfo } from "@noorddev/vlak-react";

<PackageInfo name="@example/review-ui" currentVersion="1.2.0" newVersion="1.3.0" changeType="minor" description="Adds draft recovery." dependencies={[{ name: "react", version: "^19.0.0", kind: "peer" }]} />

See the integration example to compose these components with your application's model and data.

Props

PackageInfo

Supplied package changes and dependencies; never resolves or installs packages.

Prop	Type	Default	Description
`name`required	`string`
`currentVersion`	`string`
`newVersion`	`string`
`changeType`	`PackageChangeType`
`description`	`ReactNode`
`dependencies`	`PackageDependency[]`
`actions`	`ReactNode`

Also accepts Omit<HTMLAttributes<HTMLElement>, "title">.

The ref reaches HTMLElement.

Keyboard

Keys	Does
`Tab`	Tab reaches dependency disclosure and supplied actions.
`Enter, Space`	Enter or Space toggles the dependency summary.

Accessibility

Current and proposed version labels remain explicit to screen readers.
Change type uses text instead of color alone.
Dependency expansion uses a native details element.

Markup

The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.

npm install @noorddev/vlak

import "@noorddev/vlak/css";

<article class="rs-package-info" aria-label="Package @example/review-ui"><header class="rs-package-info-header"><code class="rs-package-info-name">@example/review-ui</code></header><div class="rs-package-info-versions"><span>Current 1.2.0</span><strong>Proposed 1.3.0</strong></div><p class="rs-package-info-description">Adds draft recovery.</p></article>

Classes

.rs-package-info.rs-package-info-header.rs-package-info-name.rs-package-info-versions.rs-package-info-description.rs-package-info-list.rs-package-info-actions

Depends on

Badge Collapsible

Use elsewhere

Markdown reference Registry JSON Source AI integration guide