Twigs Logo
Playground
Get StartedComponentsIconsEditorTools

Heading

A component for rendering headings with consistent typography and styling. Supports different sizes and weights while maintaining semantic HTML structure.

Import

import { Heading } from "@sparrowengg/twigs-react";

Usage

const HeadingExample = () => {
  return (
    <Box css={{ display: "flex", flexDirection: "column", gap: "$4" }}>
      <Heading size="h1" weight="bold">Heading 1 - Bold</Heading>
      <Heading size="h2" weight="semibold">Heading 2 - Semibold</Heading>
      <Heading size="h3" weight="medium">Heading 3 - Medium</Heading>
      <Heading size="h4" weight="regular">Heading 4 - Regular</Heading>
      <Heading size="h5" as="h1">Heading 5 as H1</Heading>
      <Heading size="h6" as="h2">Heading 6 as H2</Heading>
    </Box>
  );
};

Changing the size of the heading does not change its html element type. It only changes the font size of the heading. If you want to change the html element type, you can use the as prop.

Props

Heading

PropTypeDefault
size?
'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
'h1'
weight?
'regular' | 'medium' | 'semibold' | 'bold'
'bold'
as?
React.ElementType
-
css?
object
-

Text

A versatile text component for displaying content with consistent typography. Perfect for headings, body text, captions, and labels with customizable sizes, weights, and truncation options.

Link

A flexible link component that renders as a styled anchor element with composition support. Perfect for navigation, external links, and custom link implementations.