Typography

A self-styled text component that renders semantic HTML elements (e.g., h1–h6, p, span, ul, li) with consistent typography, supporting both el and variant props for maximum flexibility.

Usage

Basic usage example to quickly see how the Typography works.

Typography Tailored for Your Needs.

Scalable, Stylish, and Simple.

import { Typography } from "@/ui/typography";

export function TypographyDemo() {
  return (
    <div>
      <Typography el="h3" prose="h1">Typography Tailored for Your Needs.</Typography>
      <Typography el="h4" prose="h1">Scalable, Stylish, and Simple.</Typography>
    </div>
  );
}

Properties

Interactive configurator to explore customization options for the Typography component.

Typography that precision, simple, descriptive and directly.

Prose

API References

Styles API

Styles API	Type	Default	Annotation
unstyled`?`	`boolean`	`false`	if `true`, all default styles will be removed

Props API

Props API	Type	Default	Annotation
el`?`	`React.ElementType`	`div` \|`prose`	Determines the type of tag to be used.
prose`?`	`TypographyProps<T>["prose"]`	`undefined`	Type of `prose` that matches the html tag will be created as a `<Typography>` element before `el` is defined.

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.

typography.tsx