Headless — Quick Start

import { Component, signal } from '@angular/core';
import { TngCheckbox } from '@tailng-ui/primitives';

@Component({
  imports: [TngCheckbox],
  template: `
    <label>
      <input
        type="checkbox"
        tngCheckbox
        [checked]="checked()"
        (checkedChange)="checked.set($event)"
      />
      <span>Accept terms</span>
    </label>
  `,
})
export class MyForm {
  checked = signal(false);
}

import { Component, signal } from '@angular/core';
import { TngToggle } from '@tailng-ui/primitives';

@Component({
  imports: [TngToggle],
  template: `
    <button
      type="button"
      tngToggle
      [pressed]="on()"
      (pressedChange)="on.set($event)"
    >
      Toggle
    </button>
  `,
})
export class MyToolbar {
  on = signal(false);
}

import { Component, signal } from '@angular/core';
import {
  TngAccordion,
  TngAccordionItem,
  TngAccordionTrigger,
  TngAccordionPanel,
} from '@tailng-ui/primitives';

@Component({
  imports: [TngAccordion, TngAccordionItem, TngAccordionTrigger, TngAccordionPanel],
  template: `
    <section
      tngAccordion
      type="single"
      [value]="open()"
      (valueChange)="open.set($event)"
    >
      <article tngAccordionItem value="a">
        <button tngAccordionTrigger>Section A</button>
        <div tngAccordionPanel>Content A</div>
      </article>
      <article tngAccordionItem value="b">
        <button tngAccordionTrigger>Section B</button>
        <div tngAccordionPanel>Content B</div>
      </article>
    </section>
  `,
})
export class MyAccordion {
  open = signal<string | null>('a');
}

import { ApplicationConfig } from '@angular/core';
import { provideTailngTheme } from '@tailng-ui/theme';

export const appConfig: ApplicationConfig = {
  providers: [
    provideTailngTheme(),
  ],
};

tailng list
pnpm dlx tailng list