# @cleartrip/ct-design-typography

> Typography component with enhanced styleConfig support for RNW compatibility

Latest version **5.28.0** (published 2026-10-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install @cleartrip/ct-design-typography
pnpm add @cleartrip/ct-design-typography
yarn add @cleartrip/ct-design-typography
bun add @cleartrip/ct-design-typography
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.28.0 |
| Published | 2026-10-21 |
| First published | 2023-10-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 9 |
| Unpacked size | 305.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Kanishk Gupta |
| Maintainers | rahulct_com, supragya.chauhan, nareshkapse_ct, saranshdawra, ct_devops, sidhantrajan, hello_world_arya, ritesh.kumarjena, mohitjaincleartrip, ashwin.ct, ashokmpatel, amansaxena1, aakrishtmalik, prateek.oraon, ashwin-ui-ct, shashi-kumar |

## Links

- npm: https://www.npmjs.com/package/@cleartrip/ct-design-typography
- npm.io page: https://npm.io/package/@cleartrip/ct-design-typography

## Dependencies (9)

- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.14.0
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.14.0
- [@cleartrip/ct-design-theme](https://npm.io/package/@cleartrip/ct-design-theme.md) 5.28.0
- [@cleartrip/ct-design-types](https://npm.io/package/@cleartrip/ct-design-types.md) 5.28.0
- [@cleartrip/ct-design-container](https://npm.io/package/@cleartrip/ct-design-container.md) 5.28.0
- [@cleartrip/ct-design-common-utils](https://npm.io/package/@cleartrip/ct-design-common-utils.md) 5.28.0
- [@cleartrip/ct-design-style-manager](https://npm.io/package/@cleartrip/ct-design-style-manager.md) 5.28.0
- [@cleartrip/ct-design-conditional-wrap](https://npm.io/package/@cleartrip/ct-design-conditional-wrap.md) 5.28.0
- [@cleartrip/ct-design-event-propagation](https://npm.io/package/@cleartrip/ct-design-event-propagation.md) 5.28.0

## Recent versions

- 5.28.0 (latest) — 2026-10-21
- 5.27.0-SNAPSHOT-native-main.16 (SNAPSHOT-native-main) — 2026-10-21
- 5.28.0-SNAPSHOT-holiday-packages-bottomsheet-fix.0 (SNAPSHOT-holiday-packages-bottomsheet-fix) — 2026-10-21
- 5.28.0-SNAPSHOT-inter-2.0 (SNAPSHOT-inter-2) — 2026-10-20
- 5.28.0-SNAPSHOT-impression-fix.0 (SNAPSHOT-impression-fix) — 2026-10-16
- 5.28.0-SNAPSHOT-inter-1.0 (SNAPSHOT-inter-1) — 2026-10-14
- 3.33.0-SNAPSHOT-sme-ct-design-common131026.0 (SNAPSHOT-sme-ct-design-common131026) — 2026-10-13
- 5.28.0-SNAPSHOT-figtree-261013-6.0 (SNAPSHOT-figtree-261013-6) — 2026-10-13
- 5.28.0-SNAPSHOT-figtree-261013-5.0 (SNAPSHOT-figtree-261013-5) — 2026-10-13
- 5.28.0-SNAPSHOT-figtree-261013-4.0 (SNAPSHOT-figtree-261013-4) — 2026-10-13
- 5.28.0-SNAPSHOT-figtree-261013-3.0 (SNAPSHOT-figtree-261013-3) — 2026-10-13
- 5.28.0-SNAPSHOT-figtree-261013-2.0 (SNAPSHOT-figtree-261013-2) — 2026-10-13
- 5.28.0-SNAPSHOT-figtree-261013-1.0 (SNAPSHOT-figtree-261013-1) — 2026-10-13
- 5.27.0-SNAPSHOT-biztrip-snapshot-13oct.0 (SNAPSHOT-biztrip-snapshot-13oct) — 2026-10-13
- 3.33.0-SNAPSHOT-sme-ct-design-common061026.0 (SNAPSHOT-sme-ct-design-common061026) — 2026-10-06
- … 1005 more at https://npm.io/package/@cleartrip/ct-design-typography/versions

## README

# Typography

Typography component provides consistent text styling across the design system with predefined variants and color schemes.

---

## Installation

```bash
npm install @cleartrip/ct-design-typography
# or
pnpm add @cleartrip/ct-design-typography
```

### Peer dependencies

```bash
# Required for all targets
npm install react

# Web only
npm install react-dom

# React Native only
npm install react-native
```

---

## Usage

### Basic

```tsx
import { Typography, TypographyVariant, TypographyColor } from '@cleartrip/ct-design-typography';

function Example() {
  return (
    <Typography variant={TypographyVariant.B1} color={TypographyColor.PRIMARY}>
      This is sample typography text
    </Typography>
  );
}
```

### Headings

```tsx
<Typography variant={TypographyVariant.HD1} color={TypographyColor.HEADING}>
  Large Display Heading
</Typography>

<Typography variant={TypographyVariant.HM1} color={TypographyColor.HEADING}>
  Medium Heading
</Typography>
```

### Body text

```tsx
<Typography variant={TypographyVariant.B1} color={TypographyColor.PRIMARY}>
  Large body text for important content
</Typography>

<Typography variant={TypographyVariant.B2} color={TypographyColor.SECONDARY}>
  Regular body text with secondary color
</Typography>
```

### Custom styling

```tsx
<Typography
  variant={TypographyVariant.B1}
  color={TypographyColor.PRIMARY}
  styleConfig={{
    text: [{ fontWeight: 'bold', textDecoration: 'underline' }],
  }}
>
  Custom styled text
</Typography>
```

---

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `children` | `ReactNode` | — | ✅ Yes | The content to be displayed within the typography element. |
| `variant` | `TypographyVariantType` | — | ✅ Yes | The variant of the typography, such as 'h1', 'body1', etc. |
| `color` | `TypographyColorType` | — | No | The color of the typography. |
| `isUnderlined` | `boolean` | — | No | If true, adds an underline effect to the typography. |
| `isStriked` | `boolean` | — | No | If true, adds a strikethrough effect to the typography. |
| `isClickable` | `boolean` | — | No | If true, makes the typography clickable. |
| `onClick` | `() => void` | — | No | Callback function triggered on typography click. |
| `colorCode` | `string` | — | No | Color code to override the default color. |
| `showInItalics` | `boolean` | — | No | If true, renders the typography in italics. |
| `width` | `string` | — | No | The width of the typography element. |
| `lineClamp` | `number` | — | No | The number of lines to clamp the text. Ellipsis (...) is added for overflow. |
| `isDisabled` | `boolean` | — | No | If true, disables the typography for user interaction. |
| `componentNode` | `TypographyNodeElementType` | — | No | The type of HTML element to be used for rendering the typography. |
| `styleConfig` | `TypographyStyleConfigProps` | — | No | Style configuration for the typography. |

---

## Variants

### Display (HD)
- `HD1` — Extra large display text
- `HD2` — Large display text  
- `HD3` — Medium display text

### Headings (HM)
- `HM1` — Large heading
- `HM2` — Medium heading
- `HM3` — Small heading
- `HM4` — Extra small heading

### Body (B)
- `B1` — Large body text
- `B2` — Regular body text
- `B3` — Small body text
- `B3CAPS` — Small caps text
- `B4` — Extra small body text
- `B4CAPS` — Extra small caps text

### Paragraphs (P)
- `P1` — Large paragraph
- `P2` — Medium paragraph
- `P3` — Small paragraph

### Labels (L)
- `L1` — Large label
- `L2` — Medium label
- `L3` — Small label

### Special
- `OVERLINE` — Overline text
- `TAG` — Tag text
- `M4BOLD` — Bold variant

---

## Colors

- `PRIMARY` — Primary text color
- `SECONDARY` — Secondary text color
- `TERTIARY` — Tertiary text color
- `HEADING` — Heading color
- `SUBHEADING` — Subheading color
- `SUCCESS` — Success state color
- `ALERT` — Alert/error state color
- `WARNING` — Warning state color
- `DISABLED` — Disabled state color
- `LINK` — Link color
- `NEUTRAL` — Neutral color
- `BRAND` — Brand color

---

## Migration

If migrating from previous versions:

```diff
- import { Typography } from 'yagami/core/components';
+ import { Typography, TypographyVariant, TypographyColor } from '@cleartrip/ct-design-typography';
```

---
_Source: https://npm.io/package/@cleartrip/ct-design-typography · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._