axiom-coding-agent-setup 1.0.9 → 1.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.agents/skills/agent-browser/SKILL.md +55 -0
- package/.agents/skills/developing-with-streamlit/SKILL.md +220 -0
- package/.agents/skills/developing-with-streamlit/skills/building-streamlit-chat-ui/SKILL.md +195 -0
- package/.agents/skills/developing-with-streamlit/skills/building-streamlit-custom-components-v2/SKILL.md +233 -0
- package/.agents/skills/developing-with-streamlit/skills/building-streamlit-custom-components-v2/references/packaged-components.md +212 -0
- package/.agents/skills/developing-with-streamlit/skills/building-streamlit-custom-components-v2/references/state-sync.md +149 -0
- package/.agents/skills/developing-with-streamlit/skills/building-streamlit-custom-components-v2/references/theme-css-variables.md +243 -0
- package/.agents/skills/developing-with-streamlit/skills/building-streamlit-custom-components-v2/references/troubleshooting.md +121 -0
- package/.agents/skills/developing-with-streamlit/skills/building-streamlit-dashboards/SKILL.md +147 -0
- package/.agents/skills/developing-with-streamlit/skills/building-streamlit-multipage-apps/SKILL.md +218 -0
- package/.agents/skills/developing-with-streamlit/skills/choosing-streamlit-selection-widgets/SKILL.md +139 -0
- package/.agents/skills/developing-with-streamlit/skills/connecting-streamlit-to-snowflake/SKILL.md +188 -0
- package/.agents/skills/developing-with-streamlit/skills/creating-streamlit-themes/SKILL.md +486 -0
- package/.agents/skills/developing-with-streamlit/skills/displaying-streamlit-data/SKILL.md +199 -0
- package/.agents/skills/developing-with-streamlit/skills/improving-streamlit-design/SKILL.md +191 -0
- package/.agents/skills/developing-with-streamlit/skills/optimizing-streamlit-performance/SKILL.md +323 -0
- package/.agents/skills/developing-with-streamlit/skills/organizing-streamlit-code/SKILL.md +91 -0
- package/.agents/skills/developing-with-streamlit/skills/setting-up-streamlit-environment/SKILL.md +128 -0
- package/.agents/skills/developing-with-streamlit/skills/using-streamlit-cli/SKILL.md +165 -0
- package/.agents/skills/developing-with-streamlit/skills/using-streamlit-custom-components/SKILL.md +170 -0
- package/.agents/skills/developing-with-streamlit/skills/using-streamlit-layouts/SKILL.md +229 -0
- package/.agents/skills/developing-with-streamlit/skills/using-streamlit-markdown/SKILL.md +207 -0
- package/.agents/skills/developing-with-streamlit/skills/using-streamlit-session-state/SKILL.md +144 -0
- package/.agents/skills/developing-with-streamlit/templates/.gitattributes +3 -0
- package/.agents/skills/developing-with-streamlit/templates/apps/README.md +188 -0
- package/.agents/skills/developing-with-streamlit/templates/apps/dashboard-companies/pyproject.toml +12 -0
- package/.agents/skills/developing-with-streamlit/templates/apps/dashboard-companies/streamlit_app.py +365 -0
- package/.agents/skills/developing-with-streamlit/templates/apps/dashboard-compute/pyproject.toml +12 -0
- package/.agents/skills/developing-with-streamlit/templates/apps/dashboard-compute/streamlit_app.py +461 -0
- package/.agents/skills/developing-with-streamlit/templates/apps/dashboard-compute-snowflake/.streamlit/secrets.toml.example +20 -0
- package/.agents/skills/developing-with-streamlit/templates/apps/dashboard-compute-snowflake/pyproject.toml +11 -0
- package/.agents/skills/developing-with-streamlit/templates/apps/dashboard-compute-snowflake/snowflake.yml +18 -0
- package/.agents/skills/developing-with-streamlit/templates/apps/dashboard-compute-snowflake/streamlit_app.py +527 -0
- package/.agents/skills/developing-with-streamlit/templates/apps/dashboard-feature-usage/pyproject.toml +12 -0
- package/.agents/skills/developing-with-streamlit/templates/apps/dashboard-feature-usage/streamlit_app.py +307 -0
- package/.agents/skills/developing-with-streamlit/templates/apps/dashboard-metrics/pyproject.toml +12 -0
- package/.agents/skills/developing-with-streamlit/templates/apps/dashboard-metrics/streamlit_app.py +426 -0
- package/.agents/skills/developing-with-streamlit/templates/apps/dashboard-metrics-snowflake/.streamlit/secrets.toml.example +20 -0
- package/.agents/skills/developing-with-streamlit/templates/apps/dashboard-metrics-snowflake/pyproject.toml +11 -0
- package/.agents/skills/developing-with-streamlit/templates/apps/dashboard-metrics-snowflake/snowflake.yml +18 -0
- package/.agents/skills/developing-with-streamlit/templates/apps/dashboard-metrics-snowflake/streamlit_app.py +463 -0
- package/.agents/skills/developing-with-streamlit/templates/apps/dashboard-seattle-weather/pyproject.toml +12 -0
- package/.agents/skills/developing-with-streamlit/templates/apps/dashboard-seattle-weather/streamlit_app.py +252 -0
- package/.agents/skills/developing-with-streamlit/templates/apps/dashboard-stock-peers/pyproject.toml +12 -0
- package/.agents/skills/developing-with-streamlit/templates/apps/dashboard-stock-peers/streamlit_app.py +342 -0
- package/.agents/skills/developing-with-streamlit/templates/apps/dashboard-stock-peers-snowflake/.streamlit/secrets.toml.example +20 -0
- package/.agents/skills/developing-with-streamlit/templates/apps/dashboard-stock-peers-snowflake/pyproject.toml +11 -0
- package/.agents/skills/developing-with-streamlit/templates/apps/dashboard-stock-peers-snowflake/snowflake.yml +18 -0
- package/.agents/skills/developing-with-streamlit/templates/apps/dashboard-stock-peers-snowflake/streamlit_app.py +384 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/README.md +128 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/_configs/dracula.toml +39 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/_configs/github.toml +37 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/_configs/minimal.toml +39 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/_configs/nord.toml +39 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/_configs/snowflake.toml +42 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/_configs/solarized-light.toml +38 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/_configs/spotify.toml +34 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/_configs/stripe.toml +35 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/_shared/streamlit_app.py +336 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/_templates/pyproject.toml.tmpl +12 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/dracula/.streamlit/config.toml +39 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/dracula/pyproject.toml +10 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/dracula/streamlit_app.py +337 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/github/.streamlit/config.toml +37 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/github/pyproject.toml +10 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/github/streamlit_app.py +337 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/manage.py +332 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/minimal/.streamlit/config.toml +39 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/minimal/pyproject.toml +10 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/minimal/streamlit_app.py +337 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/nord/.streamlit/config.toml +39 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/nord/pyproject.toml +10 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/nord/streamlit_app.py +337 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/snowflake/.streamlit/config.toml +42 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/snowflake/pyproject.toml +10 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/snowflake/streamlit_app.py +337 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/solarized-light/.streamlit/config.toml +38 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/solarized-light/pyproject.toml +10 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/solarized-light/streamlit_app.py +337 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/spotify/.streamlit/config.toml +34 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/spotify/pyproject.toml +10 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/spotify/streamlit_app.py +337 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/stripe/.streamlit/config.toml +35 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/stripe/pyproject.toml +10 -0
- package/.agents/skills/developing-with-streamlit/templates/themes/stripe/streamlit_app.py +337 -0
- package/.agents/skills/fastapi/SKILL.md +436 -0
- package/.agents/skills/fastapi/references/dependencies.md +142 -0
- package/.agents/skills/fastapi/references/other-tools.md +76 -0
- package/.agents/skills/fastapi/references/streaming.md +105 -0
- package/.agents/skills/frontend-design/LICENSE.txt +177 -0
- package/.agents/skills/frontend-design/SKILL.md +42 -0
- package/.agents/skills/gradio/SKILL.md +84 -0
- package/.agents/skills/gradio/references/api-signatures.md +115 -0
- package/.agents/skills/gradio/references/event-listeners.md +130 -0
- package/.agents/skills/gradio/references/examples.md +613 -0
- package/.agents/skills/ui-ux-pro-max/SKILL.md +659 -0
- package/.agents/skills/ui-ux-pro-max/data +1 -0
- package/.agents/skills/ui-ux-pro-max/scripts +1 -0
- package/.agents/stack.md +187 -187
- package/.env.axiom +8 -0
- package/AGENTS.md +2 -1
- package/README.md +19 -3
- package/bin/cli.js +11 -1
- package/opencode.json +12 -4
- package/package.json +1 -1
- package/skills-lock.json +36 -0
- package/.agents/skills/n8n-patterns/SKILL.md +0 -272
package/.agents/skills/developing-with-streamlit/skills/setting-up-streamlit-environment/SKILL.md
ADDED
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: setting-up-streamlit-environment
|
|
3
|
+
description: Setting up Python environments for Streamlit apps. Use when creating a new project or managing dependencies. Covers uv for dependency management and running apps.
|
|
4
|
+
license: Apache-2.0
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Streamlit environment
|
|
8
|
+
|
|
9
|
+
Use whatever dependency management the project already has (pip, poetry, conda, etc.). If starting fresh and uv is available, it's a good default—fast, reliable, and creates isolated environments automatically.
|
|
10
|
+
|
|
11
|
+
If uv is not installed, ask the user before installing it.
|
|
12
|
+
|
|
13
|
+
## CRITICAL: Always Use Latest Streamlit
|
|
14
|
+
|
|
15
|
+
**Always specify `streamlit>=1.53.0`** (or latest) in dependencies. Many Streamlit features and patterns in these skills require recent versions. Older streamlit versions will cause errors with:
|
|
16
|
+
- Material icons (`:material/icon_name:`)
|
|
17
|
+
- `st.pills()`, `st.segmented_control()`
|
|
18
|
+
- Modern caching decorators
|
|
19
|
+
- Navigation APIs
|
|
20
|
+
|
|
21
|
+
When setting up a new project or fixing an existing one, **always check and update the streamlit version**.
|
|
22
|
+
|
|
23
|
+
## Using uv
|
|
24
|
+
|
|
25
|
+
If uv is available, here's how to set up a Streamlit project.
|
|
26
|
+
|
|
27
|
+
### Quick start (venv only)
|
|
28
|
+
|
|
29
|
+
For simple apps, just create a virtual environment:
|
|
30
|
+
|
|
31
|
+
```bash
|
|
32
|
+
uv venv
|
|
33
|
+
source .venv/bin/activate # or .venv\Scripts\activate on Windows
|
|
34
|
+
uv pip install streamlit
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Run with:
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
streamlit run streamlit_app.py
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Full project setup
|
|
44
|
+
|
|
45
|
+
For larger projects or when you need reproducible builds:
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
uv init my-streamlit-app
|
|
49
|
+
cd my-streamlit-app
|
|
50
|
+
uv add streamlit
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
This creates:
|
|
54
|
+
- `pyproject.toml` with dependencies
|
|
55
|
+
- `uv.lock` for reproducible builds
|
|
56
|
+
- `.venv/` virtual environment
|
|
57
|
+
|
|
58
|
+
Run with:
|
|
59
|
+
|
|
60
|
+
```bash
|
|
61
|
+
uv run streamlit run streamlit_app.py
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## With options
|
|
65
|
+
|
|
66
|
+
Avoid setting options unless you have a specific reason:
|
|
67
|
+
|
|
68
|
+
```bash
|
|
69
|
+
streamlit run streamlit_app.py --server.headless true # Only for automated/CI environments
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## Add dependencies
|
|
73
|
+
|
|
74
|
+
```bash
|
|
75
|
+
# With venv approach
|
|
76
|
+
uv pip install plotly snowflake-connector-python
|
|
77
|
+
|
|
78
|
+
# With full project (uv init)
|
|
79
|
+
uv add plotly snowflake-connector-python
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
## Project structure
|
|
83
|
+
|
|
84
|
+
Keep it simple. For most apps:
|
|
85
|
+
|
|
86
|
+
```
|
|
87
|
+
my-streamlit-app/
|
|
88
|
+
├── .venv/
|
|
89
|
+
└── streamlit_app.py
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
Only add more when needed:
|
|
93
|
+
- `app_pages/` → Only for multi-page apps
|
|
94
|
+
- `.streamlit/config.toml` → Only if customizing theme or settings
|
|
95
|
+
- `.streamlit/secrets.toml` → Only if using secrets (add to `.gitignore`)
|
|
96
|
+
- `pyproject.toml` → Only if using `uv init` for reproducible builds
|
|
97
|
+
|
|
98
|
+
## Convention
|
|
99
|
+
|
|
100
|
+
Name your main file `streamlit_app.py` for consistency. This is what Streamlit expects by default.
|
|
101
|
+
|
|
102
|
+
**What goes in the main module:**
|
|
103
|
+
- When using navigation: it's a router that defines pages and runs them
|
|
104
|
+
- When there's no navigation: it's the home page with your main content
|
|
105
|
+
|
|
106
|
+
## pyproject.toml Example
|
|
107
|
+
|
|
108
|
+
```toml
|
|
109
|
+
[project]
|
|
110
|
+
name = "my-streamlit-app"
|
|
111
|
+
version = "0.1.0"
|
|
112
|
+
requires-python = ">=3.11"
|
|
113
|
+
dependencies = [
|
|
114
|
+
"streamlit>=1.53.0",
|
|
115
|
+
"plotly>=5.0.0",
|
|
116
|
+
"snowflake-connector-python>=3.0.0",
|
|
117
|
+
]
|
|
118
|
+
|
|
119
|
+
[tool.uv]
|
|
120
|
+
dev-dependencies = [
|
|
121
|
+
"pytest>=8.0.0",
|
|
122
|
+
]
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
## References
|
|
126
|
+
|
|
127
|
+
- [uv documentation](https://docs.astral.sh/uv/)
|
|
128
|
+
- [Streamlit installation](https://docs.streamlit.io/get-started/installation)
|
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: using-streamlit-cli
|
|
3
|
+
description: Documents Streamlit CLI commands for running apps, managing configuration, and diagnostics. Use when starting Streamlit apps, configuring runtime options, or troubleshooting CLI issues.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Using the Streamlit CLI
|
|
7
|
+
|
|
8
|
+
The Streamlit CLI is the primary tool for running Streamlit applications and managing configuration. This skill covers all essential commands and configuration options.
|
|
9
|
+
|
|
10
|
+
## Running Streamlit apps
|
|
11
|
+
|
|
12
|
+
### Basic syntax
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
streamlit run [<entrypoint>] [-- config options] [script args]
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
### Entrypoint options
|
|
19
|
+
|
|
20
|
+
| Argument | Behavior |
|
|
21
|
+
|----------|----------|
|
|
22
|
+
| (none) | Looks for `streamlit_app.py` in current directory |
|
|
23
|
+
| Directory path | Runs `streamlit_app.py` within that directory |
|
|
24
|
+
| File path | Runs the specified file directly |
|
|
25
|
+
| URL | Runs a remote script (e.g., from GitHub) |
|
|
26
|
+
|
|
27
|
+
### Examples
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
# Run default app in current directory
|
|
31
|
+
streamlit run
|
|
32
|
+
|
|
33
|
+
# Run a specific file
|
|
34
|
+
streamlit run app.py
|
|
35
|
+
|
|
36
|
+
# Run from a URL
|
|
37
|
+
streamlit run https://raw.githubusercontent.com/streamlit/demo-uber-nyc-pickups/master/streamlit_app.py
|
|
38
|
+
|
|
39
|
+
# Alternative: run as Python module (useful for IDE configuration)
|
|
40
|
+
python -m streamlit run app.py
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Running with `uv` (recommended)
|
|
44
|
+
|
|
45
|
+
Use `uv run` to run Streamlit in a virtual environment with automatic dependency management:
|
|
46
|
+
|
|
47
|
+
```bash
|
|
48
|
+
# Run with uv (automatically uses/creates virtual environment)
|
|
49
|
+
uv run streamlit run app.py
|
|
50
|
+
|
|
51
|
+
# With configuration options
|
|
52
|
+
uv run streamlit run app.py --server.headless=true
|
|
53
|
+
|
|
54
|
+
# With script arguments
|
|
55
|
+
uv run streamlit run app.py -- arg1 arg2
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
Using `uv run` is the recommended approach because it:
|
|
59
|
+
- Automatically manages virtual environments
|
|
60
|
+
- Resolves and installs dependencies from `pyproject.toml`
|
|
61
|
+
- Ensures reproducible environments across machines
|
|
62
|
+
- Avoids manual activation/deactivation of virtual environments
|
|
63
|
+
|
|
64
|
+
## Setting configuration with `streamlit run`
|
|
65
|
+
|
|
66
|
+
Configuration options follow the pattern `--<section>.<option>=<value>` and must come after the script name.
|
|
67
|
+
|
|
68
|
+
> **Recommendation:** For persistent configuration, use `.streamlit/config.toml` in your project directory instead of command-line flags. This keeps your run command simple and makes configuration easier to manage and share with your team.
|
|
69
|
+
|
|
70
|
+
### Examples
|
|
71
|
+
|
|
72
|
+
```bash
|
|
73
|
+
streamlit run app.py --server.port=8080
|
|
74
|
+
streamlit run app.py --server.headless=true
|
|
75
|
+
streamlit run app.py --server.runOnSave=true
|
|
76
|
+
streamlit run app.py --server.address=0.0.0.0
|
|
77
|
+
streamlit run app.py --client.showErrorDetails=false
|
|
78
|
+
streamlit run app.py --theme.primaryColor=blue
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### Combining multiple options
|
|
82
|
+
|
|
83
|
+
```bash
|
|
84
|
+
streamlit run app.py \
|
|
85
|
+
--server.port=8080 \
|
|
86
|
+
--server.headless=true \
|
|
87
|
+
--theme.primaryColor=blue \
|
|
88
|
+
--client.showErrorDetails=false
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
## Passing arguments to your script
|
|
92
|
+
|
|
93
|
+
Script arguments come after configuration options. Use `sys.argv` to access them:
|
|
94
|
+
|
|
95
|
+
```bash
|
|
96
|
+
streamlit run app.py -- arg1 arg2 "arg with spaces"
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
In your script:
|
|
100
|
+
|
|
101
|
+
```python
|
|
102
|
+
import sys
|
|
103
|
+
|
|
104
|
+
# sys.argv[0] = script path
|
|
105
|
+
# sys.argv[1:] = your arguments
|
|
106
|
+
args = sys.argv[1:]
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
## Other CLI commands
|
|
110
|
+
|
|
111
|
+
### View configuration
|
|
112
|
+
|
|
113
|
+
```bash
|
|
114
|
+
# Show all current configuration settings
|
|
115
|
+
streamlit config show
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### Cache management
|
|
119
|
+
|
|
120
|
+
```bash
|
|
121
|
+
# Clear all cached data from disk
|
|
122
|
+
streamlit cache clear
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
### Diagnostics and help
|
|
126
|
+
|
|
127
|
+
```bash
|
|
128
|
+
# Show installed version
|
|
129
|
+
streamlit version
|
|
130
|
+
|
|
131
|
+
# List all available commands
|
|
132
|
+
streamlit help
|
|
133
|
+
|
|
134
|
+
# Open documentation in browser
|
|
135
|
+
streamlit docs
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
### Project scaffolding
|
|
139
|
+
|
|
140
|
+
```bash
|
|
141
|
+
# Create starter files for a new project
|
|
142
|
+
streamlit init
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
### Demo app
|
|
146
|
+
|
|
147
|
+
```bash
|
|
148
|
+
# Launch the Streamlit demo application
|
|
149
|
+
streamlit hello
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
## Configuration precedence
|
|
153
|
+
|
|
154
|
+
Configuration can be set in multiple places. Order of precedence (highest to lowest):
|
|
155
|
+
|
|
156
|
+
1. **Command-line flags** (`--server.port=8080`)
|
|
157
|
+
2. **Environment variables** (`STREAMLIT_SERVER_PORT=8080`)
|
|
158
|
+
3. **Local config** (`.streamlit/config.toml` in project directory)
|
|
159
|
+
4. **Global config** (`~/.streamlit/config.toml`)
|
|
160
|
+
|
|
161
|
+
## References
|
|
162
|
+
|
|
163
|
+
- [Run your app](https://docs.streamlit.io/develop/concepts/architecture/run-your-app) - Concepts and methods for running Streamlit apps
|
|
164
|
+
- [config.toml](https://docs.streamlit.io/develop/api-reference/configuration/config.toml) - Complete configuration options reference
|
|
165
|
+
- [CLI reference](https://docs.streamlit.io/develop/api-reference/cli) - Full CLI command documentation
|
package/.agents/skills/developing-with-streamlit/skills/using-streamlit-custom-components/SKILL.md
ADDED
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: using-streamlit-custom-components
|
|
3
|
+
description: Using third-party Streamlit custom components. Use when extending Streamlit with community packages. Covers installation, popular custom components, and when to use them.
|
|
4
|
+
license: Apache-2.0
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Streamlit custom components
|
|
8
|
+
|
|
9
|
+
Extend Streamlit with third-party custom components from the community.
|
|
10
|
+
|
|
11
|
+
## What are custom components?
|
|
12
|
+
|
|
13
|
+
Custom components are standalone Python libraries that add features not in Streamlit's core API. They're built by the community and can be installed like any Python package.
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
Install using the PyPI package name (not the repo name—they can differ):
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
uv add <pypi-package-name>
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
Then import according to the component's documentation. The import name often differs from the package name too.
|
|
24
|
+
|
|
25
|
+
## Use with caution
|
|
26
|
+
|
|
27
|
+
Components are not maintained by Streamlit. Before adopting:
|
|
28
|
+
|
|
29
|
+
- **Check maintenance** - Is it actively maintained? Recent commits?
|
|
30
|
+
- **Check compatibility** - Does it work with your Streamlit version?
|
|
31
|
+
- **Check popularity** - GitHub stars, downloads, community usage
|
|
32
|
+
- **Consider alternatives** - Can you achieve this with core Streamlit?
|
|
33
|
+
|
|
34
|
+
Custom components can break when Streamlit updates, so prefer core features when possible.
|
|
35
|
+
|
|
36
|
+
## Popular custom components
|
|
37
|
+
|
|
38
|
+
### streamlit-keyup
|
|
39
|
+
|
|
40
|
+
Text input that fires on every keystroke instead of waiting for enter/blur. Useful for live search.
|
|
41
|
+
|
|
42
|
+
- **Repo:** https://github.com/blackary/streamlit-keyup
|
|
43
|
+
- **Docs:** https://pypi.org/project/streamlit-keyup/
|
|
44
|
+
|
|
45
|
+
```bash
|
|
46
|
+
uv add streamlit-keyup
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
```python
|
|
50
|
+
from st_keyup import st_keyup
|
|
51
|
+
|
|
52
|
+
query = st_keyup("Search", debounce=300) # 300ms debounce
|
|
53
|
+
filtered = df[df["name"].str.contains(query, case=False)]
|
|
54
|
+
st.dataframe(filtered)
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### streamlit-bokeh
|
|
58
|
+
|
|
59
|
+
Official replacement for `st.bokeh_chart` (removed from Streamlit API). Maintained by Streamlit.
|
|
60
|
+
|
|
61
|
+
- **Repo:** https://github.com/streamlit/streamlit-bokeh
|
|
62
|
+
- **Docs:** https://pypi.org/project/streamlit-bokeh/
|
|
63
|
+
|
|
64
|
+
```bash
|
|
65
|
+
uv add streamlit-bokeh
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
```python
|
|
69
|
+
from bokeh.plotting import figure
|
|
70
|
+
from streamlit_bokeh import streamlit_bokeh
|
|
71
|
+
|
|
72
|
+
p = figure(title="Simple Line", x_axis_label="x", y_axis_label="y")
|
|
73
|
+
p.line([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], line_width=2)
|
|
74
|
+
streamlit_bokeh(p)
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
### streamlit-aggrid
|
|
78
|
+
|
|
79
|
+
Interactive dataframes with sorting, filtering, cell editing, grouping, and pivoting. Use when you need customization beyond what `st.dataframe` and `st.data_editor` offer.
|
|
80
|
+
|
|
81
|
+
- **Repo:** https://github.com/PablocFonseca/streamlit-aggrid
|
|
82
|
+
- **Docs:** https://pypi.org/project/streamlit-aggrid/
|
|
83
|
+
|
|
84
|
+
```bash
|
|
85
|
+
uv add streamlit-aggrid
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
```python
|
|
89
|
+
from st_aggrid import AgGrid
|
|
90
|
+
|
|
91
|
+
AgGrid(df, editable=True, filter=True)
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
**When to use aggrid over st.dataframe:**
|
|
95
|
+
- Interactive row grouping and pivoting
|
|
96
|
+
- Advanced filtering and sorting UI
|
|
97
|
+
- Complex cell editing workflows
|
|
98
|
+
- Custom cell renderers
|
|
99
|
+
|
|
100
|
+
### streamlit-folium
|
|
101
|
+
|
|
102
|
+
Interactive maps powered by Folium.
|
|
103
|
+
|
|
104
|
+
- **Repo:** https://github.com/randyzwitch/streamlit-folium
|
|
105
|
+
- **Docs:** https://folium.streamlit.app/
|
|
106
|
+
|
|
107
|
+
```bash
|
|
108
|
+
uv add streamlit-folium
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
```python
|
|
112
|
+
import folium
|
|
113
|
+
from streamlit_folium import st_folium
|
|
114
|
+
|
|
115
|
+
m = folium.Map(location=[37.7749, -122.4194], zoom_start=12)
|
|
116
|
+
st_folium(m, width=700)
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
### pygwalker
|
|
120
|
+
|
|
121
|
+
Tableau-like drag-and-drop data exploration.
|
|
122
|
+
|
|
123
|
+
- **Repo:** https://github.com/Kanaries/pygwalker
|
|
124
|
+
- **Docs:** https://docs.kanaries.net/pygwalker
|
|
125
|
+
|
|
126
|
+
```bash
|
|
127
|
+
uv add pygwalker
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
```python
|
|
131
|
+
import pygwalker as pyg
|
|
132
|
+
|
|
133
|
+
pyg.walk(df, env="Streamlit")
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
### streamlit-extras
|
|
137
|
+
|
|
138
|
+
A collection of community utilities. Cherry-pick what you need.
|
|
139
|
+
|
|
140
|
+
- **Repo:** https://github.com/arnaudmiribel/streamlit-extras
|
|
141
|
+
- **Docs:** https://extras.streamlit.app/
|
|
142
|
+
|
|
143
|
+
```bash
|
|
144
|
+
uv add streamlit-extras
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
```python
|
|
148
|
+
from streamlit_extras.image_selector import image_selector
|
|
149
|
+
|
|
150
|
+
# Let users click on regions of an image
|
|
151
|
+
selection = image_selector(image, selections=["Region A", "Region B"])
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
```python
|
|
155
|
+
from streamlit_extras.vertical_slider import vertical_slider
|
|
156
|
+
|
|
157
|
+
# A vertical slider widget
|
|
158
|
+
value = vertical_slider("Volume", min_value=0, max_value=100, default_value=50)
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
## Discover more
|
|
162
|
+
|
|
163
|
+
Browse the custom component gallery: https://streamlit.io/components
|
|
164
|
+
|
|
165
|
+
Filter by category, popularity, and recency to find custom components for your use case.
|
|
166
|
+
|
|
167
|
+
## References
|
|
168
|
+
|
|
169
|
+
- [Components Gallery](https://streamlit.io/components)
|
|
170
|
+
- [Build a custom component](https://docs.streamlit.io/develop/concepts/custom-components)
|
|
@@ -0,0 +1,229 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: using-streamlit-layouts
|
|
3
|
+
description: Structuring Streamlit app layouts. Use when placing content in sidebars, columns, containers, or dialogs. Covers sidebar usage, column limits, horizontal containers, dialogs, and bordered cards.
|
|
4
|
+
license: Apache-2.0
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
# Streamlit layout
|
|
8
|
+
|
|
9
|
+
How you structure your app affects usability more than you think.
|
|
10
|
+
|
|
11
|
+
## Sidebar: navigation + global filters only
|
|
12
|
+
|
|
13
|
+
The sidebar should only contain navigation and app-level filters. Main content goes in the main area.
|
|
14
|
+
|
|
15
|
+
```python
|
|
16
|
+
# GOOD
|
|
17
|
+
with st.sidebar:
|
|
18
|
+
date_range = st.date_input("Date range")
|
|
19
|
+
region = st.selectbox("Region", ["All", "US", "EU", "APAC"])
|
|
20
|
+
st.caption("App v1.2.3")
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
```python
|
|
24
|
+
# BAD: Too much content in sidebar
|
|
25
|
+
with st.sidebar:
|
|
26
|
+
st.title("Dashboard")
|
|
27
|
+
st.dataframe(df) # Don't put main content here
|
|
28
|
+
st.bar_chart(data)
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
**What goes in sidebar:**
|
|
32
|
+
- Global filters (date range, user selection, region)
|
|
33
|
+
- App info (version, feedback link)
|
|
34
|
+
|
|
35
|
+
**What stays out:**
|
|
36
|
+
- Main content, charts, tables, results
|
|
37
|
+
|
|
38
|
+
## Columns: max 4, set alignment
|
|
39
|
+
|
|
40
|
+
Don't use too many columns—they get cramped.
|
|
41
|
+
|
|
42
|
+
```python
|
|
43
|
+
# GOOD
|
|
44
|
+
col1, col2 = st.columns(2)
|
|
45
|
+
|
|
46
|
+
# Custom widths (ratios)
|
|
47
|
+
col1, col2 = st.columns([2, 1]) # 2:1 ratio
|
|
48
|
+
|
|
49
|
+
# OK with alignment
|
|
50
|
+
cols = st.columns(4, vertical_alignment="center")
|
|
51
|
+
|
|
52
|
+
# BAD: Too many, cramped
|
|
53
|
+
col1, col2, col3, col4, col5, col6 = st.columns(6)
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## Horizontal containers for button groups
|
|
57
|
+
|
|
58
|
+
Use `st.container(horizontal=True)` instead of columns for button groups:
|
|
59
|
+
|
|
60
|
+
```python
|
|
61
|
+
with st.container(horizontal=True):
|
|
62
|
+
st.button("Cancel")
|
|
63
|
+
st.button("Save")
|
|
64
|
+
st.button("Submit")
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
## Aligning elements
|
|
68
|
+
|
|
69
|
+
Use `horizontal_alignment` on containers to position elements:
|
|
70
|
+
|
|
71
|
+
```python
|
|
72
|
+
# Center elements
|
|
73
|
+
with st.container(horizontal_alignment="center"):
|
|
74
|
+
st.image("logo.png", width=200)
|
|
75
|
+
st.title("Welcome")
|
|
76
|
+
|
|
77
|
+
# Right-align elements
|
|
78
|
+
with st.container(horizontal_alignment="right"):
|
|
79
|
+
st.button("Settings", icon=":material/settings:")
|
|
80
|
+
|
|
81
|
+
# Distribute evenly (great for button groups)
|
|
82
|
+
with st.container(horizontal=True, horizontal_alignment="distribute"):
|
|
83
|
+
st.button("Cancel")
|
|
84
|
+
st.button("Save")
|
|
85
|
+
st.button("Submit")
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
Options: `"left"` (default), `"center"`, `"right"`, `"distribute"`
|
|
89
|
+
|
|
90
|
+
## Bordered containers
|
|
91
|
+
|
|
92
|
+
Use `border=True` on containers for visual grouping. See `building-streamlit-dashboards` for dashboard-specific patterns like KPI cards.
|
|
93
|
+
|
|
94
|
+
```python
|
|
95
|
+
with st.container(border=True):
|
|
96
|
+
st.subheader("Section title")
|
|
97
|
+
st.write("Grouped content here")
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
## Tabs
|
|
101
|
+
|
|
102
|
+
Organize content into switchable views:
|
|
103
|
+
|
|
104
|
+
```python
|
|
105
|
+
tab1, tab2 = st.tabs(["Chart", "Data"])
|
|
106
|
+
|
|
107
|
+
with tab1:
|
|
108
|
+
st.line_chart(data)
|
|
109
|
+
with tab2:
|
|
110
|
+
st.dataframe(df)
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
## Expander
|
|
114
|
+
|
|
115
|
+
Collapsible sections for secondary content:
|
|
116
|
+
|
|
117
|
+
```python
|
|
118
|
+
with st.expander("See details"):
|
|
119
|
+
st.write("Hidden content here")
|
|
120
|
+
st.code("print('hello')")
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
## Empty and placeholders
|
|
124
|
+
|
|
125
|
+
`st.empty()` creates a single-element placeholder that can be updated or cleared:
|
|
126
|
+
|
|
127
|
+
```python
|
|
128
|
+
placeholder = st.empty()
|
|
129
|
+
|
|
130
|
+
# Update the placeholder
|
|
131
|
+
placeholder.text("Loading...")
|
|
132
|
+
result = load_data()
|
|
133
|
+
placeholder.dataframe(result)
|
|
134
|
+
|
|
135
|
+
# Clear it
|
|
136
|
+
placeholder.empty()
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
## Popover
|
|
140
|
+
|
|
141
|
+
Click to reveal content:
|
|
142
|
+
|
|
143
|
+
```python
|
|
144
|
+
with st.popover("Settings"):
|
|
145
|
+
st.checkbox("Dark mode")
|
|
146
|
+
st.slider("Font size", 10, 24)
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
## Dialogs for focused interactions
|
|
150
|
+
|
|
151
|
+
Use `@st.dialog` for UI that doesn't need to be always visible:
|
|
152
|
+
|
|
153
|
+
```python
|
|
154
|
+
@st.dialog("Confirm deletion")
|
|
155
|
+
def confirm_delete(item_name):
|
|
156
|
+
st.write(f"Are you sure you want to delete **{item_name}**?")
|
|
157
|
+
if st.button("Delete", type="primary"):
|
|
158
|
+
delete_item(item_name)
|
|
159
|
+
st.rerun()
|
|
160
|
+
|
|
161
|
+
if st.button("Delete item"):
|
|
162
|
+
confirm_delete("My Document")
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
**Key points:**
|
|
166
|
+
- Dialogs rerun independently from the main script
|
|
167
|
+
- Use `st.session_state` to pass widget values from the dialog to the main app
|
|
168
|
+
- Call `st.rerun()` to close dialog and refresh main app
|
|
169
|
+
- Use `dismissible=False` for forced actions
|
|
170
|
+
- `st.sidebar` is not supported inside dialogs
|
|
171
|
+
|
|
172
|
+
**When to use dialogs:**
|
|
173
|
+
- Confirmation prompts
|
|
174
|
+
- Settings panels
|
|
175
|
+
- Forms that don't need to be always visible
|
|
176
|
+
|
|
177
|
+
## Spacing
|
|
178
|
+
|
|
179
|
+
Control spacing between elements with `gap` on containers:
|
|
180
|
+
|
|
181
|
+
```python
|
|
182
|
+
# Remove spacing for tight list-like UIs
|
|
183
|
+
with st.container(gap=None, border=True):
|
|
184
|
+
for item in items:
|
|
185
|
+
st.checkbox(item.text)
|
|
186
|
+
|
|
187
|
+
# Explicit gap sizes
|
|
188
|
+
with st.container(gap="small"):
|
|
189
|
+
...
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
Add vertical space with `st.space`:
|
|
193
|
+
|
|
194
|
+
```python
|
|
195
|
+
st.space("small") # Small gap
|
|
196
|
+
st.space("medium") # Medium gap
|
|
197
|
+
st.space("large") # Large gap
|
|
198
|
+
st.space(50) # Custom pixels
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
## Width and height
|
|
202
|
+
|
|
203
|
+
Control element sizing:
|
|
204
|
+
|
|
205
|
+
```python
|
|
206
|
+
# Stretch to fill available space (equal height columns)
|
|
207
|
+
cols = st.columns(2)
|
|
208
|
+
with cols[0].container(border=True, height="stretch"):
|
|
209
|
+
st.line_chart(data)
|
|
210
|
+
with cols[1].container(border=True, height="stretch"):
|
|
211
|
+
st.dataframe(df)
|
|
212
|
+
|
|
213
|
+
# Shrink to content size
|
|
214
|
+
st.container(width="content")
|
|
215
|
+
|
|
216
|
+
# Fixed pixel sizes
|
|
217
|
+
st.container(height=300)
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
## References
|
|
221
|
+
|
|
222
|
+
- [st.columns](https://docs.streamlit.io/develop/api-reference/layout/st.columns)
|
|
223
|
+
- [st.container](https://docs.streamlit.io/develop/api-reference/layout/st.container)
|
|
224
|
+
- [st.sidebar](https://docs.streamlit.io/develop/api-reference/layout/st.sidebar)
|
|
225
|
+
- [st.tabs](https://docs.streamlit.io/develop/api-reference/layout/st.tabs)
|
|
226
|
+
- [st.expander](https://docs.streamlit.io/develop/api-reference/layout/st.expander)
|
|
227
|
+
- [st.popover](https://docs.streamlit.io/develop/api-reference/layout/st.popover)
|
|
228
|
+
- [st.empty](https://docs.streamlit.io/develop/api-reference/layout/st.empty)
|
|
229
|
+
- [st.dialog](https://docs.streamlit.io/develop/api-reference/execution-flow/st.dialog)
|