gh-vuer-ai-vuer-skill-marketplace-skills-vuer-uikit/docs/components/version-badge.md

1. Home
2. Components
3. Version Badge

Version Badge

Displays the package version with git commit hash. Includes both a high-level component with boolean flags and a low-level component for custom values.

High-Level Component (UIKitBadge)

Uses boolean flags to control which parts of the badge are displayed. All flags default to false - pass them as true to enable each element.

vuer-uikit v0.0.1172a52049vuer-uikit v0.0.117vuer-uikit 0.0.1172a52049v0.0.117vuer-uikit 2a520490.0.117```jsx // Full badge with all elements

// Package, version with prefix, clickable (no hash)

// Package, version without prefix, with hash

// Version with prefix only

// Package and hash only (no version)

// Version only (no prefix)

### Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| package | boolean | false | Show package name |
| version | boolean | false | Show version number |
| prefix | boolean | false | Add "v" prefix to version |
| hash | boolean | false | Show git commit hash |
| linkable | boolean | false | Make badge clickable (links to npm/github) |
| className | string | - | Additional CSS classes |

## Low-Level Component (PackageBadge)

Takes explicit values for full customization.

custom [v1.2.3](https://www.npmjs.com/package/@org/custom-package/v/1.2.3)[abc123](https://github.com/vuer-ai/vuer-uikit/commit/abc123)mylib 2.0.0v3.0.0-beta.1[def456](https://github.com/vuer-ai/vuer-uikit/commit/def456)```jsx
// Custom package with all values
<PackageBadge
  packageName="custom"
  versionText="v1.2.3"
  gitHash="abc123"
  packageFullName="@org/custom-package"
/>

// Non-linkable custom badge
<PackageBadge
  packageName="mylib"
  versionText="2.0.0"
  linkable={false}
/>

// Version and hash only
<PackageBadge
  versionText="v3.0.0-beta.1"
  gitHash="def456"
/>

Props

Prop	Type	Default	Description
packageName	string	-	Package name to display
packageFullName	string	-	Full npm package name for link
versionText	string	-	Version string to display
gitHash	string	-	Git commit hash to display
linkable	boolean	true	Make badge clickable
className	string	-	Additional CSS classes

Programmatic Access

import { PACKAGE_VERSION, GIT_HASH } from '@vuer-ai/vuer-uikit';

console.log(`Version: ${PACKAGE_VERSION}, Commit: ${GIT_HASH}`);