@kit-ng-ui/typography

Typography components for Kit UI. Mirrors ant-design's Typography.{Title, Text, Paragraph, Link} API on Angular standalone + signals.

Install

pnpm add @kit-ng-ui/typography @kit-ng-ui/core

Styles

Import the package's stylesheet once at the app level (alongside @kit-ng-ui/core/styles):

// app styles.scss
@use '@kit-ng-ui/core/styles' as *;
@use '@kit-ng-ui/typography/styles' as typography;

Namespaces must be distinct from other @kit-ng-ui/<pkg>/styles imports (Sass collapses the default namespace from the last path segment).

The components themselves carry no styleUrls — the styles are global, BEM-flat, and live in a single stylesheet so the bundle never duplicates rules.

Use

import { Component } from '@angular/core';
import {
  KitTitleComponent,
  KitTextComponent,
  KitParagraphComponent,
  KitLinkComponent,
} from '@kit-ng-ui/typography';

@Component({
  standalone: true,
  imports: [KitTitleComponent, KitTextComponent, KitParagraphComponent, KitLinkComponent],
  template: `
    <kit-title level="1">Introducing Chim Lợn</kit-title>
    <kit-title level="3" type="secondary">A delightful chat experience</kit-title>

    <kit-paragraph>
      Chim Lợn is built on top of <kit-text code>@kit-ng-ui</kit-text>,
      a fully <kit-text strong>signal-based</kit-text> Angular component library.
    </kit-paragraph>

    <kit-paragraph type="secondary" [ellipsisRows]="2">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </kit-paragraph>

    <kit-link href="https://chim-lon.vn" target="_blank" rel="noopener">Visit chim-lon.vn</kit-link>
    <kit-link type="danger" href="#delete">Delete account</kit-link>
  `,
})
export class Demo {}

API

Shared modifiers (all four components)

| Input | Type | Default | Description | | ----------- | ----------------------------------------------------- | ------- | ------------------------------------------ | | type | 'secondary' \| 'success' \| 'warning' \| 'danger' \| null | null | Semantic color intent | | disabled | boolean | false | Tints with disabled color, disables links | | underline | boolean | false | Underline decoration | | delete | boolean | false | Strike-through decoration | | italic | boolean | false | Italic font style |

<kit-text>

Inline <span>. Adds three text-only modifiers:

| Input | Type | Default | Description | | ----------- | --------- | ------- | --------------------------------------------- | | strong | boolean | false | Semibold weight | | mark | boolean | false | Highlighter background (warning tint) | | code | boolean | false | Monospace pill — inline <code> look | | keyboard | boolean | false | Monospace pill with bottom border — <kbd> |

<kit-paragraph>

Block <p>. Inherits every <kit-text> modifier plus:

| Input | Type | Default | Description | | -------------- | --------- | ------- | ------------------------------------------------------------ | | ellipsis | boolean | false | Single-line ellipsis. Ignored if ellipsisRows > 0. | | ellipsisRows | number | 0 | Multi-line clamp. 0 disables clamping. |

<kit-title>

Semantic heading. Renders <h1> … <h5> based on level.

| Input | Type | Default | Description | | -------- | --------------------- | ------- | ----------------- | | level | 1 \| 2 \| 3 \| 4 \| 5 | 1 | Heading level |

strong is implied (titles are always semibold) so it has no input. All other shared modifiers apply.

<kit-link>

Anchor styled with the brand color. Disables become non-navigable but stay focusable-stop free (tabindex="-1").

| Input | Type | Default | Description | | ---------- | ---------------- | ------- | ----------------------------------------------------- | | href | string \| null | null | Target URL | | target | string \| null | null | Anchor target attribute | | rel | string \| null | null | Anchor rel attribute (use noopener for _blank) | | strong | boolean | false | Semibold weight |

Behavior notes

• <kit-title> swaps the underlying tag (h1..h5) when level changes — useful for nested sections without losing the semantic outline.
• <kit-paragraph> line clamping uses -webkit-line-clamp, supported in every modern browser. ellipsis and ellipsisRows are mutually exclusive; ellipsisRows wins when both are set.
• <kit-link> does not navigate when disabled (the href attribute is removed) but stays focusable for screen readers; pair with ariaLabel on context.
• Combine modifiers freely — underline + delete is rendered as text-decoration: underline line-through;.
• Styles use semantic CSS variables only; re-themes propagate without recompiling.