ROI Calculator - Luxury Property Investment Tool

A modern, clean React component for calculating property investment ROI. Built for luxury real estate brands with sophisticated styling and real-time calculations.

Installation

```bash npm install @yourusername/roi-calculator ```

Or with yarn: ```bash yarn add @yourusername/roi-calculator ```

Features

• Real-time ROI calculations with React Hook Form
• Smooth slider control for management fees
• Luxury-focused UI with premium styling
• TypeScript support with full type safety
• Zustand state management for calculations
• Recharts integration for visualization
• Responsive design (mobile and desktop)
• Annual net income calculation
• ROI percentage metrics

Usage

```tsx import { ROICalculator } from '@yourusername/roi-calculator'

export default function Page() { return ( ) } ```

Inputs

• Property Value - Total purchase price of the property
• Monthly Rent - Expected monthly rental income
• Management Fee (%) - Percentage of rent for property management (slider controlled)
• Maintenance Costs - Annual maintenance and repair expenses

Outputs

• Annual Net Income - Total yearly income after expenses
• ROI % - Return on investment percentage based on property value
• Monthly Breakdown - Detailed rent, fees, and maintenance breakdown

Props

The ROICalculator component currently has no required props and works standalone.

```tsx ```

Using the Store

Access calculations directly via Zustand store:

```tsx import { useROIStore } from '@yourusername/roi-calculator'

export default function MyComponent() { const propertyValue = useROIStore((state) => state.propertyValue) const setPropertyValue = useROIStore((state) => state.setPropertyValue)

return ( <input value={propertyValue} onChange={(e) => setPropertyValue(Number(e.target.value))} /> ) } ```

Requirements

• React 18+ or 19+
• Next.js 14+
• TailwindCSS 4+

Dependencies

• zustand - State management
• react-hook-form - Form handling
• @hookform/resolvers - Form validation
• zod - Schema validation
• recharts - Charting
• @radix-ui/react-slider - Slider component
• tailwindcss - Styling

Development

Clone and install dependencies:

```bash git clone https://github.com/yourusername/v0-roi-calculator.git cd v0-roi-calculator npm install npm run dev ```

Build for production:

```bash npm run build ```

Publishing Updates

1. Make your changes
2. Update version in package.json
3. Run npm run build
4. Run npm publish

Repository

• GitHub: https://github.com/yourusername/v0-roi-calculator
• npm: https://www.npmjs.com/package/@yourusername/roi-calculator

License

MIT

Built with v0.app and automatically synced with GitHub