@tailng-ui/components

Ready-to-use styled Angular components for TailNG UI, built on top of @tailng-ui/primitives with accessibility-first behavior and clean APIs.

@tailng-ui/components provides styled components across navigation, form, layout, overlay, feedback, and utility categories.

Installation

pnpm

pnpm add @tailng-ui/components @tailng-ui/primitives

yarn

yarn add @tailng-ui/components @tailng-ui/primitives

npm

npm install @tailng-ui/components @tailng-ui/primitives

Peer dependencies:

• @angular/core ^21.1.0
• tslib ^2.3.0

Quick example

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

@Component({
  standalone: true,
  imports: [TngButton],
  template: `<tng-button tone="success">Continue</tng-button>`,
})
export class ExampleComponent {}

What you get

• Styled wrappers over TailNG primitives with production-ready defaults.
• Accessible behavior inherited from headless primitive contracts.
• Composable APIs that remain flexible for app-specific customization.
• Consistent package surface across component groups.

Package surface

The root package exports component groups:

• navigation
• form
• layout
• overlay
• feedback
• utility

When to use components vs primitives

• Use @tailng-ui/components when you want ready-made styled building blocks.
• Use @tailng-ui/primitives when you need full control over markup and styling.

Documentation

• Package docs: https://tailng.dev
• Repository: https://github.com/tailng/tailng-ui

License

See the repository license at the root of the monorepo.