Ship a 12-sign horoscope page with the drop-in <roxy-horoscope-card> web component. No framework, no markup to maintain, dynamic or fully static. Time to ship: 15 minutes.

This is the fastest end-to-end build in the Roxy catalog. Pick the sign, render the card. Wellness embeds, lifestyle landing-page widgets, daily-check-in features, all built around GET /astrology/horoscope/{sign}/daily.

What you can build

Standalone daily horoscope pages
Wellness and meditation app daily-check-in cards
Landing-page widgets that refresh automatically
Weekly and monthly variants with the same fetch shape
Personalized forecasts by layering POST /astrology/transits on top of a saved natal chart

Prerequisites

A Roxy API key from /account. Free trial keys work.
A text editor and a browser. No build step.

No Location API call needed. The daily horoscope endpoint is sign-only, no birth data. Save the geocode flow for natal-chart, synastry, kundli, KP, or Human Design builds (see the astrology guide or vedic guide).

Install

Pick one of three paths:

npm install @roxyapi/sdk

pip install roxy-sdk

composer require roxyapi/sdk

<script src="https://cdn.jsdelivr.net/npm/@roxyapi/ui@0/dist/cdn/roxy-ui.js"></script>

Call the endpoint

One GET, one sign, every field you need to render a card. Verified against the live OpenAPI spec (getDailyHoroscope).

curl "https://roxyapi.com/api/v2/astrology/horoscope/aries/daily" \
  -H "X-API-Key: $ROXY_API_KEY"

import { createRoxy } from '@roxyapi/sdk';

const roxy = createRoxy(process.env.ROXY_API_KEY!);

const { data } = await roxy.astrology.getDailyHoroscope({
  path: { sign: 'aries' },
});

console.log(data.overview);        // hero paragraph
console.log(data.love);            // love-specific paragraph
console.log(data.luckyNumber);     // 7
console.log(data.compatibleSigns); // ["Leo", "Sagittarius"]

import os
from roxy_sdk import create_roxy

roxy = create_roxy(os.environ['ROXY_API_KEY'])

horoscope = roxy.astrology.get_daily_horoscope(sign='aries')
print(horoscope['overview'])
print(horoscope['luckyNumber'])

<?php

use function RoxyAPI\Sdk\createRoxy;

$roxy = createRoxy(getenv('ROXY_API_KEY'));

$horoscope = $roxy->astrology->getDailyHoroscope(sign: 'aries');
echo $horoscope['overview'];
echo $horoscope['luckyNumber'];

claude mcp add-json --scope user roxy-astrology '{"type":"http","url":"https://roxyapi.com/mcp/astrology","headers":{"X-API-Key":"YOUR_KEY"}}'

Then in Claude, Cursor, or any client: "what is the Aries horoscope today." The agent picks the tool and summarizes. Full client setup at the MCP guide.

Response fields exposed by the endpoint: sign, date, overview, love, career, health, finance, advice, luckyNumber, luckyColor, compatibleSigns[], moonSign, moonPhase, energyRating (1-10), activeTransits[].

Render the result

Two ways, ordered shortest first.

Option A: drop-in web component (recommended)

<roxy-horoscope-card> is a Lit web component shipped by @roxyapi/ui. Pass the SDK response, the card renders. Works in vanilla HTML, React, Vue, Svelte, WordPress, Wix, Shopify, anything.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Daily Horoscope</title>
  <script src="https://cdn.jsdelivr.net/npm/@roxyapi/ui@0/dist/cdn/roxy-ui.js" defer></script>
</head>
<body>
  <select id="sign">
    <option value="aries">Aries</option>
    <option value="taurus">Taurus</option>
    <option value="gemini">Gemini</option>
    <option value="cancer">Cancer</option>
    <option value="leo">Leo</option>
    <option value="virgo">Virgo</option>
    <option value="libra">Libra</option>
    <option value="scorpio">Scorpio</option>
    <option value="sagittarius">Sagittarius</option>
    <option value="capricorn">Capricorn</option>
    <option value="aquarius">Aquarius</option>
    <option value="pisces">Pisces</option>
  </select>

  <roxy-horoscope-card id="card" period="daily"></roxy-horoscope-card>

  <script type="module">
    import { createRoxy } from 'https://cdn.jsdelivr.net/npm/@roxyapi/sdk@latest/dist/factory.js';

    // Browser-side: use a publishable key (pk_live_* / pk_test_*) once available.
    // Until then, proxy the call through a backend route.
    const roxy = createRoxy('YOUR_PUBLISHABLE_KEY');

    async function load(sign) {
      const { data } = await roxy.astrology.getDailyHoroscope({ path: { sign } });
      document.getElementById('card').data = data;
    }

    document.getElementById('sign').addEventListener('change', (e) => load(e.target.value));
    load('aries');
  </script>
</body>
</html>

The card handles layout, lucky-number row, moon phase, compatible signs, and theming via CSS custom properties. Override colors with --roxy-accent, --roxy-bg, --roxy-border. See the UI components page for the full token list.

Switch period="weekly" or period="monthly" on the same <roxy-horoscope-card> tag. Fetch /astrology/horoscope/{sign}/weekly or /monthly and pass the response. The card adapts.

Option B: no-build, server-rendered (inline JSON)

When the page is served from a static host or a cache and there is no client JavaScript to set .data, fetch on your server with the secret key and inline the unwrapped response into the card as a child <script type="application/json" class="roxy-data">. The component reads it on load. No key in the browser, still the same <roxy-horoscope-card> render. This is Pattern 7 from the UI components page.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Daily Horoscope</title>
  <script src="https://cdn.jsdelivr.net/npm/@roxyapi/ui@0/dist/cdn/roxy-ui.js" defer></script>
</head>
<body>
  <roxy-horoscope-card period="daily">
    <script type="application/json" class="roxy-data">
      {
        "sign": "Aries",
        "date": "2026-05-31",
        "overview": "Saturn asks Aries to take the mature path today...",
        "love": "Venus warms your fourth house...",
        "career": "Take responsibility seriously at work...",
        "health": "The Sun in your third house energizes your mind...",
        "finance": "Jupiter in your fourth house favors real estate...",
        "advice": "Mercury in your third house is at home...",
        "luckyNumber": 45,
        "luckyColor": "Orange",
        "compatibleSigns": ["Leo", "Sagittarius", "Gemini"],
        "moonSign": "Sagittarius",
        "moonPhase": "Full Moon",
        "energyRating": 6
      }
    </script>
  </roxy-horoscope-card>
</body>
</html>

Your server template writes the JSON in. The inlined JSON is the exact shape getDailyHoroscope returns, the same object you would assign to .data. Inline the unwrapped response, never the SDK envelope. Setting the JavaScript .data property later always wins over the inlined JSON, so one card tag covers both server-rendered and dynamic pages with no branching.

Fetch the response on your server, where the secret key lives. Never put a secret sk_* key in page source: it is harvestable in 30 seconds. For client-side fetching once published, use a publishable key (pk_live_* / pk_test_*, origin-restricted, coming soon) or proxy through a backend (the Next.js guide is the drop-in pattern).

Ready-made starter

Skip the build entirely with the open-source starter at /starters/astrology-starter-app. React Native + Expo + TypeScript, ships horoscopes, natal charts, synastry, and transits. Clone and deploy:

git clone https://github.com/RoxyAPI/astrology-starter-app
cd astrology-starter-app
npm install
echo "EXPO_PUBLIC_ROXYAPI_KEY=your_key" > .env.local
npm start

For the web build, the astrology-ai-chatbot starter ships horoscopes alongside the full conversational surface, Next.js 16 + Vercel AI SDK + Remote MCP.

Deploy

Two zero-config options.

Cloudflare Pages. Drag the file into a new project at pages.cloudflare.com. Global CDN, HTTPS, deploys in under a minute.
Vercel. Drop the file in a folder, run npx vercel.

For production, move the API key to an environment variable and proxy through a serverless function. One file becomes two: the client calls your function, your function calls Roxy with the secret key. Or wait for publishable keys (pk_live_*) and skip the proxy.

Gotchas

Sign slugs are lowercase in the URL. aries, not Aries. Server is case-insensitive but the convention is lowercase.
compatibleSigns returns capitalized names (["Leo", "Sagittarius"]) but the path param stays lowercase. Easy templating trip.
Weekly and monthly add extra fields. Switch the URL to /weekly or /monthly and the response gains fields like week, luckyDays[], weekByWeek[], keyDates[].
Do not ship a secret key in browser code for production. Use a publishable key with origin allowlist, or proxy. The demo HTML above is for local prototyping only.
All accuracy figures are verified against NASA JPL Horizons. Our calculation engine is the Roxy Ephemeris, not a generic library.

What to build next

The astrology guide lists every Western endpoint your widget can layer on (transits, moon phase, synastry).
The dating app tutorial wires two-person compatibility on the same astrology surface.
The personalized tracker tutorial goes deeper: Human Design bodygraph, daily forecast, Life Path, all on one page for one user.

Build a daily horoscope widget