Tomas Dvorak
156 KiB
Usable UI Components
This document contains reusable UI components for the Containr project. All components are built with React, TypeScript, and styled using Tailwind CSS with a consistent design system.
📊 Dashboard & Analytics Components
Metric Cards
Sales Metric Card
Displays total sales with trend indicator and time period selector.
Features:
- Large metric display ($128.32)
- Trend indicator (+2% with green styling)
- Time period buttons (1D, 1W, 1M, 3M, 6M, 1Y)
- Report action button
Usage: Perfect for dashboard overviews, KPI displays, and analytics summaries.
Visitors Metric Card
Shows visitor statistics with device breakdown and trends.
Features:
- Visitor count display (237,456)
- Trend indicator (-1.4% with red styling for decline)
- Device type breakdown (Desktop: 27%, Mobile: 63%, Tablet: 10%)
- Device-specific trend indicators
- Report action button
Usage: Ideal for traffic analytics, user behavior dashboards, and marketing metrics.
Conversion Rate Card
Displays conversion metrics with funnel breakdown.
Features:
- Main conversion rate (16.9%)
- Trend indicator (+2.1% growth)
- Conversion funnel stages:
- Added to Cart: 3,842 (+12%)
- Checkout Started: 2,156 (+8%)
- Payment Completed: 1,842 (+5%)
- Mini sparkline chart
- Details action button
Usage: E-commerce dashboards, sales funnel analysis, conversion optimization tracking.
📈 Charts & Visualizations
Visitor Channels Chart
Horizontal stacked bar chart showing traffic source distribution.
Features:
- Overall percentage (78%)
- Trend indicator (-0.4%)
- Visual channel breakdown:
- Organic Search: 45% (gray)
- Direct Traffic: 40% (blue)
- Social Media: 15% (green)
- Channel labels with percentages
- Details action button
Usage: Marketing analytics, traffic source analysis, channel performance tracking.Report
| Channels | Percent | Total |
|---|---|---|
 Facebook | 28% | 6,958 |
 Instagram | 23% | 5,716 |
 Google | 32% | 7,952 |
| Channels | Actual | Avg. |
|---|---|---|
First response time Below SLA | 15m | +22% |
Avg Resolution Time Meeting SLA | 48m | +18% |
CSAT Score Above Target | 4.8/5 | -0.3% |