Primitive / Atomstable

Heading

Semantic heading primitive with independent style scaling.

@glinui/uiComponent: heading

Installation

Install from the package for shared ownership or from the registry for copy-paste control.

Package Manager

pnpm add @glinui/ui @glinui/tokens

Registry

pnpm dlx @glinui/cli@latest add heading

Usage

Levels

Hero heading

Section heading

Subsection heading

TSX

1import { Heading } from "@glinui/ui"
2
3export function Demo() {
4  return (
5    <div className="space-y-2">
6      <Heading level={1} size="lg">Hero heading</Heading>
7      <Heading level={2}>Section heading</Heading>
8      <Heading level={3} size="sm">Subsection heading</Heading>
9    </div>
10  )
11}

Glass

Frosted heading

TSX

1import { Heading } from "@glinui/ui"
2
3export function Demo() {
4  return <Heading variant="glass">Frosted heading</Heading>
5}

Accessibility

Preserves semantic heading hierarchy with configurable level.

Reduced Motion

No motion-dependent behavior.

API Reference

Prop	Type	Required	Default	Description
`level`	`HeadingLevel`	No	`2`	Semantic heading tag level.
`variant`	`"default" \| "glass" \| "outline" \| "ghost"`	No	`default`	Surface treatment.
`size`	`"sm" \| "md" \| "lg"`	No	`md`	Typographic scale independent of level.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { Heading } from "@glinui/ui"

Source Files

heading.tsx

Dependencies

@glinui/ui

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/heading.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-02-19T17:59:28.468Z · Full index: /docs/api-metadata

Primary Props Type

HeadingProps

`HeadingProps`

Prop	Type	Required	Default	Description
`level`	`HeadingLevel`	No	`2`	-
`size`	`"sm" \| "md" \| "lg"`	No	`"md"`	Variant option from headingVariants.
`variant`	`"default" \| "glass" \| "outline" \| "ghost"`	No	`"default"`	Variant option from headingVariants.