UI Overview

Components are the building blocks for your app's user interface (UI). They are the visual elements that make up your app, like buttons, text, and images.

Component Basics

Components are made up of children and props.

Children

* Text or other Reflex components nested inside a component. * Passed as **positional arguments**.

Props

* Attributes that affect the behavior and appearance of a component. * Passed as **keyword arguments**.

Children

* Text or other Reflex components nested inside a component. * Passed as **positional arguments**.

Props

* Attributes that affect the behavior and appearance of a component. * Passed as **keyword arguments**.

Let's take a look at the rx.text component.

Hello World!

rx.text("Hello World!", color="blue", font_size="1.5em")

Here "Hello World!" is the child text to display, while color and font_size are props that modify the appearance of the text.

Another Example

Now let's take a look at a more complex component, which has other components nested inside it. The rx.vstack component is a container that arranges its children vertically.

Accordion

rx.vstack(
    rx.heading("Accordion"),
    rx.accordion.root(
        rx.accordion.item(
            header="First Item",
            content="The first accordion item's content",
        ),
        rx.accordion.item(
            header="Second Item",
            content="The second accordion item's content",
        ),
        rx.accordion.item(
            header="Third item",
            content="The third accordion item's content",
        ),
        width="300px",
    ),
)

Some props are specific to a component. For example, the header and content props of the rx.accordion.item component show the heading and accordion content details of the accordion respectively.

Styling props like color are shared across many components.

You can find all the props for a component by checking its documentation page in the component library.

Pages

Reflex apps are organized into pages. Pages link a specific URL route to a component.

You can create a page by defining a function that returns a component. By default, the function name will be used as the path, but you can also specify a path explicitly.

def index():
    return rx.text("Root Page")


def about():
    return rx.text("About Page")


app = rx.App()
app.add_page(index, route="/")
app.add_page(about, route="/about")

In this example we add a page called index at the root route. If you reflex run the app, you will see the index page at http://localhost:3000. Similarly, the about page will be available at http://localhost:3000/about.