Introduction

Getting started

ShadNG is a registry-style component library for Angular focused on AI interfaces. Install the components you need, own the code, integrate with whichever LLM stack you prefer.

Requirements

Angular 21+ (Angular 22 supported when GA)
TypeScript 5.9+
Tailwind CSS v4 with OKLCH color support
Standalone components (no NgModule support)
Zoneless compatible (recommended; works with zone.js too)

Install the library

bash

npm install @shadng/prompt-input

@kalvner/shadng-prompt-input ships the full PromptInput family (10 components). Each component is standalone and tree-shakeable — import only what you use.

Peer dependencies (clsx, tailwind-merge) are installed alongside. @angular/core ^21.2.0 is required.

Add the theme

ShadNG ships a two-tier token system (primitives → semantics), fully shadcn-compatible. Import it once in your global stylesheet, then customize the variables for rebrand.

styles.css

@import 'tailwindcss';
@import '@shadng/prompt-input/theme.css';

/* Optional: override primitives or semantics here */
:root {
  --primary: oklch(0.5 0.2 250);  /* your brand color */
}

Use a component

Compose the three core PromptInput pieces in a standalone component:

chat.component.ts

import { Component, signal } from '@angular/core';
import {
  PromptInput,
  PromptInputSubmit,
  PromptInputSubmitEvent,
  PromptInputTextarea,
  PromptInputToolbar,
} from '@shadng/prompt-input';

@Component({
  selector: 'app-chat',
  imports: [PromptInput, PromptInputTextarea, PromptInputToolbar, PromptInputSubmit],
  template: `
    <prompt-input [(value)]="message" (submitted)="onSubmit($event)">
      <prompt-input-textarea placeholder="Ask anything…" />
      <prompt-input-toolbar>
        <prompt-input-submit />
      </prompt-input-toolbar>
    </prompt-input>
  `,
})
export class ChatComponent {
  message = signal('');

  onSubmit(event: PromptInputSubmitEvent) {
    console.log('User submitted:', event.value);
  }
}

See PromptInput for the full container API, or jump to Plain signals for a complete end-to-end streaming example with no AI library.

Editor support (Angular ESLint)

ShadNG ships components with selectors like prompt-input (no library prefix). If your project uses @angular-eslint with the default app prefix, add the ShadNG-allowed prefixes to your rule config.

eslint.config.mjs

{
  '@angular-eslint/component-selector': [
    'error',
    {
      type: 'element',
      style: 'kebab-case',
      // 'app' for your code, 'ai' + multi-word names for ShadNG components.
      prefix: ['app', 'ai', 'prompt-input', 'message', 'tool-call', 'code-block'],
    },
  ],
}

What's next

Browse the PromptInput container — start here
Plain signals integration — wire it to anything
GitHub repository — source, issues, discussions