Text

Text component is the used to render text and paragraphs within an interface using well-defined typographic styles. It renders a p tag by default.

import { Text } from "rizzui";

Default

The default style of the Text.

The brown fox jumps over the lazy dog

import { Text } from "rizzui";

export default function App() {
  return <Text>The brown fox jumps over the lazy dog</Text>;
}

Typography

You can change style by just changing tag property in Text component.

p

The brown fox jumps over the lazy dog

i

The brown fox jumps over the lazy dog

del

The brown fox jumps over the lazy dog

mark

The brown fox jumps over the lazy dog

b

The brown fox jumps over the lazy dog

em

The brown fox jumps over the lazy dog

strong

The brown fox jumps over the lazy dog

small

The brown fox jumps over the lazy dog

abbr

HW

q

The brown fox jumps over the lazy dog

kbd

Please press Ctrl + Shift + R to reload this page.

import { Text } from "rizzui";

export default function App() {
  return (
    <>
      <Text as="p">The brown fox jumps over the lazy dog</Text>

      <Text as="i">The brown fox jumps over the lazy dog</Text>

      <Text as="del">The brown fox jumps over the lazy dog</Text>

      <Text as="mark">The brown fox jumps over the lazy dog</Text>

      <Text as="b">The brown fox jumps over the lazy dog</Text>

      <Text as="em">The brown fox jumps over the lazy dog</Text>

      <Text as="strong">The brown fox jumps over the lazy dog</Text>

      <Text as="small">The brown fox jumps over the lazy dog</Text>

      <Text
        as="abbr"
        title="Hello World!"
      >
        HW - abbr
      </Text>

      <Text as="q">The brown fox jumps over the lazy dog</Text>

      <Text as="p">
        Please press <Text as="kbd">Ctrl</Text> + <Text as="kbd">Shift</Text> +{" "}
        <Text as="kbd">R</Text> to reload this page.
      </Text>

      <Text as="p">
        (a+b)<Text as="sup">2</Text> = a<Text as="sup">2</Text> + 2ab + b<Text as="sup">2</Text>
      </Text>

      <Text as="em">
        ∑𝐹 = ρ𝑄(𝓥<Text as="sub">out</Text> &nbsp;-&nbsp; 𝓥
        <Text as="sub">in</Text>)
      </Text>
    </>
  );
}

API Reference

---

Text Props

Here is the API documentation of the Text component.

Props	Type	Description	Default
as	TextTags		"p"
title	abbr string	title attribute only appear when tag is	__
fontWeight	TitleWeights	Add font-weight, fontWeight='normal' won't work with b, strong and q tag	"bold"
className	string	Add custom classes for extra style	__

Text Tags

type TextTags =
  | "p"
  | "b"
  | "span"
  | "strong"
  | "abbr"
  | "q"
  | "del"
  | "em"
  | "i"
  | "kbd"
  | "mark"
  | "small"
  | "sub"
  | "sup";

Title Weights

type TitleWeights = "bold" | "normal" | "medium" | "semibold";