Typography

The Typography component provides a consistent way to render text elements (p, h1–h6, span, etc.) with predefined variants for size, weight, and color.

import { Typography } from "tawuniya/components";

👉 View in Storybook

Props

Prop	Type	Default	Description
as	"p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "label" | "div"	"p"	The HTML tag to render.
size	Variant from typographyVariants	-	Controls text size (e.g., sm, md, lg, xl).
weight	Variant from typographyVariants	-	Controls font weight (e.g., normal, medium, bold).
color	Variant from typographyVariants	-	Controls text color (e.g., default, muted_foreground, primary).
className	string	-	Additional Tailwind CSS classes.
htmlFor	string	-	The for attribute for label elements.
...props	React.HTMLAttributes<HTMLElement> (except color)	-	Standard HTML attributes passed to the rendered element.

Usage

Default Typography

<Typography>
  This is a default paragraph rendered with the Typography component.
</Typography>

Headings

<Typography as="h1" size="xl" weight="bold">
  Page Title
</Typography>

<Typography as="h2" size="lg" weight="medium">
  Section Title
</Typography>

Custom Colors

<Typography color="muted_foreground">
  This is muted text.
</Typography>

<Typography color="primary">
  This is primary-colored text.
</Typography>

Inline Text

<Typography as="span" size="sm" weight="medium">
  Inline text inside a sentence
</Typography>

Variants

• Size

  • xs → Extra small text (text-xs)
  • sm → Small text (text-sm)
  • md → Medium text (text-base) (default)
  • lg → Large text (text-lg)
  • xl → Extra large text (text-xl)
  • xxl → Double extra large text (text-2xl)

• Weight

  • thin → Thin font (font-thin)
  • light → Light font (font-light)
  • normal → Normal font (font-normal) (default)
  • medium → Medium font (font-medium)
  • semibold → Semi-bold font (font-semibold)
  • bold → Bold font (font-bold)

• Color

  • default → Default foreground (text-foreground) (default)
  • primary → Primary color (text-primary)
  • muted_foreground → Muted foreground (text-muted-foreground)
  • success → Success green (text-green-500)
  • error → Error red (text-red-500)
  • warning → Warning yellow (text-yellow-500)
  • white → White (text-white)
  • destructive → Destructive red (text-destructive)

Notes

• Flexible enough to act as both semantic text (p, h1–h6, etc.) and inline elements (span, label).