Streamlit vanilla components

Lightweight Streamlit components v2 in plain HTML, CSS and JavaScript. No npm packages, no build step. Each component copies its native Streamlit look and follows the active theme.

Built using GitHub Copilot as an AI coding agent, with manual oversight, design and testing throughout.

from streamlit_vanilla_components import st_live_searchbox, stateful_button

Run the demo with streamlit run example.py.

Installation

pip install streamlit-vanilla-components

Or install straight from GitHub:

pip install "git+https://github.com/lukehorton1/streamlit-vanilla-components.git"

Requires Python 3.10+ and Streamlit 1.57+.

Components

• st_live_searchbox
• stateful_button

st_live_searchbox

A search box whose dropdown is filled by your Python function as the user types. Returns the picked option as a string.

def search_places(term: str) -> list[str]:
    return db.query("SELECT label FROM places WHERE label ILIKE %s LIMIT 300", f"%{term}%")

choice = st_live_searchbox(search_places, placeholder="Search a place...", rank=True, max_results=50)

Parameters

Returns (str or None): the picked option, or default.

See also

• Typing again after a pick replaces it with the new text.
• Ranking only sees what search_fn returns, so return more candidates than max_results.

stateful_button

A st.button look-alike that disables itself on click, shows a spinner in place of its icon while your code runs, then a tick on success.

with stateful_button("Submit", type="primary") as clicked:
    if clicked:
        save_records()
        st.success("Saved!")

# or, for a single function call
stateful_button("Run job", on_click=run_job, args=("Job 1",))

Parameters

Same as st.button, plus icon_position and wrap.

Returns (StatefulButton): truthy on the run it was clicked. Works as a context manager, and .release(success=True) ends the busy state early.

See also

• Use either the with form or on_click. Without either, the spinner never stops.
• Errors in the with block or in on_click re-enable the button, then raise.