Import
import { Heading, H1, H2, H3, H4, H5, H6 } from "@sugarcoat/ui-nxt";Usage
<Heading as="h1" size="1">Page Title</Heading>
// Or use specific components
<H1>Page Title</H1>
<H2>Section Title</H2>Basic Usage#
Use the Heading component with the as prop or the specific H1-H6 components.
Basic Heading
Heading Levels#
Use specific heading components for semantic HTML.
H1
H2
H3
H4
H5
H6
Sizes#
Control the visual size independently from the semantic level.
Size 1 (Largest)
Size 2
Size 3
Size 4
Size 5
Size 6 (Smallest)
Weights#
Control the font weight of headings.
Normal Weight
Bold Weight
Numeric Weights
Colors#
Apply different color schemes to headings.
Heading Color
Primary Color
Accent Color
Success Color
Error Color
Centered#
Center align the heading text.
Centered
Gradient Text#
Apply gradient effects to headings (requires additional CSS setup).
Gradient
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| as | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "h1" | HTML heading element to render |
| size | "1" | "2" | "3" | "4" | "5" | "6" | "normal" | "inherit" | "normal" | Visual size of the heading |
| weight | "1"-"9" | "normal" | "bold" | "inherit" | "normal" | Font weight |
| color | "primary" | "accent" | "error" | "success" | "heading" | "text" | "black" | "white" | "inherit" | "inherit" | Text color |
| center | boolean | false | Center align the text |
| gradient | boolean | false | Enable gradient text effect |
Specific Heading Components#
The library also exports specific heading components (H1-H6) that are pre-configured for their respective levels:
| Component | Default Size | Default Element |
|---|---|---|
H1 | "1" | <h1> |
H2 | "2" | <h2> |
H3 | "3" | <h3> |
H4 | "4" | <h4> |
H5 | "5" | <h5> |
H6 | "6" | <h6> |
These components accept the same props as Heading except for as.