Installation

Prerequisites

Before installing, make sure you have:

• Bun 1.1+ or npm 10+ (Node.js 22.22.3+, 24.15+ or 26+)
• Angular 21 or 22 (tested on 22)
• Tailwind CSS v4

Install Spartan UI

ngx-prompt-kit composes Spartan UI helm primitives. Install and initialize Spartan in your workspace first:

bun add -d @spartan-ng/cli
bun x ng g @spartan-ng/cli:init
bun x ng g @spartan-ng/cli:ui

npm install --save-dev @spartan-ng/cli
npx ng g @spartan-ng/cli:init
npx ng g @spartan-ng/cli:ui

# requires @angular/cli installed globally
ng add @spartan-ng/cli
ng g @spartan-ng/cli:init
ng g @spartan-ng/cli:ui

When prompted, select at minimum these helm components: avatar, button, textarea, tooltip.

Add ngx-prompt-kit

One-time bootstrap. Patches the universal runtime deps (clsx, tailwind-merge) and warns if Spartan isn't detected.

bun x ng add ngx-prompt-kit

npx ng add ngx-prompt-kit

ng add ngx-prompt-kit

Configure install path

Optional but recommended. Picks where component sources land and persists it to components.json so subsequent generates don't ask. Skip this and components will use the default libs/prompt-kit.

bun x ng generate ngx-prompt-kit:init

npx ng generate ngx-prompt-kit:init

ng generate ngx-prompt-kit:init

Add components

Generate any component into your project. The cn() utility lands alongside automatically. Component-specific deps (e.g. marked for markdown, shiki for code-block) are added to your package.json when needed.

bun x ng generate ngx-prompt-kit:composer
bun x ng generate ngx-prompt-kit:chat-turn
bun x ng generate ngx-prompt-kit:markdown
# ...etc.

npx ng generate ngx-prompt-kit:composer
npx ng generate ngx-prompt-kit:chat-turn
npx ng generate ngx-prompt-kit:markdown
# ...etc.

ng generate ngx-prompt-kit:composer
ng generate ngx-prompt-kit:chat-turn
ng generate ngx-prompt-kit:markdown
# ...etc.

Components land at libs/prompt-kit/<name>/ by default. Override per command with --path, or set a workspace-wide path with ng g ngx-prompt-kit:init.

Bulk install (interactive)

Pick multiple components from a checklist instead of generating each one manually. The cn() utility and any component dependencies are still installed automatically.

bun x ng generate ngx-prompt-kit:ui

npx ng generate ngx-prompt-kit:ui

ng generate ngx-prompt-kit:ui

Skip the prompt with --components=composer,chat-turn,markdown.

Usage

Import the component into a standalone Angular component and use it:

import { Component, signal } from '@angular/core';
import { PkComposerImports } from 'libs/prompt-kit/composer';

@Component({
  selector: 'app-chat',
  imports: [PkComposerImports],
  template: `
    <div class="rounded-2xl border bg-background px-3 pt-2 pb-3">
      <pk-composer
        placeholder="Ask anything..."
        [(value)]="value"
        (submitted)="onSubmit($event)"
      />
    </div>
  `,
})
export class Chat {
  protected readonly value = signal('');
  protected onSubmit(text: string): void {
    console.log('submitted:', text);
  }
}