Installation

Step 1 — Add the dependency

Add to your project's package.json. Pin to a specific tag for stability, or use main to track the latest:

{
  "dependencies": {
    "@jetpack-labs/jetpack-ui": "github:JetpackTo/jetpack-ui#main"
  }
}

Or pin to a specific release tag:

{
  "dependencies": {
    "@jetpack-labs/jetpack-ui": "github:JetpackTo/jetpack-ui#v1.0.0"
  }
}

Then install:

npm install

SSH required. Resolving the GitHub source requires an SSH key added to GitHub. No token or .npmrc setup needed for Jetpack team members.

To upgrade later, change the ref and re-run npm install.

Step 2 — Register the plugin

Register all components globally in your app entry point:

// src/main.ts
import { createApp } from 'vue'
import JetpackUI from '@jetpack-labs/jetpack-ui'
import '@jetpack-labs/jetpack-ui/style.css'
import App from './App.vue'

createApp(App).use(JetpackUI).mount('#app')

The plugin registers every component globally (e.g. <Button>, <Card>, <Input>) — no per-file imports needed.

Step 3 — Use components

<template>
  <Card>
    <FormGroup label="Name" for="name" required>
      <Input id="name" v-model="name" placeholder="Enter name" />
    </FormGroup>
    <template #footer>
      <Button variant="secondary" @click="cancel">Cancel</Button>
      <Button type="submit" :loading="saving">Save</Button>
    </template>
  </Card>
</template>

Individual imports (tree-shaking)

If you prefer explicit imports for smaller bundles:

import { Button, Card, Input } from '@jetpack-labs/jetpack-ui'

Components imported this way are not globally registered — you must include them in the components option or use <script setup>.

TypeScript

The library ships .d.ts files alongside the compiled JS. No extra @types/ package is needed. All props are fully typed.