New Component! Streamlit Tiles

Custom Components
1

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

8 Likes
2

Nice! But would be nicer if more control can be done on the animation :slight_smile:

4

Hi Sakuna,
Love the Tile component. I think it fits in some of my self service portals projects, but I have found a extrange behaviour. When I click on the tile, even after reload the page it always remains True. I tried to set it to False after some actions. Even if I set to an st.session_state.clicked global variable:

st.session_state.clicked = streamlit_tile(
    title="My Tile",
    description="This is a sample tile",
    icon="home",
    color_theme="blue"
)

if st.session_state.clicked:
   st.write('clicked')
   st.session_state.clicked = False

After the first click on the tile the action always happens.
Can you please explain this behaviour?
Thanks