Components — Modern React UI Library

Examples

Basic Heading

Renders children inside an h2 element.

Basic

Welcome to the docs

import { Heading } from "@g4rcez/components/core/heading";

function BasicHeading() {
  return <Heading>Welcome to the docs</Heading>;
}

Heading in Context

Heading used alongside descriptive text to form a content block.

With context

Getting Started

Follow these steps to set up your project.

import { Heading } from "@g4rcez/components/core/heading";

function HeadingInContext() {
  return (
    <div className="flex flex-col gap-2">
      <Heading>Getting Started</Heading>
      <p className="text-secondary text-sm">
        Follow these steps to set up your project.
      </p>
    </div>
  );
}

Multiple Headings

Multiple headings forming a document outline.

Multiple

Section One

Section Two

Section Three

import { Heading } from "@g4rcez/components/core/heading";

function MultipleHeadings() {
  return (
    <div className="flex flex-col gap-4">
      <Heading>Section One</Heading>
      <Heading>Section Two</Heading>
      <Heading>Section Three</Heading>
    </div>
  );
}

When to use Heading

Use when

You need the documented Heading interaction or presentation in a product workflow.

Avoid when

A native HTML element already provides the Heading behavior you need.

Accessibility

Keep the Heading labeled and use its documented keyboard interaction. The component preserves visible focus and communicates state without relying on color alone.

Keep keyboard focus visible and follow the documented key commands.
Provide an accessible name and connect descriptions or errors to the control.