reflex/docs/library/chakra/typography/heading.md

---

components:

- rx.chakra.Heading

---

import reflex as rx

Heading

The Heading component takes in a string and displays it as a heading.

rx.chakra.heading("Hello World!")

The size can be changed using the size prop.

rx.chakra.vstack(
    rx.chakra.heading("Hello World!", size= "sm", color="red"),
    rx.chakra.heading("Hello World!", size= "md", color="blue"),
    rx.chakra.heading("Hello World!", size= "lg", color="green"),
    rx.chakra.heading("Hello World!", size= "xl", color="blue"),
    rx.chakra.heading("Hello World!", size= "2xl", color="red"),
    rx.chakra.heading("Hello World!", size= "3xl", color="blue"),
    rx.chakra.heading("Hello World!", size= "4xl", color="green"),
)

It can also be styled using regular CSS styles.

rx.chakra.heading("Hello World!", font_size="2em")