Typography

Import

import { Text, Paragraph, Strong, Italic, Underline, Strikethrough } from "@sugarcoat/ui-nxt";

Usage

<Paragraph>This is a paragraph of text.</Paragraph>
<Text>Inline text</Text>
<Strong>Bold text</Strong>

Text Component#

The base inline text component that renders as a  by default.

Basic Text

Paragraph Component#

Block-level text that renders as a  element.

Paragraph

Strong (Bold)#

Bold text that renders as a  element.

Strong

Italic (Emphasis)#

Italic text that renders as an  element.

Italic

Underline#

Underlined text that renders as a  element.

Underline

Strikethrough#

Strikethrough text that renders as a <del> element.

Strikethrough

Sizes#

Control the font size with the size prop. Available sizes are 1-12, normal, or inherit.

Size 1 (Smallest)

Size 3

Size 5

Size 7

Size 9

Weights#

Control the font weight with the weight prop.

Normal Weight

Bold Weight

Numeric Weights

Centered Text#

Center align text with the center prop.

Centered

Gradient Text#

Apply gradient effects to text (requires additional CSS setup).

Gradient

Combining Styles#

Combine multiple text components for rich formatting.

Combined Styles

Polymorphic Rendering#

Use the as prop to render as different HTML elements.

As Different Elements

Props#

All typography components share these props:

Prop	Type	Default	Description
size	"1"-"12" \| "normal" \| "inherit"	"normal"	Font size
weight	"1"-"9" \| "normal" \| "bold" \| "inherit"	"normal"	Font weight
center	boolean	false	Center align the text
gradient	boolean	false	Enable gradient text effect
as	ElementType	varies	HTML element to render as
css	SystemStyleObject	-	Additional Panda CSS styles

Component Defaults#

Component	Default Element	Default Weight
`Text`	`<span>`	`normal`
`Paragraph`	`<p>`	`normal`
`Strong`	`<strong>`	`bold`
`Italic`	`<em>`	`normal`
`Underline`	`<u>`	`normal`
`Strikethrough`	`<del>`	`normal`