https://github.com/peerigon/uberschrift

Magic heading levels for React
https://github.com/peerigon/uberschrift

Last synced: 11 months ago
JSON representation

Magic heading levels for React

• Host: GitHub
• URL: https://github.com/peerigon/uberschrift
• Owner: peerigon
• License: unlicense
• Created: 2022-12-01T20:16:25.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2025-02-28T07:53:05.000Z (over 1 year ago)
• Last Synced: 2025-08-09T18:04:53.852Z (11 months ago)
• Language: TypeScript
• Homepage: https://uberschrift.peerigon.io/
• Size: 457 KB
• Stars: 3
• Watchers: 14
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# `uberschrift 🧢`

**Zero-dependency magic heading levels for React and Vue.js**

---

|  |  |

| ----------- | ------------------------------------------------------------ |

| uberschrift | [![npm version badge](https://img.shields.io/npm/v/uberschrift?style=flat-square)](https://npmjs.com/package/uberschrift) |

| vueberschrift | [![npm version badge](https://img.shields.io/npm/v/vueberschrift?style=flat-square)](https://npmjs.com/package/vueberschrift) |

| Issues | [![Issue badge](https://img.shields.io/github/issues/peerigon/uberschrift?style=flat-square)](https://github.com/peerigon/uberschrift/issues) |

| CI status | [![CI badge](https://github.com/peerigon/uberschrift/actions/workflows/ci.yml/badge.svg)](https://github.com/peerigon/uberschrift/actions/workflows/pull_request.yml) |

---

## [📖 Full Documentation](https://uberschrift.peerigon.io)

## 🛠️ Usage

### ⚛️ React

```sh

npm install uberschrift

```

`page.tsx`:

```tsx

import { Hx, HxBoundary } from "uberschrift";

Outside of the top level: this will be an h1

  Within the top level: this will be an h2

  

    Within the 2nd level: this will be an h3

    

      Within the 3rd level: this will be an h4

    

    Again within the 2nd level: this will be an h3

  

```

renders as:

```html

Outside of the top level: this will be an h1

Within the top level: this will be an h2

Within the 2nd level: this will be an h3

Within the 3rd level: this will be an h4

Again within the 2nd level: this will be an h3

```


### 🌲 Vue.js

```sh

npm install vueberschrift

```

`App.vue`:

```html

  import { Hx, HxBoundary } from "vueberschrift";

  Outside of the top level: this will be an h1

  

    Within the top level: this will be an h2

    

      Within the 2nd level: this will be an h3

    

  

```

---

## Sponsors

[](https://peerigon.com)

---

## 👩‍💻 Development

```sh

npm install

npx turbo dev

npx turbo test

npx turbo build

```