# Creating your first addon (/docs/quickstart)

In this guide you will create a small theme addon, then build and package it for installation in Mr. Tick. This is a simple way to learn the same project structure used by other integrations. Start in a separate project and install the published SDK:

```bash
npm init -y
npm install @mr-tick/sdk@^0.11.0
npm install -D typescript tsup @types/node
```

Configure TypeScript with `strict: true`, `target: ES2022`, `module: ESNext` and `moduleResolution: bundler`; set `type: module` in package.json. Create manifest.yaml and src/index.ts:

```yaml
id: example-addon
name: Example Addon
version: 0.1.0
author: Example
shortDescription: SDK example
description: Example using the published SDK
capabilities:
  - theme
requiredApiVersion: '>=0.11.0'
```

```ts
import type { AddonContext, AddonTheme, IAddon } from '@mr-tick/sdk'

const theme: AddonTheme = {
  id: 'ocean',
  name: 'Ocean',
  css: ':root { --primary: oklch(0.6 0.15 240); } .dark { --primary: oklch(0.75 0.12 240); }',
}

export default class OceanAddon implements IAddon {
  activate(context: AddonContext): void {
    context.contributions.themes.register(theme)
  }

  deactivate(): void {}
}
```

Register contributions in `activate` and return without waiting for runtime readiness. The host cleans up registered contributions on deactivation; close your own sockets, jobs and clients in `deactivate`.

```bash
npx tsup src/index.ts --format esm,cjs --dts --clean
npx mr-tick validate .
npx mr-tick pack . --download-url https://example.com/releases/example-addon.tladdon
```

Install the resulting `.tladdon` through the addon manager; a compiled JavaScript file alone is not an installation package. The CLI derives the package API range from its SDK version. Repositories managed by Changesets release through changesets and CI; never manually bump versions or rewrite release history.

See [authentication](/docs/capabilities/auth), [OAuth PKCE](/docs/apis/oauth-pkce) and [vault and events](/docs/apis/vault-and-events).