{"id":6897,"library":"streamlit-card","title":"Streamlit Card","description":"Streamlit Card is a custom component that allows developers to easily create interactive and customizable UI cards within their Streamlit applications. It provides options for displaying titles, text, images, and handling clicks, enhancing the visual appeal and interactivity of Streamlit dashboards. The library is currently at version 1.0.2 and receives active maintenance updates.","status":"active","version":"1.0.2","language":"en","source_language":"en","source_url":"https://github.com/gamcoh/st-card","tags":["streamlit","ui","card","component","dashboard"],"install":[{"cmd":"pip install streamlit-card","lang":"bash","label":"Install latest version"}],"dependencies":[{"reason":"This is a custom component designed to extend Streamlit's functionality.","package":"streamlit"}],"imports":[{"symbol":"card","correct":"from streamlit_card import card"}],"quickstart":{"code":"import streamlit as st\nfrom streamlit_card import card\n\nst.set_page_config(layout='wide')\n\nst.title(\"My Streamlit Cards Demo\")\n\n# Example 1: Basic Clickable Card with URL\nhas_clicked_github = card(\n    title=\"Visit GitHub\",\n    text=\"Explore the source code of streamlit-card.\",\n    image=\"https://placekitten.com/200/300\",\n    url=\"https://github.com/gamcoh/st-card\",\n    styles={\n        \"card\": {\n            \"width\": \"300px\",\n            \"height\": \"200px\",\n            \"border-radius\": \"10px\",\n            \"box-shadow\": \"0 0 10px rgba(0,0,0,0.2)\"\n        }\n    }\n)\n\nif has_clicked_github:\n    st.write(\"Redirecting to GitHub...\")\n\n# Example 2: Card with internal callback for interaction\ndef handle_card_click():\n    st.session_state['card_message'] = 'Card was clicked! You can perform actions here.'\n\nif 'card_message' not in st.session_state:\n    st.session_state['card_message'] = 'Click the card below!'\n\nhas_clicked_callback = card(\n    title=\"Interactive Card\",\n    text=\"Click me to trigger an action within the app.\",\n    image=\"https://placebear.com/200/300\",\n    on_click=handle_card_click,\n    styles={\n        \"card\": {\n            \"width\": \"300px\",\n            \"height\": \"200px\",\n            \"border-radius\": \"10px\",\n            \"background-color\": \"#f0f2f6\",\n            \"box-shadow\": \"0 0 10px rgba(0,0,0,0.1)\"\n        }\n    }\n)\n\nst.write(st.session_state['card_message'])","lang":"python","description":"This quickstart demonstrates how to create two types of cards: one that redirects to a URL upon click, and another that triggers an internal Streamlit callback function. It also shows basic styling customization."},"warnings":[{"fix":"Use `base64.b64encode(f.read()).decode('utf-8')` to encode local image files. For example:\n```python\nimport base64\nwith open('path/to/your/image.png', 'rb') as f:\n    data = f.read()\n    encoded_image = 'data:image/png;base64,' + base64.b64encode(data).decode('utf-8')\ncard(..., image=encoded_image, ...)\n```","message":"When using local images, `streamlit_card` expects the image data as a base64 encoded string, not a direct file path. This is a common pattern for Streamlit custom components.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Explicitly use `from streamlit_card import card` to import this specific component. If using multiple card components, use aliasing like `from streamlit_card import card as st_card` to prevent name clashes.","message":"Be aware of naming conflicts and similar libraries. `streamlit-card` is a distinct component. `streamlit-extras` also contains a 'card' module (`from streamlit_extras.card import card`), and `streamlit-swipecards` offers swipeable card functionality. Ensure you import from the correct library to avoid unexpected behavior.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Consider `st.image(image_source, caption='Click me', link='https://example.com/')` for basic clickable images. Use `streamlit-card` when you need complex layouts, text overlays, custom styling, or in-app Python callbacks on click.","message":"For simple clickable images that navigate to a URL, Streamlit's native `st.image` function with the `link` parameter might be a simpler alternative. `streamlit-card` offers more extensive styling and callback options beyond basic image linking.","severity":"gotcha","affected_versions":"Streamlit v1.1.0 and above"}],"env_vars":null,"last_verified":"2026-04-15T00:00:00.000Z","next_check":"2026-07-14T00:00:00.000Z","problems":[]}