For AI agents: the complete documentation index is at [llms.txt](/content/docs/llms.txt). Markdown versions are available by appending .md or sending Accept: text/markdown.

## NewReflex Agent Toolkit

NewReflex Agent Toolkit is launching. Get early access.

### Overview
- [**Learn**](/content/docs/getting-started/introduction/index.html)
- [**Components**](/content/docs/library/index.html)
- [**API Reference**](/content/docs/api-reference/app/index.html)
- [**Enterprise**](/content/docs/enterprise/overview/index.html)

### Onboarding
- **Getting Started**  
  - [Installation](/content/docs/getting-started/installation/index.html)  
  - [Introduction](/content/docs/getting-started/introduction/index.html)  
  - [Basics](/content/docs/getting-started/basics/index.html)  
  - [Project Structure](/content/docs/getting-started/project-structure/index.html)

- **Tutorials**  
  - [Dashboard Tutorial](/content/docs/getting-started/dashboard-tutorial/index.html)  
  - [Chatapp Tutorial](/content/docs/getting-started/chatapp-tutorial/index.html)

- **Advanced Onboarding**  
  - [How Reflex Works](/content/docs/advanced-onboarding/how-reflex-works/index.html)  
  - [Configuration](/content/docs/advanced-onboarding/configuration/index.html)  
  - [Code Structure](/content/docs/advanced-onboarding/code-structure/index.html)

### User Interface
- **Components**  
  - [Props](/content/docs/components/props/index.html)  
  - [Conditional Rendering](/content/docs/components/conditional-rendering/index.html)  
  - [Rendering Iterables](/content/docs/components/rendering-iterables/index.html)  
  - [Html To Reflex](/content/docs/components/html-to-reflex/index.html)  
  - [Library · Reflex Docs](/content/docs/library/index.html)

- **Pages**  
  - [Overview](/content/docs/pages/overview/index.html)  
  - [Dynamic Routing](/content/docs/pages/dynamic-routing/index.html)

- **Styling**  
  - [Overview](/content/docs/styling/overview/index.html)  
  - [Theming](/content/docs/styling/theming/index.html)  
  - [Responsive](/content/docs/styling/responsive/index.html)  
  - [Custom Stylesheets](/content/docs/styling/custom-stylesheets/index.html)  
  - [Layout](/content/docs/styling/layout/index.html)  
  - [Common Props](/content/docs/styling/common-props/index.html)  
  - [Tailwind](/content/docs/styling/tailwind/index.html)

- **Assets**  
  - [Overview](/content/docs/assets/overview/index.html)  
  - [Upload And Download Files](/content/docs/assets/upload-and-download-files/index.html)

- **Wrapping React**  
  - [Overview](/content/docs/wrapping-react/overview/index.html)  
  - [Library And Tags](/content/docs/wrapping-react/library-and-tags/index.html)  
  - [Props](/content/docs/wrapping-react/props/index.html)  
  - [Custom Code And Hooks](/content/docs/wrapping-react/custom-code-and-hooks/index.html)  
  - [Imports And Styles](/content/docs/wrapping-react/imports-and-styles/index.html)  
  - [Local Packages](/content/docs/wrapping-react/local-packages/index.html)  
  - [Serializers](/content/docs/wrapping-react/serializers/index.html)  
  - [Example](/content/docs/wrapping-react/example/index.html)  
  - [More Wrapping Examples](/content/docs/wrapping-react/more-wrapping-examples/index.html)

- **Custom Components**  
  - [Overview](/content/docs/custom-components/overview/index.html)  
  - [Prerequisites For Publishing](/content/docs/custom-components/prerequisites-for-publishing/index.html)  
  - [Command Reference](/content/docs/custom-components/command-reference/index.html)

### State
- **Vars**  
  - [Base Vars](/content/docs/vars/base-vars/index.html)  
  - [Computed Vars](/content/docs/vars/computed-vars/index.html)  
  - [Hybrid Properties](/content/docs/vars/hybrid-properties/index.html)  
  - [Var Operations](/content/docs/vars/var-operations/index.html)  
  - [Custom Vars](/content/docs/vars/custom-vars/index.html)

- **Events**  
  - [Events Overview](/content/docs/events/events-overview/index.html)  
  - [Event Arguments](/content/docs/events/event-arguments/index.html)  
  - [Yield Events](/content/docs/events/yield-events/index.html)  
  - [Chaining Events](/content/docs/events/chaining-events/index.html)  
  - [Special Events](/content/docs/events/special-events/index.html)  
  - [Page Load Events](/content/docs/events/page-load-events/index.html)  
  - [Background Events](/content/docs/events/background-events/index.html)  
  - [Event Actions](/content/docs/events/event-actions/index.html)  
  - [Decentralized Event Handlers](/content/docs/events/decentralized-event-handlers/index.html)

- **State Structure**  
  - [Overview](/content/docs/state-structure/overview/index.html)  
  - [Component State](/content/docs/state-structure/component-state/index.html)  
  - [Mixins](/content/docs/state-structure/mixins/index.html)  
  - [Shared State](/content/docs/state-structure/shared-state/index.html)

- **API Routes**  
  - [Overview](/content/docs/api-routes/overview/index.html)

- **Client Storage**  
  - [Overview](/content/docs/client-storage/overview/index.html)

- **Database**  
  - [Overview](/content/docs/database/overview/index.html)  
  - [Tables](/content/docs/database/tables/index.html)  
  - [Queries](/content/docs/database/queries/index.html)  
  - [Relationships](/content/docs/database/relationships/index.html)

- **Authentication**  
  - [Overview](/content/docs/enterprise/auth/overview/index.html)

- **Utility Methods**  
  - [Router Attributes](/content/docs/utility-methods/router-attributes/index.html)  
  - [Lifespan Tasks](/content/docs/utility-methods/lifespan-tasks/index.html)  
  - [Other Methods](/content/docs/utility-methods/other-methods/index.html)

### Recipes
- **Layout**  
  - [Navbar](/content/docs/recipes/layout/navbar/index.html)  
  - [Sidebar](/content/docs/recipes/layout/sidebar/index.html)  
  - [Footer](/content/docs/recipes/layout/footer/index.html)

- **Content**  
  - [Forms](/content/docs/recipes/content/forms/index.html)  
  - [Multi Column Row](/content/docs/recipes/content/multi-column-row/index.html)  
  - [Grid](/content/docs/recipes/content/grid/index.html)  
  - [Stats](/content/docs/recipes/content/stats/index.html)  
  - [Top Banner](/content/docs/recipes/content/top-banner/index.html)

- **Auth**  
  - [Login Form](/content/docs/recipes/auth/login-form/index.html)  
  - [Signup Form](/content/docs/recipes/auth/signup-form/index.html)

- **Other**  
  - [Checkboxes](/content/docs/recipes/others/checkboxes/index.html)  
  - [Pricing Cards](/content/docs/recipes/others/pricing-cards/index.html)  
  - [Chips](/content/docs/recipes/others/chips/index.html)  
  - [Speed Dial](/content/docs/recipes/others/speed-dial/index.html)  
  - [Dark Mode Toggle](/content/docs/recipes/others/dark-mode-toggle/index.html)  
  - [Chat](/content/docs/recipes/others/chat/index.html)

### Wrapping React
When wrapping a React component, you may need to define styles and imports that are specific to the component. This is done by defining the `add_styles` and `add_imports` methods in your component class.

#### Imports
Sometimes, the component you are wrapping will need to import other components or libraries. This is done by defining the `add_imports` method in your component class. That method should return a dictionary of imports, where the keys are the names of the packages to import and the values are the names of the components or libraries to import.

Values can be either a string or a list of strings. If the import needs to be aliased, you can use the `ImportVar` object to specify the alias and whether the import should be installed as a dependency.

```python
from reflex.utils.imports import ImportVar

class ComponentWithImports(MyBaseComponent):
    def add_imports(self):
        """Add imports to the component."""
        return {
            "my-package1": "my-import1",
            "my-package2": ["my-import2"],
            "my-package3": ImportVar(
                tag="my-import3", alias="my-alias", install=False, is_default=False
            ),
            "": "my-package-with-css/styles.css",
        }
```

The tag and library of the component will be automatically added to the imports. They do not need to be added again in `add_imports`.

#### Styles
Styles are any CSS styles that need to be included in the component. The style will be added inline to the component, so you can use any CSS styles that are valid in React.

```python
class StyledComponent(MyBaseComponent):
    """MyComponent."""

def add_style(self) -> dict[str, Any] | None:
        """Add styles to the component."

return rx.Style({
            "backgroundColor": "red",
            "color": "white",
            "padding": "10px",
        })
```

**Built with Reflex** - [Reflex](/content/site-root.html)