Dependancy Libraries
(1) Styling & Components
# shadcn/ui (Highly Recommended - Beautiful, Customizable)
npx shadcn-ui@latest init
npx shadcn-ui@latest add button card dialog input select
# Tailwind CSS (Already in Next.js)
npm install -D tailwindcss postcss autoprefixer
# Headless UI (For accessible components)
npm install @headlessui/react(2) Icons
# Lucide React (Modern, clean icons)
npm install lucide-react
# React Icons (Huge collection)
npm install react-icons(3) Animations
# Framer Motion (Best animation library)
npm install framer-motion
# Auto Animate (Simple, lightweight)
npm install @formkit/auto-animate(4) Charts & Visualizations (For Kundli, Reports)
# Recharts (Simple, powerful charts)
npm install recharts
# Chart.js with React wrapper
npm install chart.js react-chartjs-2
# D3.js (For complex astrological charts)
npm install d3 @types/d3(5) Date & Time Pickers
# React DatePicker
npm install react-datepicker
npm install -D @types/react-datepicker
# Or use shadcn calendar
npx shadcn-ui@latest add calendar(6) Form Handling
# React Hook Form (Best form library)
npm install react-hook-form
# Zod (Validation)
npm install zod
npm install @hookform/resolvers(7) UI Enhancements
# React Hot Toast (Beautiful notifications)
npm install react-hot-toast
# Sonner (Modern toast notifications)
npm install sonner
# React Confetti (For celebrations!)
npm install react-confetti(8) My Recommended Stack for Your Project:
# Install all at once:
npm install framer-motion lucide-react recharts react-hook-form zod @hookform/resolvers react-hot-toast @headlessui/react
# Install shadcn/ui
npx shadcn-ui@latest init
npx shadcn-ui@latest add button card dialog input select tabs accordion alert(9) Optional but Awesome:
# Lottie (Animated illustrations)
npm install lottie-react
# React Spring (Physics-based animations)
npm install @react-spring/web
# GSAP (Professional animations)
npm install gsap
# Swiper (Carousels/Sliders)
npm install swiper
# React Slick (Alternative carousel)
npm install react-slick slick-carousel
npm install -D @types/react-slick(10) Specific for Astrology App:
# For Zodiac Wheel & Charts
npm install react-circular-progressbar
# For Tarot/Card animations
npm install react-spring-card
# For Star/Constellation backgrounds
npm install react-parallax-tilt
npm install tsparticles @tsparticles/react
# For Panchang/Calendar
npm install react-calendar(11) Birth Kundali Preparation Libraries
npm install swisseph
https://www.npmjs.com/package/astrology-jsnpm install astrology-js
npm install astral-chart
https://www.npmjs.com/package/vedic-astrologynpm install vedic-astrology
https://www.npmjs.com/package/vedic-astrology-apinpm i vedic-astrology-api
https://www.npmjs.com/package/jyotish-calculationsnpm i jyotish-calculations
npm install ayurastro
// Example of using astrochartjs (conceptual)
const astrochart = require('astrochartjs');
// Assume chartData is an object containing planetary positions and house information
const chartData = { /* ... */ };
// Generate and render the chart
astrochart.drawChart(chartData, { showHouseNumbers: true, /* ... */ }); 
// Example of using circular-natal-horoscope-js (conceptual)
const Horoscope = require('circular-natal-horoscope-js');
const birthDetails = {
year: 1990,
month: 1,
day: 15,
hour: 10,
minute: 30,
latitude: 34.05,
longitude: -118.25,
timezone: -8
};
const horoscope = new Horoscope(birthDetails);
// Access planetary positions, house cusps, etc.
console.log(horoscope.getPlanets());
// Example of using indian-astrology (conceptual)
const indianAstrology = require('indian-astrology');
const birthInfo = {
birthDate: "25-5-2018",
birthTime: "19:5",
birthTimeZone: 5.5
};
const result = indianAstrology.getChartData(birthInfo);
console.log(result.rashi);
console.log(result.nakshatra);
npm install astro-charts
npm install astronomy-engine
npm install vedic-astrology-chart-solid
# or
bun add vedic-astrology-chart-solid
# or
yarn add vedic-astrology-chart-solid