Free
Pro

Typography

Ply typography is a type-scale directive: plyTypography="display|title|heading|subheading|body|caption|overline". plyHeadingText is the heading step. Copy typography in and put the attribute on native headings and paragraphs — it does not change the HTML tag.

When to use

  • Page titles, section heads, and helper text that should share one scale.
  • When you want copy-in classes instead of inventing another text-* stack.

When not to use

  • One-off marketing lockups that need custom tracking or a display font — write those classes.
  • Prose articles — use the existing Tailwind typography plugin on the article body.

Install with npx ply-ui-cli add typography.

free

View source

Scale

Display

Title

Heading

Subheading

Body copy for paragraphs and helper text.

Caption

Overline

Installation

bash

npx ply-ui-cli add typography

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.

bash

npx -y ply-ui-mcp

Ply provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx ply-ui-cli add typography
// Paths are relative to aliases.components (default: src/app/components)
import { BaseHeadingDirective } from './typography/ply-heading.directive';

@Component({
  selector: 'app-your-component',
  imports: [
    BaseHeadingDirective
  ],
  template: `...`
})
export class YourComponent {}

API for typography — generated from JSDoc in the library source.

API reference for typography
APIMemberTypeDefaultDescription
[plyHeadingText], [plyTypography]classstring''Additional host CSS classes (merged via cn()).
[plyHeadingText], [plyTypography]plyTypographyTypographyVariant'heading'—