### Initialize Reflex Project

Source: https://github.com/reflex-dev/reflex/blob/main/docs/getting_started/installation.md

Initiates the Reflex project setup, offering options to start with a blank app or use the AI builder. The output shows the prompt for template selection.

```bash
Initializing the web directory.

Get started with a template:
(0) A blank Reflex app.
(1) Try our AI builder.
Which template would you like to use? (0):
```

--------------------------------

### Reflex Installation and Setup Conventions

Source: https://github.com/reflex-dev/reflex/blob/main/docs/getting_started/installation.md

This section provides essential guidelines for AI agents and developers working with Reflex. It outlines key differences from other frameworks, best practices for state management, component usage, and command execution, and emphasizes the importance of using the provided rules file for consistent development.

```text
# Reflex conventions

- Reflex is pure Python that compiles to a React frontend. Do NOT write JS, HTML, or JSX.
- Components are function calls that return components; pass props as keyword args.
- NEVER use plain Python control flow on state Vars inside the render tree.
  No `if`, `for`, `len()`, or f-strings over a Var — use `rx.cond`, `rx.foreach`,
  and Var operators instead. (This is the most common mistake.)
- State lives in `rx.State` subclasses. State only mutates inside event-handler
  methods — never at module load or render time. Derived values use `@rx.var`.
- Event handlers may be `async` and may `yield` to push intermediate UI updates.
- Always run commands with `uv run` (e.g. `uv run reflex run`). Never bare `python`.
- `.web/` is generated output — never edit or commit it. `rxconfig.py` is the config entry point.
- Verify your work headlessly: `CI=1 uv run reflex run` (frontend :3000, backend :8000),
  add `--loglevel debug` to diagnose failures.
```

--------------------------------

### Setup Python Environment with uv

Source: https://github.com/reflex-dev/reflex/blob/main/docs/ai_builder/integrations/skills.md

Use this command sequence to set up a Python virtual environment using `uv` and install Reflex. This is the preferred method for new Reflex projects.

```bash
uv venv .venv
source .venv/bin/activate
uv add reflex
reflex init
```

--------------------------------

### Multiple Selection Chips Example

Source: https://github.com/reflex-dev/reflex/blob/main/docs/recipes/others/chips.md

This example shows how to create a multi-select chip component. It includes state management for selected items and buttons for various selection actions. Ensure you have Reflex installed and imported.

```python
import random
from reflex.components.radix.themes.base import LiteralAccentColor

chip_props = {
    "radius": "full",
    "variant": "surface",
    "size": "3",
    "cursor": "pointer",
    "style": {"_hover": {"opacity": 0.75}},
}

skills = [
    "Data Management",
    "Networking",
    "Security",
    "Cloud",
    "DevOps",
    "Data Science",
    "AI",
    "ML",
    "Robotics",
    "Cybersecurity",
]


class BasicChipsState(rx.State):
    selected_items: list[str] = skills[:3]

    @rx.event
    def add_selected(self, item: str):
        self.selected_items.append(item)

    @rx.event
    def remove_selected(self, item: str):
        self.selected_items.remove(item)

    @rx.event
    def add_all_selected(self):
        self.selected_items = list(skills)

    @rx.event
    def clear_selected(self):
        self.selected_items.clear()

    @rx.event
    def random_selected(self):
        self.selected_items = random.sample(skills, k=random.randint(1, len(skills)))


def action_button(
    icon: str, label: str, on_click: callable, color_scheme: LiteralAccentColor
) -> rx.Component:
    return rx.button(
        rx.icon(icon, size=16),
        label,
        variant="soft",
        size="2",
        on_click=on_click,
        color_scheme=color_scheme,
        cursor="pointer",
    )


def selected_item_chip(item: str) -> rx.Component:
    return rx.badge(
        item,
        rx.icon("circle-x", size=18),
        color_scheme="green",
        **chip_props,
        on_click=BasicChipsState.remove_selected(item),
    )


def unselected_item_chip(item: str) -> rx.Component:
    return rx.cond(
        BasicChipsState.selected_items.contains(item),
        rx.fragment(),
        rx.badge(
            item,
            rx.icon("circle-plus", size=18),
            color_scheme="gray",
            **chip_props,
            on_click=BasicChipsState.add_selected(item),
        ),
    )


def items_selector() -> rx.Component:
    return rx.vstack(
        rx.flex(
            rx.hstack(
                rx.icon("lightbulb", size=20),
                rx.heading(
                    "Skills" + f" ({BasicChipsState.selected_items.length()})", size="4"
                ),
                spacing="1",
                align="center",
                width="100%",
                justify_content=["end", "start"],
            ),
            rx.hstack(
                action_button(
                    "plus", "Add All", BasicChipsState.add_all_selected, "green"
                ),
                action_button(
                    "trash", "Clear All", BasicChipsState.clear_selected, "tomato"
                ),
                action_button("shuffle", "", BasicChipsState.random_selected, "gray"),
                spacing="2",
                justify="end",
                width="100%",
            ),
            justify="between",
            flex_direction=["column", "row"],
            align="center",
            spacing="2",
            margin_bottom="10px",
            width="100%",
        ),
        # Selected Items
        rx.flex(
            rx.foreach(
                BasicChipsState.selected_items,
                selected_item_chip,
            ),
            wrap="wrap",
            spacing="2",
            justify_content="start",
        ),
        rx.divider(),
        # Unselected Items
        rx.flex(
            rx.foreach(skills, unselected_item_chip),
            wrap="wrap",
            spacing="2",
            justify_content="start",
        ),
        justify_content="start",
        align_items="start",
        width="100%",
    )

```

--------------------------------

### Create Examples Directory

Source: https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md

Create an 'examples' directory to test your local Python build of Reflex. Changes within this directory are ignored by git.

```bash
mkdir examples
cd examples
```

--------------------------------

### Display Image Upload Guide

Source: https://github.com/reflex-dev/reflex/blob/main/docs/ai_builder/features/image_as_prompt.md

Renders a visual guide for uploading images to the AI Builder. This component displays an example image and styling.

```python
rx.el.div(
    rx.image(
        src="https://web.reflex-assets.dev/ai_builder/image_upload.avif",
        class_name="rounded-md h-auto",
        border=f"0.81px solid {rx.color('slate', 5)}",
    ),
    class_name="w-full flex flex-col rounded-md",
)
```

--------------------------------

### Full App Example with State and Toast

Source: https://github.com/reflex-dev/reflex/blob/main/docs/getting_started/dashboard_tutorial.md

This complete example demonstrates a state class with initial users, an `add_user` handler that appends new users and shows a toast notification, and a `form` component integrated into the app.

```python
class State3(rx.State):
    users: list[User] = [
        User(name="Danilo Sousa", email="danilo@example.com", gender="Male"),
        User(name="Zahra Ambessa", email="zahra@example.com", gender="Female"),
    ]

    def add_user(self, form_data: dict):
        self.users.append(User(**form_data))

        return rx.toast.info(
            f"User has been added: {form_data}.",
            position="bottom-right",
        )


def show_user(user: User):
    """Show a person in a table row."""
    return rx.table.row(
        rx.table.cell(user.name),
        rx.table.cell(user.email),
        rx.table.cell(user.gender),
    )


def form():
    return rx.form(
        rx.vstack(
            rx.input(placeholder="User Name", name="name", required=True),

```

--------------------------------

### Initialize Component with on_mount

Source: https://github.com/reflex-dev/reflex/blob/main/docs/api-reference/event_triggers.md

The `on_mount` event is called after a component is rendered, useful for initial data loading or setup. This example logs the mount event and loads data asynchronously.

```python
from datetime import datetime
import reflex as rx

class MountState(rx.State):
    events: list[str] = []
    data: list[dict] = []
    loading: bool = False

    @rx.event
    def on_mount(self):
        self.events = self.events[-4:] + ["on_mount @ " + str(datetime.now())]

    @rx.event
    async def load_data(self):
        self.loading = True
        yield
        import asyncio

        await asyncio.sleep(1)
        self.data = [dict(id=1, name="Item 1"), dict(id=2, name="Item 2")]
        self.loading = False


def mount_example():
    return rx.vstack(
        rx.heading("Component Lifecycle Demo"),
        rx.foreach(MountState.events, rx.text),
        rx.cond(
            MountState.loading,
            rx.spinner(),
            rx.foreach(
                MountState.data,
                lambda item: rx.text(f"ID: {item['id']} - {item['name']}"),
            ),
        ),
        on_mount=MountState.on_mount,
    )
```

--------------------------------

### Basic Reflex App Example

Source: https://github.com/reflex-dev/reflex/blob/main/docs/advanced_onboarding/how-reflex-works.md

This example demonstrates a basic Reflex app with state management for fetching and displaying GitHub profile information. It includes a state class to manage URL and profile image, and an event handler to update these based on user input.

```python
import requests
import reflex as rx


class GithubState(rx.State):
    url: str = "https://github.com/reflex-dev"
    profile_image: str = "https://avatars.githubusercontent.com/u/104714959"

    @rx.event
    def set_profile(self, username: str):
        if username == "":
            return
        try:
            github_data = requests.get(
                f"https://api.github.com/users/{username}"
            ).json()
        except:
            return
        self.url = github_data["url"]
        self.profile_image = github_data["avatar_url"]


def index():
    return rx.hstack(
        rx.link(
            rx.avatar(src=GithubState.profile_image),
            href=GithubState.url,
        ),
        rx.input(
            placeholder="Your Github username",
            on_blur=GithubState.set_profile,
        ),
    )
```

--------------------------------

### Install Dependencies with uv

Source: https://github.com/reflex-dev/reflex/blob/main/AGENTS.md

Use `uv sync` to install project dependencies. This command ensures all required packages are set up correctly for development.

```bash
uv sync
```

--------------------------------

### Simple Brush Example

Source: https://github.com/reflex-dev/reflex/blob/main/docs/library/graphing/general/brush.md

Demonstrates a basic implementation of the Brush component with a bar chart. This example shows how to integrate the brush with x-axis and y-axis configurations to allow data range selection.

```python
import reflex as rx

data = [
    {"name": "1", "uv": 300, "pv": 456},
    {"name": "2", "uv": -145, "pv": 230},
    {"name": "3", "uv": -100, "pv": 345},
    {"name": "4", "uv": -8, "pv": 450},
    {"name": "5", "uv": 100, "pv": 321},
    {"name": "6", "uv": 9, "pv": 235},
    {"name": "7", "uv": 53, "pv": 267},
    {"name": "8", "uv": 252, "pv": -378},
    {"name": "9", "uv": 79, "pv": -210},
    {"name": "10", "uv": 294, "pv": -23},
    {"name": "12", "uv": 43, "pv": 45},
    {"name": "13", "uv": -74, "pv": 90},
    {"name": "14", "uv": -71, "pv": 130},
    {"name": "15", "uv": -117, "pv": 11},
    {"name": "16", "uv": -186, "pv": 107},
    {"name": "17", "uv": -16, "pv": 926},
    {"name": "18", "uv": -125, "pv": 653},
    {"name": "19", "uv": 222, "pv": 366},
    {"name": "20", "uv": 372, "pv": 486},
    {"name": "21", "uv": 182, "pv": 512},
    {"name": "22", "uv": 164, "pv": 302},
    {"name": "23", "uv": 316, "pv": 425},
    {"name": "24", "uv": 131, "pv": 467},
    {"name": "25", "uv": 291, "pv": -190},
    {"name": "26", "uv": -47, "pv": 194},
    {"name": "27", "uv": -415, "pv": 371},
    {"name": "28", "uv": -182, "pv": 376},
    {"name": "29", "uv": -93, "pv": 295},
    {"name": "30", "uv": -99, "pv": 322},
    {"name": "31", "uv": -52, "pv": 246},
    {"name": "32", "uv": 154, "pv": 33},
    {"name": "33", "uv": 205, "pv": 354},
    {"name": "34", "uv": 70, "pv": 258},
    {"name": "35", "uv": -25, "pv": 359},
    {"name": "36", "uv": -59, "pv": 192},
    {"name": "37", "uv": -63, "pv": 464},
    {"name": "38", "uv": -91, "pv": -2},
    {"name": "39", "uv": -66, "pv": 154},
    {"name": "40", "uv": -50, "pv": 186},
]


def brush_simple():
    return rx.recharts.bar_chart(
        rx.recharts.bar(data_key="uv", stroke="#8884d8", fill="#8884d8"),
        rx.recharts.bar(data_key="pv", stroke="#82ca9d", fill="#82ca9d"),
        rx.recharts.brush(data_key="name", height=30, stroke="#8884d8"),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(),
        data=data,
        width="100%",
        height=300,
    )

```

--------------------------------

### Import necessary libraries

Source: https://github.com/reflex-dev/reflex/blob/main/docs/library/graphing/charts/barchart.md

Import the Reflex library and the random module for stateful examples.

```python
import reflex as rx
import random
```

--------------------------------

### Real-World HStack Example

Source: https://github.com/reflex-dev/reflex/blob/main/docs/library/layout/stack.md

A practical application of `rx.hstack` to lay out two distinct content boxes side-by-side. This example demonstrates how to combine headings and text within boxes for a structured content presentation.

```python
import reflex as rx

rx.hstack(
    rx.box(
        rx.heading("Saving Money"),
        rx.text(
            "Saving money is an art that combines discipline, strategic planning, and the wisdom to foresee future needs and emergencies. It begins with the simple act of setting aside a portion of one's income, creating a buffer that can grow over time through interest or investments.",
            margin_top="0.5em",
        ),
        padding="1em",
        border_width="1px",
    ),
    rx.box(
        rx.heading("Spending Money"),
        rx.text(
            "Spending money is a balancing act between fulfilling immediate desires and maintaining long-term financial health. It's about making choices, sometimes indulging in the pleasures of the moment, and at other times, prioritizing essential expenses.",
            margin_top="0.5em",
        ),
        padding="1em",
        border_width="1px",
    ),
    gap="2em",
)
```

--------------------------------

### Render Chat Interface Example in Python

Source: https://github.com/reflex-dev/reflex/blob/main/docs/getting_started/chatapp_tutorial.md

Constructs a sample chat interface using Reflex components, demonstrating the display of questions and answers with applied styles. This example shows how to structure the UI for a chat application.

```python
rx.box(
    rx.vstack(
        rx.vstack(
            rx.box(
                rx.text("What is Reflex?", style=style.question_style),
                text_align="right",
                width="100%",
            ),
            rx.box(
                rx.text(
                    "Reflex is a way to build full-stack web apps in pure Python — "
                    "frontend, backend, and state all in one place.",
                    style=style.answer_style,
                ),
                text_align="left",
                width="100%",
            ),
            rx.box(
                rx.text("Can I deploy it?", style=style.question_style),
                text_align="right",
                width="100%",
            ),
            rx.box(
                rx.text(
                    "Yes! A single `reflex deploy` ships it to production.",
                    style=style.answer_style,
                ),
                text_align="left",
                width="100%",
            ),
            spacing="0",
            width="100%",
        ),
        rx.hstack(
            rx.input(
                placeholder="Ask a question",
                style=style.input_style,
                is_disabled=True,
            ),
            rx.button("Ask", style=style.button_style, is_disabled=True),
            spacing="3",
            padding_top="1.5em",
            justify="center",
            width="100%",
        ),
        align="stretch",
        spacing="0",
        width="100%",
        padding="2.5em 4em",
    ),
    border=f"1px solid {rx.color('slate', 5)}",
    border_radius="12px",
    margin_y="1em",
)

```

--------------------------------

### Basic Select Component Example

Source: https://github.com/reflex-dev/reflex/blob/main/docs/library/forms/select-ll.md

Demonstrates the usage of the Select component within a card layout. This example shows how to create two select inputs for 'Color' and 'Size', each with its own set of options. The 'Size' select includes a disabled option.

```python
rx.card(
    rx.flex(
        rx.image(
            src="https://web.reflex-assets.dev/other/reflex_banner.png",
            width="100%",
            height="auto",
        ),
        rx.flex(
            rx.heading("Reflex Swag", size="4", margin_bottom="4px"),
            rx.heading("$99", size="6", margin_bottom="4px"),
            direction="row",
            justify="between",
            width="100%",
        ),
        rx.text(
            "Reflex swag with a sense of nostalgia, as if they carry whispered tales of past adventures",
            size="2",
            margin_bottom="4px",
        ),
        rx.divider(size="4"),
        rx.flex(
            rx.flex(
                rx.text("Color", size="2", margin_bottom="4px", color_scheme="gray"),
                rx.select.root(
                    rx.select.trigger(),
                    rx.select.content(
                        rx.select.group(
                            rx.select.item("Light", value="light"),
                            rx.select.item("Dark", value="dark"),
                        ),
                    ),
                    default_value="light",
                ),
                direction="column",
            ),
            rx.flex(
                rx.text("Size", size="2", margin_bottom="4px", color_scheme="gray"),
                rx.select.root(
                    rx.select.trigger(),
                    rx.select.content(
                        rx.select.group(
                            rx.select.item("24", value="24"),
                            rx.select.item("26", value="26"),
                            rx.select.item("28", value="28", disabled=True),
                            rx.select.item("30", value="30"),
                            rx.select.item("32", value="32"),
                            rx.select.item("34", value="34"),
                            rx.select.item("36", value="36"),
                        ),
                    ),
                    default_value="30",
                ),
                direction="column",
            ),
            rx.button(rx.icon(tag="plus"), "Add"),
            align="end",
            justify="between",
            spacing="2",
            width="100%",
        ),
        width="15em",
        direction="column",
        spacing="2",
    ),
)
```

--------------------------------

### Loading Data Table Example with Pagination Controls

Source: https://github.com/reflex-dev/reflex/blob/main/docs/library/tables-and-data-grids/table.md

An example of a complete table component that includes pagination controls (Previous/Next buttons) and displays data loaded from a database. The `on_mount` event handler is used to initially load the entries.

```python
def loading_data_table_example3():
    return rx.vstack(
        rx.hstack(
            rx.button(
                "Prev",
                on_click=DatabaseTableState3.prev_page,
            ),
            rx.text(
                f"Page {DatabaseTableState3.page_number} / {DatabaseTableState3.total_pages}"
            ),
            rx.button(
                "Next",
                on_click=DatabaseTableState3.next_page,
            ),
        ),
        rx.table.root(
            rx.table.header(
                rx.table.row(
                    rx.table.column_header_cell("Name"),
                    rx.table.column_header_cell("Email"),
                    rx.table.column_header_cell("Phone"),
                    rx.table.column_header_cell("Address"),
                ),
            ),
            rx.table.body(rx.foreach(DatabaseTableState3.users, show_customer)),
            on_mount=DatabaseTableState3.load_entries,
            width="100%",
        ),
        width="100%",
    )
```

--------------------------------

### Install and Initialize Reflex App

Source: https://github.com/reflex-dev/reflex/blob/main/README.md

Steps to create a new project, add Reflex, and initialize the development server using uv.

```shell
mkdir my_app_name
cd my_app_name
uv init

uv add reflex
uv run reflex init
uv run reflex run
```

--------------------------------

### Install Reflex Agent Skills

Source: https://github.com/reflex-dev/reflex/blob/main/docs/ai_builder/integrations/ai_onboarding.md

Command to install Reflex Agent Skills using npx. These skills enhance AI assistants with Reflex-specific workflows for documentation, setup, and management.

```bash
npx skills add reflex-dev/agent-skills
```

--------------------------------

### Set up Reflex Project on macOS/Linux

Source: https://github.com/reflex-dev/reflex/blob/main/docs/getting_started/installation.md

Creates a new project directory, navigates into it, and initializes a new Reflex project using uv. This includes adding Reflex as a dependency.

```bash
mkdir <your-app>
cd <your-app>
uv init
uv add reflex
uv run reflex init
```

--------------------------------

### Initialize Reflex Project with AGENTS.md

Source: https://github.com/reflex-dev/reflex/blob/main/docs/ai_builder/integrations/agents_md.md

Demonstrates how to initialize a new Reflex project, which includes creating a starter AGENTS.md file in the project root by default.

```bash
reflex init

```

--------------------------------

### Range Slider Example

Source: https://github.com/reflex-dev/reflex/blob/main/docs/library/forms/slider.md

Illustrates a range slider controlled by two state variables. The selected start and end values are displayed.

```python
class RangeSliderState(rx.State):
    value_start: int = 25
    value_end: int = 75

    @rx.event
    def set_end(self, value: list[int | float]):
        self.value_start = value[0]
        self.value_end = value[1]


def range_slider_intro():
    return rx.vstack(
        rx.hstack(
            rx.heading(RangeSliderState.value_start),
            rx.heading(RangeSliderState.value_end),
        ),
        rx.slider(
            default_value=[25, 75],
            min_=0,
            max=100,
            size="1",
            on_value_commit=RangeSliderState.set_end,
        ),
        width="100%",
    )
```

--------------------------------

### Example Reflex Config File

Source: https://github.com/reflex-dev/reflex/blob/main/docs/hosting/regions.md

A sample `config.yml` file demonstrating how to specify application name, description, regions with deployment counts, VM type, and other settings.

```yaml
name: medo
description: ''
regions:
  sjc: 1
  lhr: 2
vmtype: c1m1
hostname: null
envfile: .env
project: null
packages:
- procps
```

--------------------------------

### Setup Python Environment with venv

Source: https://github.com/reflex-dev/reflex/blob/main/docs/ai_builder/integrations/skills.md

Fallback command sequence for setting up a Python virtual environment using the standard `venv` module if `uv` is not available. Ensure Python 3.10+ is installed.

```bash
python3 -m venv .venv
source .venv/bin/activate
pip install --upgrade pip
pip install reflex
reflex init
```

--------------------------------

### Initialize Custom Component Help

Source: https://github.com/reflex-dev/reflex/blob/main/docs/custom-components/command-reference.md

Shows the help manual for initializing a custom component. Use this to understand available options for `reflex component init`.

```bash
reflex component init --help
```

--------------------------------

### Iterative Refinement: Modifying Layout and Components

Source: https://github.com/reflex-dev/reflex/blob/main/docs/ai_builder/overview/best_practices.md

Shows examples of how to provide specific feedback for iterative refinement. These prompts guide the AI builder to make targeted changes to layout, components, and styling based on previous outputs.

```diff
- Modal is included and sidebar is static.
+ Remove modal and make sidebar collapsible.
```

```diff
- Buttons vary across pages.
+ Use same button style from home page.
```

```diff
- Card layout differs across sections.
+ Repeat card layout from dashboard section.
```

--------------------------------

### Get CSV Data from AG Grid with Callback

Source: https://github.com/reflex-dev/reflex/blob/main/docs/enterprise/ag_grid/index.md

This example demonstrates how to retrieve data from AG Grid as a CSV string on the backend and display it using a toast notification. It utilizes a callback function to handle the returned data.

```python
import reflex as rx
import reflex_enterprise as rxe
import pandas as pd


class AGGridStateAPI(rx.State):
    def handle_get_data(self, data: str):
        yield rx.toast(f"Got CSV data: {data}")


df = pd.read_csv("data/gapminder2007.csv")

column_defs = [
    {"field": "country", "checkboxSelection": True},
    {"field": "pop"},
    {"field": "continent"},
]


def ag_grid_api_argument():
    my_api = rxe.ag_grid.api(id="ag_grid_get_data_as_csv")
    return rx.vstack(
        rxe.ag_grid(
            id="ag_grid_get_data_as_csv",
            row_data=df.to_dict("records"),
            column_defs=column_defs,
            width="100%",
            height="40vh",
        ),
        rx.button(
            "Get CSV data on backend",
            on_click=my_api.get_data_as_csv(callback=AGGridStateAPI.handle_get_data),
        ),
        spacing="4",
        width="100%",
    )
```

--------------------------------

### Basic Aspect Ratio Examples

Source: https://github.com/reflex-dev/reflex/blob/main/docs/library/layout/aspect_ratio.md

Demonstrates how to use the `ratio` prop to set different aspect ratios for content. For responsive scaling, ensure the content inside has `width` and `height` set to `"100%"`.

```python
rx.grid(
    rx.aspect_ratio(
        rx.box(
            "Widescreen 16:9",
            background_color="papayawhip",
            width="100%",
            height="100%",
        ),
        ratio=16 / 9,
    ),
    rx.aspect_ratio(
        rx.box(
            "Letterbox 4:3",
            background_color="orange",
            width="100%",
            height="100%",
        ),
        ratio=4 / 3,
    ),
    rx.aspect_ratio(
        rx.box(
            "Square 1:1",
            background_color="green",
            width="100%",
            height="100%",
        ),
        ratio=1,
    ),
    rx.aspect_ratio(
        rx.box(
            "Portrait 5:7",
            background_color="lime",
            width="100%",
            height="100%",
        ),
        ratio=5 / 7,
    ),
    spacing="2",
    width="25%",
)
```

--------------------------------

### Install uv on Windows

Source: https://github.com/reflex-dev/reflex/blob/main/docs/getting_started/installation.md

Installs the uv package manager using a PowerShell script. Restart your terminal after installation.

```powershell
powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"
```

--------------------------------

### Initialize Reflex Project with uv

Source: https://github.com/reflex-dev/reflex/blob/main/docs/getting_started/chatapp_tutorial.md

Commands to create a new Reflex project directory, initialize a Python virtual environment using uv, add Reflex as a dependency, and scaffold a new Reflex app. Assumes uv is already installed.

```bash
mkdir chatapp
cd chatapp
uv init
uv add reflex
uv run reflex init

```

--------------------------------

### Install Reflex Enterprise

Source: https://github.com/reflex-dev/reflex/blob/main/docs/enterprise/overview.md

Install the reflex-enterprise package using pip. This command should be run alongside the installation of the core reflex package.

```bash
pip install reflex-enterprise
```

--------------------------------

### Install uv on macOS/Linux

Source: https://github.com/reflex-dev/reflex/blob/main/docs/getting_started/installation.md

Installs the uv package manager using a curl script. Restart your terminal or source your shell configuration file after installation.

```bash
curl -LsSf https://astral.sh/uv/install.sh | sh
```

--------------------------------

### Run Reflex Docs Site Locally

Source: https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md

Navigate to the docs app directory and run the Reflex development server to view the documentation site locally. Changes to Markdown files are reflected live.

```bash
cd docs/app
uv sync
uv run reflex run
```

--------------------------------

### Basic File Upload Example

Source: https://github.com/reflex-dev/reflex/blob/main/docs/library/forms/upload.md

Demonstrates how to upload files, save them to the server, and display them as images. Use this for simple file upload scenarios.

```python
import reflex as rx


class State(rx.State):
    uploaded_files: list[str] = []

    @rx.event
    async def handle_upload(self, files: list[rx.UploadFile]):
        for file in files:
            data = await file.read()
            path = rx.get_upload_dir() / file.name
            with path.open("wb") as f:
                f.write(data)
            self.uploaded_files.append(file.name)


def upload_component():
    return rx.vstack(
        rx.upload(id="upload"),
        rx.button("Upload", on_click=State.handle_upload(rx.upload_files("upload"))),
        rx.foreach(State.uploaded_files, lambda f: rx.image(src=rx.get_upload_url(f))),
    )
```

--------------------------------

### Install reflex-pyplot

Source: https://github.com/reflex-dev/reflex/blob/main/docs/library/graphing/other-charts/pyplot.md

Install the reflex-pyplot package using pip.

```bash
pip install reflex-pyplot
```

--------------------------------

### Install Reflex Agent Skills Plugin for Claude Code

Source: https://github.com/reflex-dev/reflex/blob/main/docs/ai_builder/integrations/skills.md

Installs the Reflex agent skills plugin for Claude Code from the marketplace. Restart or refresh Claude Code after installation for the skills to appear.

```text
/plugin marketplace add reflex-dev/agent-skills
/plugin install reflex@reflex-agent-skills

```

--------------------------------

### List Available VM Types

Source: https://github.com/reflex-dev/reflex/blob/main/docs/hosting/machine-types.md

Use the CLI to list all available VM types for your application.

```bash
reflex cloud vmtypes
```

--------------------------------

### Simple Legend Example

Source: https://github.com/reflex-dev/reflex/blob/main/docs/library/graphing/general/legend.md

A basic example of a Recharts ComposedChart with a legend. This demonstrates the default legend behavior.

```python
data = [
    {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400},
    {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210},
    {"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290},
    {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000},
    {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181},
    {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500},
    {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100},
]

def legend_simple():
    return rx.recharts.composed_chart(
        rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"),
        rx.recharts.bar(data_key="amt", bar_size=20, fill="#413ea0"),
        rx.recharts.line(data_key="pv", type_="monotone", stroke="#ff7300"),
        rx.recharts.x_axis(data_key="name"),
        rx.recharts.y_axis(),
        rx.recharts.legend(),
        data=data,
        width="100%",
        height=300,
    )
```

--------------------------------

### Build Custom Component Help

Source: https://github.com/reflex-dev/reflex/blob/main/docs/custom-components/command-reference.md

Displays the help manual for building a custom component. This command generates distribution files for publishing.

```bash
reflex component build --help
```

--------------------------------

### Install Playwright

Source: https://github.com/reflex-dev/reflex/blob/main/docs/app/CLAUDE.md

Command to install Playwright browsers, typically needed if tests fail due to missing browser binaries.

```bash
uv run playwright install
```

--------------------------------

### Initialize a New Reflex App

Source: https://github.com/reflex-dev/reflex/blob/main/docs/getting_started/project-structure.md

Use these commands to create a new Reflex app and add the Reflex dependency.

```bash
mkdir hello
cd hello
uv init
uv add reflex
uv run reflex init
```

--------------------------------

### Install libsass for SASS/SCSS

Source: https://github.com/reflex-dev/reflex/blob/main/docs/styling/custom-stylesheets.md

The `libsass` package is required for SASS/SCSS compilation. It's usually included with Reflex, but can be installed separately if needed.

```bash
pip install "libsass>=0.23.0"
```

--------------------------------

### Create a Basic Reflex App and Add a Page

Source: https://github.com/reflex-dev/reflex/blob/main/docs/getting_started/basics.md

Instantiate the `rx.App` class and add a page function linked to a URL route. This is the starting point for any Reflex application.

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


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

--------------------------------

### Basic Card Examples

Source: https://github.com/reflex-dev/reflex/blob/main/docs/library/layout/card.md

Demonstrates creating multiple cards with varying `size` props to control spacing and margin. Use this to create visually distinct sections within your application.

```python
import reflex as rx

rx.flex(
    rx.card("Card 1", size="1"),
    rx.card("Card 2", size="2"),
    rx.card("Card 3", size="3"),
    rx.card("Card 4", size="4"),
    rx.card("Card 5", size="5"),
    spacing="2",
    align_items="flex-start",
    flex_wrap="wrap",
)
```

--------------------------------

### on_scroll Event Example

Source: https://github.com/reflex-dev/reflex/blob/main/docs/api-reference/event_triggers.md

Use on_scroll to trigger an event when the user scrolls an element. This example changes text when the associated div is scrolled.

```python
class ScrollState(rx.State):
    text: str = "Change Me!"

    @rx.event
    def change_text(self):
        if self.text == "Change Me!":
            self.text = "Changed!"
        else:
            self.text = "Change Me!"

def scroll_example():
    return rx.vstack(
        rx.text("Scroll to make the text below change."),
        rx.text(ScrollState.text),
        rx.text("Scroll to make the text above change."),
        on_scroll=ScrollState.change_text,
        overflow="auto",
        height="3em",
        width="100%",
    )
```

--------------------------------

### Basic Loading Overlay Example

Source: https://github.com/reflex-dev/reflex/blob/main/docs/enterprise/mantine/loading-overlay.md

Demonstrates how to use the `rxe.mantine.loading_overlay` component to show a loading state over content. It requires a state variable to control visibility and a button to toggle the loading state.

```python
import reflex as rx
import reflex_enterprise as rxe


class LoadingOverlayState(rx.State):
    loading: bool = False

    @rx.event
    def toggle_loading(self):
        self.loading = not self.loading


def loading_overlay_example():
    return (
        rx.container(
            rxe.mantine.loading_overlay(
                rx.text(
                    "Loading Overlay Example",
                    height="200px",
                    width="100px",
                ),
                overlay_props={"radius": "sm", "blur": 2},
                visible=LoadingOverlayState.loading,
                z_index=1000,
            ),
        ),
        rx.button("Toggle Loading", on_click=LoadingOverlayState.toggle_loading),
    )
```

--------------------------------

### Initialize Reflex Enterprise App

Source: https://github.com/reflex-dev/reflex/blob/main/docs/enterprise/overview.md

Use `rxe.App()` instead of `rx.App()` in your main file to enable enterprise features.

```python
import reflex_enterprise as rxe

app = rxe.App()
```

--------------------------------

### on_mouse_over Event Example

Source: https://github.com/reflex-dev/reflex/blob/main/docs/api-reference/event_triggers.md

Use on_mouse_over to trigger an event when the mouse pointer enters an element. This example changes button text on mouse over.

```python
class MouseOverState(rx.State):
    text: str = "Change Me!"

    @rx.event
    def change_text(self):
        if self.text == "Change Me!":
            self.text = "Changed!"
        else:
            self.text = "Change Me!"

def mouse_over_example():
    return rx.button(MouseOverState.text, on_mouse_over=MouseOverState.change_text)
```

--------------------------------

### Example GitHub Personal Access Token

Source: https://github.com/reflex-dev/reflex/blob/main/packages/integrations-docs/src/integrations_docs/docs/github.md

This is an example of a GitHub Personal Access Token. Always replace this placeholder with your actual token and keep it secure.

```text
ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
```

--------------------------------

### Client Storage Example

Source: https://github.com/reflex-dev/reflex/blob/main/docs/client_storage/overview.md

Demonstrates using rx.Cookie and rx.LocalStorage to store and update values. Custom cookie names and max_age can be specified.

```python
class ClientStorageState(rx.State):
    my_cookie: str = rx.Cookie("")
    my_local_storage: str = rx.LocalStorage("")
    custom_cookie: str = rx.Cookie(name="CustomNamedCookie", max_age=3600)

    @rx.event
    def set_my_cookie(self, value: str):
        self.my_cookie = value

    @rx.event
    def set_my_local_storage(self, value: str):
        self.my_local_storage = value

    @rx.event
    def set_custom_cookie(self, value: str):
        self.custom_cookie = value

def client_storage_example():
    return rx.vstack(
        rx.hstack(
            rx.text("my_cookie"),
            rx.input(
                value=ClientStorageState.my_cookie,
                on_change=ClientStorageState.set_my_cookie,
            ),
        ),
        rx.hstack(
            rx.text("my_local_storage"),
            rx.input(
                value=ClientStorageState.my_local_storage,
                on_change=ClientStorageState.set_my_local_storage,
            ),
        ),
        rx.hstack(
            rx.text("custom_cookie"),
            rx.input(
                value=ClientStorageState.custom_cookie,
                on_change=ClientStorageState.set_custom_cookie,
            ),
        ),
    )
```

--------------------------------

### Import Reflex

Source: https://github.com/reflex-dev/reflex/blob/main/docs/ai_builder/features/ide.md

Import the Reflex library to begin building your application.

```python
import reflex as rx
```

--------------------------------

### on_mouse_out Event Example

Source: https://github.com/reflex-dev/reflex/blob/main/docs/api-reference/event_triggers.md

Use on_mouse_out to trigger an event when the mouse pointer leaves an element. This example changes button text when the mouse leaves.

```python
class MouseOutState(rx.State):
    text: str = "Change Me!"

    @rx.event
    def change_text(self):
        if self.text == "Change Me!":
            self.text = "Changed!"
        else:
            self.text = "Change Me!"

def mouse_out_example():
    return rx.button(MouseOutState.text, on_mouse_out=MouseOutState.change_text)
```

--------------------------------

### Run Reflex Development Server

Source: https://github.com/reflex-dev/reflex/blob/main/docs/getting_started/chatapp_tutorial.md

Command to start the Reflex development server, which builds and serves the frontend and backend. Access the running app at http://localhost:3000.

```bash
uv run reflex run

```

--------------------------------

### on_mouse_move Event Example

Source: https://github.com/reflex-dev/reflex/blob/main/docs/api-reference/event_triggers.md

Use on_mouse_move to trigger an event when the mouse pointer moves over an element. This example changes button text as the mouse moves.

```python
class MouseMoveState(rx.State):
    text: str = "Change Me!"

    @rx.event
    def change_text(self):
        if self.text == "Change Me!":
            self.text = "Changed!"
        else:
            self.text = "Change Me!"

def mouse_move_example():
    return rx.button(MouseMoveState.text, on_mouse_move=MouseMoveState.change_text)
```

--------------------------------

### on_mouse_leave Event Example

Source: https://github.com/reflex-dev/reflex/blob/main/docs/api-reference/event_triggers.md

Use on_mouse_leave to trigger an event when the mouse pointer leaves an element. This example changes button text on mouse leave.

```python
class MouseLeaveState(rx.State):
    text: str = "Change Me!"

    @rx.event
    def change_text(self):
        if self.text == "Change Me!":
            self.text = "Changed!"
        else:
            self.text = "Change Me!"

def mouse_leave_example():
    return rx.button(MouseLeaveState.text, on_mouse_leave=MouseLeaveState.change_text)
```

--------------------------------

### Icon Search and Display

Source: https://github.com/reflex-dev/reflex/blob/main/docs/library/data-display/icon.md

This example demonstrates how to create a searchable list of Lucide icons. It includes a search input, displays icons, and allows users to copy an icon's name to the clipboard with a success toast notification.

```python
import reflex as rx

from reflex_components_lucide.icon import LUCIDE_ICON_LIST
from reflex.experimental.client_state import ClientStateVar

icon_search_cs = ClientStateVar.create("icon_search", default="")


@rx.memo
def lucide_icons() -> rx.Component:
    return rx.box(
        rx.box(
            rx.box(
                rx.icon(
                    tag="search",
                    size=20,
                    class_name="shrink-0 !text-secondary-11",
                ),
                class_name="absolute left-2 top-1/2 transform -translate-y-1/2 z-[1] shrink-0 flex items-center justify-center pb-2",
            ),
            rx.el.input(
                placeholder="Search icons...",
                on_change=icon_search_cs.set_value,
                class_name="relative box-border border-secondary-4 focus:border-violet-9 focus:border-1 bg-secondary-2 p-[0.5rem_0.75rem] border rounded-xl font-base text-secondary-11 placeholder:text-secondary-9 outline-none focus:outline-none w-full mb-2 pl-10",
            ),
            class_name="relative flex items-center",
        ),
        rx.el.div(
            rx.box(
                rx.foreach(
                    LUCIDE_ICON_LIST,
                    lambda icon: rx.cond(
                        icon.startswith(icon_search_cs.value),
                        rx.tooltip(
                            rx.box(
                                rx.icon(tag=icon),
                                class_name="flex items-center justify-center rounded-md hover:bg-secondary-3 transition-bg p-2 cursor-pointer",
                                on_click=[
                                    rx.set_clipboard(icon),
                                    rx.toast.success(f"Copied {icon} to clipboard"),
                                ],
                                key=icon,
                            ),
                            content=icon,
                        ),
                        None,
                    ),
                ),
                class_name="flex flex-wrap justify-start gap-4 mb-4",
            ),
            class_name="overflow-y-auto max-h-[500px]",
        ),
        class_name="flex flex-col gap-4",
    )
```

--------------------------------

### Basic Switch Example

Source: https://github.com/reflex-dev/reflex/blob/main/docs/library/forms/switch.md

Demonstrates a basic switch with an `on_change` event to toggle a boolean value in the state and display it using a badge.

```python
class SwitchState(rx.State):
    value: bool = False

    @rx.event
    def set_end(self, value: bool):
        self.value = value


def switch_intro():
    return rx.center(
        rx.switch(on_change=SwitchState.set_end),
        rx.badge(SwitchState.value),
    )
```

--------------------------------

### on_mouse_enter Event Example

Source: https://github.com/reflex-dev/reflex/blob/main/docs/api-reference/event_triggers.md

Use on_mouse_enter to trigger an event when the mouse pointer enters an element. This example changes button text on mouse enter.

```python
class MouseEnterState(rx.State):
    text: str = "Change Me!"

    @rx.event
    def change_text(self):
        if self.text == "Change Me!":
            self.text = "Changed!"
        else:
            self.text = "Change Me!"

def mouse_enter_example():
    return rx.button(MouseEnterState.text, on_mouse_enter=MouseEnterState.change_text)
```

--------------------------------

### Basic Map with Marker

Source: https://github.com/reflex-dev/reflex/blob/main/docs/enterprise/map/index.md

Demonstrates creating a simple map with a single marker and a popup. Requires importing reflex and reflex_enterprise.

```python
import reflex as rx
import reflex_enterprise as rxe


class MapState(rx.State):
    center: rxe.map.LatLng = rxe.map.latlng(lat=51.505, lng=-0.09)
    zoom: float = 13.0


def basic_map():
    return rxe.map(
        rxe.map.tile_layer(
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        ),
        rxe.map.marker(
            rxe.map.popup("Hello from London!"),
            position=MapState.center,
        ),
        id="basic-map",
        center=MapState.center,
        zoom=MapState.zoom,
        height="400px",
        width="100%",
    )
```

--------------------------------

### on_click Event Example

Source: https://github.com/reflex-dev/reflex/blob/main/docs/api-reference/event_triggers.md

The `on_click` event handler is triggered when a user clicks on an element, such as a button. This example toggles a text string when the button is clicked.

```python
class ClickState(rx.State):
    text: str = "Change Me!"

    @rx.event
    def change_text(self):
        if self.text == "Change Me!":
            self.text = "Changed!"
        else:
            self.text = "Change Me!"

def click_example():
    return rx.button(ClickState.text, on_click=ClickState.change_text)
```

--------------------------------

### Run Reflex Production Service

Source: https://github.com/reflex-dev/reflex/blob/main/docker-example/production-compose/README.md

Starts the production services, including the app and Caddy webserver. HTTPS is automatically provisioned. The app will be available at the specified domain.

```bash
DOMAIN=example.com docker compose up
```

--------------------------------

### Install Git Pre-commit Hooks

Source: https://github.com/reflex-dev/reflex/blob/main/CONTRIBUTING.md

Install git pre-commit hooks to automatically run Ruff, Pyright, and `make_pyi` before each commit. This helps maintain code quality and consistency.

```bash
uv run pre-commit install
```

--------------------------------

### Moment State and Update Example

Source: https://github.com/reflex-dev/reflex/blob/main/docs/library/data-display/moment.md

Define a state with a datetime variable and an update event to refresh it. This example demonstrates how to use the Moment component with a state variable that can be updated.

```python
from datetime import datetime, timezone


class MomentState(rx.State):
    date_now: datetime = datetime.now(timezone.utc)

    @rx.event
    def update(self):
        self.date_now = datetime.now(timezone.utc)


def moment_update_example():
    return rx.button(
        "Update", rx.moment(MomentState.date_now), on_click=MomentState.update
    )
```

--------------------------------

### Initialize a New Reflex App

Source: https://github.com/reflex-dev/reflex/blob/main/docs/api-reference/cli.md

Use the `reflex init` command to create a new Reflex app. It will re-initialize with the latest template if an `rxconfig.py` file already exists.

```bash
$ reflex init --help
Usage: reflex init [OPTIONS]

  Initialize a new Reflex app in the current directory.

Options:
  --name APP_NAME                 The name of the app to initialize.
  --template [demo|sidebar|blank]
                                  The template to initialize the app with.
  --loglevel [debug|info|warning|error|critical]
                                  The log level to use.  [default:
                                  LogLevel.INFO]
  --help                          Show this message and exit.

```