127+ Primitives
Weather Card
CardsDark-themed weather card featuring interactive metric tabs, a custom Catmull-Rom smooth SVG area chart with hover cursor guides, and an 8-day forecast selector with sliding selection physics.
SVG ChartFramer MotionWeatherA11y Ready
67
|
Precipitation: 0%
Humidity: 67%
Wind: 8 mph
San Francisco, CA
Wednesday 1:00 AM
Clear night
67°
64°
70°
78°
82°
79°
72°
68°
2 AM5 AM8 AM11 AM2 PM5 PM8 PM11 PM
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/weather-card.json"
Props
TypeScript props supported by <WeatherCard />.
| Prop | Type | Default | Description |
|---|---|---|---|
| location | string | "San Francisco, CA" | City and region label displayed in the header. |
| initialUnit | "F" | "C" | "F" | Initial temperature unit displayed on first mount. |
| daily | DailyForecast[] | DEFAULT_DAILY_FORECAST | Array of 8 daily forecasts containing high/low temperatures, conditions, and hourly data. |
| className | string | undefined | Additional Tailwind CSS classes merged onto the outer card container. |
Key Features
- Zero-dependency inline SVG area chart using Catmull-Rom monotone cubic splines with Sky-400 stroke and gradient fill.
- Dynamic cursor guide line and floating data tooltip tracking the nearest hourly interval with hover feedback.
- Animated metric tabs (Temperature, Precipitation, Wind) with sliding amber-400 layoutId indicator.
- Interactive 8-day forecast row with sliding frosted glass selection pill and AnimatePresence header transitions.
- Animated rolling temperature count-up effect supporting instantaneous °F and °C unit conversion.
Keyboard & Accessibility
- Accessible tab list implementation with role='tablist' and role='tab' using aria-selected attributes.
- Dual unit toggle with role='group' and aria-pressed attributes for assistive technologies.
- Honors prefers-reduced-motion by replacing path length transitions and layout slides with smooth opacity cross-fades.