skills.rest
gengirish
gengirishCOMMUNITY
Explore all skills by this author →
GitHub

tremor-analytics

Builds Tremor React KPI cards and charts for DropFlow analytics dashboards.

Updated Mar 31, 2026
Search Tags:#analytics#charts#react#dashboard#tailwind#kpi#tremor
One-click install
npx skills add https://github.com/gengirish/dropflow --skill tremor-analytics-gengirish
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tremor-analytics
Source: https://github.com/gengirish/dropflow/tree/main/.cursor/skills/tremor-analytics
Command: npx skills add https://github.com/gengirish/dropflow --skill tremor-analytics-gengirish

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @tremor/react.

What problem does it solve? Building analytics dashboards with consistent KPI cards, revenue charts, and inventory visualizations requires repetitive component wiring and locale-specific currency formatting, which this Skill standardizes for the DropFlow project. ## Core Features & Use Cases - KPI Card Rows: Renders metric cards with delta badges using Tremor Card, Metric, Text, Flex, and BadgeDelta components. - Chart Components: Provides AreaChart for revenue trends, DonutChart for order status distribution, and BarChart for low-stock inventory monitoring. - INR Currency Conventions: Enforces paise-to-rupees conversion with en-IN locale and compact notation for chart axes. - Use Case: When building a finance dashboard page showing total orders, revenue over 30 days, and pending shipments, use this Skill to generate the complete Tremor component set with correct formatting. ## Quick Start Ask the AI to build a revenue analytics dashboard with KPI cards and an area chart using the tremor-analytics skill.

Frequently Asked Questions about tremor-analytics

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

FAQPage Schema
How do I build KPI cards with Tremor React?▼

Use Tremor's Card, Metric, Text, Flex, and BadgeDelta components in a responsive grid layout. Map over a KPI data array to render each card with a title, metric value, and delta badge showing increase, decrease, or unchanged states.

How to format Indian rupees in Tremor charts?▼

Use Intl.NumberFormat with the en-IN locale, INR currency style, and compact notation. Divide values by 100 first if your data is stored in paise, producing axis labels like ₹24.6L instead of ₹24,56,789.

Does Tremor React work with Tailwind and shadcn/ui?▼

Yes, Tremor components are built on Tailwind CSS and coexist with shadcn/ui without style conflicts. You can mix Tremor chart components with shadcn/ui primitives in the same dashboard pages.

How do I install @tremor/react in a pnpm monorepo?▼

Run pnpm add @tremor/react --filter web to install the package into the web workspace of a pnpm monorepo. The --filter flag scopes the installation to the specified package only.

Where should Tremor analytics components be placed in a project?▼

Place analytics components directly in dashboard layout pages rather than in a reusable components/ui directory. These components are page-specific visualizations tied to dashboard data, not generic reusable primitives.

Related Skills

Explore More Software Engineering Skills→
kishorkukrejakishorkukreja
56

economic-order-quantity

Calculate EOQ and EPQ for inventory cost minimization.

Community
Intermediate
webrix-aiwebrix-ai
1

dashboard-generation

Create analytics dashboards with KPIs, charts, and automated refresh schedules.

Official
Intermediate
vecearvecear

state-ux-flow-builder

Standardize loading, error, empty, and success states for data-fetching views.

Community
Advanced
fefogarciafefogarcia
1

tremor-design-system

Build dashboards and data-rich UIs with Tremor React components and Tailwind CSS.

Community
Intermediate