Chakra-UI

I♥️Components

Text

|

Chakra Docs

|

⦾ The Chakra-UI Text component is a versatile tool for rendering text and paragraphs within a user interface. It provides a wide range of functionality and customization options.

The Text component can be imported as follows:

Examples

Customizing Font Size

⦾ One of the fundamental features of the Text component is the ability to adjust the font size. You can accomplish this by passing the fontSize prop. This example showcases the 10 different predefined font sizes in Chakra.

fontSize="6xl"

fontSize="5xl"

fontSize="4xl"

fontSize="3xl"

fontSize="2xl"

fontSize="xl"

fontSize="lg"

fontSize="md"

fontSize="sm"

fontSize="xs"

Truncating Text

⦾ If you need to truncate text after a specific number of lines, you can use the noOfLines prop. This feature is useful when dealing with long paragraphs that may exceed the available space. This feature is also full responsive, so the noOfLines prop can take an array of values to truncate text at different screen sizes. In this example, you can experiment with how the text will render when the numOfLines property is set to different values.
noOfLines = 3

Once upon a time, in the vast plains of Africa, there lived a magnificent rhinoceros named Ricardo. Ricardo was a gentle giant, known for his massive horn and calm demeanor. He roamed freely across the savannah, always mindful of his surroundings. Ricardo had a unique story that captured the hearts of all who encountered him. Born with a distinctive pattern on his tough skin resembling a constellation, he became a symbol of strength and beauty. Despite his immense size, Ricardo possessed a kind soul. He would often be seen mingling with other animals, offering protection and support whenever they needed it. His presence alone brought a sense of tranquility to the wilderness. One sunny day, while Ricardo grazed peacefully near a watering hole, he spotted a family of playful elephants. Intrigued by their jovial antics, he decided to join in their games. The elephants welcomed him with open hearts, and together they created memories that would last a lifetime. As time passed, news of Ricardo's gentle nature spread far and wide. People from distant lands yearned to catch a glimpse of this remarkable rhino. They traveled great distances to witness his majestic presence and learn from his serene aura. Ricardo's story served as a reminder that strength could coexist with compassion. His remarkable journey touched the lives of many, inspiring them to embrace their unique qualities and treat others with kindness. And so, Ricardo the rhino continued his adventures, traversing the plains and leaving a trail of wonder and awe in his wake. His legacy lived on, forever etched in the hearts of those who knew him, as a symbol of resilience, grace, and the extraordinary power of a gentle spirit.

Overriding the Text Style

⦾ By default, the Text component renders as a <span> element. However, you can override this behavior by using the as prop. This allows you to render the text as a different HTML element.
<Text as="b">
Bold
<Text as="i">
Italic
<Text as="u">
Underline
<Text as="abbr">
I18N
<Text as="cite">
Citation
<Text as="del">
Deleted
<Text as="em">
Emphasis
<Text as="ins">
Inserted
<Text as="kbd">
Keyboard
<Text as="mark">
Mark
<Text as="q">
Quote
<Text as="s">
Strikethrough
<Text as="samp">
Sample
<Text as="sub">
Subscript
<Text as="sup">
Superscript

Did you know?

Creative Idea No. 1

Gradient Text: There are many ways to call attention to a particular block of text. This example shows you how to display text with a subtle gradient effect to add visual appeal and draw attention to important information, while at the same time not overwhelming the user visually.

Discover the Magic

Code

Creative Idea No. 2

Dynamic Text: This example showcases text in a carousel manner, engaging users and adding visual interest, which is great for any website or application. This method can be utilized to highlight key messages, display quotes or slogans, or present dynamic information in an eye-catching manner. So that you can try it out yourself, we offer you the ability to input three lines of text of your choosing and see the animation in action.

Stay Connected

Explore the Possibilities

Unleash Your Creativity

Code

Creative Idea No. 3

Interactive Story: One of the best uses of text is story-telling. This example creates an interactive storytelling experience for users. The story is navigated through a series of choices, which guide the narrative in different directions based on the user's selections.

Code

copyright © 2023 IHeartComponents | evanmarie.com

created with love by the I♥️Components team using

Chakra-UIRemix

Special thanks to Stefan Bohacek / Generative Placeholders.