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
- Demo: App
Usage
Installation
pip install streamlit-tile
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