Quick start with Components

1. Install the core packages

Add the TailNG Components layer and its peer dependencies to your workspace. Choose your package manager below.

pnpm add @tailng-ui/components @tailng-ui/primitives @tailng-ui/cdk @tailng-ui/theme @tailng-ui/icons

npm install @tailng-ui/components @tailng-ui/primitives @tailng-ui/cdk @tailng-ui/theme @tailng-ui/icons

yarn add @tailng-ui/components @tailng-ui/primitives @tailng-ui/cdk @tailng-ui/theme @tailng-ui/icons

2. Register the TailNG theme

TailNG ships theme tokens and presets so your components share a consistent visual foundation. Register the theme provider once near the root of your Angular app.

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';
import { defaultDarkThemePreset, provideTailngTheme } from '@tailng-ui/theme';
import { routes } from './app.routes';

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

3. Import a component and render it

TailNG Components are standalone. Import them directly into your feature component and use them in the template.

import { Component } from '@angular/core';
import { TngButtonComponent } from '@tailng-ui/components';

@Component({
  selector: 'app-quick-start-example',
  imports: [TngButtonComponent],
  template: `
    <button tngButton variant="primary">Save changes</button>
  `,
})
export class QuickStartExampleComponent {}

4. Try a simple form input

Combine layout and input components to build real product UI quickly. This example uses tng-input with leading adornments.

<tng-input
  type="email"
  placeholder="you@example.com"
  ariaLabel="Email"
  required
></tng-input>

Next steps

From here, you can explore the full component catalog, wire up more advanced primitives, or deepen your theme configuration as your product needs grow.