Skip to main content

​
Overview

The Typography component provides a flexible, type-safe way to render text elements with consistent styling across your application. It supports all semantic HTML text elements, multiple font weights, and customizable text sizes. Source: src/shared/ui/Typography/Typography.tsx

​
Basic Usage

import Typography from '@/shared/ui/Typography/Typography';

function Example() {
  return (
    <Typography as="h1" weight="bold">
      Welcome to the Auction Platform
    </Typography>
  );
}

​
Props

​
as
TypographyElements
default:"p"
The HTML element to render.Options: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "label"Choose the appropriate semantic element for your content structure and accessibility.
​
children
React.ReactNode
required
The text content or child elements to render inside the typography component.
​
weight
TypographyWeight
default:"normal"
The font weight of the text.Options: "light" | "normal" | "medium" | "bold"
  • light: Lighter weight for subtle text
  • normal: Standard text weight
  • medium: Slightly heavier for emphasis
  • bold: Strong emphasis and headings
​
size
TypographySize
Custom size override for the text.Options: "text-xs" | "text-sm" | "text-md" | "text-base"By default, size is determined by the as prop (e.g., h1 is large, p is base). Use this to override the default sizing.
​
className
string
Additional CSS class names for custom styling.
​
style
React.CSSProperties
Inline styles to apply to the typography element.

​
Headings

​
H1 - Page Title

<Typography as="h1" weight="bold">
  Auction Platform Dashboard
</Typography>

​
H2 - Section Title

<Typography as="h2" weight="medium">
  Active Auctions
</Typography>

​
H3 - Subsection Title

<Typography as="h3" weight="normal">
  Recent Bids
</Typography>

​
H4 - Component Title

<Typography as="h4" weight="light">
  Item Details
</Typography>

​
Paragraphs

​
Default Paragraph

<Typography as="p">
  This is a standard paragraph with default styling.
</Typography>

​
Small Text

<Typography as="p" size="text-sm">
  Small paragraph text for secondary information.
</Typography>

​
Extra Small Text

<Typography as="p" size="text-xs">
  Extra small text for captions and footnotes.
</Typography>

​
Font Weights

Demonstrate different weights with the same element: 
<>
  <Typography as="h2" weight="light">
    Light Heading
  </Typography>
  
  <Typography as="h2" weight="normal">
    Normal Heading
  </Typography>
  
  <Typography as="h2" weight="medium">
    Medium Heading
  </Typography>
  
  <Typography as="h2" weight="bold">
    Bold Heading
  </Typography>
</>

​
Real-World Examples

​
Article Layout

import Typography from '@/shared/ui/Typography/Typography';

function Article() {
  return (
    <article>
      <Typography as="h1" weight="bold">
        Understanding Online Auctions
      </Typography>
      
      <Typography as="p" size="text-sm" style={{ color: '#666' }}>
        Published on March 7, 2026
      </Typography>
      
      <Typography as="p">
        Online auctions have revolutionized the way we buy and sell goods.
        This guide will walk you through everything you need to know.
      </Typography>
      
      <Typography as="h2" weight="medium">
        Getting Started
      </Typography>
      
      <Typography as="p">
        First, you'll need to create an account and verify your identity.
      </Typography>
    </article>
  );
}

​
Auction Card

import Typography from '@/shared/ui/Typography/Typography';
import CardContainer from '@/shared/ui/CardContainer/CardContainer';
import { Button } from '@/shared/ui/button/Button';

function AuctionCard({ title, description, currentBid, timeLeft }) {
  return (
    <CardContainer>
      <Typography as="h3" weight="medium">
        {title}
      </Typography>
      
      <Typography as="p" size="text-sm" style={{ color: '#666' }}>
        {description}
      </Typography>
      
      <div style={{ marginTop: '16px' }}>
        <Typography as="p" size="text-xs" weight="light">
          Current Bid
        </Typography>
        <Typography as="p" weight="bold" style={{ fontSize: '24px', color: '#2563eb' }}>
          ${currentBid}
        </Typography>
      </div>
      
      <Typography as="p" size="text-xs" style={{ color: '#dc2626' }}>
        {timeLeft} remaining
      </Typography>
      
      <Button variant="primary" block>
        Place Bid
      </Button>
    </CardContainer>
  );
}

​
Form Labels and Helper Text

import Typography from '@/shared/ui/Typography/Typography';
import { TextField } from '@/shared/ui/TextField/TextField';

function ProfileForm() {
  return (
    <form>
      <div>
        <Typography as="label" weight="medium">
          Display Name
        </Typography>
        <TextField placeholder="Enter your display name" />
        <Typography as="p" size="text-xs" style={{ color: '#666' }}>
          This is how other users will see your name.
        </Typography>
      </div>
    </form>
  );
}

​
Typography Scale Showcase

import Typography from '@/shared/ui/Typography/Typography';

function TypographyScale() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
      <Typography as="h1" weight="bold">
        Heading 1 Bold
      </Typography>
      
      <Typography as="h2" weight="medium">
        Heading 2 Medium
      </Typography>
      
      <Typography as="h3" weight="normal">
        Heading 3 Normal
      </Typography>
      
      <Typography as="h4" weight="light">
        Heading 4 Light
      </Typography>
      
      <Typography as="p" size="text-base">
        Paragraph Base
      </Typography>
      
      <Typography as="p" size="text-sm">
        Paragraph Small
      </Typography>
      
      <Typography as="p" size="text-xs">
        Paragraph Extra Small
      </Typography>
    </div>
  );
}

​
Status Messages

import Typography from '@/shared/ui/Typography/Typography';
import { CheckCircle, XCircle, AlertCircle } from 'lucide-react';

function StatusMessages() {
  return (
    <>
      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
        <CheckCircle size={16} color="#22c55e" />
        <Typography as="p" size="text-sm" style={{ color: '#22c55e' }}>
          Bid placed successfully!
        </Typography>
      </div>
      
      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
        <XCircle size={16} color="#ef4444" />
        <Typography as="p" size="text-sm" style={{ color: '#ef4444' }}>
          Bid amount must be higher than current bid.
        </Typography>
      </div>
      
      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
        <AlertCircle size={16} color="#f59e0b" />
        <Typography as="p" size="text-sm" style={{ color: '#f59e0b' }}>
          Auction ends in 5 minutes!
        </Typography>
      </div>
    </>
  );
}

​
TypeScript Types

type TypographyElements =
  | "h1"
  | "h2"
  | "h3"
  | "h4"
  | "h5"
  | "h6"
  | "p"
  | "label";

type TypographyWeight = "light" | "normal" | "medium" | "bold";

type TypographySize = "text-base" | "text-md" | "text-sm" | "text-xs";

interface TypographyProps {
  as?: TypographyElements;
  children: React.ReactNode;
  weight?: TypographyWeight;
  size?: TypographySize;
  className?: string;
  style?: React.CSSProperties;
}

​
Accessibility

  • Uses semantic HTML elements (h1-h6, p, label) for proper document structure
  • Maintains heading hierarchy for screen readers and SEO
  • Supports all native HTML attributes through the polymorphic as prop
  • Compatible with ARIA attributes when needed
Always maintain proper heading hierarchy (h1 → h2 → h3, etc.). Skipping heading levels can confuse screen reader users and negatively impact SEO.

​
Best Practices

Choose the as prop based on semantic meaning, not visual appearance. Use headings (h1-h6) for section titles, p for paragraphs, and label for form labels. Adjust visual style with weight and size.
Start with h1 for the main page title, then use h2 for major sections, h3 for subsections, etc. Never skip levels (e.g., h1 → h3).
Establish patterns for font weights:
  • Bold: Primary headings and emphasized content
  • Medium: Secondary headings and important text
  • Normal: Body text and default content
  • Light: De-emphasized text and captions
  • text-base: Default body text
  • text-md: Slightly larger text for emphasis
  • text-sm: Secondary information, captions
  • text-xs: Footnotes, timestamps, metadata

​
Combining with Other Components

Typography works seamlessly with other UI components: 
import Typography from '@/shared/ui/Typography/Typography';
import CardContainer from '@/shared/ui/CardContainer/CardContainer';
import { TextField } from '@/shared/ui/TextField/TextField';
import { Button } from '@/shared/ui/button/Button';

function ContactForm() {
  return (
    <CardContainer>
      <Typography as="h2" weight="bold">
        Get in Touch
      </Typography>
      
      <Typography as="p" size="text-sm" style={{ marginBottom: '24px' }}>
        Have questions? We'd love to hear from you.
      </Typography>
      
      <TextField
        label="Your Message"
        placeholder="Type your message here..."
      />
      
      <Button variant="primary" block>
        Send Message
      </Button>
      
      <Typography as="p" size="text-xs" style={{ color: '#666', marginTop: '12px' }}>
        We typically respond within 24 hours.
      </Typography>
    </CardContainer>
  );
}

TextField

Typography is used internally for TextField labels and helper text

CardContainer

Combine Typography with cards for structured content

Build docs developers (and LLMs) love

Get started for freeTalk to us