# @spark-web/heading

> --- title: Heading storybookPath: typography-heading--default isExperimentalPackage: false ---

Latest version **5.2.1** (published 2026-06-15) · 0 weekly downloads

## Install

```sh
npm install @spark-web/heading
pnpm add @spark-web/heading
yarn add @spark-web/heading
bun add @spark-web/heading
```

## Health

**Score 55/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.2.1 |
| Published | 2026-06-15 |
| First published | 2022-04-20 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=14 |
| Dependencies | 6 |
| Unpacked size | 42.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | brighte, brighte-release-bot |

## Links

- npm: https://www.npmjs.com/package/@spark-web/heading
- Repository: https://github.com/brighte-labs/spark-web
- Homepage: https://github.com/brighte-labs/spark-web#readme
- Issues: https://github.com/brighte-labs/spark-web/issues
- npm.io page: https://npm.io/package/@spark-web/heading

## Dependencies (6)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.25.0
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.14.0
- [@spark-web/box](https://npm.io/package/@spark-web/box.md) ^6.0.0
- [@spark-web/text](https://npm.io/package/@spark-web/text.md) ^5.3.0
- [@spark-web/theme](https://npm.io/package/@spark-web/theme.md) ^5.13.0
- [@spark-web/utils](https://npm.io/package/@spark-web/utils.md) ^5.1.0

## Recent versions

- 5.2.1 (latest) — 2026-06-15
- 0.0.0-snapshot-release-20261022060701 (snapshot-release) — 2026-10-22
- 5.1.1-rc.0 (rc) — 2025-02-27
- 0.0.0-snapshot-release-20260827022754 — 2026-08-27
- 5.2.0 — 2026-01-15
- 5.1.3 — 2025-10-20
- 5.1.1 — 2025-09-19
- 5.2.0-rc.1 — 2025-02-25
- 5.2.0-rc.0 — 2025-02-24
- 5.1.0 — 2025-02-18
- 5.0.0 — 2025-02-10
- 5.0.0-rc.31 — 2025-02-10
- 5.0.0-rc.29 — 2025-02-06
- 5.0.0-rc.28 — 2025-02-06
- 5.0.0-rc.27 — 2025-02-05
- … 41 more at https://npm.io/package/@spark-web/heading/versions

## README

---
title: Heading
storybookPath: typography-heading--default
isExperimentalPackage: false
---

Constrained, purposeful heading styles as a component.

## Level

Controls the size of the heading and maps to the appropriate heading element
(`h1`, `h2`, `h3` or `h4`). The rendered element can be overridden with the `as`
prop.

```jsx live
const headingLevels = ['1', '2', '3', '4'];

return (
  <Stack gap="large">
    {headingLevels.map(headingLevel => (
      <Heading key={headingLevel} as="h4" level={headingLevel} tone="neutral">
        Heading level {headingLevel}
      </Heading>
    ))}
  </Stack>
);
```

## Tone

Headings can be either "neutral" or "primary".

```jsx live
<Stack gap="large">
  <Heading level="1" tone="neutral">
    Heading neutral
  </Heading>
  <Heading level="1" tone="primary">
    Heading primary
  </Heading>
</Stack>
```

## Alignment

Text can be aligned with the `align` prop.

```jsx live
<Stack gap="small" dividers>
  <Heading level="3" align="left">
    Left (default)
  </Heading>
  <Heading level="3" align="center">
    Center
  </Heading>
  <Heading level="3" align="right">
    Right
  </Heading>
</Stack>
```

## Truncation

Truncate text to a single line using the `truncate` prop. Useful for displaying
user-generated content that may not fit within your layout.

```jsx live
<Stack gap="large" style={{ width: 200 }}>
  <Heading level="3" truncate>
    The quick brown fox jumps over the lazy
  </Heading>
</Stack>
```

## Contrast

To ensure headings have sufficient contrast, when on a dark background the
foreground colour is inverted.

```jsx live
<Box background="neutral" padding="large" borderRadius="small">
  <Heading level="3">This Heading is inverted to improve contrast.</Heading>
</Box>
```

## Props

<PropsTable displayName="Heading" />

Extra props are passed into the underlying [`Box`](/package/box) component.

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