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

iThe brown fox jumps over the lazy dog

delThe brown fox jumps over the lazy dog

markThe brown fox jumps over the lazy dog

bThe brown fox jumps over the lazy dog

emThe brown fox jumps over the lazy dog

strongThe brown fox jumps over the lazy dog

smallThe brown fox jumps over the lazy dog

abbrHW

qThe brown fox jumps over the lazy dog

kbd

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

sup

(a+b)² = a² + 2ab + b²

sub∑𝐹 = ρ𝑄(𝓥_out  -  𝓥_in)

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";