Skip to main content
components

Typography

Semantic text primitives: Paragraph, Description, Info, PageTitle, and PageHeader.

Package@g4rcez/componentsSectionPrimitives

Examples

Paragraph and Description

Paragraph renders body text. Description renders smaller secondary text.

Paragraph & Description

This is a Paragraph component. It renders with base font size and snug line height.

This is a Description. It uses a smaller font and secondary color, ideal for captions and helper text.

tsx
import { Paragraph, Description } from "@g4rcez/components";

function TextPrimitives() {
  return (
    <div className="flex flex-col gap-4">
      <Paragraph>
        This is a Paragraph component. It renders with base font size and
        snug line height.
      </Paragraph>
      <Description>
        This is a Description. It uses a smaller font and secondary color,
        ideal for captions and helper text.
      </Description>
    </div>
  );
}

Info

Info pairs a label with a value, optionally rendered in a row or column layout.

Info
StatusActive
Plan:Professional
Disabled fieldLocked value
tsx
import { Info } from "@g4rcez/components";

function InfoComponent() {
  return (
    <div className="flex flex-col gap-4">
      <Info label="Status">Active</Info>
      <Info label="Plan" row>Professional</Info>
      <Info label="Disabled field" disabled="true">Locked value</Info>
    </div>
  );
}

PageTitle and PageHeader

PageTitle renders a large h2 + description pair. PageHeader adds a flex row with actions slot.

PageTitle & PageHeader

Dashboard

Overview of your account activity.

Users

Manage your team members.

tsx
import { PageTitle, PageHeader } from "@g4rcez/components";
import { Button } from "@g4rcez/components";

function PageHeaders() {
  return (
    <div className="flex flex-col gap-8">
      <PageTitle title="Dashboard">
        Overview of your account activity.
      </PageTitle>
      <PageHeader title="Users" description="Manage your team members.">
        <Button theme="success">Invite user</Button>
      </PageHeader>
    </div>
  );
}

When to use Typography

Use when

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

Avoid when

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

Accessibility

Keep the Typography 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.