Pine Dashboard Metrics
A comprehensive fitness dashboard overview component with a nature-inspired pine green and lime accent color scheme.
Features
- 4 KPI metric cards with trend indicators and change percentages
- Popular Classes section with attendance progress bars (Yoga, CrossFit, Spin)
- Revenue Trend ascending bar chart built with CSS
- Member Demographics with age distribution visualization
- Deep pine green (#14532d, #166534) with lime (#84cc16) accents on dark (#0a0a0a) background
- Dark mode native design with WCAG AA compliant contrast
- Responsive grid layout (1→2→4 columns for metrics, 1→3 for detail cards)
- Google Fonts Inter for clean, modern typography
Usage
import RegistryItem from './registry-item';
export default function Page() {
return <RegistryItem />;
}
Customization
- Replace
metrics, popularClasses, revenueTrend, and demographics arrays with live data
- Swap the pine green/lime palette by modifying the Tailwind green and lime classes
- Add or remove metric cards as needed for your fitness platform
- Integrate with charting libraries for interactive revenue trends
