AngularLynx

    Typography

    Nine text styles, from page headings to muted captions, that render as a single <text> element.

    ui-typographysrc/app/app.ts

    Installation

    npx @blotch/dolan add typography
    import { UiText } from '../components/ui/typography';

    Typography imports class-variance-authority (see Installation).

    Usage

    src/app/app.ts
    import { Component } from '@angular/core';
import { UiText } from '../components/ui/typography';

@Component({
  selector: 'app-root',
  imports: [UiText],
  template: `
    <ui-text variant="h1">Order history</ui-text>
    <ui-text variant="muted">Updated a minute ago</ui-text>
  `,
})
export class App {}

    <ui-text> wraps its content in a <text> element and sets the color for you, so the text follows your theme.

    Variants

    VariantClassesUse for
    h1text-4xl font-bold text-foregroundThe page title
    h2text-3xl font-semibold text-foregroundSection titles
    h3text-2xl font-semibold text-foregroundSubsection titles
    h4text-xl font-semibold text-foregroundSmall headings
    ptext-base text-foregroundBody text (the default)
    leadtext-xl text-muted-foregroundAn intro paragraph
    largetext-lg font-semibold text-foregroundEmphasized text
    smalltext-sm font-medium text-foregroundLabels and fine print
    mutedtext-sm text-muted-foregroundCaptions and hints

    Custom classes

    <ui-text variant="p" class="text-primary">Primary text</ui-text>
<ui-text variant="small" class="font-bold text-destructive">
  Payment failed
</ui-text>

    Your classes replace the variant's classes where they conflict, so text-primary wins over text-foreground.

    API

    UiText

    InputTypeDefaultDescription
    variant'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'lead' | 'large' | 'small' | 'muted''p'The text style.
    classstring''Extra Tailwind classes for the text.

    No outputs.

    The file also exports typographyVariants and the TypographyVariant type.