remove almost all pcweb imports

adhami3310 · adhami3310 · commit a056e3715d25 · 2026-03-25T19:31:41.000-07:00
diff --git a/docs/advanced_onboarding/how-reflex-works.md b/docs/advanced_onboarding/how-reflex-works.md
@@ -1,7 +1,3 @@
-```python exec
-from pcweb import constants
-```
-
 # How Reflex Works
 
 We'll use the following basic app that displays Github profile images as an example to explain the different parts of the architecture.
diff --git a/docs/api-reference/event_triggers.md b/docs/api-reference/event_triggers.md
@@ -3,7 +3,7 @@ from datetime import datetime
 
 import reflex as rx
 
-from pcweb.templates.docpage import docdemo, h1_comp, text_comp, docpage
+from pcweb.templates.docpage import docdemo, h1_comp, text_comp
 
 SYNTHETIC_EVENTS = [
     {
diff --git a/docs/api-reference/utils.md b/docs/api-reference/utils.md
@@ -1,6 +1,5 @@
 ```python exec
 import reflex as rx
-from pcweb import constants, styles
 ```
 
 # Utility Functions
diff --git a/docs/assets/upload_and_download_files.md b/docs/assets/upload_and_download_files.md
@@ -1,7 +1,5 @@
 ```python exec
 import reflex as rx
-from pcweb.styles.styles import get_code_style
-from pcweb.styles.colors import c_color
 ```
 
 # Files
@@ -33,24 +31,24 @@ rx.table.root(
         rx.table.row(
             rx.table.cell(rx.text("Location", font_weight="bold")),
             rx.table.cell(rx.hstack(
-                rx.code("assets/", style=get_code_style("violet")),
+                rx.code("assets/", style={"color": rx.color("violet", 11), "border_radius": "0.25rem", "border": f"1px solid {rx.color('violet', 5)}", "background": rx.color("violet", 3)}),
                 rx.text(" folder or next to Python files (shared assets)"),
                 spacing="2",
             )),
             rx.table.cell(rx.hstack(
-                rx.code("uploaded_files/", style=get_code_style("violet")),
+                rx.code("uploaded_files/", style={"color": rx.color("violet", 11), "border_radius": "0.25rem", "border": f"1px solid {rx.color('violet', 5)}", "background": rx.color("violet", 3)}),
                 rx.text(" directory (configurable)"),
                 spacing="2",
             )),
         ),
         rx.table.row(
             rx.table.cell(rx.text("Access Method", font_weight="bold")),
             rx.table.cell(rx.hstack(
-                rx.code("rx.asset()", style=get_code_style("violet")),
+                rx.code("rx.asset()", style={"color": rx.color("violet", 11), "border_radius": "0.25rem", "border": f"1px solid {rx.color('violet', 5)}", "background": rx.color("violet", 3)}),
                 rx.text(" or direct path reference"),
                 spacing="2",
             )),
-            rx.table.cell(rx.code("rx.get_upload_url()", style=get_code_style("violet"))),
+            rx.table.cell(rx.code("rx.get_upload_url()", style={"color": rx.color("violet", 11), "border_radius": "0.25rem", "border": f"1px solid {rx.color('violet', 5)}", "background": rx.color("violet", 3)})),
         ),
         rx.table.row(
             rx.table.cell(rx.text("When to Use", font_weight="bold")),
diff --git a/docs/custom-components/prerequisites-for-publishing.md b/docs/custom-components/prerequisites-for-publishing.md
@@ -2,11 +2,10 @@
 
 ```python exec
 import reflex as rx
-from pcweb.styles.colors import c_color
 image_style = {
   "width": "400px",
   "border_radius": "12px",
-  "border": f"1px solid {c_color('slate', 5)}",
+  "border": "1px solid var(--c-slate-5)",
 }
 ```
 
diff --git a/docs/events/background_events.md b/docs/events/background_events.md
@@ -1,6 +1,5 @@
 ```python exec
 import reflex as rx
-from pcweb import constants, styles
 ```
 
 # Background Tasks
diff --git a/docs/getting_started/chatapp_tutorial.md b/docs/getting_started/chatapp_tutorial.md
@@ -4,9 +4,6 @@ import os
 import reflex as rx
 import openai
 
-from pcweb.constants import CHAT_APP_URL
-from pcweb import constants
-
 from docs.getting_started import chat_tutorial_style as style
 from docs.getting_started.chat_tutorial_utils import ChatappState
 
@@ -20,7 +17,7 @@ if "OPENAI_API_KEY" not in os.environ:
 
 This tutorial will walk you through building an AI chat app with Reflex. This app is fairly complex, but don't worry - we'll break it down into small steps.
 
-You can find the full source code for this app [here]({CHAT_APP_URL}).
+You can find the full source code for this app [here](https://github.com/reflex-dev/reflex-chat).
 
 ### What You'll Learn
 
@@ -44,7 +41,7 @@ We will start by creating a new project and setting up our development environme
 ~ $ cd chatapp
 ```
 
-Next, we will create a virtual environment for our project. This is optional, but recommended. In this example, we will use [venv]({constants.VENV_URL}) to create our virtual environment.
+Next, we will create a virtual environment for our project. This is optional, but recommended. In this example, we will use [venv](https://docs.python.org/3/library/venv.html) to create our virtual environment.
 
 ```bash
 chatapp $ python3 -m venv venv
diff --git a/docs/getting_started/installation.md b/docs/getting_started/installation.md
@@ -1,5 +1,4 @@
 ```python exec
-from pcweb import constants
 import reflex as rx
 app_name = "my_app_name"
 default_url = "http://localhost:3000"
@@ -17,7 +16,7 @@ Reflex requires Python 3.10+.
 
 We **highly recommend** creating a virtual environment for your project.
 
-[uv]({constants.UV_URL}) is the recommended modern option. [venv]({constants.VENV_URL}), [conda]({constants.CONDA_URL}) and [poetry]({constants.POETRY_URL}) are some alternatives.
+[uv](https://docs.astral.sh/uv/) is the recommended modern option. [venv](https://docs.python.org/3/library/venv.html), [conda](https://conda.io/) and [poetry](https://python-poetry.org/) are some alternatives.
 
 # Install Reflex on your system
 
@@ -27,7 +26,7 @@ We **highly recommend** creating a virtual environment for your project.
 
 ## Install on macOS/Linux
 
-We will go with [uv]({constants.UV_URL}) here.
+We will go with [uv](https://docs.astral.sh/uv/) here.
 
 ### Prerequisites
 
@@ -83,7 +82,7 @@ For Windows users, we recommend using [Windows Subsystem for Linux (WSL)](https:
 
 For the rest of this section we will work with native Windows (non-WSL).
 
-We will go with [uv]({constants.UV_URL}) here.
+We will go with [uv](https://docs.astral.sh/uv/) here.
 
 ### Prerequisites
 
@@ -134,7 +133,7 @@ Bun requires runtime components of Visual C++ libraries to run on Windows. This
 
 ---
 
-Running `uv run reflex init` will return the option to start with a blank Reflex app, premade templates built by the Reflex team, or to try our [AI builder]({constants.REFLEX_BUILD_URL}).
+Running `uv run reflex init` will return the option to start with a blank Reflex app, premade templates built by the Reflex team, or to try our [AI builder](https://build.reflex.dev/).
 
 ```bash
 Initializing the web directory.
diff --git a/docs/getting_started/introduction.md b/docs/getting_started/introduction.md
@@ -1,9 +1,5 @@
 ```python exec
 import reflex as rx
-from pcweb import constants, styles
-from pcweb.styles.colors import c_color
-from pcweb.styles.fonts import base
-from pcweb.flexdown import markdown_with_shiki
 ```
 
 <!-- TODO how do we consistently rename page title? -->
@@ -78,7 +74,7 @@ def tabs():
             ),
         ),
         rx.tabs.content(
-            markdown_with_shiki(
+            rx.markdown(
                 """The frontend is built declaratively using Reflex components. Components are compiled down to JS and served to the users browser, therefore:
 
 - Only use Reflex components, vars, and var operations when building your UI. Any other logic should be put in your `State` (backend).
@@ -90,15 +86,15 @@ def tabs():
             class_name="pt-4"
         ),
         rx.tabs.content(
-            markdown_with_shiki(
+            rx.markdown(
                 """Write your backend in the `State` class. Here you can define functions and variables that can be referenced in the frontend. This code runs directly on the server and is not compiled, so there are no special caveats. Here you can use any Python external library and call any method/function.
                 """,
             ),
             value="tab2",
             class_name="pt-4"
         ),
         rx.tabs.content(
-            markdown_with_shiki(
+            rx.markdown(
                 """Each page is a Python function that returns a Reflex component. You can define multiple pages and navigate between them, see the [Routing](/docs/pages/overview) section for more information.
 
 - Start with a single page and scale to 100s of pages.
@@ -335,11 +331,11 @@ For a glimpse of the possibilities, check out these resources:
 
 - For a more real-world example, check out either the [dashboard tutorial](/docs/getting_started/dashboard_tutorial) or the [chatapp tutorial](/docs/getting_started/chatapp_tutorial).
 - Check out our open-source [templates](/docs/getting_started/open_source_templates)!
-- We have an AI Builder that can generate full Reflex apps or help with your existing app! Check it out at [Reflex Build]({constants.REFLEX_BUILD_URL})!
+- We have an AI Builder that can generate full Reflex apps or help with your existing app! Check it out at [Reflex Build](https://build.reflex.dev/)!
 - Deploy your app with a single command using [Reflex Cloud](https://reflex.dev/docs/hosting/deploy-quick-start/)!
 
 If you want to learn more about how Reflex works, check out the [How Reflex Works](/docs/advanced_onboarding/how-reflex-works) section.
 
 ## Join our Community
 
-If you have questions about anything related to Reflex, you're always welcome to ask our community on [GitHub Discussions]({constants.GITHUB_DISCUSSIONS_URL}), [Discord]({constants.DISCORD_URL}), [Forum]({constants.FORUM_URL}), and [X]({constants.TWITTER_URL}).
+If you have questions about anything related to Reflex, you're always welcome to ask our community on [GitHub Discussions](https://github.com/orgs/reflex-dev/discussions), [Discord](https://discord.gg/T5WSbC2YtQ), [Forum](https://forum.reflex.dev), and [X](https://twitter.com/getreflex).
diff --git a/docs/getting_started/open_source_templates.md b/docs/getting_started/open_source_templates.md
@@ -6,9 +6,7 @@ Check out what the community is building with Reflex. See 2000+ more public proj
 import reflex as rx
 
 from pcweb.components.code_card import gallery_app_card
-from pcweb.components.webpage.comps import h1_title
 from pcweb.pages.gallery.sidebar import TemplatesState, pagination, sidebar
-from pcweb.templates.webpage import webpage
 
 
 @rx.memo
diff --git a/docs/library/data-display/avatar.md b/docs/library/data-display/avatar.md
@@ -9,7 +9,6 @@ Avatar: |
 
 ```python exec
 import reflex as rx
-from pcweb.templates.docpage import style_grid
 ```
 
 The Avatar component is used to represent a user, and display their profile pictures or fallback texts such as initials.
@@ -30,9 +29,6 @@ rx.avatar(fallback="RX")
 
 ## Styling
 
-```python eval
-style_grid(component_used=rx.avatar, component_used_str="rx.avatar", variants=["solid", "soft"], fallback="RX")
-```
 
 ### Size
 
diff --git a/docs/library/data-display/badge.md b/docs/library/data-display/badge.md
@@ -10,7 +10,6 @@ Badge: |
 
 ```python exec
 import reflex as rx
-from pcweb.templates.docpage import style_grid
 ```
 
 Badges are used to highlight an item's status for quick recognition.
@@ -25,9 +24,6 @@ rx.badge("New")
 
 ## Styling
 
-```python eval
-style_grid(component_used=rx.badge, component_used_str="rx.badge", variants=["solid", "soft", "surface", "outline"], components_passed="England!",)
-```
 
 ### Size
 
diff --git a/docs/library/data-display/moment.md b/docs/library/data-display/moment.md
@@ -12,7 +12,6 @@ To make it easy, Reflex is wrapping [react-moment](https://www.npmjs.com/package
 ```python exec
 import reflex as rx
 from reflex.utils.serializers import serialize_datetime
-from pcweb.templates.docpage import docdemo, docdemobox, doccode, docgraphing
 ```
 
 ## Examples
@@ -77,45 +76,34 @@ rx.moment(MomentState.date_now, format="HH:mm:ss")
 
 With the props `add` and `subtract`, you can pass an `rx.MomentDelta` object to modify the displayed date without affecting the stored date in your state.
 
-```python exec
-add_example = """rx.vstack(
+#### Add
+
+```python demo
+rx.vstack(
     rx.moment(MomentState.date_now, add=rx.MomentDelta(years=2), format="YYYY-MM-DD - HH:mm:ss"),
     rx.moment(MomentState.date_now, add=rx.MomentDelta(quarters=2), format="YYYY-MM-DD - HH:mm:ss"),
     rx.moment(MomentState.date_now, add=rx.MomentDelta(months=2), format="YYYY-MM-DD - HH:mm:ss"),
-    rx.moment(MomentState.date_now, add=rx.MomentDelta(months=2), format="YYYY-MM-DD - HH:mm:ss"),
-    rx.moment(MomentState.date_now, add=rx.MomentDelta(months=2), format="YYYY-MM-DD - HH:mm:ss"),
     rx.moment(MomentState.date_now, add=rx.MomentDelta(weeks=2), format="YYYY-MM-DD - HH:mm:ss"),
     rx.moment(MomentState.date_now, add=rx.MomentDelta(days=2), format="YYYY-MM-DD - HH:mm:ss"),
     rx.moment(MomentState.date_now, add=rx.MomentDelta(hours=2), format="YYYY-MM-DD - HH:mm:ss"),
     rx.moment(MomentState.date_now, add=rx.MomentDelta(minutes=2), format="YYYY-MM-DD - HH:mm:ss"),
     rx.moment(MomentState.date_now, add=rx.MomentDelta(seconds=2), format="YYYY-MM-DD - HH:mm:ss"),
 )
-"""
-subtract_example = """rx.vstack(
+```
+
+#### Subtract
+
+```python demo
+rx.vstack(
     rx.moment(MomentState.date_now, subtract=rx.MomentDelta(years=2), format="YYYY-MM-DD - HH:mm:ss"),
     rx.moment(MomentState.date_now, subtract=rx.MomentDelta(quarters=2), format="YYYY-MM-DD - HH:mm:ss"),
     rx.moment(MomentState.date_now, subtract=rx.MomentDelta(months=2), format="YYYY-MM-DD - HH:mm:ss"),
-    rx.moment(MomentState.date_now, subtract=rx.MomentDelta(months=2), format="YYYY-MM-DD - HH:mm:ss"),
-    rx.moment(MomentState.date_now, subtract=rx.MomentDelta(months=2), format="YYYY-MM-DD - HH:mm:ss"),
     rx.moment(MomentState.date_now, subtract=rx.MomentDelta(weeks=2), format="YYYY-MM-DD - HH:mm:ss"),
     rx.moment(MomentState.date_now, subtract=rx.MomentDelta(days=2), format="YYYY-MM-DD - HH:mm:ss"),
     rx.moment(MomentState.date_now, subtract=rx.MomentDelta(hours=2), format="YYYY-MM-DD - HH:mm:ss"),
     rx.moment(MomentState.date_now, subtract=rx.MomentDelta(minutes=2), format="YYYY-MM-DD - HH:mm:ss"),
     rx.moment(MomentState.date_now, subtract=rx.MomentDelta(seconds=2), format="YYYY-MM-DD - HH:mm:ss"),
 )
-"""
-```
-
-```python eval
-rx.tabs(
-    rx.tabs.list(
-        rx.tabs.trigger("Add", value="add"),
-        rx.tabs.trigger("Subtract", value="subtract")
-    ),
-    rx.tabs.content(docdemo(add_example, comp=eval(add_example)), value="add"),
-    rx.tabs.content(docdemo(subtract_example, comp=eval(subtract_example)), value="subtract"),
-    default_value="add",
-)
 ```
 
 ### Timezones
diff --git a/docs/library/data-display/scroll_area.md b/docs/library/data-display/scroll_area.md
@@ -25,7 +25,6 @@ ScrollArea: |
 ```python exec
 import random
 import reflex as rx
-from pcweb.templates.docpage import style_grid
 ```
 
 # Scroll Area
diff --git a/docs/library/forms/radio_group.md b/docs/library/forms/radio_group.md
@@ -29,7 +29,6 @@ RadioGroupItem: |
 
 ```python exec
 import reflex as rx
-from pcweb.templates.docpage import style_grid
 ```
 
 # Radio Group
diff --git a/docs/library/forms/select-ll.md b/docs/library/forms/select-ll.md
@@ -14,7 +14,6 @@ components:
 import random
 import reflex as rx
 import reflex.components.radix.primitives as rdxp
-from pcweb.templates.docpage import style_grid
 ```
 
 # Select
diff --git a/docs/library/forms/select.md b/docs/library/forms/select.md
@@ -70,7 +70,6 @@ SelectItem: |
 ```python exec
 import random
 import reflex as rx
-from pcweb.templates.docpage import style_grid
 ```
 
 # Select
diff --git a/docs/library/forms/slider.md b/docs/library/forms/slider.md
@@ -8,7 +8,6 @@ Slider: |
 
 ```python exec
 import reflex as rx
-from pcweb.templates.docpage import style_grid
 ```
 
 # Slider
diff --git a/docs/library/forms/switch.md b/docs/library/forms/switch.md
@@ -8,7 +8,6 @@ Switch: |
 
 ```python exec
 import reflex as rx
-from pcweb.templates.docpage import style_grid
 ```
 
 # Switch
diff --git a/docs/library/graphing/charts/scatterchart.md b/docs/library/graphing/charts/scatterchart.md
@@ -8,7 +8,6 @@ components:
 
 ```python exec
 import reflex as rx
-from pcweb.templates.docpage import docgraphing
 ```
 
 A scatter chart always has two value axes to show one set of numerical data along a horizontal (value) axis and another set of numerical values along a vertical (value) axis. The chart displays points at the intersection of an x and y numerical value, combining these values into single data points.
diff --git a/docs/library/layout/fragment.md b/docs/library/layout/fragment.md
@@ -7,12 +7,11 @@ components:
 
 ```python exec
 import reflex as rx
-from pcweb import constants
 ```
 
 A Fragment is a Component that allow you to group multiple Components without a wrapper node.
 
-Refer to the React docs at [React/Fragment]({constants.FRAGMENT_COMPONENT_INFO_URL}) for more information on its use-case.
+Refer to the React docs at [React/Fragment](https://react.dev/reference/react/Fragment) for more information on its use-case.
 
 ```python demo
 rx.fragment(
diff --git a/docs/library/tables-and-data-grids/table.md b/docs/library/tables-and-data-grids/table.md
@@ -138,7 +138,11 @@ TableRowHeaderCell: |
 
 ```python exec
 import reflex as rx
-from pcweb.models import Customer
+class Customer(rx.Model, table=True):
+    name: str
+    email: str
+    phone: str
+    address: str
 ```
 
 # Table
diff --git a/docs/pages/dynamic_routing.md b/docs/pages/dynamic_routing.md
diff --git a/docs/pages/overview.md b/docs/pages/overview.md
diff --git a/docs/state/overview.md b/docs/state/overview.md
diff --git a/docs/state_structure/mixins.md b/docs/state_structure/mixins.md
diff --git a/docs/state_structure/shared_state.md b/docs/state_structure/shared_state.md
diff --git a/docs/styling/common-props.md b/docs/styling/common-props.md
diff --git a/docs/styling/responsive.md b/docs/styling/responsive.md
diff --git a/docs/styling/theming.md b/docs/styling/theming.md
diff --git a/docs/utility_methods/router_attributes.md b/docs/utility_methods/router_attributes.md
diff --git a/docs/vars/var-operations.md b/docs/vars/var-operations.md
diff --git a/docs/wrapping-react/overview.md b/docs/wrapping-react/overview.md

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ from datetime import datetime`
`3`	`3`
`4`	`4`	`import reflex as rx`
`5`	`5`
`6`		`-from pcweb.templates.docpage import docdemo, h1_comp, text_comp, docpage`
	`6`	`+from pcweb.templates.docpage import docdemo, h1_comp, text_comp`
`7`	`7`
`8`	`8`	`SYNTHETIC_EVENTS = [`
`9`	`9`	`{`