# @react-md/typography

> The base package for including typography for react-md.

Latest version **5.1.6** (published 2023-12-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install @react-md/typography
pnpm add @react-md/typography
yarn add @react-md/typography
bun add @react-md/typography
```

## Health

**Score 40/100 (D)** — status: abandoned.

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

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 5.1.6 |
| Published | 2023-12-11 |
| First published | 2019-03-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 192.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2324 |
| Author | Mikkel Laursen |
| Maintainers | mlaursen |
| Keywords | react-md, material design, react, component, components, typography |

## Links

- npm: https://www.npmjs.com/package/@react-md/typography
- Repository: https://github.com/mlaursen/react-md
- Homepage: https://react-md.dev/packages/typography/demos
- Issues: https://github.com/mlaursen/react-md/issues
- npm.io page: https://npm.io/package/@react-md/typography

## Dependencies (3)

- [classnames](https://npm.io/package/classnames.md) ^2.3.1
- [@react-md/theme](https://npm.io/package/@react-md/theme.md) ^5.1.6
- [@react-md/utils](https://npm.io/package/@react-md/utils.md) ^5.1.6

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 5.1.6 (latest) — 2023-12-11
- 3.0.0-alpha.0 (next) — 2021-08-11
- 5.1.3 — 2022-05-07
- 5.1.2 — 2022-04-02
- 5.1.0 — 2022-03-18
- 5.0.0 — 2022-01-31
- 4.0.3 — 2022-01-01
- 4.0.1 — 2021-11-27
- 4.0.0 — 2021-11-24
- 3.1.0 — 2021-09-10
- 3.0.0 — 2021-08-13
- 2.9.1 — 2021-07-27
- 2.9.0 — 2021-07-18
- 2.8.4 — 2021-06-10
- 2.8.3 — 2021-05-18
- … 41 more at https://npm.io/package/@react-md/typography/versions

## README

# @react-md/typography

This package is used to include typography into your application. There are 13
different font styles included with reasonable defaults, but they can also
easily be updated with custom values.

This package is mostly for generating the base typography onto different classes
throughout your app, but it also exposes `Typography` and `TextContainer`
components to help add typography throughout your app. There is also an
accessibility helper component named `SrOnly` that allows you to display text to
screen readers only.

If you'd like to change the typography values, check out the
[SassDoc page](https://react-md.dev/packages/typography/sassdoc) on the
documentation site.

## Installation

```sh
npm install --save @react-md/typography
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/typography/demos) for live
examples and more customization information, but an example usage is shown
below.

<!-- DOCS_REMOVE_END -->

## Usage

```tsx
import { render } from "react-dom";
import { Typography, TextContainer } from "@react-md/typography";

const App = () => (
  <TextContainer>
    <Typography type="headline-1">Headline 1</Typography>
    <Typography type="headline-2">Headline 2</Typography>
    <Typography type="headline-3">Headline 3</Typography>
    <Typography type="headline-4">Headline 4</Typography>
    <Typography type="headline-5">Headline 5</Typography>
    <Typography type="headline-6">Headline 6</Typography>
    <Typography type="subtitle-1">Subtitle 1</Typography>
    <Typography type="subtitle-2">Subtitle 2</Typography>
    <Typography type="body-1">Body 1</Typography>
    <Typography type="body-2">Body 2</Typography>
    <Typography type="overline">Overline</Typography>
    <Typography type="caption" component="p">
      Caption
    </Typography>
  </TextContainer>
);

render(<App />, document.getElementById("root"));
```

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