Typography

The Typography component provides a set of styled text utilities, enabling consistent text displays across your application.

Usage

Header

<Typography.Header variant="h2" size={'6'}>
  This is a Header
</Typography.Header>

Text

<Typography.Text size={'3'}>This is a Text</Typography.Text>

Link

<Typography.Link href="https://www.example.com">Click me</Typography.Link>

Code

<Typography.Code>This is code</Typography.Code>

Gradient

<Typography.Gradient>This is Gradient</Typography.Gradient>

API

Props

Header

Prop	Type	Default	Required
className	string	-	-
style	CSSProperties	-	-
children	ReactNode	-	-
variant	'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'	-	-
MarginProps	Token<MarginProps>	-	-
color	ThemeAccentColor	-	-
highContrast	boolean	-	-

Text

Prop	Type	Default	Required
className	string	-	-
style	CSSProperties	-	-
children	ReactNode	-	-
variant	'p' | 'label' | 'div' | 'span'	-	-
MarginProps	Token<MarginProps>	-	-
color	ThemeAccentColor	-	-
highContrast	boolean	-	-

Link

Prop	Type	Default	Required
className	string	-	-
style	CSSProperties	-	-
children	ReactNode	-	-
href	string	-	-
color	ThemeAccentColor	-	-
highContrast	boolean	-	-

Code

Prop	Type	Default	Required
className	string	-	-
style	CSSProperties	-	-
children	ReactNode	-	-
MarginProps	Token<MarginProps>	-	-
color	ThemeAccentColor	-	-
radius	ThemeRadius	-	-
highContrast	boolean	-	-

Gradient

Prop	Type	Default	Required
className	string	-	-
style	CSSProperties	-	-
children	ReactNode	-	-
gradientColor	[string, string]	['#915eff', '#9eb2ff']	Yes
MarginProps	Token<MarginProps>	-	-