Typography

Typography components for consistent text styling across your application.

Basic Typography

The Typography component provides a flexible way to render text with consistent styling.

Custom Typography

Custom H1 Typography

This is body text with gray color

import { Typography } from "@akitectio/aki-ui";

// Basic typography example with variants
<Typography variant="h1" className="mb-2">
  Custom H1 Typography
</Typography>
<Typography variant="body1" color="secondary">
  This is body text with gray color
</Typography>

Heading Components

Pre-configured heading components for consistent typography hierarchy.

All Heading Levels

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

import { H1, H2, H3, H4, H5, H6 } from "@akitectio/aki-ui";

<H1 className="mb-2">Heading 1</H1>
<H2 className="mb-2">Heading 2</H2>
<H3 className="mb-2">Heading 3</H3>
<H4 className="mb-2">Heading 4</H4>
<H5 className="mb-2">Heading 5</H5>
<H6>Heading 6</H6>

Text Components

Components for different types of text content.

Body Text Variants

This is regular body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is smaller text, often used for captions or secondary information.

This is caption text, typically used for image captions or fine print.

import { Body, SmallText, Caption } from "@akitectio/aki-ui";

<Body className="mb-3">
  This is regular body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</Body>
<SmallText className="mb-3">
  This is smaller text, often used for captions or secondary information.
</SmallText>
<Caption>
  This is caption text, typically used for image captions or fine print.
</Caption>

Semantic Components

Components with semantic meaning and specialized styling.

Subtitle and Overline

OVERLINE TEXT

This is a subtitle

Regular body text follows the subtitle.

import { Overline, Subtitle, Body } from "@akitectio/aki-ui";

<Overline className="mb-2">OVERLINE TEXT</Overline>
<Subtitle className="mb-2">This is a subtitle</Subtitle>
<Body>Regular body text follows the subtitle.</Body>

Links

This paragraph contains a regular link and an external link.

import { Body, Link } from "@akitectio/aki-ui";

<Body className="mb-2">
  This paragraph contains a <Link href="#example">regular link</Link> and an{" "}
  <Link href="#external" external>external link</Link>.
</Body>

Code and Preformatted Text

Components for displaying code and preformatted text.

Inline Code

Use the useState hook to manage component state in React.

import { Body, Code } from "@akitectio/aki-ui";

<Body>
  Use the <Code>useState</Code> hook to manage component state in React.
</Body>

Code Block

function Example() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

import { Pre } from "@akitectio/aki-ui";

<Pre>
{`function Example() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}`}
</Pre>

Form and UI Text

Specialized text components for forms and user interfaces.

Labels and Messages

Email AddressEnter a valid email addressThis field is required

import { Label, HelperText, ErrorText } from "@akitectio/aki-ui";

<div className="space-y-3">
  <Label>Email Address</Label>
  <HelperText>Enter a valid email address</HelperText>
  <ErrorText>This field is required</ErrorText>
</div>

Blockquotes

Components for displaying quoted content.

Blockquote

"Design is not just what it looks like and feels like. Design is how it works."
— Steve Jobs

import { Blockquote } from "@akitectio/aki-ui";

<Blockquote>
  "Design is not just what it looks like and feels like. Design is how it works."
  <footer className="mt-2 text-sm text-gray-600">— Steve Jobs</footer>
</Blockquote>

Typography Variants Showcase

A comprehensive example showing all typography components together.

Complete Typography Example

Heading Hierarchy

Main Title (H1)

Section Title (H2)

Subsection Title (H3)

Minor Heading (H4)

Small Heading (H5)

Smallest Heading (H6)

Text Content

CATEGORY LABEL

Article subtitle goes here

This is the main body text. It provides the primary content and information. It should be easily readable and well-structured.

This is smaller supporting text for additional details.

Image caption or metadata information

Interactive Elements

Visit our homepage or check out our documentation for more information.

Code Examples

Use the useState hook for state management:

const [state, setState] = useState(initialValue);
const handleChange = (newValue) => {
  setState(newValue);
};

Quotations

"Good design is obvious. Great design is transparent."
— Joe Sparano

Form Elements

Input LabelHelpful instructions or contextValidation error message

import { 
  H1, H2, H3, H4, H5, H6,
  Body, SmallText, Caption, 
  Subtitle, Overline,
  Link, Code, Pre, Blockquote,
  Label, HelperText, ErrorText
} from "@akitectio/aki-ui";

<div className="space-y-6 max-w-4xl">
  {/* Headings */}
  <section>
    <H2 className="mb-4">Heading Hierarchy</H2>
    <div className="space-y-2">
      <H1>Main Title (H1)</H1>
      <H2>Section Title (H2)</H2>
      <H3>Subsection Title (H3)</H3>
      <H4>Minor Heading (H4)</H4>
      <H5>Small Heading (H5)</H5>
      <H6>Smallest Heading (H6)</H6>
    </div>
  </section>

  {/* Text Content */}
  <section>
    <H3 className="mb-4">Text Content</H3>
    <Overline className="mb-2">CATEGORY LABEL</Overline>
    <Subtitle className="mb-3">Article subtitle goes here</Subtitle>
    <Body className="mb-3">
      This is the main body text. It provides the primary content and information. 
      It should be easily readable and well-structured.
    </Body>
    <SmallText className="mb-2">
      This is smaller supporting text for additional details.
    </SmallText>
    <Caption>Image caption or metadata information</Caption>
  </section>

  {/* Interactive Elements */}
  <section>
    <H3 className="mb-4">Interactive Elements</H3>
    <Body className="mb-3">
      Visit our <Link href="#home">homepage</Link> or check out our{" "}
      <Link href="#docs" external>documentation</Link> for more information.
    </Body>
  </section>

  {/* Code Examples */}
  <section>
    <H3 className="mb-4">Code Examples</H3>
    <Body className="mb-3">
      Use the <Code>useState</Code> hook for state management:
    </Body>
    <Pre className="mb-4">
{`const [state, setState] = useState(initialValue);
const handleChange = (newValue) => {
  setState(newValue);
};`}
    </Pre>
  </section>

  {/* Quote */}
  <section>
    <H3 className="mb-4">Quotations</H3>
    <Blockquote>
      "Good design is obvious. Great design is transparent."
      <footer className="mt-2 text-sm text-gray-600">— Joe Sparano</footer>
    </Blockquote>
  </section>

  {/* Form Elements */}
  <section>
    <H3 className="mb-4">Form Elements</H3>
    <div className="space-y-2">
      <Label>Input Label</Label>
      <HelperText>Helpful instructions or context</HelperText>
      <ErrorText>Validation error message</ErrorText>
    </div>
  </section>
</div>

Props

Prop	Type	Default	Description
variant	string	body	Typography variant (h1, h2, h3, h4, h5, h6, body, small, caption, etc.)
color	string	-	Text color variant
className	string	-	Additional CSS classes
children	ReactNode	-	Content to display
as	string	-	HTML element to render as
align	string	-	Text alignment (left, center, right, justify)
weight	string	-	Font weight (light, normal, medium, semibold, bold)
noWrap	boolean	false	Prevents text wrapping
truncate	boolean	false	Truncates text with ellipsis