` element and updates its `width` and `height` properties so that it behaves like other Streamlit elements.
+
+```python
+result = my_component(
+ width="stretch", # Full width
+ height=400 # Fixed height
+)
+```
+
+On the frontend, it's generally recommended to set your component's CSS to `width: 100%; height: 100%`, since Streamlit will size the `
` wrapper element correctly. If your component needs to know its exact measurements at runtime in JavaScript, you can use a `ResizeObserver` to get that information dynamically.
+
+#### Theming and styling (`isolate_styles`)
+
+Custom Components v2 provides style isolation options to control whether or not to sandbox your component in a shadow root. This is useful to prevent your component's styles from leaking to the rest of the page and to prevent the page's styles from leaking into your component.
+
+```python
+result = my_component(
+ isolate_styles=True # Default behavior uses a shadow root
+)
+```
+
+For more information about theming and styling, see the [Theming & styling](/develop/concepts/custom-components/components-v2/theming) guide.
+
+#### Event callbacks (`on__change` or `on__change`)
+
+For each state and trigger value for your component, you must pass a callback function to the component mounting command. This callback function ensures that its state or trigger value is consistently available in the component's result object.
+
+If you have a trigger named `"click"`, then you have to pass a callback function to the keyword argument `on_click_change`. In general, to create the callback function keyword argument name, prefix your state or trigger name with `on_` and then suffix it with `_change`. These callback functions can be empty (`lambda: None`) or contain your own response logic.
+
+Whenever your JavaScript code calls `setStateValue()` or `setTriggerValue()`, your app will immediately rerun, executing the associated callback as a prefix to the script run. If you make multiple calls to `setStateValue()` or `setTriggerValue()` within the same event handler, their callbacks will be executed before the script run, in the order they were called. However, for `setStateValue()`, the callback function will only be executed if the state value changed as a result of the call.
+
+Continuing the [Interactive component](#interactive-component) example from the previous section, we add a callback function for the `count` state.
+
+```python
+# Define callback function for the count state value
+def handle_count_change():
+ # Called when the component calls setStateValue("count", value)
+ st.toast("Count was updated!")
+
+# Mount the counter component with callback
+result = counter_component(
+ width="content",
+ on_count_change=handle_count_change,
+ key="counter_1"
+)
+```
+
+## Accessing component values
+
+You can access the state and trigger values of a component through the mounting command's return value. Alternatively, if you mounted your component with a key, you can access the component values through Session State.
+
+### Component return value
+
+Components return a [`BidiComponentResult`](/develop/api-reference/custom-components/st.components.v2.types.bidicomponentresult) object that provides access to component state and trigger values. In the previous ("Interactive component") example, you can access the `count` state as `result.count`.
+
+```python
+# Access the current count value
+st.write(f"Current count: {result.count}")
+```
+
+### Component values in Session State
+
+If you mounted your component with a key, you can access the component values through Session State. In the previous ("Interactive component") example, you can equivalently access the `count` state as `st.session_state.counter_1.count`.
+
+```python
+# Access the current count value
+st.write(f"Current count: {st.session_state.counter_1.count}")
+```
+
+### State vs trigger behavior
+
+State and trigger values have different behavior in relation to reruns. State values persist across reruns, while trigger values are transient and reset after each rerun. For more information about state and trigger values, see the [State vs trigger values](/develop/concepts/custom-components/components-v2/state-and-triggers) guide.
+
+## Complete examples
+
+### Simple HTML component complete example
+
+The `hello_component` introduced in a previous section can be completed by just mounting it.
+
+`streamlit_app.py`:
+
+```python
+import streamlit as st
+
+hello_component = st.components.v2.component(
+ name="hello_world",
+ html="
+
+```python
+import streamlit as st
+from pathlib import Path
+
+# Get the current file's directory
+_COMPONENT_DIR = Path(__file__).parent
+
+@st.cache_data
+def load_html():
+ with open(_COMPONENT_DIR / "my_html.html", "r") as f:
+ return f.read()
+
+@st.cache_data
+def load_css():
+ with open(_COMPONENT_DIR / "my_css.css", "r") as f:
+ return f.read()
+
+@st.cache_data
+def load_js():
+ with open(_COMPONENT_DIR / "my_js.js", "r") as f:
+ return f.read()
+
+HTML = load_html()
+CSS = load_css()
+JS = load_js()
+```
+
+
+
+The following example includes some minimal CSS to make the component look more Streamlit-like and theme-compatible. For more information about theming and styling, see the [Theming & styling](/develop/concepts/custom-components/components-v2/theming) guide.
+
+`my_component/my_html.html`:
+
+```markup
+
+
+```python
+import streamlit as st
+
+counter_component = st.components.v2.component(
+ name="counter",
+ html="""
+
+
+## What's next?
+
+Now that you understand the basics of component registration and mounting:
+
+- Learn about [State vs triggers](/develop/concepts/custom-components/v2/state-and-triggers) for advanced component communication.
+- Explore [Theming and styling](/develop/concepts/custom-components/v2/theming) to make your components look great.
+- Discover [Package-based components](/develop/concepts/custom-components/v2/package-based) for complex projects.
+- Check out the [JavaScript API reference](/develop/api-reference/custom-components/) for complete frontend documentation.
diff --git a/content/develop/concepts/custom-components/components-v2/package-based.md b/content/develop/concepts/custom-components/components-v2/package-based.md
new file mode 100644
index 000000000..24d713e10
--- /dev/null
+++ b/content/develop/concepts/custom-components/components-v2/package-based.md
@@ -0,0 +1,744 @@
+---
+title: Package-based components
+slug: /develop/concepts/custom-components/components-v2/package-based
+description: Learn how to build complex Custom Components v2 using package-based development with TypeScript, modern build tools, and external dependencies.
+keywords: custom components v2, package-based components, TypeScript, build tools, Vite, Webpack, pyproject.toml, npm packages, component distribution
+---
+
+# Package-based components
+
+While inline components are perfect for rapid prototyping, package-based components provide the full power of modern frontend development. This approach is ideal for complex components that require TypeScript, external dependencies, build optimization, or distribution as Python packages.
+
+## When to use package-based components
+
+Choose package-based development when you need:
+
+- TypeScript support - Type safety and better developer experience.
+- External dependencies - React, D3, Chart.js, or other npm packages.
+- Build optimization - Code splitting, minification, and bundling.
+- Team development - Proper tooling, testing, and collaboration workflows.
+- Distribution - Publishing components as Python packages on PyPI.
+- Complex logic - Multi-file projects with organized code structure.
+
+## Project structure
+
+A typical package-based component follows this structure:
+
+```
+my-component-package/
+├── pyproject.toml # Top-level package configuration
+└── src/
+ └── my_component/
+ ├── __init__.py # Python package entry point
+ ├── component.py # Component Python API
+ ├── pyproject.toml # Component-specific configuration
+ └── frontend/
+ ├── dist/ # Built frontend assets
+ │ ├── bundle-.js
+ │ └── styles-.css
+ ├── src/ # Frontend source code
+ │ ├── index.ts # Main TypeScript entry
+ │ └── components/
+ ├── package.json # Frontend dependencies
+ ├── tsconfig.json # TypeScript configuration
+ └── vite.config.js # Build tool configuration
+```
+
+## Configuration setup
+
+### Top-level `pyproject.toml`
+
+Configure your Python package distribution. This file is located at the root of your project and is used to configure the package distribution. For more information about the `pyproject.toml` for packaging projects, see the [Python Packaging User Guide](https://packaging.python.org/en/latest/tutorials/packaging-projects/).
+
+#### Explicit package configuration (recommended)
+
+This approach explicitly lists packages and their locations. You need to identify each component module and the necessary assets to serve (frontend components and inner `pyproject.toml` file).
+
+```toml
+[project]
+name = "my_streamlit_component_package"
+version = "0.1.0"
+requires-python = ">=3.10"
+dependencies = ["streamlit>=1.51.0"]
+
+[build-system]
+requires = ["setuptools>=61.0", "wheel"]
+build-backend = "setuptools.build_meta"
+
+# Explicitly list packages and their source directory
+[tool.setuptools]
+packages = ["my_component"] # List each package by name
+package-dir = {"" = "src"} # Look for packages in src/ directory
+include-package-data = true # Include non-Python files
+
+# Specify which files to include in the package
+[tool.setuptools.package-data]
+my_component = ["frontend/dist/**/*", "pyproject.toml"]
+```
+
+#### Alternative: Automatic package discovery
+
+For projects with multiple packages or complex structures, you can use automatic discovery:
+
+```toml
+[project]
+name = "my_streamlit_component_package"
+version = "0.1.0"
+requires-python = ">=3.10"
+dependencies = ["streamlit>=1.51.0"]
+
+[build-system]
+requires = ["setuptools>=61.0", "wheel"]
+build-backend = "setuptools.build_meta"
+
+# Automatically find packages matching a pattern
+[tool.setuptools.packages.find]
+where = ["src"] # Look in src/ directory
+include = ["my_component*"] # Include packages starting with "my_component"
+
+[tool.setuptools]
+include-package-data = true
+
+[tool.setuptools.package-data]
+my_component = ["frontend/dist/**/*", "pyproject.toml"]
+```
+
+### Component-level `pyproject.toml`
+
+Within your component module, you need to register your component and specify the asset directory (`asset_dir`) in the `[tool.streamlit.component.components]` table. The `asset_dir` path is relative to the component's `pyproject.toml` file. All files and subdirectories within this directory will be served by Streamlit.
+
+When you start a Streamlit app, Streamlit scans all installed packages for any Streamlit components. For each installed component, Streamlit serves the contents of its asset directory. This makes it possible to refer to images and other assets within your component's HTML and CSS code. `project.name` should match the name of your package when installed.
+
+```toml
+[project]
+name = "my_streamlit_component_package"
+version = "0.1.0"
+
+# Register your components and the asset directory.
+[[tool.streamlit.component.components]]
+name = "my_component"
+asset_dir = "frontend/dist"
+```
+
+
+
+The `asset_dir` path is relative to the component's `pyproject.toml` file. All files and subdirectories within this directory will be served publicly by Streamlit and won't be protected by any logical restrictions in your app. Don't include sensitive information in your component's asset directory.
+
+
+
+## Frontend development setup
+
+### `package.json` configuration
+
+Set up your frontend dependencies and build scripts:
+
+```json
+{
+ "name": "my-component-frontend",
+ "version": "0.1.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "preview": "vite preview",
+ "type-check": "tsc --noEmit"
+ },
+ "dependencies": {
+ "@streamlit/component-v2-lib": "^0.1.0"
+ },
+ "devDependencies": {
+ "@types/node": "^20.0.0",
+ "typescript": "^5.0.0",
+ "vite": "^5.0.0"
+ }
+}
+```
+
+### TypeScript configuration
+
+Configure TypeScript for optimal development:
+
+```json
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src/**/*"],
+ "exclude": ["node_modules", "dist"]
+}
+```
+
+### Vite build configuration
+
+Configure Vite for optimized builds with hashed filenames:
+
+```javascript
+// vite.config.js
+import { defineConfig } from "vite";
+
+export default defineConfig({
+ build: {
+ outDir: "dist",
+ lib: {
+ entry: "src/index.ts",
+ name: "MyComponent",
+ fileName: (format) =>
+ `bundle-[hash].${format === "es" ? "js" : "umd.js"}`,
+ formats: ["es"],
+ },
+ rollupOptions: {
+ output: {
+ assetFileNames: (assetInfo) => {
+ if (assetInfo.name?.endsWith(".css")) {
+ return "styles-[hash].css";
+ }
+ return "[name]-[hash].[ext]";
+ },
+ },
+ },
+ sourcemap: true,
+ },
+});
+```
+
+## TypeScript component development
+
+### Basic TypeScript component
+
+Create a type-safe component using the official TypeScript library:
+
+```typescript
+// src/index.ts
+import { Component, ComponentState } from "@streamlit/component-v2-lib";
+
+/** The state/trigger values this component maintains */
+interface MyComponentState extends ComponentState {
+ count: number;
+ lastAction: string;
+}
+
+/** The shape of the data passed from Python */
+interface MyComponentData {
+ initialCount: number;
+ label: string;
+ theme: "light" | "dark";
+}
+
+const MyComponent: Component = (
+ component,
+) => {
+ const { data, setStateValue, setTriggerValue, parentElement } = component;
+
+ let count = data.initialCount || 0;
+
+ // Create UI elements
+ const container = document.createElement("div");
+ container.className = "component-container";
+
+ const display = document.createElement("div");
+ display.className = "count-display";
+ display.textContent = `Count: ${count}`;
+
+ const incrementBtn = document.createElement("button");
+ incrementBtn.textContent = `${data.label || "Increment"}`;
+ incrementBtn.className = "increment-btn";
+
+ const resetBtn = document.createElement("button");
+ resetBtn.textContent = "Reset";
+ resetBtn.className = "reset-btn";
+
+ // Assemble UI
+ container.appendChild(display);
+ container.appendChild(incrementBtn);
+ container.appendChild(resetBtn);
+ parentElement.appendChild(container);
+
+ // Apply theme
+ container.setAttribute("data-theme", data.theme || "light");
+
+ // Event handlers with type safety
+ const handleIncrement = (): void => {
+ count++;
+ display.textContent = `Count: ${count}`;
+ setStateValue("count", count);
+ setTriggerValue("lastAction", "increment");
+ };
+
+ const handleReset = (): void => {
+ count = 0;
+ display.textContent = `Count: ${count}`;
+ setStateValue("count", count);
+ setTriggerValue("lastAction", "reset");
+ };
+
+ // Attach event listeners
+ incrementBtn.addEventListener("click", handleIncrement);
+ resetBtn.addEventListener("click", handleReset);
+
+ // Initialize state
+ setStateValue("count", count);
+
+ // Return cleanup function
+ return () => {
+ incrementBtn.removeEventListener("click", handleIncrement);
+ resetBtn.removeEventListener("click", handleReset);
+ };
+};
+
+export default MyComponent;
+```
+
+### Advanced component with external dependencies
+
+Here's an example using Chart.js for data visualization:
+
+```typescript
+// src/chart-component.ts
+import { Component, ComponentState } from "@streamlit/component-v2-lib";
+import { Chart, ChartConfiguration, registerables } from "chart.js";
+
+// Register Chart.js components
+Chart.register(...registerables);
+
+interface ChartComponentState extends ComponentState {
+ selectedDataPoint: number | null;
+}
+
+interface ChartData {
+ labels: string[];
+ datasets: Array<{
+ label: string;
+ data: number[];
+ backgroundColor?: string;
+ borderColor?: string;
+ }>;
+}
+
+interface ChartComponentData {
+ chartData: ChartData;
+ chartType: "line" | "bar" | "pie";
+ title?: string;
+}
+
+const ChartComponent: Component = (
+ component,
+) => {
+ const { data, setStateValue, setTriggerValue, parentElement } = component;
+
+ // Create canvas element
+ const canvas = document.createElement("canvas");
+ canvas.width = 400;
+ canvas.height = 300;
+ parentElement.appendChild(canvas);
+
+ // Chart configuration
+ const config: ChartConfiguration = {
+ type: data.chartType || "line",
+ data: data.chartData,
+ options: {
+ responsive: true,
+ plugins: {
+ title: {
+ display: !!data.title,
+ text: data.title,
+ },
+ legend: {
+ position: "top",
+ },
+ },
+ onClick: (event, elements) => {
+ if (elements.length > 0) {
+ const dataIndex = elements[0].index;
+ setStateValue("selectedDataPoint", dataIndex);
+ setTriggerValue("dataPointClicked", {
+ index: dataIndex,
+ label: data.chartData.labels[dataIndex],
+ value: data.chartData.datasets[0].data[dataIndex],
+ });
+ }
+ },
+ },
+ };
+
+ // Create chart instance
+ const chart = new Chart(canvas, config);
+
+ // Cleanup function
+ return () => {
+ chart.destroy();
+ };
+};
+
+export default ChartComponent;
+```
+
+## Python component API
+
+### Component definition
+
+Create a clean Python API for your component:
+
+```python
+# src/my_component/component.py
+import streamlit as st
+from typing import Dict, Any, Optional, Callable, Union, List
+
+def advanced_counter(
+ initial_value: int = 0,
+ label: str = "Increment",
+ theme: str = "light",
+ key: Optional[str] = None,
+ on_count_change: Optional[Callable] = None,
+ on_lastAction_change: Optional[Callable] = None
+):
+ """
+ Create an advanced counter component with TypeScript frontend.
+
+ Parameters
+ ----------
+ initial_value : int
+ The starting count value (default: 0)
+ label : str
+ The text to display on the increment button (default: "Increment")
+ theme : str
+ The component theme, either "light" or "dark" (default: "light")
+ key : str, optional
+ A unique key for the component instance
+ on_count_change : callable, optional
+ Callback function called when count changes
+ on_lastAction_change : callable, optional
+ Callback function called when an action is triggered
+
+ Returns
+ -------
+ ComponentResult
+ Object with count and lastAction properties
+ """
+
+ # Create the component using glob pattern for hashed builds
+ component = st.components.v2.component(
+ name="advanced_counter",
+ js="bundle-*.js", # Glob pattern matches hashed filename
+ css="styles-*.css", # Glob pattern matches hashed CSS
+ data={
+ "initialCount": initial_value,
+ "label": label,
+ "theme": theme
+ }
+ )
+
+ # Mount the component
+ result = component(
+ key=key,
+ default={"count": initial_value, "lastAction": None},
+ on_count_change=on_count_change,
+ on_lastAction_change=on_lastAction_change
+ )
+
+ return result
+
+def chart_component(
+ chart_data: Dict[str, Any],
+ chart_type: str = "line",
+ title: Optional[str] = None,
+ key: Optional[str] = None,
+ on_selectedDataPoint_change: Optional[Callable] = None,
+ on_dataPointClicked_change: Optional[Callable] = None
+):
+ """
+ Create an interactive chart component using Chart.js.
+
+ Parameters
+ ----------
+ chart_data : dict
+ Chart data in Chart.js format with labels and datasets
+ chart_type : str
+ Type of chart: "line", "bar", or "pie" (default: "line")
+ title : str, optional
+ Chart title to display
+ key : str, optional
+ A unique key for the component instance
+ on_selectedDataPoint_change : callable, optional
+ Callback when a data point is selected
+ on_dataPointClicked_change : callable, optional
+ Callback when a data point is clicked
+
+ Returns
+ -------
+ ComponentResult
+ Object with selectedDataPoint and dataPointClicked properties
+ """
+
+ component = st.components.v2.component(
+ name="chart_component",
+ js="chart-bundle-*.js",
+ css="chart-styles-*.css",
+ data={
+ "chartData": chart_data,
+ "chartType": chart_type,
+ "title": title
+ }
+ )
+
+ result = component(
+ key=key,
+ default={"selectedDataPoint": None},
+ on_selectedDataPoint_change=on_selectedDataPoint_change,
+ on_dataPointClicked_change=on_dataPointClicked_change
+ )
+
+ return result
+```
+
+### Package entry point
+
+Create a clean package interface:
+
+```python
+# src/my_component/__init__.py
+"""
+My Streamlit Component Package
+
+A collection of advanced custom components built with TypeScript and modern tooling.
+"""
+
+from .component import advanced_counter, chart_component
+
+__version__ = "0.1.0"
+__all__ = ["advanced_counter", "chart_component"]
+```
+
+## Glob pattern support
+
+Package-based components support glob patterns for referencing build outputs with hashed filenames:
+
+### Why use glob patterns?
+
+Modern build tools like Vite and Webpack generate hashed filenames for cache busting:
+
+```
+frontend/dist/
+├── bundle-a1b2c3d4.js # Hashed JavaScript bundle
+├── styles-e5f6g7h8.css # Hashed CSS file
+└── assets/
+ └── logo-i9j0k1l2.png # Hashed assets
+```
+
+### Glob resolution rules
+
+1. Pattern matching: `bundle-*.js` matches `bundle-a1b2c3d4.js`
+2. Single file requirement: Pattern must resolve to exactly one file
+3. Security: Matched files must be within the `asset_dir`
+4. Relative paths: Patterns are resolved relative to `asset_dir`
+
+### Example usage
+
+```python
+# These glob patterns work with hashed build outputs
+component = st.components.v2.component(
+ name="my_component",
+ js="bundle-*.js", # Matches bundle-.js
+ css="styles-*.css", # Matches styles-.css
+ data={"message": "Hello"}
+)
+```
+
+
+
+**Error Handling**: If a glob pattern matches zero files or multiple files, Streamlit will raise a clear error message to help you debug the issue.
+
+
+
+## Development workflow
+
+### Development mode
+
+During development, use Vite's dev server for hot reloading:
+
+```bash
+# Terminal 1: Start frontend dev server
+cd src/my_component/frontend
+npm run dev
+
+# Terminal 2: Run Streamlit app
+streamlit run app.py
+```
+
+For development, temporarily use the dev server URL:
+
+```python
+# Development mode (temporary)
+component = st.components.v2.component(
+ name="my_component",
+ js="http://localhost:5173/src/index.ts", # Dev server URL
+ data={"message": "Hello"}
+)
+```
+
+### Build for production
+
+Build optimized assets for production:
+
+```bash
+cd src/my_component/frontend
+npm run build
+```
+
+This generates hashed files in the `dist/` directory that your glob patterns will match.
+
+### Testing the package
+
+Test your component locally before publishing:
+
+```python
+# app.py - Test your component
+import streamlit as st
+from my_component import advanced_counter, chart_component
+
+st.title("Component Testing")
+
+# Test the counter
+counter_result = advanced_counter(
+ initial_value=5,
+ label="Click me!",
+ theme="dark",
+ key="test_counter"
+)
+
+st.write(f"Count: {counter_result.count}")
+if counter_result.lastAction:
+ st.write(f"Last action: {counter_result.lastAction}")
+
+# Test the chart
+chart_data = {
+ "labels": ["Jan", "Feb", "Mar", "Apr", "May"],
+ "datasets": [{
+ "label": "Sales",
+ "data": [12, 19, 3, 5, 2],
+ "backgroundColor": "rgba(54, 162, 235, 0.2)",
+ "borderColor": "rgba(54, 162, 235, 1)"
+ }]
+}
+
+chart_result = chart_component(
+ chart_data=chart_data,
+ chart_type="bar",
+ title="Monthly Sales",
+ key="test_chart"
+)
+
+if chart_result.selectedDataPoint is not None:
+ st.write(f"Selected data point: {chart_result.selectedDataPoint}")
+```
+
+## Publishing your package
+
+### Build the distribution
+
+```bash
+# Install build tools
+pip install build twine
+
+# Build the package
+python -m build
+```
+
+### Upload to PyPI
+
+```bash
+# Upload to Test PyPI first
+python -m twine upload --repository testpypi dist/*
+
+# After testing, upload to PyPI
+python -m twine upload dist/*
+```
+
+### Installation and usage
+
+Users can then install and use your component:
+
+```bash
+pip install my-streamlit-component-package
+```
+
+```python
+import streamlit as st
+from my_streamlit_component_package import advanced_counter
+
+result = advanced_counter(
+ initial_value=10,
+ label="Increment Counter",
+ theme="dark"
+)
+
+st.write(f"Current count: {result.count}")
+```
+
+## Best practices
+
+### Type safety
+
+Always use TypeScript interfaces for better development experience:
+
+```typescript
+interface ComponentProps {
+ data: MyComponentData;
+ setStateValue: (key: string, value: any) => void;
+ setTriggerValue: (key: string, value: any) => void;
+ parentElement: HTMLElement;
+}
+```
+
+### Error handling
+
+Implement robust error handling in both TypeScript and Python:
+
+```typescript
+// TypeScript error handling
+export default function (component) {
+ try {
+ // Component logic here
+ return () => {
+ // Cleanup logic
+ };
+ } catch (error) {
+ console.error("Component error:", error);
+ component.parentElement.innerHTML = `_change` naming pattern.
+- Mounting a component with its command created from registration.
+
+```python
+import streamlit as st
+
+if "click_count" not in st.session_state:
+ st.session_state.click_count = 0
+
+def handle_button_click():
+ st.session_state.click_count += 1
+
+my_component = st.components.v2.component(
+ "interactive_button",
+ html="""""",
+ css="""
+ button {
+ border: none;
+ padding: .5rem;
+ border-radius: var(--st-button-radius);
+ background-color: var(--st-primary-color);
+ color: white;
+ }
+ """,
+ js="""
+ export default function(component) {
+ const { setTriggerValue, parentElement } = component;
+
+ parentElement.querySelector("button").onclick = () => {
+ setTriggerValue("action", "button_clicked");
+ };
+ }
+ """,
+)
+
+result = my_component(on_action_change=handle_button_click)
+
+if result.action:
+ st.write(f"Button clicked! Total clicks: {st.session_state.click_count}")
+```
+
+For inline component development, you must pass raw HTML, CSS, and JavaScript code to your component. Package-based components allow you to pass file references to your component. If you want to use files for an inline component, you'll need to read them into strings. The previous example is equivalent to the following:
+
+```
+project_directory/
+├── my_component/
+│ ├── __init__.py
+│ ├── my_css.css
+│ ├── my_html.html
+│ └── my_js.js
+└── streamlit_app.py
+```
+
+
+
+```python
+import streamlit as st
+from pathlib import Path
+
+# Get the current file's directory
+_COMPONENT_DIR = Path(__file__).parent
+
+@st.cache_data
+def load_html():
+ with open(_COMPONENT_DIR / "my_html.html", "r") as f:
+ return f.read()
+
+@st.cache_data
+def load_css():
+ with open(_COMPONENT_DIR / "my_css.css", "r") as f:
+ return f.read()
+
+@st.cache_data
+def load_js():
+ with open(_COMPONENT_DIR / "my_js.js", "r") as f:
+ return f.read()
+
+HTML = load_html()
+CSS = load_css()
+JS = load_js()
+```
+
+
+
+
+
+```css
+button {
+ border: none;
+ padding: 0.5rem;
+ border-radius: var(--st-button-radius);
+ background-color: var(--st-primary-color);
+ color: white;
+}
+```
+
+
+
+
+
+```markup
+
+```
+
+
+
+
+
+```javascript
+export default function (component) {
+ const { setTriggerValue, parentElement } = component;
+
+ parentElement.querySelector("button").onclick = () => {
+ setTriggerValue("action", "button_clicked");
+ };
+}
+```
+
+
+
+
+
+```python
+import streamlit as st
+from my_component import HTML, CSS, JS
+
+if "click_count" not in st.session_state:
+ st.session_state.click_count = 0
+
+def handle_button_click():
+ st.session_state.click_count += 1
+
+my_component = st.components.v2.component(
+ "interactive_button",
+ html=HTML,
+ css=CSS,
+ js=JS,
+)
+
+result = my_component(on_action_change=handle_button_click)
+
+if result.action:
+ st.write(f"Button clicked! Total clicks: {st.session_state.click_count}")
+```
+
+
+
+The remaining examples on this page will use this file structure for easier viewing of the embedded code blocks. The complete code is provided at the end of each example for easier copying and pasting.
+
+
+
+To avoid repeat warnings about re-registering the component, you can register your component in another module and import it. The standalone examples on this page are simple enough that this issue isn't apparent, but with more complex apps and components, this can be a nuisance.
+
+
+
+## Rich data exchange
+
+This example shows how to pass different data types to your component. It shows the following key concepts:
+
+- Automatic dataframe conversion to Arrow format.
+- Passing JSON data.
+- Passing an image as a base64 string.
+- Accessing data in JavaScript via the destructured `data` property.
+
+`my_component/my_html.html`:
+
+```markup
+
+ `;
+}
+```
+
+`streamlit_app.py`:
+
+```python
+import pandas as pd
+import streamlit as st
+import base64
+from my_component import HTML, JS
+
+# Create sample data
+@st.cache_data
+def create_sample_df():
+ return pd.DataFrame({
+ "name": ["Alice", "Bob", "Charlie"],
+ "city": ["New York", "London", "Tokyo"]
+})
+df = create_sample_df()
+# Load an image and convert to bytes
+@st.cache_data
+def load_image_as_base64(image_path):
+ with open(image_path, "rb") as img_file:
+ img_bytes = img_file.read()
+ return base64.b64encode(img_bytes).decode("utf-8")
+img_base64 = load_image_as_base64("favi.png")
+
+# Serialization is automatically handled by Streamlit components
+chart_component = st.components.v2.component(
+ "data_display",
+ html=HTML,
+ js=JS,
+)
+
+result = chart_component(
+ data={
+ "df": df, # Arrow-serializable dataframe
+ "user_info": {"name": "Alice"}, # JSON-serializable data
+ "image_base64": img_base64 # Image as base64 string
+ }
+)
+```
+
+
+
+```python
+import pandas as pd
+import streamlit as st
+import base64
+
+# Create sample data
+@st.cache_data
+def create_sample_df():
+ return pd.DataFrame({
+ "name": ["Alice", "Bob", "Charlie"],
+ "city": ["New York", "London", "Tokyo"]
+})
+df = create_sample_df()
+# Load an image and convert to bytes
+@st.cache_data
+def load_image_as_base64(image_path):
+ with open(image_path, "rb") as img_file:
+ img_bytes = img_file.read()
+ return base64.b64encode(img_bytes).decode("utf-8")
+img_base64 = load_image_as_base64("favi.png")
+
+# Serialization is automatically handled by Streamlit components
+chart_component = st.components.v2.component(
+ "data_display",
+ html="""
+ `;
+ }
+ """,
+)
+
+result = chart_component(
+ data={
+ "df": df, # Arrow-serializable dataframe
+ "user_info": {"name": "Alice"}, # JSON-serializable data
+ "image_base64": img_base64 # Image as base64 string
+ }
+)
+```
+
+
+
+## Complete interactive counter
+
+This comprehensive example demonstrates both state and trigger values. It shows the following key concepts:
+
+- Using state and trigger values together in one component.
+- Using CSS custom properties to style the component.
+- Bidirectional communication between Python and JavaScript.
+- Multiple event handlers.
+- Cleanup functions for proper resource management
+
+`my_component/my_html.html`:
+
+```markup
+
+
+```python
+import streamlit as st
+
+# Interactive counter with both state and triggers
+counter = st.components.v2.component(
+ "interactive_counter",
+ html="""
+
+
+## Form with validation
+
+This example shows a more complex component with form validation. It shows the following key concepts:
+
+- Form handling and validation.
+- Draft saving functionality.
+- Multiple event handlers and callbacks.
+- Using CSS custom properties to style the component.
+- Session state integration for more complex, bidirectional state management.
+- Cleanup functions for proper resource management.
+
+`my_component/my_html.html`:
+
+```markup
+
+
+```python
+import streamlit as st
+
+form_component = st.components.v2.component(
+ "contact_form",
+ html="""
+
+
+## What's next?
+
+Now that you've seen these examples:
+
+- Learn the fundamentals in [Create components](/develop/concepts/custom-components/components-v2/create).
+- Understand [State vs triggers](/develop/concepts/custom-components/components-v2/state-and-triggers) for advanced interactions.
+- Explore [Theming and styling](/develop/concepts/custom-components/components-v2/theming) to make beautiful components.
+- Build complex projects with [Package-based components](/develop/concepts/custom-components/components-v2/package-based).
diff --git a/content/develop/concepts/custom-components/components-v2/state-and-triggers.md b/content/develop/concepts/custom-components/components-v2/state-and-triggers.md
new file mode 100644
index 000000000..9d758bc2e
--- /dev/null
+++ b/content/develop/concepts/custom-components/components-v2/state-and-triggers.md
@@ -0,0 +1,1547 @@
+---
+title: State vs trigger values
+slug: /develop/concepts/custom-components/components-v2/state-and-triggers
+description: Learn the fundamental difference between state and trigger values in Custom Components v2, and when to use each approach for bidirectional communication.
+keywords: custom components v2, state values, trigger values, bidirectional communication, component events, callback functions, setStateValue, setTriggerValue
+---
+
+# State versus trigger values
+
+Custom components v2 provides two distinct mechanisms for frontend-to-backend communication, each designed for different use cases. Understanding when to use state values versus trigger values is crucial for building effective interactive components.
+
+## Two communication patterns
+
+### State values: Persistent data
+
+**Purpose**: Represent the current "state" of your component that persists across reruns.
+
+**When to use**: For values that represent ongoing component state like current selections, input values, or configuration settings.
+
+State values have the following behavior:
+
+- Persist across Streamlit reruns.
+- Accessible via direct property access on the result object and through Session State (when mounted with a key).
+- Updated using `setStateValue(key, value)` in JavaScript.
+
+### Trigger values: Event-based communication
+
+**Purpose**: Signal one-time events or user interactions.
+
+**When to use**: For user actions like clicks, form submissions, or other discrete events.
+
+Trigger values have the following behavior:
+
+- Are transient and only available for one script rerun.
+- Reset to `None` after the rerun completes.
+- Accessible via direct property access on the result object and through Session State (when mounted with a key).
+- Updated using `setTriggerValue(key, value)` in JavaScript.
+
+## Differences at a glance
+
+| Aspect | State values | Trigger values |
+| :------------------ | :-------------------------------------------- | :--------------------------------------- |
+| Persistence | Maintained across reruns | Only available for one rerun |
+| Use case | Current component state | One-time events/actions |
+| JavaScript function | `setStateValue(key, value)` | `setTriggerValue(key, value)` |
+| Callback execution | Only if `setStateValue()` _changed_ the value | Every time `setTriggerValue()` is called |
+
+## State values in practice: Radial menu component
+
+State values are perfect for tracking the ongoing state of your component. Here's a practical example that demonstrates using a state value to track a selection. The following code creates a radial menu component that allows the user to select a food item from a list of options. When the user selects an item, the component updates the state value with `setStateValue("selection", currentSelection)`. You can expand or collapse the each code block as needed. For emphasis, the JavaScript and example app code are expanded by default.
+
+For simplicity, this compoenent assumes it will always have six options in its menu, but with a little more code, you can generalize it accept an arbitrary number of items. The complete code provided at the end of this section demonstrates a generalized version that accepts an arbitrary number of items.
+
+For this example, the component is registered in an imported module.
+
+```
+project_directory/
+├── radial_menu_component/
+│ ├── __init__.py
+│ ├── menu.css
+│ ├── menu.html
+│ └── menu.js
+└── streamlit_app.py
+```
+
+### Radial menu component registration
+
+
+
+```python
+from pathlib import Path
+import streamlit as st
+
+component_dir = Path(__file__).parent
+
+
+@st.cache_data
+def load_component_code():
+ with open(component_dir / "menu.css", "r") as f:
+ CSS = f.read()
+ with open(component_dir / "menu.html", "r") as f:
+ HTML = f.read()
+ with open(component_dir / "menu.js", "r") as f:
+ JS = f.read()
+ return HTML, CSS, JS
+
+
+HTML, CSS, JS = load_component_code()
+
+radial_menu = st.components.v2.component(
+ name="radial_menu",
+ html=HTML,
+ css=CSS,
+ js=JS,
+)
+```
+
+
+
+### Radial menu HTML code
+
+
+
+```markup
+
+```
+
+
+
+### Radial menu CSS code
+
+
+
+```css
+.radial-menu {
+ position: relative;
+ display: inline-block;
+ font-family: var(--st-font);
+}
+
+/* The circular selector button and menu items*/
+.menu-selector,
+.menu-item {
+ width: 3.25rem;
+ height: 3.25rem;
+ border-radius: 50%;
+ border: 2px solid var(--st-border-color);
+ cursor: pointer;
+ background: var(--st-secondary-background-color);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s ease;
+ font-size: 1.5rem;
+}
+
+.menu-selector:hover {
+ transform: scale(1.05);
+ border-color: var(--st-primary-color);
+}
+
+/* Overlay container */
+.menu-overlay {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 100;
+ pointer-events: none;
+}
+
+/* The ring of menu items */
+.menu-ring {
+ position: relative;
+ width: 13rem;
+ height: 13rem;
+ transform: scale(0);
+ opacity: 0;
+ transition:
+ transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
+ opacity 0.2s ease;
+}
+
+.menu-ring.open {
+ transform: scale(1);
+ opacity: 1;
+ pointer-events: auto;
+}
+
+/* Menu items arranged in a circle (6 items at 60 degree intervals)*/
+.menu-item {
+ --angle: calc(var(--i) * 60deg - 90deg);
+
+ background: var(--st-background-color);
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin: -1.6125rem;
+ transform: rotate(var(--angle)) translateX(4rem)
+ rotate(calc(-1 * var(--angle)));
+}
+
+.menu-item:hover {
+ transform: rotate(var(--angle)) translateX(4rem)
+ rotate(calc(-1 * var(--angle))) scale(1.15);
+ border-color: var(--st-primary-color);
+ background: var(--st-secondary-background-color);
+}
+
+.menu-item.selected {
+ border-color: var(--st-primary-color);
+ background: var(--st-secondary-background-color);
+}
+
+/* Backdrop when menu is open */
+.menu-overlay::before {
+ content: "";
+ position: fixed;
+ inset: -100vh -100vw;
+ background: var(--st-background-color);
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ pointer-events: none;
+ z-index: -1;
+}
+
+.menu-overlay.open::before {
+ opacity: 0.7;
+ pointer-events: auto;
+}
+
+/* Center decoration */
+.menu-ring::after {
+ content: "";
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 2rem;
+ height: 2rem;
+ transform: translate(-50%, -50%);
+ border-radius: 50%;
+ background: var(--st-secondary-background-color);
+ border: 2px dashed var(--st-border-color);
+ opacity: 0.6;
+ box-sizing: border-box;
+}
+```
+
+
+
+### Radial menu JavaScript code
+
+
+
+```javascript
+export default function ({ parentElement, data, setStateValue }) {
+ const selector = parentElement.querySelector("#selector");
+ const selectorIcon = parentElement.querySelector("#selector-icon");
+ const overlay = parentElement.querySelector("#overlay");
+ const ring = parentElement.querySelector("#ring");
+
+ let isOpen = false;
+ const options = data?.options || {};
+ let currentSelection = data?.selection || Object.keys(options)[0];
+
+ // Create the 6 menu items from options
+ Object.entries(options).forEach(([value, icon], index) => {
+ const button = document.createElement("button");
+ button.className = "menu-item";
+ button.dataset.value = value;
+ button.style.setProperty("--i", index);
+ button.textContent = icon;
+
+ button.addEventListener("click", () => {
+ currentSelection = value;
+ updateDisplay();
+ toggleMenu();
+ setStateValue("selection", currentSelection);
+ });
+
+ ring.appendChild(button);
+ });
+
+ // Update the selector icon and highlight selected item
+ function updateDisplay() {
+ selectorIcon.textContent = options[currentSelection] || "?";
+
+ ring.querySelectorAll(".menu-item").forEach((item) => {
+ item.classList.toggle(
+ "selected",
+ item.dataset.value === currentSelection,
+ );
+ });
+ }
+
+ // Toggle menu open/closed
+ function toggleMenu() {
+ isOpen = !isOpen;
+ overlay.classList.toggle("open", isOpen);
+ ring.classList.toggle("open", isOpen);
+ }
+
+ // Initialize display
+ updateDisplay();
+
+ // Selector click toggles menu
+ selector.addEventListener("click", toggleMenu);
+
+ // Click outside closes menu
+ overlay.addEventListener("click", (e) => {
+ if (e.target === overlay) toggleMenu();
+ });
+}
+```
+
+
+
+### Radial menu example app
+
+
+
+```python
+import streamlit as st
+from radial_menu_component import radial_menu
+
+st.header("Radial Menu Component")
+
+st.write("Click the button to open the menu. Select your favorite food!")
+
+options = {
+ "pizza": "🍕",
+ "burger": "🍔",
+ "taco": "🌮",
+ "ramen": "🍜",
+ "sushi": "🍣",
+ "salad": "🥗",
+}
+
+result = radial_menu(
+ data={"options": options, "selection": "burger"},
+ default={"selection": "burger"},
+ on_selection_change=lambda: None,
+ key="food_menu",
+)
+
+if result.selection:
+ icon = options.get(result.selection, "")
+ st.write(f"You selected: **{icon} {result.selection.title()}**")
+```
+
+
+
+
+
+```python
+import streamlit as st
+from my_component import radial_menu
+
+radial_menu = st.components.v2.component(
+ name="radial_menu",
+ html="""
+
+ """,
+ css="""
+ .radial-menu {
+ position: relative;
+ display: inline-block;
+ font-family: var(--st-font);
+ }
+
+ /* The circular selector button */
+ .menu-selector, .menu-item {
+ width: 3.25rem;
+ height: 3.25rem;
+ border-radius: 50%;
+ border: 2px solid var(--st-border-color);
+ cursor: pointer;
+ background: var(--st-secondary-background-color);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s ease;
+ font-size: 1.5rem;
+ }
+
+ .menu-selector {
+ position: relative;
+ z-index: 10;
+ }
+
+ .menu-selector:hover {
+ transform: scale(1.05);
+ border-color: var(--st-primary-color);
+ }
+
+ /* Overlay container */
+ .menu-overlay {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 100;
+ pointer-events: none;
+ }
+
+ /* The ring of menu items */
+ .menu-ring {
+ position: relative;
+ width: 13rem;
+ height: 13rem;
+ transform: scale(0);
+ opacity: 0;
+ transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
+ opacity 0.2s ease;
+ }
+
+ .menu-ring.open {
+ transform: scale(1);
+ opacity: 1;
+ pointer-events: auto;
+ }
+
+ /* Individual menu items - dynamic angle based on --i and --total */
+ .menu-item {
+ --angle: calc(var(--i) * (360deg / var(--total, 6)) - 90deg);
+ --radius: 4rem;
+
+ background: var(--st-background-color);
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin: -1.6125rem;
+ transform:
+ rotate(var(--angle))
+ translate(var(--radius))
+ rotate(calc(-1 * var(--angle)));
+ }
+
+ .menu-item:hover {
+ transform:
+ rotate(var(--angle))
+ translate(var(--radius))
+ rotate(calc(-1 * var(--angle)))
+ scale(1.15);
+ border-color: var(--st-primary-color);
+ background: var(--st-secondary-background-color);
+ }
+
+ .menu-item.selected {
+ border-color: var(--st-primary-color);
+ background: var(--st-secondary-background-color);
+ }
+
+ /* Backdrop when menu is open */
+ .menu-overlay::before {
+ content: '';
+ position: fixed;
+ inset: -100vh -100vw;
+ background: var(--st-background-color);
+ opacity: 0;
+ transition: opacity 0.3s ease;
+ pointer-events: none;
+ z-index: -1;
+ }
+
+ .menu-overlay.open::before {
+ opacity: 0.7;
+ pointer-events: auto;
+ }
+
+ /* Center decoration */
+ .menu-ring::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 2rem;
+ height: 2rem;
+ transform: translate(-50%, -50%);
+ border-radius: 50%;
+ background: var(--st-secondary-background-color);
+ border: 2px dashed var(--st-border-color);
+ opacity: 0.6;
+ box-sizing: border-box;
+ }
+ """,
+ js="""
+ export default function ({ parentElement, data, setStateValue }) {
+ const selector = parentElement.querySelector("#selector");
+ const selectorIcon = parentElement.querySelector("#selector-icon");
+ const overlay = parentElement.querySelector("#overlay");
+ const ring = parentElement.querySelector("#ring");
+
+ let isOpen = false;
+
+ // Get options and selection from data
+ const options = data?.options || {};
+ let currentSelection = data?.selection || Object.keys(options)[0] || "";
+
+ // Calculate angle step based on number of options
+ const optionEntries = Object.entries(options);
+ const angleStep = 360 / optionEntries.length;
+
+ // Generate menu items dynamically
+ function createMenuItems() {
+ ring.innerHTML = "";
+
+ optionEntries.forEach(([value, icon], index) => {
+ const button = document.createElement("button");
+ button.className = "menu-item";
+ button.dataset.value = value;
+ button.dataset.icon = icon;
+ button.style.setProperty("--i", index);
+ button.style.setProperty("--total", optionEntries.length);
+ button.innerHTML = ``;
+
+ button.addEventListener("click", (e) => {
+ e.stopPropagation();
+ currentSelection = value;
+ updateDisplay();
+ closeMenu();
+ setStateValue("selection", currentSelection);
+ });
+
+ ring.appendChild(button);
+ });
+ }
+
+ // Update display based on current selection
+ function updateDisplay() {
+ const icon = options[currentSelection] || "?";
+ selectorIcon.textContent = icon;
+
+ ring.querySelectorAll(".menu-item").forEach((item) => {
+ item.classList.remove("selected");
+ if (item.dataset.value === currentSelection) {
+ item.classList.add("selected");
+ }
+ });
+ }
+
+ // Calculate position to keep menu in viewport
+ function calculatePosition() {
+ const selectorRect = selector.getBoundingClientRect();
+ const menuRadius = 125;
+ const viewportWidth = window.innerWidth;
+ const viewportHeight = window.innerHeight;
+
+ // Extra padding at top for Streamlit header
+ const topPadding = 70;
+ const edgePadding = 10;
+
+ const centerX = selectorRect.left + selectorRect.width / 2;
+ const centerY = selectorRect.top + selectorRect.height / 2;
+
+ let offsetX = 0;
+ let offsetY = 0;
+
+ if (centerX - menuRadius < edgePadding) {
+ offsetX = menuRadius - centerX + edgePadding;
+ } else if (centerX + menuRadius > viewportWidth - edgePadding) {
+ offsetX = viewportWidth - edgePadding - menuRadius - centerX;
+ }
+
+ if (centerY - menuRadius < topPadding) {
+ offsetY = menuRadius - centerY + topPadding;
+ } else if (centerY + menuRadius > viewportHeight - edgePadding) {
+ offsetY = viewportHeight - edgePadding - menuRadius - centerY;
+ }
+
+ return { offsetX, offsetY };
+ }
+
+ // Open menu with spring animation
+ function openMenu() {
+ isOpen = true;
+ const { offsetX, offsetY } = calculatePosition();
+ overlay.style.transform = `translate(calc(-50% + ${offsetX}px), calc(-50% + ${offsetY}px))`;
+ overlay.classList.add("open");
+ ring.classList.remove("closing");
+ ring.classList.add("open");
+ }
+
+ // Close menu with reverse animation
+ function closeMenu() {
+ isOpen = false;
+ ring.classList.remove("open");
+ ring.classList.add("closing");
+ overlay.classList.remove("open");
+
+ setTimeout(() => {
+ ring.classList.remove("closing");
+ overlay.style.transform = "translate(-50%, -50%)";
+ }, 300);
+ }
+
+ // Toggle menu
+ function toggleMenu() {
+ if (isOpen) {
+ closeMenu();
+ } else {
+ openMenu();
+ }
+ }
+
+ // Initialize
+ createMenuItems();
+ updateDisplay();
+
+ // Selector click
+ selector.addEventListener("click", (e) => {
+ e.stopPropagation();
+ toggleMenu();
+ });
+
+ // Click on ring background to close
+ overlay.addEventListener("click", (e) => {
+ if (e.target === overlay || e.target === ring) {
+ closeMenu();
+ }
+ });
+
+ // Click outside to close
+ const handleOutsideClick = (e) => {
+ if (isOpen && !parentElement.contains(e.target)) {
+ closeMenu();
+ }
+ };
+ document.addEventListener("click", handleOutsideClick);
+
+ // Cleanup
+ return () => {
+ document.removeEventListener("click", handleOutsideClick);
+ };
+ }
+ """,
+)
+
+st.header("Radial Menu Component")
+
+st.write("Click the button to open the menu. Select your favorite food!")
+
+options = {
+ "pizza": "🍕",
+ "burger": "🍔",
+ "taco": "🌮",
+ "ramen": "🍜",
+ "sushi": "🍣",
+ "salad": "🥗",
+}
+
+result = radial_menu(
+ data={"options": options, "selection": "burger"},
+ default={"selection": "burger"},
+ on_selection_change=lambda: None,
+ key="food_menu",
+)
+
+if result.selection:
+ icon = options.get(result.selection, "")
+ st.write(f"You selected: **{icon} {result.selection.title()}**")
+```
+
+
+
+## Trigger values in practice
+
+Trigger values are ideal for handling discrete user actions. The following example creates a button that requires the user to hold for two seconds to confirm the action. Only when the user continuously holds the button for two seconds will the component update the trigger value with `setTriggerValue("deleted", true)`. The component also displays a progress ring to indicate the user's progress.
+
+```python
+import streamlit as st
+
+st.title("Hold-to-Confirm Button")
+st.caption("A dangerous action that requires intentional confirmation")
+
+# Track deletion events
+if "deleted_items" not in st.session_state:
+ st.session_state.deleted_items = []
+
+danger_button = st.components.v2.component(
+ name="hold_to_confirm",
+ html="""
+ _change` pattern. This ensures the component's result object consistently contains all of its state and trigger values, including on the first run. The following example mounts a component with callbacks for the following keys:
+
+- `"user_input"` state key
+- `"selected_items"` state key
+- `"button_click"` trigger key
+- `"form_submit"` trigger key
+
+```python
+result = my_component(
+ # State callbacks - called when state changes
+ on_user_input_change=handle_input_change,
+ on_selected_items_change=handle_selection_change,
+
+ # Trigger callbacks - called when events fire
+ on_button_click_change=handle_button_click,
+ on_form_submit_change=handle_form_submit
+)
+```
+
+### Default values
+
+Use the `default` parameter to set initial state values. If no default is provided, the state key will be set to `None`. Trigger values default (and revert after events) to `None`. The following example mounts a component with default values for the following keys:
+
+- `"user_input"` state key with an empty string.
+- `"selected_items"` state key with an empty list.
+- `"current_tab"` state key with `0`.
+- `"button_click"` trigger key with `None` (Streamlit automatic default).
+
+```python
+result = my_component(
+ default={
+ "user_input": "",
+ "selected_items": [],
+ "current_tab": 0
+ },
+ on_user_input_change=handle_input,
+ on_selected_items_change=handle_selection,
+ on_current_tab_change=handle_tab_change,
+ on_button_click_change=handle_button_click
+)
+```
+
+## What's next?
+
+Now that you understand state and trigger values:
+
+- Learn about [Theming and styling](/develop/concepts/custom-components/v2/theming) to make your components look great.
+- Explore [Package-based components](/develop/concepts/custom-components/v2/package-based) for complex projects with TypeScript.
+- Check out the [JavaScript API reference](/develop/api-reference/custom-components/component-v2-lib) for complete frontend documentation.
diff --git a/content/develop/concepts/custom-components/components-v2/theming.md b/content/develop/concepts/custom-components/components-v2/theming.md
new file mode 100644
index 000000000..491cda397
--- /dev/null
+++ b/content/develop/concepts/custom-components/components-v2/theming.md
@@ -0,0 +1,546 @@
+---
+title: Theming and styling
+slug: /develop/concepts/custom-components/components-v2/theming
+description: Learn how to style Custom Components v2 with Streamlit's theme integration, CSS custom properties, and responsive design patterns.
+keywords: custom components v2, theming, CSS custom properties, styling, theme integration, responsive design, dark mode, light mode, component styling
+---
+
+# Theming and styling
+
+Custom components v2 provides seamless integration with Streamlit's theming system, allowing your components to automatically adapt to different themes, including dark and light modes. This integration is achieved through [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascading_variables/Using_custom_properties) that expose Streamlit's theme values directly to your component styles.
+
+## Accessing theme values
+
+Streamlit automatically injects CSS Custom Properties into a wrapper element around your component instance. These properties are derived from the current Streamlit theme and are prefixed with `--st-` for easy identification.
+
+## Using CSS custom properties
+
+Reference Streamlit theme values in your component styles using the [`var()`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/var) CSS function. If your component has an HTML element with the class `my-component`, the following CSS will use the following theme values:
+
+- `--st-text-color` for `theme.textColor`
+- `--st-background-color` for `theme.backgroundColor`
+- `--st-border-color` for `theme.borderColor`
+- `--st-font` for `theme.font`
+
+```css
+.my-component {
+ color: var(--st-text-color);
+ background: var(--st-background-color);
+ border: 1px solid var(--st-border-color);
+ font-family: var(--st-font);
+}
+```
+
+If you component in mounted in the sidebar, these values will correctly inherit from `theme.sidebar`.
+
+## Convert theme configuration option names to CSS custom property names
+
+In general, for any theme configuration option, use the CSS custom property `--st-` to reference the value. `` is the name of the option in the theme configuration in dash-case, also known as kebab-case.
+
+For example, to reference the primary color (`theme.primaryColor`), use `--st-primary-color`. To reference the background color (`theme.backgroundColor`), use `--st-background-color`. For a desciption of all theme configuration options, see the [`config.toml` API reference](/develop/api-reference/configuration/config.toml#theme).
+
+If a theme value is not configured, the CSS Custom Properties will have a valid value inherited from the current base theme.
+
+### Computed CSS Custom Properties
+
+There are a few computed CSS Custom Properties that don't come directly from a theme configuration option. The following CSS Custom Properties are computed:
+
+| CSS Custom Property | Used for |
+| :------------------------- | :------------------------------------------------------- |
+| `--st-heading-color` | Heading font color (placeholder); same as text color |
+| `--st-border-color-light` | Lighter border color for stale or deactivated elements |
+| `--st-widget-border-color` | Widget borders (when `theme.showWidgetBorder` is `true`) |
+
+### CSS Custom Property arrays
+
+Some theme properties are arrays. These are exposed as comma-separated strings. You can parse these in JavaScript if needed for dynamic styling.
+
+| CSS Custom Property | Used for |
+| :------------------------------ | :----------------------------- |
+| `--st-heading-font-sizes` | `theme.headingFontSizes` |
+| `--st-heading-font-weights` | `theme.headingFontWeights` |
+| `--st-chart-categorical-colors` | `theme.chartCategoricalColors` |
+| `--st-chart-sequential-colors` | `theme.chartSequentialColors` |
+
+### Directly mapped CSS custom properties
+
+The rest of the CSS Custom Properties are directly mapped to theme configuration options and are usable without parsing or modification:
+
+| CSS Custom Property | `config.toml` theme option |
+| :--------------------------------------- | :------------------------------------- |
+| `--st-primary-color` | `theme.primaryColor` |
+| `--st-background-color` | `theme.backgroundColor` |
+| `--st-secondary-background-color` | `theme.secondaryBackgroundColor` |
+| `--st-text-color` | `theme.textColor` |
+| `--st-link-color` | `theme.linkColor` |
+| `--st-link-underline` | `theme.linkUnderline` |
+| `--st-heading-font` | `theme.headingFont` |
+| `--st-code-font` | `theme.codeFont` |
+| `--st-base-radius` | `theme.baseRadius` |
+| `--st-button-radius` | `theme.buttonRadius` |
+| `--st-base-font-size` | `theme.baseFontSize` |
+| `--st-base-font-weight` | `theme.baseFontWeight` |
+| `--st-code-font-weight` | `theme.codeFontWeight` |
+| `--st-code-font-size` | `theme.codeFontSize` |
+| `--st-code-text-color` | `theme.codeTextColor` |
+| `--st-border-color` | `theme.borderColor` |
+| `--st-dataframe-border-color` | `theme.dataframeBorderColor` |
+| `--st-dataframe-header-background-color` | `theme.dataframeHeaderBackgroundColor` |
+| `--st-code-background-color` | `theme.codeBackgroundColor` |
+| `--st-font` | `theme.font` |
+| `--st-red-color` | `theme.redColor` |
+| `--st-orange-color` | `theme.orangeColor` |
+| `--st-yellow-color` | `theme.yellowColor` |
+| `--st-blue-color` | `theme.blueColor` |
+| `--st-green-color` | `theme.greenColor` |
+| `--st-violet-color` | `theme.violetColor` |
+| `--st-gray-color` | `theme.grayColor` |
+| `--st-red-background-color` | `theme.redBackgroundColor` |
+| `--st-orange-background-color` | `theme.orangeBackgroundColor` |
+| `--st-yellow-background-color` | `theme.yellowBackgroundColor` |
+| `--st-blue-background-color` | `theme.blueBackgroundColor` |
+| `--st-green-background-color` | `theme.greenBackgroundColor` |
+| `--st-violet-background-color` | `theme.violetBackgroundColor` |
+| `--st-gray-background-color` | `theme.grayBackgroundColor` |
+| `--st-red-text-color` | `theme.redTextColor` |
+| `--st-orange-text-color` | `theme.orangeTextColor` |
+| `--st-yellow-text-color` | `theme.yellowTextColor` |
+| `--st-blue-text-color` | `theme.blueTextColor` |
+| `--st-green-text-color` | `theme.greenTextColor` |
+| `--st-violet-text-color` | `theme.violetTextColor` |
+| `--st-gray-text-color` | `theme.grayTextColor` |
+
+## Practical theming examples
+
+### Basic themed component
+
+Here's a simple component that uses Streamlit's theming. Instead of using pixels for spacing, the component uses rem values. This ensures that the component will adjust to different font sizes. The font family and size are set on the parent container so they can be inherited by other elements. Execeptions like headers are styled in later lines. In genral, set colors, borders, border radii, and fonts from CSS Custom Properties.
+
+```python
+import streamlit as st
+
+themed_card = st.components.v2.component(
+ name="themed_card",
+ html="""
+
Hello, World!
", + css="h2 { color: var(--st-primary-color); }" +) + +hello_component() +``` + +To fully make the component theme-compatible, you can add more CSS to use the theme's heading font and weight. Because the theme variables for headings are only available as arrays, this requires some JavaScript logic as well. For more information, see [Theming & styling](/develop/concepts/custom-components/components-v2/theming). + +### Interactive counter complete example + +For better syntax highlighting, the example is broken down into separate files like the [Quickstart examples](/develop/concepts/custom-components/components-v2/quickstart). The raw code is imported from an `__init__.py` file. The complete code in a single file is provided at the end of each example for easier copying and pasting. + +``` +project_directory/ +├── my_component/ +│ ├── __init__.py +│ ├── my_css.css +│ ├── my_html.html +│ └── my_js.js +└── streamlit_app.py +``` + +
+ 0
+
+
+```
+
+`my_component/my_css.css`:
+
+```css
+.counter {
+ padding: 0.5rem 0.5rem;
+ border: 1px solid var(--st-border-color);
+ border-radius: var(--st-base-radius);
+ font-family: var(--st-font);
+ font-size: var(--st-base-font-size);
+ color: var(--st-text-color);
+}
+#count {
+ padding: 0.75rem;
+}
+#increment {
+ background: var(--st-primary-color);
+ color: white;
+ border: none;
+ border-radius: var(--st-button-radius);
+ padding: 0.25rem 0.5rem;
+ margin-left: 0.25rem;
+}
+#increment:hover {
+ opacity: 0.8;
+}
+```
+
+`my_component/my_js.js`:
+
+```javascript
+export default function ({ parentElement, setStateValue }) {
+ let count = 0;
+ const display = parentElement.querySelector("#count");
+ const button = parentElement.querySelector("#increment");
+
+ button.onclick = () => {
+ count++;
+ display.textContent = count;
+ setStateValue("count", count);
+ };
+}
+```
+
+`streamlit_app.py`:
+
+```python
+import streamlit as st
+from my_component import HTML, CSS, JS
+
+counter_component = st.components.v2.component(
+ name="counter",
+ html=HTML,
+ css=CSS,
+ js=JS
+)
+
+# Define callback function for the count state value
+def handle_count_change():
+ # Called when the component calls setStateValue("count", value)
+ st.toast("Count was updated!")
+
+# Mount the counter component with callback
+result = counter_component(
+ width="content",
+ on_count_change=handle_count_change,
+ key="counter_1"
+)
+
+# Access the current count value
+st.write(f"Current count: {result.count}")
+
+# Access the current count value in Session State
+st.write(f"Current count: {st.session_state.counter_1.count}")
+```
+
+
+ 0
+
+
+ """,
+ css="""
+ .counter {
+ padding: .5rem .5rem;
+ border: 1px solid var(--st-border-color);
+ border-radius: var(--st-base-radius);
+ font-family: var(--st-font);
+ font-size: var(--st-base-font-size);
+ color: var(--st-text-color);
+ }
+ #count {
+ padding: .75rem;
+ }
+ #increment {
+ background: var(--st-primary-color);
+ color: white;
+ border: none;
+ border-radius: var(--st-button-radius);
+ padding: .25rem .5rem;
+ margin-left: .25rem;
+ }
+ #increment:hover {
+ opacity: 0.8;
+ }
+ """,
+ js="""
+ export default function({ parentElement, setStateValue }) {
+ let count = 0;
+ const display = parentElement.querySelector("#count");
+ const button = parentElement.querySelector("#increment");
+
+ button.onclick = () => {
+ count++;
+ display.textContent = count;
+ setStateValue("count", count);
+ };
+ }
+ """
+)
+
+# Define callback function for the count state value
+def handle_count_change():
+ # Called when the component calls setStateValue("count", value)
+ st.toast("Count was updated!")
+
+# Mount the counter component with callback
+result = counter_component(
+ width="content",
+ on_count_change=handle_count_change,
+ key="counter_1"
+)
+
+# Access the current count value
+st.write(f"Current count: {result.count}")
+
+# Access the current count value in Session State
+st.write(f"Current count: {st.session_state.counter_1.count}")
+```
+
+Component failed to load
`;
+ }
+}
+```
+
+### Performance optimization
+
+- Use code splitting for large dependencies
+- Implement lazy loading for heavy components
+- Optimize bundle sizes with tree shaking
+
+### Documentation
+
+Provide comprehensive documentation:
+
+- TypeScript interfaces for all data shapes
+- Python docstrings with parameter descriptions
+- Usage examples and tutorials
+- Migration guides for updates
+
+## What's next?
+
+Now that you understand package-based components:
+
+- Learn about [State vs triggers](/develop/concepts/custom-components/v2/state-and-triggers) for interactive functionality.
+- Explore [Theming and styling](/develop/concepts/custom-components/v2/theming) for beautiful components.
+- Check out [Publishing components](/develop/concepts/custom-components/publish) for distribution strategies.
diff --git a/content/develop/concepts/custom-components/components-v2/quickstart.md b/content/develop/concepts/custom-components/components-v2/quickstart.md
new file mode 100644
index 000000000..68fec8634
--- /dev/null
+++ b/content/develop/concepts/custom-components/components-v2/quickstart.md
@@ -0,0 +1,980 @@
+---
+title: Quickstart examples
+slug: /develop/concepts/custom-components/components-v2/quickstart
+description: Get started quickly with Custom Components v2 through practical examples showing interactive buttons, data exchange, and complete component implementations.
+keywords: custom components v2, quickstart, examples, interactive components, data exchange, component examples, getting started
+---
+
+# Quickstart examples
+
+Get started with custom components v2 through these practical examples that demonstrate the key features and capabilities.
+
+## Two-step component process
+
+Creating and using a custom component involves two distinct steps:
+
+1. Register your component to define its structure (HTML, CSS, JavaScript).
+ - Register a component with [`st.components.v2.component()`](/develop/api-reference/custom-components/st.components.v2.component).
+ - Optional: To enable bidirectional communication, within your component's JavaScript function, communicate with Python by calling `setStateValue()` or `setTriggerValue()`. These are properties of the [`ComponentArgs`](/develop/api-reference/custom-components/component-v2-lib-componentargs) object passed to your function.
+ - Optional: To make your component theme-aware, within your component's CSS, style your component with Streamlit's [theme variables](/develop/concepts/custom-components/components-v2/theming#using-css-custom-properties).
+
+2. Mount your component to create a specific instance in your app.
+ - Use your component command, which inherits from the [`BidiComponentCallable`](/develop/api-reference/custom-components/st.components.v2.types.bidicomponentcallable) class.
+
+For more information, see [Create custom v2 components](/develop/concepts/custom-components/components-v2/create).
+
+## Simple interactive button
+
+This example shows the basics of creating an interactive component with bidirectional communication. It shows the following key concepts:
+
+- Component registration with HTML, CSS, and JavaScript.
+- Trigger values using `setTriggerValue()`.
+- Callback functions with the `on_Loading data...
+```
+
+`my_component/my_js.js`:
+
+```javascript
+export default function ({ data, parentElement }) {
+ const container = parentElement.querySelector("#data-container");
+
+ const df = data.df;
+ const userInfo = data.user_info;
+ const imgBase64 = data.image_base64;
+
+ container.innerHTML = `
+ Dataframe: ${df}
+User Info: ${userInfo.name}
+
+ `;
+}
+```
+
+`streamlit_app.py`:
+
+```python
+import pandas as pd
+import streamlit as st
+import base64
+from my_component import HTML, JS
+
+# Create sample data
+@st.cache_data
+def create_sample_df():
+ return pd.DataFrame({
+ "name": ["Alice", "Bob", "Charlie"],
+ "city": ["New York", "London", "Tokyo"]
+})
+df = create_sample_df()
+# Load an image and convert to bytes
+@st.cache_data
+def load_image_as_base64(image_path):
+ with open(image_path, "rb") as img_file:
+ img_bytes = img_file.read()
+ return base64.b64encode(img_bytes).decode("utf-8")
+img_base64 = load_image_as_base64("favi.png")
+
+# Serialization is automatically handled by Streamlit components
+chart_component = st.components.v2.component(
+ "data_display",
+ html=HTML,
+ js=JS,
+)
+
+result = chart_component(
+ data={
+ "df": df, # Arrow-serializable dataframe
+ "user_info": {"name": "Alice"}, # JSON-serializable data
+ "image_base64": img_base64 # Image as base64 string
+ }
+)
+```
+
+Loading data...
""",
+ js="""
+ export default function({ data, parentElement }) {
+ const container = parentElement.querySelector("#data-container");
+
+ const df = data.df;
+ const userInfo = data.user_info;
+ const imgBase64 = data.image_base64;
+
+ container.innerHTML = `
+ Dataframe: ${df}
+User Info: ${userInfo.name}
+
+ `;
+ }
+ """,
+)
+
+result = chart_component(
+ data={
+ "df": df, # Arrow-serializable dataframe
+ "user_info": {"name": "Alice"}, # JSON-serializable data
+ "image_base64": img_base64 # Image as base64 string
+ }
+)
+```
+
+
+
+```
+
+`my_component/my_css.css`:
+
+```css
+.counter {
+ padding: 20px;
+ border: 1px solid var(--st-border-color);
+ border-radius: var(--st-base-radius);
+ font-family: var(--st-font);
+ text-align: center;
+}
+.buttons {
+ margin-top: 15px;
+}
+button {
+ margin: 0 5px;
+ padding: 8px 16px;
+ background: var(--st-primary-color);
+ color: white;
+ border: none;
+ border-radius: var(--st-button-radius);
+ cursor: pointer;
+}
+button:hover {
+ opacity: 0.8;
+}
+#reset {
+ background: var(--st-red-color);
+}
+```
+
+`my_component/my_js.js`:
+
+```javascript
+export default function ({
+ parentElement,
+ setStateValue,
+ setTriggerValue,
+ data,
+}) {
+ let count = data?.initialCount || 0;
+ const display = parentElement.querySelector("#display");
+ const incrementBtn = parentElement.querySelector("#increment");
+ const decrementBtn = parentElement.querySelector("#decrement");
+ const resetBtn = parentElement.querySelector("#reset");
+
+ const updateDisplay = () => {
+ display.textContent = count;
+ setStateValue("count", count); // Persistent state
+ };
+
+ incrementBtn.onclick = () => {
+ count++;
+ updateDisplay();
+ };
+
+ decrementBtn.onclick = () => {
+ count--;
+ updateDisplay();
+ };
+
+ resetBtn.onclick = () => {
+ count = 0;
+ updateDisplay();
+ setTriggerValue("reset", true); // One-time trigger
+ };
+
+ // Initialize
+ updateDisplay();
+
+ // Cleanup function
+ return () => {
+ incrementBtn.removeEventListener("click", incrementBtn.onclick);
+ decrementBtn.removeEventListener("click", decrementBtn.onclick);
+ resetBtn.removeEventListener("click", resetBtn.onclick);
+ };
+}
+```
+
+`streamlit_app.py`:
+
+```python
+import streamlit as st
+from my_component import HTML, CSS, JS
+
+# Interactive counter with both state and triggers
+counter = st.components.v2.component(
+ "interactive_counter",
+ html=HTML,
+ css=CSS,
+ js=JS,
+)
+
+# Use with callbacks
+result = counter(
+ data={"initialCount": 0},
+ on_count_change=lambda: None, # Track count state
+ on_reset_change=lambda: None, # Handle reset events
+)
+
+# Display current state
+st.write(f"Current count: {result.count}")
+
+# Show when reset was triggered (only for one rerun)
+if result.reset:
+ st.toast("Counter was reset!")
+```
+
+Count: 0
+ +
+
+ """,
+ css="""
+ .counter {
+ padding: 20px;
+ border: 1px solid var(--st-border-color);
+ border-radius: var(--st-base-radius);
+ font-family: var(--st-font);
+ text-align: center;
+ }
+ .buttons {
+ margin-top: 15px;
+ }
+ button {
+ margin: 0 5px;
+ padding: 8px 16px;
+ background: var(--st-primary-color);
+ color: white;
+ border: none;
+ border-radius: var(--st-button-radius);
+ cursor: pointer;
+ }
+ button:hover {
+ opacity: 0.8;
+ }
+ #reset {
+ background: var(--st-red-color);
+ }
+ """,
+ js="""
+ export default function({ parentElement, setStateValue, setTriggerValue, data }) {
+ let count = data?.initialCount || 0;
+ const display = parentElement.querySelector("#display");
+ const incrementBtn = parentElement.querySelector("#increment");
+ const decrementBtn = parentElement.querySelector("#decrement");
+ const resetBtn = parentElement.querySelector("#reset");
+
+ const updateDisplay = () => {
+ display.textContent = count;
+ setStateValue("count", count); // Persistent state
+ };
+
+ incrementBtn.onclick = () => {
+ count++;
+ updateDisplay();
+ };
+
+ decrementBtn.onclick = () => {
+ count--;
+ updateDisplay();
+ };
+
+ resetBtn.onclick = () => {
+ count = 0;
+ updateDisplay();
+ setTriggerValue("reset", true); // One-time trigger
+ };
+
+ // Initialize
+ updateDisplay();
+
+ // Cleanup function
+ return () => {
+ incrementBtn.removeEventListener("click", incrementBtn.onclick);
+ decrementBtn.removeEventListener("click", decrementBtn.onclick);
+ resetBtn.removeEventListener("click", resetBtn.onclick);
+ };
+ }
+ """
+)
+
+# Use with callbacks
+result = counter(
+ data={"initialCount": 0},
+ on_count_change=lambda: None, # Track count state
+ on_reset_change=lambda: None, # Handle reset events
+)
+
+# Display current state
+st.write(f"Current count: {result.count}")
+
+# Show when reset was triggered (only for one rerun)
+if result.reset:
+ st.toast("Counter was reset!")
+```
+
+Count: 0
+ +
+
+```
+
+`my_component/my_css.css`:
+
+```css
+.form-container {
+ padding: 1rem;
+ border: 1px solid var(--st-border-color);
+ border-radius: var(--st-base-radius);
+ box-sizing: border-box;
+}
+h3 {
+ font-size: var(--st-heading-font-size-h3, inherit);
+ font-weight: var(--st-heading-font-weight-h3, inherit);
+ margin: 0;
+}
+input,
+textarea {
+ width: 100%;
+ padding: 0.5rem;
+ margin: 0.5rem 0;
+ background: var(--st-secondary-background-color);
+ border: 1px solid transparent;
+ border-radius: var(--st-base-radius);
+ box-sizing: border-box;
+ font-size: inherit;
+ font-family: inherit;
+}
+input:focus,
+textarea:focus {
+ outline: none;
+ border-color: var(--st-primary-color);
+}
+textarea {
+ height: 5rem;
+ resize: vertical;
+}
+.form-actions {
+ display: flex;
+ gap: 1rem;
+ margin-top: 0.75rem;
+}
+button {
+ padding: 0.5rem 1rem;
+ border-radius: var(--st-button-radius);
+ border: 1px solid transparent;
+ font-size: inherit;
+ font-family: inherit;
+}
+button[type="submit"] {
+ background: var(--st-primary-color);
+ color: white;
+}
+button[type="button"] {
+ border: 1px solid var(--st-border-color);
+ background: var(--st-primary-background-color);
+ color: var(--st-text-color);
+}
+button:hover {
+ opacity: 0.9;
+ border-color: var(--st-primary-color);
+}
+#status {
+ margin-top: 0.5rem;
+}
+```
+
+`my_component/my_js.js`:
+
+```javascript
+export default function ({
+ parentElement,
+ setStateValue,
+ setTriggerValue,
+ data,
+}) {
+ const form = parentElement.querySelector("#contact-form");
+ const nameInput = parentElement.querySelector("#name");
+ const emailInput = parentElement.querySelector("#email");
+ const messageInput = parentElement.querySelector("#message");
+ const saveDraftBtn = parentElement.querySelector("#save-draft");
+ const status = parentElement.querySelector("#status");
+
+ // Register custom CSS variables with third values from --st-heading-font-sizes and --st-heading-font-weights
+ requestAnimationFrame(() => {
+ const container = parentElement.querySelector(".form-container");
+ const headingSizes = getComputedStyle(form)
+ .getPropertyValue("--st-heading-font-sizes")
+ .trim();
+ const headingWeights = getComputedStyle(form)
+ .getPropertyValue("--st-heading-font-weights")
+ .trim();
+ const sizes = headingSizes.split(",").map((s) => s.trim());
+ const weights = headingWeights.split(",").map((s) => s.trim());
+ if (sizes[2] && container) {
+ container.style.setProperty("--st-heading-font-size-h3", sizes[2]);
+ }
+ if (weights[2] && container) {
+ container.style.setProperty("--st-heading-font-weight-h3", weights[2]);
+ }
+ });
+
+ // Load draft if available
+ const loadDraft = (draft) => {
+ nameInput.value = draft.name || "";
+ emailInput.value = draft.email || "";
+ messageInput.value = draft.message || "";
+ };
+
+ loadDraft(data?.draft || {});
+
+ // Save draft
+ const saveDraft = () => {
+ setStateValue("draft", {
+ name: nameInput.value,
+ email: emailInput.value,
+ message: messageInput.value,
+ });
+ setTriggerValue("action", "save_draft");
+ status.textContent = "Draft saved!";
+ status.style.color = "var(--st-green-color)";
+ setTimeout(() => (status.textContent = ""), 2000);
+ };
+
+ // Submit form
+ const submitForm = (e) => {
+ e.preventDefault();
+
+ if (!nameInput.value || !emailInput.value || !messageInput.value) {
+ status.textContent = "Please fill all fields";
+ status.style.color = "var(--st-red-color)";
+ return;
+ }
+
+ status.textContent = "Message sent!";
+ status.style.color = "var(--st-blue-color)";
+ setTimeout(() => (status.textContent = ""), 2000);
+ setTriggerValue("submit", {
+ name: nameInput.value,
+ email: emailInput.value,
+ message: messageInput.value,
+ });
+ loadDraft({});
+ setStateValue("draft", {});
+ };
+
+ // Event listeners - only update on button clicks
+ saveDraftBtn.addEventListener("click", saveDraft);
+ form.addEventListener("submit", submitForm);
+
+ return () => {
+ saveDraftBtn.removeEventListener("click", saveDraft);
+ form.removeEventListener("submit", submitForm);
+ };
+}
+```
+
+`streamlit_app.py`:
+
+```python
+import streamlit as st
+from my_component import HTML, CSS, JS
+
+form_component = st.components.v2.component(
+ "contact_form",
+ html=HTML,
+ css=CSS,
+ js=JS,
+)
+
+# Handle form actions
+def handle_form_action():
+ # Process submission
+ # if submission_failed:
+ # submission = st.session_state.message_form.submit
+ # st.session_state.message_form.draft=submission
+ pass
+
+# Use the component
+form_state = st.session_state.get("message_form", {})
+result = form_component(
+ data={"draft": form_state.get("draft", {})},
+ default={"draft": form_state.get("draft", {})},
+ on_draft_change=lambda: None,
+ on_submit_change=handle_form_action,
+ key="message_form"
+)
+
+if result.submit:
+ st.write("Message Submitted:")
+ result.submit
+else:
+ st.write("Current Draft:")
+ result.draft
+```
+
+Contact Form
+ +
+
+ """,
+ css="""
+ .form-container {
+ padding: 1rem;
+ border: 1px solid var(--st-border-color);
+ border-radius: var(--st-base-radius);
+ box-sizing: border-box;
+ }
+ h3 {
+ font-size: var(--st-heading-font-size-h3, inherit);
+ font-weight: var(--st-heading-font-weight-h3, inherit);
+ margin: 0;
+ }
+ input,
+ textarea {
+ width: 100%;
+ padding: 0.5rem;
+ margin: 0.5rem 0;
+ background: var(--st-secondary-background-color);
+ border: 1px solid transparent;
+ border-radius: var(--st-base-radius);
+ box-sizing: border-box;
+ font-size: inherit;
+ font-family: inherit;
+ }
+ input:focus,
+ textarea:focus {
+ outline: none;
+ border-color: var(--st-primary-color);
+ }
+ textarea {
+ height: 5rem;
+ resize: vertical;
+ }
+ .form-actions {
+ display: flex;
+ gap: 1rem;
+ margin-top: 0.75rem;
+ }
+ button {
+ padding: 0.5rem 1rem;
+ border-radius: var(--st-button-radius);
+ border: 1px solid transparent;
+ font-size: inherit;
+ font-family: inherit;
+ }
+ button[type="submit"] {
+ background: var(--st-primary-color);
+ color: white;
+ }
+ button[type="button"] {
+ border: 1px solid var(--st-border-color);
+ background: var(--st-primary-background-color);
+ color: var(--st-text-color);
+ }
+ button:hover {
+ opacity: 0.9;
+ border-color: var(--st-primary-color);
+ }
+ #status {
+ margin-top: 0.5rem;
+ }
+ """,
+ js="""
+ export default function ({
+ parentElement,
+ setStateValue,
+ setTriggerValue,
+ data,
+ }) {
+ const form = parentElement.querySelector("#contact-form");
+ const nameInput = parentElement.querySelector("#name");
+ const emailInput = parentElement.querySelector("#email");
+ const messageInput = parentElement.querySelector("#message");
+ const saveDraftBtn = parentElement.querySelector("#save-draft");
+ const status = parentElement.querySelector("#status");
+
+ // Register custom CSS variables with third values from --st-heading-font-sizes and --st-heading-font-weights
+ requestAnimationFrame(() => {
+ const container = parentElement.querySelector(".form-container");
+ const headingSizes = getComputedStyle(form)
+ .getPropertyValue("--st-heading-font-sizes")
+ .trim();
+ const headingWeights = getComputedStyle(form)
+ .getPropertyValue("--st-heading-font-weights")
+ .trim();
+ const sizes = headingSizes.split(",").map((s) => s.trim());
+ const weights = headingWeights.split(",").map((s) => s.trim());
+ if (sizes[2] && container) {
+ container.style.setProperty("--st-heading-font-size-h3", sizes[2]);
+ }
+ if (weights[2] && container) {
+ container.style.setProperty("--st-heading-font-weight-h3", weights[2]);
+ }
+ });
+
+ // Load draft if available
+ const loadDraft = (draft) => {
+ nameInput.value = draft.name || "";
+ emailInput.value = draft.email || "";
+ messageInput.value = draft.message || "";
+ };
+
+ loadDraft(data?.draft || {});
+
+ // Save draft
+ const saveDraft = () => {
+ setStateValue("draft", {
+ name: nameInput.value,
+ email: emailInput.value,
+ message: messageInput.value,
+ });
+ setTriggerValue("action", "save_draft");
+ status.textContent = "Draft saved!";
+ status.style.color = "var(--st-green-color)";
+ setTimeout(() => (status.textContent = ""), 2000);
+ };
+
+ // Submit form
+ const submitForm = (e) => {
+ e.preventDefault();
+
+ if (!nameInput.value || !emailInput.value || !messageInput.value) {
+ status.textContent = "Please fill all fields";
+ status.style.color = "var(--st-red-color)";
+ return;
+ }
+
+ status.textContent = "Message sent!";
+ status.style.color = "var(--st-blue-color)";
+ setTimeout(() => (status.textContent = ""), 2000);
+ setTriggerValue("submit", {
+ name: nameInput.value,
+ email: emailInput.value,
+ message: messageInput.value,
+ });
+ loadDraft({});
+ setStateValue("draft", {});
+ };
+
+ // Event listeners - only update on button clicks
+ saveDraftBtn.addEventListener("click", saveDraft);
+ form.addEventListener("submit", submitForm);
+
+ return () => {
+ saveDraftBtn.removeEventListener("click", saveDraft);
+ form.removeEventListener("submit", submitForm);
+ };
+ }
+ """
+)
+
+# Handle form actions
+def handle_form_action():
+ # Process submission
+ # if submission_failed:
+ # submission = st.session_state.message_form.submit
+ # st.session_state.message_form.draft=submission
+ pass
+
+# Use the component
+form_state = st.session_state.get("message_form", {})
+result = form_component(
+ data={"draft": form_state.get("draft", {})},
+ default={"draft": form_state.get("draft", {})},
+ on_draft_change=lambda: None,
+ on_submit_change=handle_form_action,
+ key="message_form"
+)
+
+if result.submit:
+ st.write("Message Submitted:")
+ result.submit
+else:
+ st.write("Current Draft:")
+ result.draft
+```
+
+Contact Form
+ +
+
+
+
+
+
+ """,
+ css="""
+ .danger-zone {
+ font-family: var(--st-font);
+ padding: 2rem;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1.5rem;
+ }
+
+ .warning-banner {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.5rem 1rem;
+ background: var(--st-red-background-color);
+ border: 1px solid var(--st-red-color);
+ border-radius: var(--st-base-radius);
+ }
+
+ .warning-icon {
+ font-size: 1rem;
+ }
+
+ .warning-text {
+ font-size: 0.75rem;
+ text-transform: uppercase;
+ letter-spacing: 0.15em;
+ color: var(--st-red-color);
+ }
+
+ .hold-button {
+ position: relative;
+ width: 7.5rem;
+ height: 7.5rem;
+ padding: 0 2rem;
+ border-radius: 50%;
+ border: 1px solid var(--st-primary-color);
+ background: var(--st-secondary-background-color);
+ cursor: pointer;
+ transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+ }
+
+ .hold-button:hover {
+ transform: scale(1.05);
+ border-color: var(--st-red-color);
+ }
+
+ .hold-button:active:not(:disabled) {
+ transform: scale(0.98);
+ }
+
+ .hold-button:disabled {
+ cursor: not-allowed;
+ opacity: 0.9;
+ }
+
+ .hold-button.holding {
+ animation: pulse 0.5s ease-in-out infinite;
+ border-color: var(--st-red-color);
+ }
+
+ .hold-button.triggered {
+ animation: success-burst 0.6s ease-out forwards;
+ }
+
+ @keyframes pulse {
+ 0%, 100% { box-shadow: 0 0 0 0 var(--st-red-color); }
+ 50% { box-shadow: 0 0 0 15px transparent; }
+ }
+
+ @keyframes success-burst {
+ 0% { transform: scale(1); }
+ 50% { transform: scale(1.15); background: var(--st-red-background-color); }
+ 100% { transform: scale(1); }
+ }
+
+ .progress-ring {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ transform: rotate(-90deg);
+ }
+
+ .ring-bg {
+ fill: none;
+ stroke: var(--st-border-color);
+ stroke-width: 4;
+ }
+
+ .ring-progress {
+ fill: none;
+ stroke: var(--st-red-color);
+ stroke-width: 4;
+ stroke-linecap: round;
+ stroke-dasharray: 283;
+ stroke-dashoffset: 283;
+ transition: stroke-dashoffset 0.1s linear;
+ filter: drop-shadow(0 0 6px var(--st-red-color));
+ }
+
+ .button-content {
+ position: relative;
+ z-index: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.25rem;
+ }
+
+ .icon {
+ font-size: 2rem;
+ transition: transform 0.3s ease;
+ }
+
+ .hold-button:hover .icon {
+ transform: scale(1.1);
+ }
+
+ .hold-button.holding .icon {
+ animation: shake 0.15s ease-in-out infinite;
+ }
+
+ @keyframes shake {
+ 0%, 100% { transform: translateX(0); }
+ 25% { transform: translateX(-2px) rotate(-5deg); }
+ 75% { transform: translateX(2px) rotate(5deg); }
+ }
+
+ .label {
+ font-size: 0.65rem;
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ color: var(--st-text-color);
+ opacity: 0.6;
+ transition: all 0.3s ease;
+ }
+
+ .hold-button.holding .label {
+ color: var(--st-red-color);
+ opacity: 1;
+ }
+
+ .hold-button.triggered .icon,
+ .hold-button.triggered .label {
+ color: var(--st-primary-color);
+ opacity: 1;
+ }
+
+ .hint {
+ font-size: 0.7rem;
+ color: var(--st-text-color);
+ opacity: 0.5;
+ margin: 0;
+ }
+ """,
+ js="""
+ export default function({ parentElement, setTriggerValue }) {
+ const button = parentElement.querySelector("#danger-btn");
+ const progress = parentElement.querySelector("#ring-progress");
+ const icon = parentElement.querySelector("#icon");
+ const label = parentElement.querySelector("#label");
+
+ const HOLD_DURATION = 2000; // 2 seconds
+ const COOLDOWN_DURATION = 1500; // cooldown after trigger
+ const CIRCUMFERENCE = 2 * Math.PI * 45; // circle circumference
+
+ let startTime = null;
+ let animationFrame = null;
+ let isDisabled = false; // Prevent interaction during cooldown
+
+ function updateProgress() {
+ if (!startTime) return;
+
+ const elapsed = Date.now() - startTime;
+ const progressPercent = Math.min(elapsed / HOLD_DURATION, 1);
+ const offset = CIRCUMFERENCE * (1 - progressPercent);
+
+ progress.style.strokeDashoffset = offset;
+
+ if (progressPercent >= 1) {
+ // Triggered!
+ triggerAction();
+ } else {
+ animationFrame = requestAnimationFrame(updateProgress);
+ }
+ }
+
+ function startHold() {
+ if (isDisabled) return; // Ignore if in cooldown
+
+ startTime = Date.now();
+ button.classList.add("holding");
+ label.textContent = "Keep holding...";
+ animationFrame = requestAnimationFrame(updateProgress);
+ }
+
+ function cancelHold() {
+ if (isDisabled) return; // Ignore if in cooldown
+
+ startTime = null;
+ button.classList.remove("holding");
+ label.textContent = "Hold to Delete";
+ progress.style.strokeDashoffset = CIRCUMFERENCE;
+
+ if (animationFrame) {
+ cancelAnimationFrame(animationFrame);
+ animationFrame = null;
+ }
+ }
+
+ function triggerAction() {
+ cancelAnimationFrame(animationFrame);
+ animationFrame = null;
+ startTime = null;
+ isDisabled = true; // Disable during cooldown
+
+ button.classList.remove("holding");
+ button.classList.add("triggered");
+ button.disabled = true;
+
+ icon.textContent = "✓";
+ label.textContent = "Deleted!";
+ progress.style.strokeDashoffset = 0;
+
+ // Send trigger to Python
+ setTriggerValue("confirmed", true);
+
+ // Reset after cooldown
+ setTimeout(() => {
+ button.classList.remove("triggered");
+ button.disabled = false;
+ isDisabled = false;
+ icon.textContent = "🗑️";
+ label.textContent = "Hold to Delete";
+ progress.style.strokeDashoffset = CIRCUMFERENCE;
+ }, COOLDOWN_DURATION);
+ }
+
+ // Mouse events
+ button.addEventListener("mousedown", startHold);
+ button.addEventListener("mouseup", cancelHold);
+ button.addEventListener("mouseleave", cancelHold);
+
+ // Touch events for mobile
+ button.addEventListener("touchstart", (e) => {
+ e.preventDefault();
+ startHold();
+ });
+ button.addEventListener("touchend", cancelHold);
+ button.addEventListener("touchcancel", cancelHold);
+
+ return () => {
+ if (animationFrame) cancelAnimationFrame(animationFrame);
+ };
+ }
+ """,
+)
+
+
+# Callback when deletion is confirmed
+def on_delete_confirmed():
+ st.session_state.deleted_items.append(
+ f"Deleted item #{len(st.session_state.deleted_items) + 1}"
+ )
+ st.toast("🗑️ Item permanently deleted!", icon="⚠️")
+
+
+# Render the component
+result = danger_button(key="danger_btn", on_confirmed_change=on_delete_confirmed)
+
+# Show deletion history
+if st.session_state.deleted_items:
+ st.divider()
+ st.subheader("Deletion Log")
+ for item in reversed(st.session_state.deleted_items[-3:]):
+ st.write(f"• {item}")
+```
+
+## Combining state and triggers
+
+Many components benefit from using both patterns together. The following example creates a stopwatch with laps. The component uses state values to track the time and whether the stopwatch is running. It also uses trigger values to track when the user starts a lap or resets the stopwatch. In summary, the component sets state and trigger values in the following events:
+
+- The user starts the stopwatch:
+ - `setStateValue("running", true)`
+
+- The user pauses the stopwatch:
+ - `setStateValue("running", false)`
+ - `setStateValue("elapsed", elapsedMs)`
+
+- The user records a lap:
+ - `setStateValue("laps", laps)`
+ - ``setTriggerValue("lap", { number: laps.length, time: elapsedMs, formatted: `${t.mins}:${t.secs}.${t.cents}` })``
+
+- The user resets the stopwatch:
+ - `setStateValue("laps", [])`
+ - `setStateValue("elapsed", 0)`
+ - `setStateValue("running", false)`
+ - `setTriggerValue("reset", true)`
+
+```python
+import streamlit as st
+
+st.title("Stopwatch with Laps")
+st.caption("Combining state values (time, running) with trigger values (lap, reset)")
+
+# Track laps in Python
+if "laps" not in st.session_state:
+ st.session_state.laps = []
+
+stopwatch = st.components.v2.component(
+ name="stopwatch",
+ html="""
+ Press and hold for 2 seconds to confirm
+
+
+ """,
+ css="""
+ .stopwatch {
+ font-family: var(--st-font);
+ color: var(--st-text-color);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 2rem;
+ gap: 2rem;
+ }
+
+ /* Ring Display */
+ .display-ring {
+ position: relative;
+ width: 14rem;
+ height: 14rem;
+ }
+
+ .ring-svg {
+ position: absolute;
+ inset: -.75rem;
+ padding: .75rem;
+ transform: rotate(-90deg);
+ overflow: visible;
+ }
+
+ .ring-track, .ring-progress {
+ fill: none;
+ stroke-width: 6;
+ }
+
+ .ring-track {
+ stroke: var(--st-secondary-background-color);
+ }
+
+ .ring-progress {
+ stroke: var(--st-primary-color);
+ stroke-linecap: round;
+ stroke-dasharray: 565.5;
+ stroke-dashoffset: 565.5;
+ transition: stroke-dashoffset 0.1s linear;
+ filter: drop-shadow(0 0 8px var(--st-primary-color));
+ }
+
+ .ring-progress.running {
+ animation: glow 2s ease-in-out infinite;
+ }
+
+ @keyframes glow {
+ 0%, 100% { opacity: 0.7; }
+ 50% { opacity: 1; }
+ }
+
+ /* Time Display */
+ .display {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ display: flex;
+ align-items: baseline;
+ gap: 2px;
+ font-family: var(--st-code-font);
+ font-size: 2.5rem;
+ font-weight: 700;
+ }
+
+ .time-segment {
+ min-width: 2ch;
+ text-align: center;
+ letter-spacing: 0.05em;
+ }
+
+ .separator {
+ opacity: 0.5;
+ }
+
+ .time-segment.small, .separator.small {
+ font-size: 1.5rem;
+ font-weight: 500;
+ }
+
+ .time-segment.small {
+ opacity: 0.7;
+ }
+
+ /* Controls */
+ .controls {
+ display: flex;
+ gap: 1rem;
+ align-items: center;
+ }
+
+ .ctrl-btn {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.25rem;
+ padding: 0.75rem 1.25rem;
+ border: none;
+ border-radius: var(--st-button-radius);
+ cursor: pointer;
+ transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+ min-width: 5rem;
+ }
+
+ .ctrl-btn:disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+ }
+
+ .ctrl-btn:hover:not(:disabled) {
+ transform: scale(1.05);
+ }
+
+ .ctrl-btn.primary {
+ background: var(--st-primary-color);
+ color: white;
+ }
+
+ .ctrl-btn.primary:hover:not(:disabled) {
+ filter: brightness(1.1);
+ }
+
+ .ctrl-btn.secondary {
+ background: var(--st-secondary-background-color);
+ border: 1px solid var(--st-border-color);
+ }
+
+ .ctrl-btn.secondary:hover:not(:disabled) {
+ border-color: var(--st-primary-color);
+ }
+
+ .btn-icon {
+ font-size: 1.25rem;
+ line-height: 1;
+ }
+
+ .btn-label {
+ font-size: 0.7rem;
+ font-weight: 500;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ }
+
+ /* Lap List */
+ .lap-list {
+ width: 100%;
+ max-width: 280px;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ max-height: 150px;
+ overflow-y: auto;
+ }
+
+ .lap-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0.5rem 1rem;
+ background: var(--st-secondary-background-color);
+ border-radius: var(--st-base-radius);
+ font-size: 0.85rem;
+ animation: slide-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+ }
+
+ @keyframes slide-in {
+ from { opacity: 0; transform: translateY(-10px); }
+ to { opacity: 1; transform: translateY(0); }
+ }
+
+ .lap-number {
+ color: var(--st-primary-color);
+ font-weight: 600;
+ }
+
+ .lap-time, .lap-delta {
+ font-family: var(--st-code-font);
+ font-size: 0.8rem;
+ opacity: 0.8;
+ }
+
+ .lap-delta.fastest {
+ color: var(--st-green-color);
+ opacity: 1;
+ }
+
+ .lap-delta.slowest {
+ color: var(--st-red-color);
+ opacity: 1;
+ }
+ """,
+ js="""
+ export default function({ parentElement, data, setStateValue, setTriggerValue }) {
+ const minutes = parentElement.querySelector("#minutes");
+ const seconds = parentElement.querySelector("#seconds");
+ const centiseconds = parentElement.querySelector("#centiseconds");
+ const ringProgress = parentElement.querySelector("#ring-progress");
+ const startBtn = parentElement.querySelector("#start-btn");
+ const lapBtn = parentElement.querySelector("#lap-btn");
+ const resetBtn = parentElement.querySelector("#reset-btn");
+ const lapList = parentElement.querySelector("#lap-list");
+
+ const CIRCUMFERENCE = 2 * Math.PI * 90;
+
+ // Initialize from state or defaults
+ let elapsedMs = data?.elapsed || 0;
+ let isRunning = data?.running || false;
+ let laps = data?.laps || [];
+ let lastTimestamp = null;
+ let animationFrame = null;
+
+ let lastMinute = Math.floor(elapsedMs / 60000);
+ let isTransitioning = false;
+
+ function formatTime(ms) {
+ const totalSeconds = Math.floor(ms / 1000);
+ const mins = Math.floor(totalSeconds / 60);
+ const secs = totalSeconds % 60;
+ const cents = Math.floor((ms % 1000) / 10);
+ return {
+ mins: String(mins).padStart(2, "0"),
+ secs: String(secs).padStart(2, "0"),
+ cents: String(cents).padStart(2, "0")
+ };
+ }
+
+ function updateDisplay() {
+ const time = formatTime(elapsedMs);
+ minutes.textContent = time.mins;
+ seconds.textContent = time.secs;
+ centiseconds.textContent = time.cents;
+
+ const currentMinute = Math.floor(elapsedMs / 60000);
+ const secondsInMinute = (elapsedMs % 60000) / 1000;
+
+ // Arc length: 0 at second 0, full circle at second 60
+ const arcLength = (secondsInMinute / 60) * CIRCUMFERENCE;
+
+ // Detect minute boundary - quick fade transition
+ if (currentMinute > lastMinute && !isTransitioning) {
+ lastMinute = currentMinute;
+ isTransitioning = true;
+
+ // Quick fade out
+ ringProgress.style.transition = "opacity 0.15s ease-out";
+ ringProgress.style.opacity = "0";
+
+ setTimeout(() => {
+ // Reset to small arc while invisible
+ ringProgress.style.transition = "none";
+ ringProgress.style.strokeDasharray = `${arcLength} ${CIRCUMFERENCE}`;
+ ringProgress.style.strokeDashoffset = 0;
+
+ // Fade back in
+ requestAnimationFrame(() => {
+ ringProgress.style.transition = "opacity 0.15s ease-in";
+ ringProgress.style.opacity = "1";
+
+ setTimeout(() => {
+ ringProgress.style.transition = "";
+ isTransitioning = false;
+ }, 150);
+ });
+ }, 150);
+ }
+
+ // Normal ring update
+ if (!isTransitioning) {
+ ringProgress.style.strokeDasharray = `${arcLength} ${CIRCUMFERENCE}`;
+ ringProgress.style.strokeDashoffset = 0;
+ }
+ }
+
+ function updateButtons() {
+ startBtn.querySelector(".btn-icon").textContent = isRunning ? "⏸" : "▶";
+ startBtn.querySelector(".btn-label").textContent = isRunning ? "Pause" : "Start";
+ startBtn.classList.toggle("running", isRunning);
+ ringProgress.classList.toggle("running", isRunning);
+
+ lapBtn.disabled = !isRunning;
+ resetBtn.disabled = isRunning || elapsedMs === 0;
+ }
+
+ function renderLaps() {
+ lapList.innerHTML = "";
+
+ if (laps.length === 0) return;
+
+ // Calculate deltas and find fastest/slowest
+ const deltas = laps.map((lap, i) => {
+ return i === 0 ? lap : lap - laps[i - 1];
+ });
+
+ const minDelta = Math.min(...deltas);
+ const maxDelta = Math.max(...deltas);
+
+ // Render in reverse (newest first)
+ [...laps].reverse().forEach((lap, reverseIdx) => {
+ const idx = laps.length - 1 - reverseIdx;
+ const delta = deltas[idx];
+ const time = formatTime(lap);
+ const deltaTime = formatTime(delta);
+
+ let deltaClass = "";
+ if (laps.length > 1) {
+ if (delta === minDelta) deltaClass = "fastest";
+ else if (delta === maxDelta) deltaClass = "slowest";
+ }
+
+ const item = document.createElement("div");
+ item.className = "lap-item";
+ item.innerHTML = `
+ Lap ${idx + 1}
+ +${deltaTime.mins}:${deltaTime.secs}.${deltaTime.cents}
+ ${time.mins}:${time.secs}.${time.cents}
+ `;
+ lapList.appendChild(item);
+ });
+ }
+
+ function tick(timestamp) {
+ if (!lastTimestamp) lastTimestamp = timestamp;
+
+ const delta = timestamp - lastTimestamp;
+ lastTimestamp = timestamp;
+
+ elapsedMs += delta;
+ updateDisplay();
+
+ if (isRunning) {
+ animationFrame = requestAnimationFrame(tick);
+ }
+ }
+
+ function start() {
+ isRunning = true;
+ lastTimestamp = null;
+ animationFrame = requestAnimationFrame(tick);
+ updateButtons();
+ setStateValue("running", true);
+ }
+
+ function pause() {
+ isRunning = false;
+ if (animationFrame) {
+ cancelAnimationFrame(animationFrame);
+ animationFrame = null;
+ }
+ updateButtons();
+ setStateValue("running", false);
+ setStateValue("elapsed", elapsedMs);
+ }
+
+ function recordLap() {
+ laps.push(elapsedMs);
+ renderLaps();
+ setStateValue("laps", laps);
+ const t = formatTime(elapsedMs);
+ setTriggerValue("lap", {
+ number: laps.length,
+ time: elapsedMs,
+ formatted: `${t.mins}:${t.secs}.${t.cents}`
+ });
+ }
+
+ function reset() {
+ elapsedMs = 0;
+ laps = [];
+ updateDisplay();
+ renderLaps();
+ updateButtons();
+ setStateValue("laps", []);
+ setStateValue("elapsed", 0);
+ setStateValue("running", false);
+ setTriggerValue("reset", true);
+ }
+
+ // Event listeners
+ startBtn.addEventListener("click", () => {
+ if (isRunning) pause();
+ else start();
+ });
+
+ lapBtn.addEventListener("click", recordLap);
+ resetBtn.addEventListener("click", reset);
+
+ // Initialize display
+ updateDisplay();
+ updateButtons();
+ renderLaps();
+
+ // Resume if was running
+ if (isRunning) {
+ lastTimestamp = null;
+ animationFrame = requestAnimationFrame(tick);
+ }
+
+ return () => {
+ if (animationFrame) cancelAnimationFrame(animationFrame);
+ };
+ }
+ """
+)
+
+# Render the component
+result = stopwatch(
+ key="stopwatch",
+ on_lap_change=lambda: None,
+ on_reset_change=lambda: None,
+ on_running_change=lambda: None,
+ on_elapsed_change=lambda: None,
+ on_laps_change=lambda: None,
+ default={"elapsed": 0, "running": False, "laps": []},
+)
+
+# Display state info
+col1, col2 = st.columns(2)
+with col1:
+ st.metric("Status", "Running" if result.running else "Paused")
+ elapsed_sec = (result.elapsed or 0) / 1000
+ st.metric("Elapsed", f"{elapsed_sec:.1f}s")
+with col2:
+ st.subheader("Lap Records (Python)")
+ for i, lap_ms in enumerate(result.laps[-5:]):
+ mins, secs = divmod(lap_ms / 1000, 60)
+ st.write(f"**Lap {i+1}**: {int(mins):02d}:{secs:05.2f}")
+```
+
+## Best practices
+
+### When to use state values
+
+- Form inputs: Current values of text fields, dropdowns, checkboxes.
+- Component configuration: Settings that affect how the component behaves.
+- Selection state: Currently selected items in lists or tables.
+- View state: Current tab, page, or mode in multi-view components.
+
+### When to use trigger values
+
+- User actions: Button clicks, form submissions, menu selections.
+- Events: File uploads, drag-and-drop operations, keyboard shortcuts.
+- Notifications: Status changes, error conditions, completion events.
+- Navigation: Page changes, modal opens/closes.
+
+### Callback registration
+
+Both state and trigger values require callback registration using the `on_
+
+
+
+
+ 00
+ :
+ 00
+ .
+ 00
+
+
+
+
+
+
+
+
+
+
+ """,
+ css="""
+ .card {
+ background: var(--st-secondary-background-color);
+ border: 1px solid var(--st-border-color);
+ border-radius: var(--st-base-radius);
+ padding: 1.25rem;
+ margin: 0.625rem 0;
+ font-family: var(--st-font);
+ font-family: var(--st-font);
+ font-size: var(--st-base-font-size);
+ }
+
+ .card-title {
+ color: var(--st-heading-color);
+ font-family: var(--st-heading-font);
+ font-size: 1.2em;
+ margin: 0 0 0.625rem 0;
+ font-weight: 600;
+ }
+
+ .card-content {
+ color: var(--st-text-color);
+ line-height: 1.5;
+ margin: 0 0 15px 0;
+ }
+
+ .card-button {
+ background: var(--st-primary-color);
+ color: white;
+ border: none;
+ border-radius: var(--st-button-radius);
+ padding: 0.5rem 1rem;
+ cursor: pointer;
+ transition: opacity 0.2s;
+ }
+
+ .card-button:hover {
+ opacity: 0.8;
+ }
+ """,
+ js="""
+ export default function({ parentElement, setTriggerValue }) {
+ const cardButton = parentElement.querySelector('.card-button');
+ cardButton.onclick = () => {
+ setTriggerValue('button_click', 'clicked');
+ };
+ }
+ """
+)
+
+result = themed_card(key="themed_example", on_button_click_change=lambda: None)
+if result.button_click:
+ st.write("Card button clicked!")
+```
+
+### Status message component
+
+The following example demonstrates using Streamlit's basic color palette to set semantic colors. This is a component that creates color-coded alert banners:
+
+```python
+import streamlit as st
+
+status_component = st.components.v2.component(
+ name="status_message",
+ html="""
+ Themed Card
++ This card automatically adapts to Streamlit's current theme. +
+ +
+
+
+
+ """,
+ css="""
+ .status {
+ display: flex;
+ align-items: center;
+ padding: 0.75rem 1rem;
+ margin: 0.5rem 0;
+ border-radius: var(--st-base-radius);
+ border-left: 0.25rem solid;
+ font-family: var(--st-font);
+ }
+
+ .status.success {
+ background: var(--st-green-background-color);
+ border-left-color: var(--st-green-color);
+ color: var(--st-text-color);
+ }
+
+ .status.warning {
+ background: var(--st-yellow-background-color);
+ border-left-color: var(--st-yellow-color);
+ color: var(--st-text-color);
+ }
+
+ .status.error {
+ background: var(--st-red-background-color);
+ border-left-color: var(--st-red-color);
+ color: var(--st-text-color);
+ }
+
+ .status.info {
+ background: var(--st-blue-background-color);
+ border-left-color: var(--st-blue-color);
+ color: var(--st-text-color);
+ }
+
+ .icon {
+ margin-right: 0.625rem;
+ font-size: 1rem;
+ }
+
+ .message {
+ flex: 1;
+ font-size: var(--st-base-font-size);
+ }
+ """,
+ js="""
+ export default function({ parentElement, data }) {
+ const container = parentElement.querySelector('#status-container');
+ const icon = parentElement.querySelector('#icon');
+ const message = parentElement.querySelector('#message');
+
+ // Set the status type class
+ container.className = `status ${data.type}`;
+
+ // Set the icon based on type
+ const icons = {
+ success: '✅',
+ warning: '⚠️',
+ error: '❌',
+ info: 'ℹ️'
+ };
+
+ icon.textContent = icons[data.type] || '•';
+ message.textContent = data.message;
+ }
+ """
+)
+
+# Mount the component four times with different status types
+status_component(
+ data={"type": "success", "message": "Operation completed successfully"},
+ key="status_success"
+)
+
+status_component(
+ data={"type": "warning", "message": "Please review your settings"},
+ key="status_warning"
+)
+
+status_component(
+ data={"type": "error", "message": "An error occurred during processing"},
+ key="status_error"
+)
+
+status_component(
+ data={"type": "info", "message": "Additional information available"},
+ key="status_info"
+)
+```
+
+### Data table component
+
+You can use CSS Custom Properties to style a data table to match Streamlit's dataframe styling.
+
+```python
+import streamlit as st
+
+data_table = st.components.v2.component(
+ name="custom_table",
+ html="""
+
+
+
+
+
+ """,
+ css="""
+ .table-container {
+ font-family: var(--st-font);
+ overflow-x: auto;
+ }
+
+ .data-table {
+ width: 100%;
+ border-collapse: collapse;
+ background: var(--st-background-color);
+ border: 1px solid var(--st-dataframe-border-color);
+ border-radius: var(--st-base-radius);
+ overflow: hidden;
+ }
+
+ .data-table th {
+ background: var(--st-dataframe-header-background-color);
+ color: var(--st-text-color);
+ font-weight: 600;
+ padding: 0.75rem 1rem;
+ text-align: left;
+ border-bottom: 1px solid var(--st-dataframe-border-color);
+ font-size: var(--st-base-font-size);
+ }
+
+ .data-table td {
+ padding: 0.75rem 1rem;
+ border-bottom: 1px solid var(--st-dataframe-border-color);
+ color: var(--st-text-color);
+ font-size: var(--st-base-font-size);
+ }
+
+ .data-table tr:last-child td {
+ border-bottom: none;
+ }
+
+ .data-table tr:hover {
+ background: var(--st-secondary-background-color);
+ }
+
+ .status-badge {
+ padding: 0.25rem 0.5rem;
+ border-radius: calc(var(--st-base-radius) / 2);
+ font-size: 0.75rem;
+ font-weight: 500;
+ }
+
+ .status-badge.success {
+ background: var(--st-green-background-color);
+ color: var(--st-green-color);
+ }
+
+ .status-badge.warning {
+ background: var(--st-yellow-background-color);
+ color: var(--st-yellow-color);
+ }
+
+ .status-badge.error {
+ background: var(--st-red-background-color);
+ color: var(--st-red-color);
+ }
+ """
+)
+
+result = data_table(key="table_example")
+```
+
+## Style isolation
+
+Custom components v2 provides style isolation options to control how your component styles interact with the rest of the page.
+
+### Isolated styles (default)
+
+By default, Streamlit sets `isolate_styles=True`, which wraps your component in a Shadow DOM:
+
+```python
+# Styles are isolated (default behavior)
+isolated_component = st.components.v2.component(
+ name="isolated",
+ html="| Name | +Value | +Status | +
|---|---|---|
| Item 1 | +100 | +Active | +
| Item 2 | +250 | +Pending | +
| Item 3 | +75 | +Inactive | +
Isolated content
",
+ css=".my-style { color: red; }", # Won't affect other elements
+ isolate_styles=True # Default
+)
+```
+
+Benefits of isolation:
+
+- Component styles won't leak to the rest of the page.
+- Page styles won't interfere with your component.
+- Safer for third-party components.
+
+### Non-isolated styles
+
+If you want your component's style to affect the rest of the page, you can set `isolate_styles=False`. This is uncommon.
+
+```python
+# Styles can affect the page
+non_isolated_component = st.components.v2.component(
+ name="non_isolated",
+ html="Content with inheritance
",
+ css=".inherits-styles { font-family: inherit; }", # Inherits page fonts
+ isolate_styles=False
+)
+```
+
+## Responsive design
+
+Create components that work well across different screen sizes. This makes your component more accessible and compatible with the Streamlit layout system. The following example uses `@media (max-width: 768px)` to create a responsive grid layout that adapts when the screen width is less than 768px.
+
+```python
+import streamlit as st
+
+responsive_component = st.components.v2.component(
+ name="responsive_layout",
+ html="""
+
+
+ """,
+ css="""
+ .responsive-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1rem;
+ padding: 1rem;
+ font-family: var(--st-font);
+ }
+
+ .grid-item {
+ background: var(--st-secondary-background-color);
+ border: 1px solid var(--st-border-color);
+ border-radius: var(--st-base-radius);
+ padding: 1.25rem;
+ text-align: center;
+ color: var(--st-text-color);
+ transition: transform 0.2s;
+ }
+
+ .grid-item:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
+ }
+
+ /* Mobile-specific styles */
+ @media (max-width: 768px) {
+ .responsive-grid {
+ grid-template-columns: 1fr;
+ gap: 0.75rem;
+ padding: 0.75rem;
+ }
+
+ .grid-item {
+ padding: 1rem;
+ }
+ }
+ """
+)
+
+responsive_component(key="responsive_example")
+```
+
+## Best practices
+
+### Always use theme variables
+
+Instead of hardcoding colors, always use Streamlit's theme variables:
+
+```css
+/* Don't do this */
+.my-component {
+ color: #262730;
+ background: #ffffff;
+}
+
+/* Do this instead */
+.my-component {
+ color: var(--st-text-color);
+ background: var(--st-background-color);
+}
+```
+
+### Test in different themes
+
+Always test your components in both light and dark base themes. Preferably, test your component with a custom theme as well, especially using different font sizes.
+
+### Use semantic color names
+
+Choose colors from the basic color palette based on their semantic meaning. Each color in the basic color palette has a text and background variation, in addition to its base color.
+
+```css
+/* Good - semantic usage */
+.error-message {
+ color: var(--st-red-text-color);
+ background: var(--st-red-background-color);
+}
+
+.success-indicator {
+ color: var(--st-green-color);
+}
+```
+
+### Respect accessibility
+
+Streamlit's theme colors are designed with accessibility in mind. Maintain proper contrast ratios when creating custom color combinations.
+
+## What's next?
+
+Now that you understand theming and styling:
+
+- Explore [Package-based components](/develop/concepts/custom-components/v2/package-based) for advanced development workflows.
+- Learn about [State vs triggers](/develop/concepts/custom-components/v2/state-and-triggers) for interactive components.
+- Check out the [Create components](/develop/concepts/custom-components/v2/create) guide for more examples.
diff --git a/content/develop/concepts/custom-components/overview.md b/content/develop/concepts/custom-components/overview.md
new file mode 100644
index 000000000..6b912c483
--- /dev/null
+++ b/content/develop/concepts/custom-components/overview.md
@@ -0,0 +1,53 @@
+---
+title: Overview of custom components
+slug: /develop/concepts/custom-components/overview
+description: Understand what Streamlit custom components are, when to use them, and compare the v1 and v2 approaches for building interactive extensions.
+keywords: custom components overview, component comparison, v1 vs v2, component capabilities, when to use components, component architecture
+---
+
+# Overview of custom components
+
+Custom components are like plugins for Streamlit that unlock capabilities beyond the built-in features. They let you integrate any web technology directly into your Streamlit app. You can create single-use custom components in your app, or package a custom component to share.
+
+Custom components can help you in the following situations:
+
+- **Built-in widgets don't meet your needs** - You need functionality that Streamlit's standard widgets can't provide.
+- **You want to integrate existing web tools** - You have JavaScript libraries or web components you want to use.
+- **You need complex interactions** - Your use case requires bidirectional communication or complex state management.
+- **You're building reusable functionality** - You want to package and share functionality across multiple apps or with the community.
+
+## Components v2 (recommended)
+
+Custom components v2 is the modern, recommended approach for building custom components in Streamlit. It represents a complete reimagining of how components work. It's designed to unlock new capabilities and dramatically simplify development.
+
+Custom components v2 include the following benefits:
+
+- **No iframe isolation** - Components are part of the Streamlit page, not isolated sandboxes.
+- **Multiple callback support** - You can pass multiple callbacks to a component for rich interactions.
+- **Stateful and event-based values** - Components have both state and event-based trigger values.
+- **Rich data exchange** - Components automatically handle JSON and dataframe (Apache Arrow) serialization.
+- **Simpler development and rapid prototyping** - You can provide HTML, CSS, and JavaScript directly from Python or build a package with TypeScript.
+- **Bidirectional communication** - Convenient utilities make bidirectional communication easy.
+- **Seamless Theme Integration** - Components automatically inherit Streamlit's theme through CSS custom properties.
+
+## Components v1 (legacy)
+
+Components v1 is the original framework that has been stable and widely used since 2020. While components v2 is now the recommended approach, components v1 remains supported for existing components.
+
+V1 components have the following key differences from v2 components:
+
+- **Iframe isolation** - Components run in isolated iframes for security.
+- **Primarily unidirectional communication** - The API is less optimatized for bidirectional communication.
+- **Mature ecosystem** - Many existing components and templates use the v1 architecture.
+
+## Comparing components v1 and v2
+
+| Feature | Components v2 **Recommended** | Components v1 |
+| -------------------- | ------------------------------------------ | ------------------------ |
+| **Communication** | Full bidirectional with multiple callbacks | Primarily unidirectional |
+| **Isolation** | Integrated with page | Iframe-based |
+| **Data exchange** | Rich formats (JSON, Arrow, bytes) | Basic JSON |
+| **Development** | Inline or package-based | Template-based |
+| **State management** | Full state and trigger support | Limited |
+| **Prototyping** | Immediate with inline approach | Requires setup |
+| **Best for** | New projects and modern features | Existing components |
diff --git a/content/develop/concepts/custom-components/publish-component.md b/content/develop/concepts/custom-components/publish.md
similarity index 100%
rename from content/develop/concepts/custom-components/publish-component.md
rename to content/develop/concepts/custom-components/publish.md
diff --git a/content/menu.md b/content/menu.md
index 0569cc83e..d3540958e 100644
--- a/content/menu.md
+++ b/content/menu.md
@@ -98,14 +98,30 @@ site_menu:
url: /develop/concepts/connections/security-reminders
- category: Develop / Concepts / Custom components
url: /develop/concepts/custom-components
- - category: Develop / Concepts / Custom components / Intro to custom components
- url: /develop/concepts/custom-components/intro
- - category: Develop / Concepts / Custom components / Create a Component
- url: /develop/concepts/custom-components/create
- - category: Develop / Concepts / Custom components / Publish a Component
+ - category: Develop / Concepts / Custom components / Overview
+ url: /develop/concepts/custom-components/overview
+ - category: Develop / Concepts / Custom components / Components v2
+ url: /develop/concepts/custom-components/components-v2
+ - category: Develop / Concepts / Custom components / Components v2 / Quickstart examples
+ url: /develop/concepts/custom-components/components-v2/quickstart
+ - category: Develop / Concepts / Custom components / Components v2 / Create components
+ url: /develop/concepts/custom-components/components-v2/create
+ - category: Develop / Concepts / Custom components / Components v2 / State vs trigger values
+ url: /develop/concepts/custom-components/components-v2/state-and-triggers
+ - category: Develop / Concepts / Custom components / Components v2 / Theming and styling
+ url: /develop/concepts/custom-components/components-v2/theming
+ - category: Develop / Concepts / Custom components / Components v2 / Package-based components
+ url: /develop/concepts/custom-components/components-v2/package-based
+ - category: Develop / Concepts / Custom components / Components v1
+ url: /develop/concepts/custom-components/components-v1
+ - category: Develop / Concepts / Custom components / Components v1 / Intro to v1 components
+ url: /develop/concepts/custom-components/components-v1/intro
+ - category: Develop / Concepts / Custom components / Components v1 / Create a component
+ url: /develop/concepts/custom-components/components-v1/create
+ - category: Develop / Concepts / Custom components / Components v1 / Limitations
+ url: /develop/concepts/custom-components/components-v1/limitations
+ - category: Develop / Concepts / Custom components / Publish a component
url: /develop/concepts/custom-components/publish
- - category: Develop / Concepts / Custom components / Limitations
- url: /develop/concepts/custom-components/limitations
- category: Develop / Concepts / Custom components / Component gallery
url: https://streamlit.io/components
- category: Develop / Concepts / Configuration and theming
diff --git a/public/_redirects b/public/_redirects
index f1141914c..6c7582001 100644
--- a/public/_redirects
+++ b/public/_redirects
@@ -43,14 +43,14 @@
/en/stable/caching.html /develop/concepts/architecture/caching
/en/stable/changelog.html /develop/quick-reference/release-notes
/en/stable/deploy_streamlit_app.html /deploy/streamlit-community-cloud/deploy-your-app
-/en/stable/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/stable/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/stable/getting_started.html /get-started
/en/stable/index.html /
/en/stable/installation.html /get-started/installation
/en/stable/main_concepts.html /get-started/fundamentals/main-concepts
/en/stable/publish_streamlit_components.html /develop/concepts/custom-components/publish
/en/stable/session_state_api.html /develop/api-reference/caching-and-state/st.session_state
-/en/stable/streamlit_components.html /develop/concepts/custom-components/create
+/en/stable/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/stable/streamlit_components_faq.html /knowledge-base/components
/en/stable/streamlit_configuration.html /develop/api-reference/configuration/config.toml
/en/stable/streamlit_faq.html /knowledge-base
@@ -99,13 +99,13 @@
/en/0.63.0/caching.html /develop/concepts/architecture/caching
/en/0.63.0/changelog.html /develop/quick-reference/release-notes/2020
/en/0.63.0/cli.html /get-started
-/en/0.63.0/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/0.63.0/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/0.63.0/getting_started.html /get-started
/en/0.63.0/index.html /
/en/0.63.0/main_concepts.html /get-started/fundamentals/main-concepts
/en/0.63.0/pre_release_features.html /get-started
/en/0.63.0/publish_streamlit_components.html /develop/concepts/custom-components/publish
-/en/0.63.0/streamlit_components.html /develop/concepts/custom-components/create
+/en/0.63.0/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/0.63.0/streamlit_components_faq.html /knowledge-base/components
/en/0.63.0/troubleshooting/caching_issues.html /knowledge-base/using-streamlit/caching-issues
/en/0.63.0/troubleshooting/clean-install.html /get-started/installation
@@ -122,13 +122,13 @@
/en/0.64.0/caching.html /develop/concepts/architecture/caching
/en/0.64.0/changelog.html /develop/quick-reference/release-notes/2020
/en/0.64.0/cli.html /get-started
-/en/0.64.0/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/0.64.0/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/0.64.0/getting_started.html /get-started
/en/0.64.0/index.html /
/en/0.64.0/main_concepts.html /get-started/fundamentals/main-concepts
/en/0.64.0/pre_release_features.html /get-started
/en/0.64.0/publish_streamlit_components.html /develop/concepts/custom-components/publish
-/en/0.64.0/streamlit_components.html /develop/concepts/custom-components/create
+/en/0.64.0/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/0.64.0/streamlit_components_faq.html /knowledge-base/components
/en/0.64.0/troubleshooting/caching_issues.html /knowledge-base/using-streamlit/caching-issues
/en/0.64.0/troubleshooting/clean-install.html /get-started/installation
@@ -145,13 +145,13 @@
/en/0.65.0/caching.html /develop/concepts/architecture/caching
/en/0.65.0/changelog.html /develop/quick-reference/release-notes/2020
/en/0.65.0/cli.html /get-started
-/en/0.65.0/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/0.65.0/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/0.65.0/getting_started.html /get-started
/en/0.65.0/index.html /
/en/0.65.0/main_concepts.html /get-started/fundamentals/main-concepts
/en/0.65.0/pre_release_features.html /get-started
/en/0.65.0/publish_streamlit_components.html /develop/concepts/custom-components/publish
-/en/0.65.0/streamlit_components.html /develop/concepts/custom-components/create
+/en/0.65.0/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/0.65.0/streamlit_faq.html /knowledge-base
/en/0.65.0/troubleshooting/caching_issues.html /knowledge-base/using-streamlit/caching-issues
/en/0.65.0/troubleshooting/clean-install.html /get-started/installation
@@ -168,13 +168,13 @@
/en/0.66.0/caching.html /develop/concepts/architecture/caching
/en/0.66.0/changelog.html /develop/quick-reference/release-notes/2020
/en/0.66.0/cli.html /get-started
-/en/0.66.0/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/0.66.0/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/0.66.0/getting_started.html /get-started
/en/0.66.0/index.html /
/en/0.66.0/main_concepts.html /get-started/fundamentals/main-concepts
/en/0.66.0/pre_release_features.html /get-started
/en/0.66.0/publish_streamlit_components.html /develop/concepts/custom-components/publish
-/en/0.66.0/streamlit_components.html /develop/concepts/custom-components/create
+/en/0.66.0/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/0.66.0/streamlit_faq.html /knowledge-base
/en/0.66.0/troubleshooting/caching_issues.html /knowledge-base/using-streamlit/caching-issues
/en/0.66.0/troubleshooting/clean-install.html /get-started/installation
@@ -191,13 +191,13 @@
/en/0.67.0/caching.html /develop/concepts/architecture/caching
/en/0.67.0/changelog.html /develop/quick-reference/release-notes/2020
/en/0.67.0/cli.html /get-started
-/en/0.67.0/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/0.67.0/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/0.67.0/getting_started.html /get-started
/en/0.67.0/index.html /
/en/0.67.0/main_concepts.html /get-started/fundamentals/main-concepts
/en/0.67.0/pre_release_features.html /get-started
/en/0.67.0/publish_streamlit_components.html /develop/concepts/custom-components/publish
-/en/0.67.0/streamlit_components.html /develop/concepts/custom-components/create
+/en/0.67.0/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/0.67.0/streamlit_faq.html /knowledge-base
/en/0.67.0/troubleshooting/caching_issues.html /knowledge-base/using-streamlit/caching-issues
/en/0.67.0/troubleshooting/clean-install.html /get-started/installation
@@ -214,14 +214,14 @@
/en/0.68.0/caching.html /develop/concepts/architecture/caching
/en/0.68.0/changelog.html /develop/quick-reference/release-notes/2020
/en/0.68.0/deploy_streamlit_app.html /deploy/streamlit-community-cloud/deploy-your-app
-/en/0.68.0/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/0.68.0/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/0.68.0/getting_started.html /get-started
/en/0.68.0/getting_started.md /get-started
/en/0.68.0/index.html /
/en/0.68.0/installation.html /get-started/installation
/en/0.68.0/main_concepts.html /get-started/fundamentals/main-concepts
/en/0.68.0/publish_streamlit_components.html /develop/concepts/custom-components/publish
-/en/0.68.0/streamlit_components.html /develop/concepts/custom-components/create
+/en/0.68.0/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/0.68.0/streamlit_configuration.html /develop/api-reference/configuration/config.toml
/en/0.68.0/streamlit_faq.html /knowledge-base
/en/0.68.0/troubleshooting/caching_issues.html /knowledge-base/using-streamlit/caching-issues
@@ -237,14 +237,14 @@
/en/0.69.0/caching.html /develop/concepts/architecture/caching
/en/0.69.0/changelog.html /develop/quick-reference/release-notes/2020
/en/0.69.0/deploy_streamlit_app.html /deploy/streamlit-community-cloud/deploy-your-app
-/en/0.69.0/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/0.69.0/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/0.69.0/getting_started.html /get-started
/en/0.69.0/getting_started.md /get-started
/en/0.69.0/index.html /
/en/0.69.0/installation.html /get-started/installation
/en/0.69.0/main_concepts.html /get-started/fundamentals/main-concepts
/en/0.69.0/publish_streamlit_components.html /develop/concepts/custom-components/publish
-/en/0.69.0/streamlit_components.html /develop/concepts/custom-components/create
+/en/0.69.0/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/0.69.0/streamlit_configuration.html /develop/api-reference/configuration/config.toml
/en/0.69.0/streamlit_faq.html /knowledge-base
/en/0.69.0/troubleshooting/caching_issues.html /knowledge-base/using-streamlit/caching-issues
@@ -260,14 +260,14 @@
/en/0.70.0/caching.html /develop/concepts/architecture/caching
/en/0.70.0/changelog.html /develop/quick-reference/release-notes/2020
/en/0.70.0/deploy_streamlit_app.html /deploy/streamlit-community-cloud/deploy-your-app
-/en/0.70.0/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/0.70.0/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/0.70.0/getting_started.html /get-started
/en/0.70.0/getting_started.md /get-started
/en/0.70.0/index.html /
/en/0.70.0/installation.html /get-started/installation
/en/0.70.0/main_concepts.html /get-started/fundamentals/main-concepts
/en/0.70.0/publish_streamlit_components.html /develop/concepts/custom-components/publish
-/en/0.70.0/streamlit_components.html /develop/concepts/custom-components/create
+/en/0.70.0/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/0.70.0/streamlit_configuration.html /develop/api-reference/configuration/config.toml
/en/0.70.0/streamlit_faq.html /knowledge-base
/en/0.70.0/troubleshooting/caching_issues.html /knowledge-base/using-streamlit/caching-issues
@@ -283,14 +283,14 @@
/en/0.71.0/caching.html /develop/concepts/architecture/caching
/en/0.71.0/changelog.html /develop/quick-reference/release-notes/2020
/en/0.71.0/deploy_streamlit_app.html /deploy/streamlit-community-cloud/deploy-your-app
-/en/0.71.0/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/0.71.0/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/0.71.0/getting_started.html /get-started
/en/0.71.0/getting_started.md /get-started
/en/0.71.0/index.html /
/en/0.71.0/installation.html /get-started/installation
/en/0.71.0/main_concepts.html /get-started/fundamentals/main-concepts
/en/0.71.0/publish_streamlit_components.html /develop/concepts/custom-components/publish
-/en/0.71.0/streamlit_components.html /develop/concepts/custom-components/create
+/en/0.71.0/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/0.71.0/streamlit_configuration.html /develop/api-reference/configuration/config.toml
/en/0.71.0/streamlit_faq.html /knowledge-base
/en/0.71.0/troubleshooting/caching_issues.html /knowledge-base/using-streamlit/caching-issues
@@ -306,14 +306,14 @@
/en/0.72.0/caching.html /develop/concepts/architecture/caching
/en/0.72.0/changelog.html /develop/quick-reference/release-notes/2020
/en/0.72.0/deploy_streamlit_app.html /deploy/streamlit-community-cloud/deploy-your-app
-/en/0.72.0/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/0.72.0/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/0.72.0/getting_started.html /get-started
/en/0.72.0/getting_started.md /get-started
/en/0.72.0/index.html /
/en/0.72.0/installation.html /get-started/installation
/en/0.72.0/main_concepts.html /get-started/fundamentals/main-concepts
/en/0.72.0/publish_streamlit_components.html /develop/concepts/custom-components/publish
-/en/0.72.0/streamlit_components.html /develop/concepts/custom-components/create
+/en/0.72.0/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/0.72.0/streamlit_configuration.html /develop/api-reference/configuration/config.toml
/en/0.72.0/streamlit_faq.html /knowledge-base
/en/0.72.0/troubleshooting/caching_issues.html /knowledge-base/using-streamlit/caching-issues
@@ -329,14 +329,14 @@
/en/0.73.0/caching.html /develop/concepts/architecture/caching
/en/0.73.0/changelog.html /develop/quick-reference/release-notes/2020
/en/0.73.0/deploy_streamlit_app.html /deploy/streamlit-community-cloud/deploy-your-app
-/en/0.73.0/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/0.73.0/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/0.73.0/getting_started.html /get-started
/en/0.73.0/getting_started.md /get-started
/en/0.73.0/index.html /
/en/0.73.0/installation.html /get-started/installation
/en/0.73.0/main_concepts.html /get-started/fundamentals/main-concepts
/en/0.73.0/publish_streamlit_components.html /develop/concepts/custom-components/publish
-/en/0.73.0/streamlit_components.html /develop/concepts/custom-components/create
+/en/0.73.0/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/0.73.0/streamlit_configuration.html /develop/api-reference/configuration/config.toml
/en/0.73.0/streamlit_faq.html /knowledge-base
/en/0.73.0/troubleshooting/caching_issues.html /knowledge-base/using-streamlit/caching-issues
@@ -352,14 +352,14 @@
/en/0.74.0/caching.html /develop/concepts/architecture/caching
/en/0.74.0/changelog.html /develop/quick-reference/release-notes/2021
/en/0.74.0/deploy_streamlit_app.html /deploy/streamlit-community-cloud/deploy-your-app
-/en/0.74.0/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/0.74.0/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/0.74.0/getting_started.html /get-started
/en/0.74.0/getting_started.md /get-started
/en/0.74.0/index.html /
/en/0.74.0/installation.html /get-started/installation
/en/0.74.0/main_concepts.html /get-started/fundamentals/main-concepts
/en/0.74.0/publish_streamlit_components.html /develop/concepts/custom-components/publish
-/en/0.74.0/streamlit_components.html /develop/concepts/custom-components/create
+/en/0.74.0/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/0.74.0/streamlit_configuration.html /develop/api-reference/configuration/config.toml
/en/0.74.0/streamlit_faq.html /knowledge-base
/en/0.74.0/troubleshooting/caching_issues.html /knowledge-base/using-streamlit/caching-issues
@@ -375,14 +375,14 @@
/en/0.75.0/caching.html /develop/concepts/architecture/caching
/en/0.75.0/changelog.html /develop/quick-reference/release-notes/2021
/en/0.75.0/deploy_streamlit_app.html /deploy/streamlit-community-cloud/deploy-your-app
-/en/0.75.0/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/0.75.0/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/0.75.0/getting_started.html /get-started
/en/0.75.0/getting_started.md /get-started
/en/0.75.0/index.html /
/en/0.75.0/installation.html /get-started/installation
/en/0.75.0/main_concepts.html /get-started/fundamentals/main-concepts
/en/0.75.0/publish_streamlit_components.html /develop/concepts/custom-components/publish
-/en/0.75.0/streamlit_components.html /develop/concepts/custom-components/create
+/en/0.75.0/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/0.75.0/streamlit_configuration.html /develop/api-reference/configuration/config.toml
/en/0.75.0/streamlit_faq.html /knowledge-base
/en/0.75.0/troubleshooting/caching_issues.html /knowledge-base/using-streamlit/caching-issues
@@ -398,14 +398,14 @@
/en/0.76.0/caching.html /develop/concepts/architecture/caching
/en/0.76.0/changelog.html /develop/quick-reference/release-notes/2021
/en/0.76.0/deploy_streamlit_app.html /deploy/streamlit-community-cloud/deploy-your-app
-/en/0.76.0/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/0.76.0/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/0.76.0/getting_started.html /get-started
/en/0.76.0/getting_started.md /get-started
/en/0.76.0/index.html /
/en/0.76.0/installation.html /get-started/installation
/en/0.76.0/main_concepts.html /get-started/fundamentals/main-concepts
/en/0.76.0/publish_streamlit_components.html /develop/concepts/custom-components/publish
-/en/0.76.0/streamlit_components.html /develop/concepts/custom-components/create
+/en/0.76.0/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/0.76.0/streamlit_configuration.html /develop/api-reference/configuration/config.toml
/en/0.76.0/streamlit_faq.html /knowledge-base
/en/0.76.0/troubleshooting/caching_issues.html /knowledge-base/using-streamlit/caching-issues
@@ -421,14 +421,14 @@
/en/0.77.0/caching.html /develop/concepts/architecture/caching
/en/0.77.0/changelog.html /develop/quick-reference/release-notes/2021
/en/0.77.0/deploy_streamlit_app.html /deploy/streamlit-community-cloud/deploy-your-app
-/en/0.77.0/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/0.77.0/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/0.77.0/getting_started.html /get-started
/en/0.77.0/getting_started.md /get-started
/en/0.77.0/index.html /
/en/0.77.0/installation.html /get-started/installation
/en/0.77.0/main_concepts.html /get-started/fundamentals/main-concepts
/en/0.77.0/publish_streamlit_components.html /develop/concepts/custom-components/publish
-/en/0.77.0/streamlit_components.html /develop/concepts/custom-components/create
+/en/0.77.0/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/0.77.0/streamlit_configuration.html /develop/api-reference/configuration/config.toml
/en/0.77.0/streamlit_faq.html /knowledge-base
/en/0.77.0/troubleshooting/caching_issues.html /knowledge-base/using-streamlit/caching-issues
@@ -444,14 +444,14 @@
/en/0.78.0/caching.html /develop/concepts/architecture/caching
/en/0.78.0/changelog.html /develop/quick-reference/release-notes/2021
/en/0.78.0/deploy_streamlit_app.html /deploy/streamlit-community-cloud/deploy-your-app
-/en/0.78.0/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/0.78.0/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/0.78.0/getting_started.html /get-started
/en/0.78.0/getting_started.md /get-started
/en/0.78.0/index.html /
/en/0.78.0/installation.html /get-started/installation
/en/0.78.0/main_concepts.html /get-started/fundamentals/main-concepts
/en/0.78.0/publish_streamlit_components.html /develop/concepts/custom-components/publish
-/en/0.78.0/streamlit_components.html /develop/concepts/custom-components/create
+/en/0.78.0/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/0.78.0/streamlit_configuration.html /develop/api-reference/configuration/config.toml
/en/0.78.0/streamlit_faq.html /knowledge-base
/en/0.78.0/troubleshooting/caching_issues.html /knowledge-base/using-streamlit/caching-issues
@@ -466,13 +466,13 @@
/en/0.79.0/caching.html /develop/concepts/architecture/caching
/en/0.79.0/changelog.html /develop/quick-reference/release-notes/2021
/en/0.79.0/deploy_streamlit_app.html /deploy/streamlit-community-cloud/deploy-your-app
-/en/0.79.0/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/0.79.0/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/0.79.0/getting_started.html /get-started
/en/0.79.0/index.html /
/en/0.79.0/installation.html /get-started/installation
/en/0.79.0/main_concepts.html /get-started/fundamentals/main-concepts
/en/0.79.0/publish_streamlit_components.html /develop/concepts/custom-components/publish
-/en/0.79.0/streamlit_components.html /develop/concepts/custom-components/create
+/en/0.79.0/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/0.79.0/streamlit_configuration.html /develop/api-reference/configuration/config.toml
/en/0.79.0/streamlit_faq.html /knowledge-base
/en/0.79.0/theme_options.html /develop/concepts/configuration/theming
@@ -488,13 +488,13 @@
/en/0.80.0/caching.html /develop/concepts/architecture/caching
/en/0.80.0/changelog.html /develop/quick-reference/release-notes/2021
/en/0.80.0/deploy_streamlit_app.html /deploy/streamlit-community-cloud/deploy-your-app
-/en/0.80.0/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/0.80.0/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/0.80.0/getting_started.html /get-started
/en/0.80.0/index.html /
/en/0.80.0/installation.html /get-started/installation
/en/0.80.0/main_concepts.html /get-started/fundamentals/main-concepts
/en/0.80.0/publish_streamlit_components.html /develop/concepts/custom-components/publish
-/en/0.80.0/streamlit_components.html /develop/concepts/custom-components/create
+/en/0.80.0/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/0.80.0/streamlit_configuration.html /develop/api-reference/configuration/config.toml
/en/0.80.0/streamlit_faq.html /knowledge-base
/en/0.80.0/theme_options.html /develop/concepts/configuration/theming
@@ -510,13 +510,13 @@
/en/0.81.0/caching.html /develop/concepts/architecture/caching
/en/0.81.0/changelog.html /develop/quick-reference/release-notes/2021
/en/0.81.0/deploy_streamlit_app.html /deploy/streamlit-community-cloud/deploy-your-app
-/en/0.81.0/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/0.81.0/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/0.81.0/getting_started.html /get-started
/en/0.81.0/index.html /
/en/0.81.0/installation.html /get-started/installation
/en/0.81.0/main_concepts.html /get-started/fundamentals/main-concepts
/en/0.81.0/publish_streamlit_components.html /develop/concepts/custom-components/publish
-/en/0.81.0/streamlit_components.html /develop/concepts/custom-components/create
+/en/0.81.0/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/0.81.0/streamlit_configuration.html /develop/api-reference/configuration/config.toml
/en/0.81.0/streamlit_faq.html /knowledge-base
/en/0.81.0/theme_options.html /develop/concepts/configuration/theming
@@ -532,13 +532,13 @@
/en/0.81.1/caching.html /develop/concepts/architecture/caching
/en/0.81.1/changelog.html /develop/quick-reference/release-notes/2021
/en/0.81.1/deploy_streamlit_app.html /deploy/streamlit-community-cloud/deploy-your-app
-/en/0.81.1/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/0.81.1/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/0.81.1/getting_started.html /get-started
/en/0.81.1/index.html /
/en/0.81.1/installation.html /get-started/installation
/en/0.81.1/main_concepts.html /get-started/fundamentals/main-concepts
/en/0.81.1/publish_streamlit_components.html /develop/concepts/custom-components/publish
-/en/0.81.1/streamlit_components.html /develop/concepts/custom-components/create
+/en/0.81.1/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/0.81.1/streamlit_configuration.html /develop/api-reference/configuration/config.toml
/en/0.81.1/streamlit_faq.html /knowledge-base
/en/0.81.1/theme_options.html /develop/concepts/configuration/theming
@@ -554,13 +554,13 @@
/en/0.82.0/caching.html /develop/concepts/architecture/caching
/en/0.82.0/changelog.html /develop/quick-reference/release-notes/2021
/en/0.82.0/deploy_streamlit_app.html /deploy/streamlit-community-cloud/deploy-your-app
-/en/0.82.0/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/0.82.0/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/0.82.0/getting_started.html /get-started
/en/0.82.0/index.html /
/en/0.82.0/installation.html /get-started/installation
/en/0.82.0/main_concepts.html /get-started/fundamentals/main-concepts
/en/0.82.0/publish_streamlit_components.html /develop/concepts/custom-components/publish
-/en/0.82.0/streamlit_components.html /develop/concepts/custom-components/create
+/en/0.82.0/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/0.82.0/streamlit_configuration.html /develop/api-reference/configuration/config.toml
/en/0.82.0/streamlit_faq.html /knowledge-base
/en/0.82.0/theme_options.html /develop/concepts/configuration/theming
@@ -576,13 +576,13 @@
/en/0.83.0/caching.html /develop/concepts/architecture/caching
/en/0.83.0/changelog.html /develop/quick-reference/release-notes/2021
/en/0.83.0/deploy_streamlit_app.html /deploy/streamlit-community-cloud/deploy-your-app
-/en/0.83.0/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/0.83.0/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/0.83.0/getting_started.html /get-started
/en/0.83.0/index.html /
/en/0.83.0/installation.html /get-started/installation
/en/0.83.0/main_concepts.html /get-started/fundamentals/main-concepts
/en/0.83.0/publish_streamlit_components.html /develop/concepts/custom-components/publish
-/en/0.83.0/streamlit_components.html /develop/concepts/custom-components/create
+/en/0.83.0/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/0.83.0/streamlit_configuration.html /develop/api-reference/configuration/config.toml
/en/0.83.0/streamlit_faq.html /knowledge-base
/en/0.83.0/theme_options.html /develop/concepts/configuration/theming
@@ -607,14 +607,14 @@
/en/0.84.0/caching.html /develop/concepts/architecture/caching
/en/0.84.0/changelog.html /develop/quick-reference/release-notes/2021
/en/0.84.0/deploy_streamlit_app.html /deploy/streamlit-community-cloud/deploy-your-app
-/en/0.84.0/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/0.84.0/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/0.84.0/getting_started.html /get-started
/en/0.84.0/index.html /
/en/0.84.0/installation.html /get-started/installation
/en/0.84.0/main_concepts.html /get-started/fundamentals/main-concepts
/en/0.84.0/publish_streamlit_components.html /develop/concepts/custom-components/publish
/en/0.84.0/session_state_api.html /develop/api-reference/caching-and-state/st.session_state
-/en/0.84.0/streamlit_components.html /develop/concepts/custom-components/create
+/en/0.84.0/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/0.84.0/streamlit_configuration.html /develop/api-reference/configuration/config.toml
/en/0.84.0/streamlit_faq.html /knowledge-base
/en/0.84.0/theme_options.html /develop/concepts/configuration/theming
@@ -639,14 +639,14 @@
/en/0.85.0/caching.html /develop/concepts/architecture/caching
/en/0.85.0/changelog.html /develop/quick-reference/release-notes/2021
/en/0.85.0/deploy_streamlit_app.html /deploy/streamlit-community-cloud/deploy-your-app
-/en/0.85.0/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/0.85.0/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/0.85.0/getting_started.html /get-started
/en/0.85.0/index.html /
/en/0.85.0/installation.html /get-started/installation
/en/0.85.0/main_concepts.html /get-started/fundamentals/main-concepts
/en/0.85.0/publish_streamlit_components.html /develop/concepts/custom-components/publish
/en/0.85.0/session_state_api.html /develop/api-reference/caching-and-state/st.session_state
-/en/0.85.0/streamlit_components.html /develop/concepts/custom-components/create
+/en/0.85.0/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/0.85.0/streamlit_configuration.html /develop/api-reference/configuration/config.toml
/en/0.85.0/streamlit_faq.html /knowledge-base
/en/0.85.0/theme_options.html /develop/concepts/configuration/theming
@@ -672,14 +672,14 @@
/en/0.86.0/caching.html /develop/concepts/architecture/caching
/en/0.86.0/changelog.html /develop/quick-reference/release-notes/2021
/en/0.86.0/deploy_streamlit_app.html /deploy/streamlit-community-cloud/deploy-your-app
-/en/0.86.0/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/0.86.0/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/0.86.0/getting_started.html /get-started
/en/0.86.0/index.html /
/en/0.86.0/installation.html /get-started/installation
/en/0.86.0/main_concepts.html /get-started/fundamentals/main-concepts
/en/0.86.0/publish_streamlit_components.html /develop/concepts/custom-components/publish
/en/0.86.0/session_state_api.html /develop/api-reference/caching-and-state/st.session_state
-/en/0.86.0/streamlit_components.html /develop/concepts/custom-components/create
+/en/0.86.0/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/0.86.0/streamlit_configuration.html /develop/api-reference/configuration/config.toml
/en/0.86.0/streamlit_faq.html /knowledge-base
/en/0.86.0/theme_options.html /develop/concepts/configuration/theming
@@ -705,14 +705,14 @@
/en/0.87.0/caching.html /develop/concepts/architecture/caching
/en/0.87.0/changelog.html /develop/quick-reference/release-notes/2021
/en/0.87.0/deploy_streamlit_app.html /deploy/streamlit-community-cloud/deploy-your-app
-/en/0.87.0/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/0.87.0/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/0.87.0/getting_started.html /get-started
/en/0.87.0/index.html /
/en/0.87.0/installation.html /get-started/installation
/en/0.87.0/main_concepts.html /get-started/fundamentals/main-concepts
/en/0.87.0/publish_streamlit_components.html /develop/concepts/custom-components/publish
/en/0.87.0/session_state_api.html /develop/api-reference/caching-and-state/st.session_state
-/en/0.87.0/streamlit_components.html /develop/concepts/custom-components/create
+/en/0.87.0/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/0.87.0/streamlit_configuration.html /develop/api-reference/configuration/config.toml
/en/0.87.0/streamlit_faq.html /knowledge-base
/en/0.87.0/theme_options.html /develop/concepts/configuration/theming
@@ -738,14 +738,14 @@
/en/0.88.0/caching.html /develop/concepts/architecture/caching
/en/0.88.0/changelog.html /develop/quick-reference/release-notes/2021
/en/0.88.0/deploy_streamlit_app.html /deploy/streamlit-community-cloud/deploy-your-app
-/en/0.88.0/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/0.88.0/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/0.88.0/getting_started.html /get-started
/en/0.88.0/index.html /
/en/0.88.0/installation.html /get-started/installation
/en/0.88.0/main_concepts.html /get-started/fundamentals/main-concepts
/en/0.88.0/publish_streamlit_components.html /develop/concepts/custom-components/publish
/en/0.88.0/session_state_api.html /develop/api-reference/caching-and-state/st.session_state
-/en/0.88.0/streamlit_components.html /develop/concepts/custom-components/create
+/en/0.88.0/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/0.88.0/streamlit_configuration.html /develop/api-reference/configuration/config.toml
/en/0.88.0/streamlit_faq.html /knowledge-base
/en/0.88.0/theme_options.html /develop/concepts/configuration/theming
@@ -771,14 +771,14 @@
/en/0.89.0/caching.html /develop/concepts/architecture/caching
/en/0.89.0/changelog.html /develop/quick-reference/release-notes/2021
/en/0.89.0/deploy_streamlit_app.html /deploy/streamlit-community-cloud/deploy-your-app
-/en/0.89.0/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/0.89.0/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/0.89.0/getting_started.html /get-started
/en/0.89.0/index.html /
/en/0.89.0/installation.html /get-started/installation
/en/0.89.0/main_concepts.html /get-started/fundamentals/main-concepts
/en/0.89.0/publish_streamlit_components.html /develop/concepts/custom-components/publish
/en/0.89.0/session_state_api.html /develop/api-reference/caching-and-state/st.session_state
-/en/0.89.0/streamlit_components.html /develop/concepts/custom-components/create
+/en/0.89.0/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/0.89.0/streamlit_configuration.html /develop/api-reference/configuration/config.toml
/en/0.89.0/streamlit_faq.html /knowledge-base
/en/0.89.0/theme_options.html /develop/concepts/configuration/theming
@@ -804,14 +804,14 @@
/en/1.0.0/caching.html /develop/concepts/architecture/caching
/en/1.0.0/changelog.html /develop/quick-reference/release-notes/2021
/en/1.0.0/deploy_streamlit_app.html /deploy/streamlit-community-cloud/deploy-your-app
-/en/1.0.0/develop_streamlit_components.html /develop/concepts/custom-components/intro
+/en/1.0.0/develop_streamlit_components.html /develop/concepts/custom-components/v1/intro
/en/1.0.0/getting_started.html /get-started
/en/1.0.0/index.html /
/en/1.0.0/installation.html /get-started/installation
/en/1.0.0/main_concepts.html /get-started/fundamentals/main-concepts
/en/1.0.0/publish_streamlit_components.html /develop/concepts/custom-components/publish
/en/1.0.0/session_state_api.html /develop/api-reference/caching-and-state/st.session_state
-/en/1.0.0/streamlit_components.html /develop/concepts/custom-components/create
+/en/1.0.0/streamlit_components.html /develop/concepts/custom-components/v1/create
/en/1.0.0/streamlit_configuration.html /develop/api-reference/configuration/config.toml
/en/1.0.0/streamlit_faq.html /knowledge-base
/en/1.0.0/theme_options.html /develop/concepts/configuration/theming
@@ -833,7 +833,7 @@
/deploy_streamlit_app.html /deploy/streamlit-community-cloud/deploy-your-app
/tutorial/create_a_data_explorer_app.html /get-started/tutorials/create-an-app
/getting_started.html /get-started
-/develop_streamlit_components.html /develop/concepts/custom-components/create
+/develop_streamlit_components.html /develop/concepts/custom-components/v1/create
/en/component_docs/ /develop/concepts/custom-components
/api.html /develop/api-reference
/en/stable/pre_release_features.html /develop/quick-reference/prerelease
@@ -1066,8 +1066,8 @@
/library/advanced-features/app-testing/examples /develop/concepts/app-testing/examples
/library/advanced-features/app-testing/cheat-sheet /develop/concepts/app-testing/cheat-sheet
/library/components /develop/concepts/custom-components
-/library/components/components-api /develop/concepts/custom-components/intro
-/library/components/create /develop/concepts/custom-components/create
+/library/components/components-api /develop/concepts/custom-components/v1/intro
+/library/components/create /develop/concepts/custom-components/v1/create
/library/components/publish /develop/concepts/custom-components/publish
/library/changelog /develop/quick-reference/release-notes
/library/cheatsheet /develop/quick-reference/cheat-sheet
@@ -1154,6 +1154,10 @@
/develop/tutorials/llms/build-conversational-apps /develop/tutorials/chat-and-llm-apps/build-conversational-apps
/develop/tutorials/llms/llm-quickstart /develop/tutorials/chat-and-llm-apps/llm-quickstart
/knowledge-base/deploy/authentication-without-sso /develop/concepts/connections/authentication
+/develop/concepts/custom-components/intro /develop/concepts/custom-components/v1/intro
+/develop/concepts/custom-components/create /develop/concepts/custom-components/v1/create
+/develop/concepts/custom-components/limitations /develop/concepts/custom-components/v1/limitations
+
# Deep links included in streamlit/streamlit source code
/st.connections.snowflakeconnection-configuration /develop/api-reference/connections/st.connections.snowflakeconnection
Item 1
+ Item 2
+ Item 3
+ Item 4
+