Getting StartedInstallation and setup guides 5
LayoutWorkflow and structural layout components 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 5
FormInput and selection components 17
UtilityGeneral-purpose interface utilities 7
NavigationMenu surfaces and hierarchical actions 7

Plain CSS Setup

Build TailNG UI with semantic tokens and plain CSS only. No Tailwind dependency required.

Getting Started

Plain CSS Setup

Set up TailNG Components with semantic tokens using vanilla CSS.

1. Install TailNG packages

Add the component, primitives, cdk, theme, and icons packages to your workspace.

pnpm

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

2. Register theme providers

Register the TailNG theme provider once in your Angular app configuration.

Configure app providers

ts
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. Add global semantic tokens

Import TailNG component contracts and define your token values in styles.css.

Define global tokens

css
/* src/styles.css */
@import '@tailng-ui/theme/component-contracts/index.css';

:root {
  --tng-semantic-background-canvas: #ffffff;
  --tng-semantic-background-surface: #f8fafc;
  --tng-semantic-background-base: #ffffff;
  --tng-semantic-foreground-primary: #0f172a;
  --tng-semantic-foreground-secondary: #475569;
  --tng-semantic-border-subtle: #cbd5e1;
  --tng-semantic-border-strong: #94a3b8;
  --tng-semantic-accent-brand: #2563eb;
  --tng-semantic-focus-ring: rgba(37, 99, 235, 0.35);
}

4. Compose components with plain CSS

Use TailNG components directly and tune styling at micro-level with CSS variables.

Component markup

html
<section class="demo-stack">
  <tng-input
    type="text"
    placeholder="TailNG docs"
    ariaLabel="Project name"
  ></tng-input>

  <tng-button class="demo-primary-action">Create project</tng-button>
</section>

Component styles

css
/* src/app/app.css */
.demo-stack {
  display: grid;
  gap: 0.75rem;
  max-width: 22rem;
}

.demo-primary-action {
  --tng-semantic-accent-brand: #0f766e;
  --tng-semantic-focus-ring: rgba(15, 118, 110, 0.35);
}