Quick Start

Start using tailng components in minutes.

Prerequisite

Tailwind CSS must be installed and configured. See Tailwind Setup if you haven’t done this yet.

1) Install tailng packages

yarn add @tailng-ui/ui @tailng-ui/theme @tailng-ui/icons @ng-icons/core

2) Ensure global styles are loaded

tailng styles and tokens must be included once globally.

/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@import '@tailng-ui/theme/css/tailng.css';

3) Use your first component

tailng components work directly in templates.

<tng-button variant="primary">
  Primary Button
</tng-button>

<tng-button variant="outline">
  Outline Button
</tng-button>

4) Compose layouts with primitives

Cards, stacks, and layout helpers are unopinionated and Tailwind-first.

<tng-card [slot]="{ container: 'max-w-sm p-4 space-y-3' }">
  <h3 class="text-lg font-semibold">Card title</h3>
  <p class="text-slate-600">
    Cards are layout primitives with sensible defaults.
  </p>

  <tng-button size="sm">Action</tng-button>
</tng-card>

5) Forms just work

<tng-input
  label="Email"
  placeholder="[email protected]"
></tng-input>

6) Switch themes & modes

Themes are controlled via classes on body.

<body class="mode-light theme-default">
  <app-root></app-root>
</body>

<!-- dark mode -->
<body class="mode-dark theme-default">
  <app-root></app-root>
</body>

Modes: mode-light, mode-dark
Themes: theme-default, theme-slate, theme-indigo, theme-emerald, theme-rose

What’s next?

Explore components
Customize theme tokens
Build layouts using Tailwind utilities + tailng primitives