building-streamlit-dashboards

Compose responsive Streamlit dashboards with KPI cards, charts, and tables.

629|85|Updated May 4, 2020
One-click install
npx skills add https://github.com/andfanilo/streamlit-echarts --skill building-streamlit-dashboards-andfanilo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: building-streamlit-dashboards
Source: https://github.com/andfanilo/streamlit-echarts/tree/main/.claude/skills/developing-with-streamlit/skills/building-streamlit-dashboards
Command: npx skills add https://github.com/andfanilo/streamlit-echarts --skill building-streamlit-dashboards-andfanilo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Consolidates metrics, charts, and tables into cohesive, responsive dashboards to reduce manual layout work and improve KPI visibility.

Core Features & Use Cases

  • Card styling with borders for visual grouping and emphasis.
  • Horizontal KPI rows and metric cards that wrap responsively for different screen sizes.
  • Sparklines in metrics to surface short-term trends alongside key values.
  • Layout composition using containers and columns plus sidebar filters for focused exploration.
  • Use case: internal reporting dashboards that combine top-level KPIs, charts by region, and recent transaction tables.

Quick Start

Create a dashboard by composing container-based cards and a horizontal KPI row with metric sparklines and sidebar filters in Streamlit.

Frequently Asked Questions about building-streamlit-dashboards

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a KPI dashboard with responsive metric cards in Streamlit?

Build a KPI dashboard in Streamlit by composing containers and columns into horizontal metric rows that wrap responsively for different screen sizes. Use metric widgets and card styling with borders for visual grouping and emphasis.

Can I add sparklines to Streamlit metrics to show short-term trends?

Yes, you can add sparklines to Streamlit metrics to surface short-term trends alongside key values. This allows your dashboard to combine current KPI values with immediate historical context within the same metric display.

What is the best way to lay out charts and tables for internal reporting in Streamlit?

The best way to lay out internal reporting dashboards in Streamlit is combining top-level KPI rows, charts organized by region, and recent transaction tables using layout composition with containers and columns plus sidebar filters for focused exploration.

Does this Streamlit dashboard approach work for web apps and internal reporting?

Yes, this Streamlit dashboard approach works for both internal reporting and web apps. It consolidates metrics, charts, and tables into cohesive, responsive layouts to reduce manual layout work and improve KPI visibility across different screen sizes.

How do I apply sidebar filters to a Streamlit dashboard for focused data exploration?

Apply sidebar filters to a Streamlit dashboard by using layout composition with containers and columns alongside sidebar elements. This enables focused exploration of the KPI displays, charts, and tables presented within the responsive dashboard pages.