Astrology

Horoscope card

Daily, weekly, monthly, or yearly horoscope card

<roxy-horoscope-card>

Preview and code

Theme

Loading the component...

HTML

<!-- Optional: Rosewater theme (drop this line for the default look) -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/styles/themes/practitioner.css"> -->
<script src="https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/cdn/roxy-ui.js" defer></script>
<roxy-horoscope-card period="daily" publishable-key="pk_live_YOUR_KEY" hide-sections="hint"></roxy-horoscope-card>

With a publishable key the component draws its own form and fetches the reading. Set data instead to render a response you already have.

Install

npm install @roxyapi/ui-react

React

import { RoxyHoroscopeCard } from '@roxyapi/ui-react';

export function HoroscopeCard({ data }) {
  return <RoxyHoroscopeCard data={data} />;
}

Install

npm install @roxyapi/ui-vue

Vue

<script setup>
import { RoxyHoroscopeCard } from '@roxyapi/ui-vue';

defineProps(['data']);
</script>

<template>
  <RoxyHoroscopeCard :data="data" />
</template>

Install

npx shadcn@latest add https://cdn.jsdelivr.net/gh/RoxyAPI/ui@latest/registry/horoscope-card.json

app/page.tsx

import { createRoxy } from '@roxyapi/sdk'
import { RoxyHoroscopeCard } from '@/components/roxy-ui/horoscope-card'

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

export default async function Page() {
  const { data } = await roxy.astrology.getDailyHoroscope({ path: { sign: 'aries' } })
  return <RoxyHoroscopeCard data={data} />
}

The registry adds a typed component file to your repo. The page fetches with your secret key on the server, so no key reaches the browser.

Paste into your site

<script src="https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/cdn/widgets.js" defer></script>
<div data-roxy-widget="horoscope-card" data-publishable-key="pk_live_YOUR_KEY" data-hide-sections="hint"></div>

Paste into WordPress, Squarespace, Wix, Shopify or any page that accepts HTML. Add your publishable key and a theme on the widgets page.

Endpoints

Endpoint	Returns
GET `/astrology/horoscope/{sign}/daily`	Daily horoscope by zodiac sign - Transit-based editorial columns
GET `/astrology/horoscope/{sign}/weekly`	Weekly horoscope by zodiac sign - Seven-day editorial column
GET `/astrology/horoscope/{sign}/monthly`	Monthly horoscope by zodiac sign - Editorial column with key dates
GET `/astrology/horoscope/{sign}/yearly`	Yearly horoscope by zodiac sign - Year ahead forecast with themes, key periods, eclipses and retrogrades

Attributes

Attribute	Type	Description
`period`	`'daily' \| 'weekly' \| 'monthly' \| 'yearly'`	Which horoscope cadence the response is for. Selects the heading and date framing.
`layout`	`'auto' \| 'column' \| 'sections'`	Which shape the written reading takes. The endpoint returns the same reading twice, once whole as the column and once split into six topic sections, so exactly one is rendered. Defaults to auto, which prefers the column and falls back to the sections for a response that carries none.
`data-endpoint`	`string`	Endpoint path for built-in self-fetch, e.g. "astrology/natal-chart". Optional: with a publishableKey or submitUrl and no endpoint, the component fetches its default endpoint, or the one its config prop (mode, period, type, spread, detail) selects. Set it to render any other endpoint the component draws. Pass `data` and no key for controlled mode.
`method`	`'GET' \| 'POST'`	HTTP method for the self-fetch request. Defaults to the method of the endpoint in use, and to POST beside an explicit endpoint.
`publishable-key`	`string`	Browser-safe publishable key (pk_) for self-fetch. A secret key is refused client-side and never sent.
`base-url`	`string`	Override the API origin for self-hosted or proxied deployments. Absolute, or relative to the page for a same-origin route.
`spec-url`	`string`	Override the OpenAPI spec URL the self-fetch form introspects.
`submit-url`	`string`	Your own backend route, which holds the secret key. Every request the component makes, the city search included, is POSTed there as `{ path, method, body, query }` instead of calling RoxyAPI directly, and the component renders the JSON your route returns, so no key of any kind reaches the browser.
`submit-context`	`string`	An object of your own, sent to your submitUrl route as `context` beside the request, so a page can attach its own verification data to a proxied submission. Passed through untouched and never read by the component: what it holds is for your page and your route to agree on. Unset, nothing is added and the route receives the request exactly as before. Rides the submitUrl path only; a direct call sends what the endpoint declares.
`location-url`	`string`	Where the self-fetch form city search sends its GET, absolute or relative to the page. Optional beside submitUrl, which carries the city search too; set it only to send the city search somewhere else. Unset with no submitUrl, the search calls the public location endpoint.
`remember`	`boolean`	Persist the last self-fetch form values in sessionStorage, keyed by endpoint, and prefill the form when the visitor returns. Off by default.
`hide-readings`	`boolean`	Render the chart and the data and omit the written interpretation. Off by default. Use it when the page supplies its own words: the wheels, tables, grids, legends and numbers stay, and the interpretive prose is left out of the markup entirely.
`hide-sections`	`string`	Comma-separated list of `part` names to take off this component, for example "patterns" or "patterns, legend". Per element rather than per site, so the same component can drop a block on one page and keep it on another with no CSS. Sibling of hideReadings and a different tool: this hides a whole block whatever it contains, where hideReadings drops interpretive prose out of the markup. Names come from the `parts` array in components-catalog.json; a name the component does not carry hides nothing and is not an error.
`submit-label`	`string`	Override the self-fetch form submit-button label. Empty derives an outcome-first label from the endpoint (Get reading, Generate, Compare, Cast).
`error-message`	`string`	Your own words for a failed self-fetch the API did not explain (a dropped connection, a response with no message). A failure the API explains, such as a spent quota, reads as the API worded it.
`attribution`	`string`	Render a small "Spiritual data by RoxyAPI" credit under a self-fetch result, linking back to RoxyAPI. Off by default; set any value to enable, or "off" to force it off. Never shown in controlled mode.

Sections you can hide

Pass any of these to hide-sections, or style them with ::part().

best-periodscardcolumndetailseclipseseventsheaderkey-dateskey-periodslabel-trackoutlookoverviewretrogradessectionskythemesweek-by-week

Events

Each event bubbles out of the component, so listen on the element or any ancestor.

Event	Description
`roxy-location-select`	Provides the selected city with its coordinates and timezone.
`roxy-render-error`	Reports a failed render before showing the response as structured data or an empty state.
`roxy-spec-error`	Reports a failure to load the form schema, including the spec URL and error message.
`roxy-submit`	Provides validated form values, the endpoint, query fields, and whether the form stays visible.
`roxy-validation-error`	Reports missing required inputs or a refused client-side API key.