Budget Card
A modern, customizable budget card for Framer. Displays weekly spending trends with an interactive chart, optional illustration, dark/light themes, and smooth hover tooltip.
Make it with Workshop
Build your own component with AI
About this Component
The Interactive Budget Card is a versatile React component designed for dashboards, finance apps, and analytics interfaces. It combines modern aesthetics with rich interactivity to display financial trends effectively.
Features:
Dynamic Chart: Displays weekly data with smooth line curves and shaded area fills.
Hover Tooltips: Interactive hover highlights specific data points with currency values.
Custom Themes: Supports dark and light modes with adjustable colors.
Illustration Option: Show or hide a stylish money illustration for visual appeal.
Responsive Design: Adapts to parent container sizes, suitable for web and mobile dashboards.
Custom Data Input: Easily provide an array of day/value objects to update the chart.
Accent Colors: Highlight trends with customizable accent colors.
Best For:
Finance dashboards and budget tracking apps
Analytics panels showing trends over time
Framer prototypes requiring interactive charts
Personal finance management or team reporting tools
