Typography

Usage

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

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

typography.tsx

Typography

Usage

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

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.