docs: redesign API Reference (interactive demo + props table polish)

[Alek99]

Summary

Redesigns the per-component API Reference block in the docs site:

• Live demo + code panel side-by-side: the rendered component sits next to its Python source. The code is parsed from the same preview source the demo uses (so children like rx.icon, placeholder=... show up correctly), and is bound to the same state vars as the demo — selecting variant=surface updates both the rendered button and variant=\"surface\" in the code. Manual syntax highlighting (function call / string / bool tokens) is applied via colored spans.
• Pill-button controls scoped to styling props (variant, size, color_scheme, radius, high_contrast, loading, disabled). Components with no styling props skip the demo + controls and go straight to the props table.
• Props table rework: columns are now prop | type | default | description with descriptions inline (no more info-icon hover). Literal types render as individual chips that wrap to multiple lines. Long rows clamp to ~4 lines with a fade-out mask across all four columns and a centered Show more / Show less toggle row beneath; the data row's bottom border is suppressed so the toggle reads as part of the same logical row.
• Dark-mode polish: sidebar bg matches the code-block bg, active sidebar highlight swapped to slate-3, active text uses slate-12 (was violet), the "Build with AI" violet badge + gradient toned down for dark mode.
• Right-hand sidebar: "Copy to markdown" and "Ask AI about this page" removed (the AI dropdown above the page already covers these).

Test plan

• Visit /docs/library/forms/button/: verify the demo + code render side-by-side, pill controls update both, prop table descriptions are inline, type chips wrap.
• Visit /docs/library/forms/input/ and scroll to rx.input.slot: code panel reflects the actual preview structure (icon child + placeholder), not just (...).
• Visit a long-prop component (e.g. Button) and click Show more on the role / color_scheme rows.
• Toggle dark mode: confirm the left sidebar bg matches the code-block bg, AI dropdown popup is opaque in both modes, the "Build with AI" badge is no longer overly bright.
• Visit a component without styling props (e.g. rx.upload): confirm no demo + controls panel appears.

🤖 Generated with Claude Code

[codspeed-hq]

Merging this PR will not alter performance

✅ 9 untouched benchmarks

---

_{Comparing alek/api-reference-redesign (2bb1a37) with main (e422b1a)}

[greptile-apps]

Greptile Summary

This PR redesigns the per-component API Reference block: replaces the old select/checkbox controls with pill buttons, adds a live demo + code panel side-by-side, inlines prop descriptions into the table, adds per-row Show more / Show less toggles, and polishes dark-mode styling in the sidebar and AI dropdown.

• P1 – controls_panel shown without demo: when component.create() raises (so comp falls back to a Fragment), interactive_controls is still non-empty and the pill controls render against blank space. Gate controls_panel on not isinstance(comp, Fragment) and interactive_controls, matching the guard used for interactive_component.

Confidence Score: 3/5

Mostly safe to merge; one P1 UX defect where the controls panel can render without a visible demo component

The P1 finding (controls without live preview) is a real UX bug that can surface today whenever component.create() fails for an interactive component. It won't crash, but presents a broken UI. Capped at 3 due to the P1 in a central docs page path.

docs/app/reflex_docs/pages/docs/component.py — the controls_panel visibility guard at line 756 needs to mirror the interactive_component guard.

Important Files Changed

Filename	Overview
docs/app/reflex_docs/pages/docs/component.py	Major redesign: adds pill-button controls, live demo/code side-by-side panel, refactors prop_docs signature, adds Show more/less toggle rows — one P1 (controls panel shown without demo when comp creation fails) and one P2 (unused h3_comp import).
docs/app/reflex_docs/templates/docpage/docpage.py	Dark-mode polish: toned-down violet badge/gradient, opaque dropdown background fix, sidebar bg pinned to a hardcoded hex (#1a1b1d) rather than a design token; also removes copy-to-markdown and ask-AI buttons from right sidebar.
docs/app/reflex_docs/templates/docpage/sidebar/sidebar.py	Sidebar active-highlight swapped from m-slate-10 to slate-3 and active text from primary-10/9 to slate-12 — cosmetic dark-mode polish with no logic changes.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[generate_props called] --> B{is_interactive?}
    B -- No --> C[skip controls loop]
    B -- Yes --> D[Loop styling_props → render_select]
    D --> E[interactive_controls list populated\nprop_dict filled with state vars]
    E --> F{component in previews?}
    F -- Yes --> G[eval preview lambda with prop_dict]
    F -- No --> H[component.create with prop_dict]
    G & H --> I{comp is Fragment?}
    I -- No + controls exist --> J[Build live demo + code panel\ninteractive_component]
    I -- Yes --> K[interactive_component = rx.fragment]
    J --> L{interactive_controls non-empty?}
    K --> L
    L -- Yes --> M[controls_panel shown\n⚠ visible even if comp is Fragment]
    L -- No --> N[controls_panel = rx.fragment]
    M & N --> O[Build props table rows\nwith Show more/less toggles]
    O --> P[rx.vstack: demo · controls · Props heading · table]

Loading

_{Reviews (1): Last reviewed commit: "docs: redesign API Reference (interactiv..." | Re-trigger Greptile}

[carlosabadia]

The color grid isn't even

[carlosabadia]

i would make the table header uppercase

[carlosabadia]

should we add a copy button on the api reference component code snippet

[Alek99]

should we add a copy button on the api reference component code snippet

This was harder than expected will have to be a follow up

[Kastier1]

rx spinner should have size be configurable. according orientation doesn't seem to do anything the progress bar looks bad in the configuration menu can we make the badge a bit bigger? its hard to see the radius changes with it that small we should prob remove this configuration one... missing api reference missing api reference seems like all dynamic render components are missing api refs input has test in it for somereason color never seems to change the switch this one seems kinda usless, either we add more config options or we should remove it do we expect to have a non hyperlinked link here? lets add more configuration options clicking on html and html embbedding feels weird.... missing api reference remove this config example lets remove this config example as well this looks kinda bad .... this config examples does not work the align here doesnt seem to do anything align doesnt seem to do anything here as well why do we always add high contrast but almost never add size or a number of the other config options... this one could use some love... honestly same goes for all typographly

[Kastier1]

these cards here dont really make sense and sometimes they are the same color which makes them look even worse this link doesnt work in `docs/getting-started/installation/` page bottom card these links do not work either `docs/getting-started/introduction/` at the bottom

Okay It looks like all link here a broken that link to /docs/docs

Missing API Reference for all dynamic rendering. Example:
docs/library/dynamic-rendering/auto-scroll/

only seems to update card 5 here... not sure if intended
docs/library/layout/grid/#api-reference

should remove this interactive api ref, it does nothing:
docs/library/layout/section/#api-reference

This page is TOOO BIG it takes why to long for me to load this page on local. We need to split up this page somehow
docs/library/other/html/

This is missing api ref section
docs/library/other/memo/

remove this interactive api ref, it does nothing
docs/library/overlay/tooltip/#api-reference