Typography
Heading
A heading, `h1` through `h6`.
Server safeSource
Import
import { Heading } from '@the_viveksingh/vivek-ui'Levels
level picks the tag, h1 through h6, and each level has a default size.
Level 1
Level 2
Level 3
Level 4
<Heading level={1}>Level 1</Heading>
<Heading level={2}>Level 2</Heading>
<Heading level={3}>Level 3</Heading>
<Heading level={4}>Level 4</Heading>Size is independent of level
This is the whole point of the component. Needing a smaller heading is never a reason to pick a deeper tag: doing that breaks the document outline every screen reader relies on.
An h2 that looks small
An h4 that looks large
<Heading level={2} size="md">An h2 that looks small</Heading>
<Heading level={4} size="2xl">An h4 that looks large</Heading>Props
Generated from the package's own type declarations, so this table cannot drift from the code.
| Prop | Type | Default | Description |
|---|---|---|---|
level | 1 | 2 | 3 | 4 | 5 | 6 | — | Semantic heading level, rendered as `h1`–`h6`. Defaults to `2`. |
size | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'hero' | — | Visual size, independent of `level`. Lets you keep a correct document outline without being forced into its default type scale — the usual reason people reach for the wrong heading tag. |
align | 'start' | 'center' | 'end' | — | — |
truncate | boolean | — | Clamp to a single line with an ellipsis. |
Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.
Rendering
Server safe
Heading carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.