A customizable tile component for Streamlit apps
Project description
Streamlit Tile Component
A customizable tile component for Streamlit apps that provides a button-like interface with a modern tile appearance.
Features
- Customizable appearance: Choose from multiple color themes, icons, and dimensions
- Material Icons integration: Use any Material Icons icon
- Responsive design: Built with Tailwind CSS for modern styling
- Interactive feedback: Hover and click animations
- Easy integration: Works seamlessly with Streamlit's component system
Usage
Basic Usage
import streamlit as st
from streamlit_tile import streamlit_tile
# Create a simple tile
clicked = streamlit_tile(
title="My Tile",
description="This is a sample tile",
icon="home",
color_theme="blue"
)
if clicked:
st.write("Tile was clicked!")
Advanced Usage
import streamlit as st
from streamlit_tile import streamlit_tile
# Create a dashboard with multiple tiles
col1, col2, col3 = st.columns(3)
with col1:
users_clicked = streamlit_tile(
title="Users",
description="Manage application users and permissions",
icon="people",
color_theme="blue",
height=250,
width=300,
key="users_tile"
)
with col2:
settings_clicked = streamlit_tile(
title="Settings",
description="Configure application preferences",
icon="settings",
color_theme="yellow",
height=250,
width=300,
key="settings_tile"
)
with col3:
reports_clicked = streamlit_tile(
title="Reports",
description="Generate and view various reports",
icon="description",
color_theme="indigo",
height=250,
width=300,
key="reports_tile"
)
# Handle tile clicks
if users_clicked:
st.info("Users section accessed!")
if settings_clicked:
st.info("Settings section accessed!")
if reports_clicked:
st.info("Reports section accessed!")
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
title |
str | "Default Title" | The title text displayed on the tile |
description |
str | "Default description" | The description text displayed on the tile |
icon |
str | "home" | Material Icons icon name (e.g., 'people', 'settings', 'chat') |
color_theme |
str | "blue" | Color theme: 'blue', 'red', 'yellow', 'indigo', 'green', 'purple' |
height |
int | 200 | Height of the tile in pixels |
width |
int | 300 | Width of the tile in pixels |
key |
str | None | Unique key for the component (required for multiple tiles) |
License
This project is licensed under the MIT License.
Acknowledgments
- Built using the Streamlit Component Template
- Styled with Tailwind CSS
- Icons from Material Icons
Project details
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distributions
No source distribution files available for this release.See tutorial on generating distribution archives.
Built Distribution
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file streamlit_tile-1.0.1-py3-none-any.whl.
File metadata
- Download URL: streamlit_tile-1.0.1-py3-none-any.whl
- Upload date:
- Size: 804.4 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.1.0 CPython/3.13.1
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
f555c17f462d0e41e76c3ad086194b45630a01090047fffed544c386bbe1bf6f
|
|
| MD5 |
8db4e70bd24b70b097e74c90c3daa25e
|
|
| BLAKE2b-256 |
4e9bab137287127bb3a34300facfb141d6c328466ca4444cfbc69942a1894966
|