Design System

Props

name	type	default
`font`	montserrat \| barlow-condensed	montserrat
`variant`	captionM \| captionL \| bodyM \| bodyL \| h6 \| h5 \| h4 \| h3 \| h2 \| h1	bodyM
`weight`	normal \| medium \| semibold \| bold	normal
`className`	string	""
`children`	ReactNode	—

How to use typographyVariants in Astro

import { typographyVariants } from "@/components/ui/typography";

<span
  class={typographyVariants({
    font: "montserrat",
    variant: "bodyM",
    weight: "medium",
    className: "",
  })}
>
  Hello There
</span>

How to use Typography component in ReactJS

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

<Typography font="montserrat" variant="bodyM" weight="medium">
  Hello There
</Typography>

Example Available Font Variants

	Montserrat				Barlow Condensed
	captionM	captionL	bodyM	bodyL	h6	h5	h4	h3	h2	h1
	12	14	16	20	24	32	40	48	64	80
normal	Hello There	Hello There	Hello There	Hello There
medium	Hello There	Hello There	Hello There	Hello There	HELLO THERE	HELLO THERE	HELLO THERE	HELLO THERE	HELLO THERE	HELLO THERE
semibold	Hello There	Hello There	Hello There	Hello There	HELLO THERE	HELLO THERE	HELLO THERE	HELLO THERE	HELLO THERE	HELLO THERE
bold	Hello There	Hello There	Hello There	Hello There