Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From studio-skills
Build interactive React dashboards in Treasure Studio using render_react with pre-loaded React 18, Recharts, Tailwind CSS, and theme-aware dark mode.
npx claudepluginhub treasure-data/td-skillsHow this skill is triggered — by the user, by Claude, or both
Slash command
/studio-skills:react-dashboardThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Use `mcp__tdx-studio__render_react`. For simple charts, prefer `render_chart`.
Builds dark-themed React UIs using Tailwind CSS with glassmorphism effects and Framer Motion animations for dashboards, admin panels, and data-rich apps.
Provides a dark-themed React UI system using Tailwind CSS and Framer Motion for dashboards, admin panels, and data-rich apps with glassmorphism effects and animations.
Builds and tests Vizro dashboards from design specs by copying example app, fetching model schemas, and running Playwright tests. For Python-based dashboard implementation.
Share bugs, ideas, or general feedback.
Use mcp__tdx-studio__render_react. For simple charts, prefer render_chart.
Do NOT import anything — these are pre-loaded:
useState, useEffect, useMemo, etc.)isDark (boolean) and theme ("light" / "dark") — reactive, update on toggleHTML elements — Tailwind dark: variants:
<div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
Recharts props — isDark ternary:
<XAxis stroke={isDark ? "#9ca3af" : "#6b7280"} />
<Tooltip contentStyle={{ backgroundColor: isDark ? "#1f2937" : "#fff" }} />
<CartesianGrid strokeDasharray="3 3" stroke={isDark ? "#374151" : "#e5e7eb"} />
export default function KPIDashboard({ data }) {
const { kpis, trend } = data;
const COLORS = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444'];
return (
<div className="p-6 space-y-6 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">
<div className="grid grid-cols-4 gap-4">
{kpis.map((kpi, i) => (
<div key={i} className="p-4 rounded-lg border border-gray-200 dark:border-gray-700">
<div className="text-sm text-gray-500 dark:text-gray-400">{kpi.label}</div>
<div className="text-2xl font-bold" style={{ color: COLORS[i] }}>{kpi.value}</div>
</div>
))}
</div>
<ResponsiveContainer width="100%" height={300}>
<LineChart data={trend}>
<CartesianGrid strokeDasharray="3 3" stroke={isDark ? "#374151" : "#e5e7eb"} />
<XAxis dataKey="date" stroke={isDark ? "#9ca3af" : "#6b7280"} />
<YAxis stroke={isDark ? "#9ca3af" : "#6b7280"} />
<Tooltip contentStyle={{ backgroundColor: isDark ? "#1f2937" : "#fff" }} />
<Line type="monotone" dataKey="value" stroke="#3b82f6" />
</LineChart>
</ResponsiveContainer>
</div>
);
}