Roxy UI: Web Components for Astrology, Vedic, Tarot Apps

Shipping a natal chart endpoint is the first half. Rendering a clean wheel with planets, signs, houses, and aspects is the rest, and most teams burn two weeks on D3, canvas math, and accessibility before the first reading even ships. Roxy UI removes that work. The library went live today at github.com/RoxyAPI/ui, with nineteen astrology UI components covering Western astrology, vedic astrology, kundli, panchang, dasha, tarot, numerology, biorhythm, and I Ching. Each one is a stateless web component: pass the API response, get a production wheel, table, or card. This post is the release announcement, with copy-paste examples for the most common questions developers ask when adding charts and widgets to a React or Next.js app.

How Roxy UI renders an astrology birth chart in React or Next.js

Roxy UI ships React components via @roxyapi/ui-react. You fetch the natal chart with the typed RoxyAPI SDK, pass the destructured data field as a prop to <RoxyNatalChart>, and the wheel renders with planets, signs, houses, aspects, accessible tooltips, and reduced-motion support. There is no SVG math, no D3, no chart configuration. The same pattern applies to vedic kundli, tarot spreads, numerology cards, biorhythm cycles, and I Ching hexagrams: one component per domain, one prop, one finished UI block.

'use client';
import { RoxyNatalChart } from '@roxyapi/ui-react';
import { Roxy } from '@roxyapi/sdk';

const roxy = new Roxy({ apiKey: process.env.ROXY_API_KEY });

export default async function Page() {
  const { data } = await roxy.westernAstrology.natalChart({
    date: '1990-06-15', time: '14:30:00',
    latitude: 28.6139, longitude: 77.2090, timezone: 5.5,
  });
  return <RoxyNatalChart data={data} />;
}

The full Next.js walkthrough with App Router, RSC streaming, and the publishable-key path lives at /docs/ui.

Ready to build with this? Astrology API gives you the natal chart endpoint plus twenty-three more under one key. See pricing.

What ships in Phase 1: components for astrology, vedic, tarot, numerology, biorhythm, and I Ching apps

Phase 1 covers the five user journeys that drive most RoxyAPI traffic: a Western natal chart reading, a vedic kundli with panchang and dasha, a tarot card spread, a numerology profile, and a daily horoscope or biorhythm widget. The component table below maps each domain to the elements that render it. Tag names are the custom element form for plain HTML; React projects import the same components as Roxy{PascalCase} from @roxyapi/ui-react.

Cross-domain components matter because most production apps need at least two surfaces side by side. A vedic astrology app usually wants the kundli plus the panchang plus a dasha timeline; a tarot app often pairs spreads with a daily draw; a numerology dashboard benefits from the biorhythm chart next to the Life Path number; and an I Ching reading app routinely sits beside the daily horoscope card. One library covers all of it without a per-domain rewrite.

How to install Roxy UI: npm, CDN, or shadcn registry

Pick the install path that matches the project shape. React, Next.js, and Astro projects install @roxyapi/ui-react from npm. Vanilla HTML, WordPress, Shopify, Webflow, and any zero-build site load one CDN script tag from jsDelivr. Shadcn-based projects copy components into the local source tree from the Roxy registry. All three paths consume the same components and theme tokens; only the wrapper differs.

npm install @roxyapi/ui-react @roxyapi/sdk

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

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

<roxy-natal-chart
  data-endpoint="/api/v2/astrology/natal-chart"
  date="1990-06-15" time="14:30" latitude="28.6139" longitude="77.2090"
  timezone="5.5" data-publishable-key="pk_live_..."></roxy-natal-chart>

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

The full walkthrough with the App Router pattern, RSC streaming, the widgets auto-mount script, and the secret-versus-publishable key model lives at /docs/ui. The endpoint reference is at /api-reference. For a complete tutorial that wires a horoscope widget end to end, see /docs/tutorials/horoscope-widget. Browser apps should authenticate with a publishable key (the pk_live_* prefix) so the key cannot be exfiltrated; server-side renders use the standard secret key. Both paths are documented under the API key model in the same guide.

How theming works without owning a design system

Every component reads from a small set of CSS custom properties for color, radius, font, and spacing. Override the tokens at any ancestor selector and every component below picks up the change. There is no Tailwind inside the components, no global CSS reset, and no design system to author. Components render correctly out of the box and adapt to any host theme without prop drilling or theme provider wiring.

:root {
  --roxy-bg: #0b0b13;
  --roxy-fg: #f4f4f7;
  --roxy-accent: #d4af37;
  --roxy-border: #2a2a35;
}

If the host app already uses shadcn, Roxy UI reads from the standard shadcn tokens (--background, --foreground, --primary, --border) automatically through a fallback chain, so a brand color set once in globals.css applies to every chart, table, and card without further configuration. Dark mode toggles inherited from shadcn or Basecoat or any other token-based system propagate the same way. The full token list and the shadcn bridge map are documented at /docs/ui.

Why ship web components instead of a React-only library

A web component runs in any framework. The same <roxy-natal-chart> element renders in React, Next.js, Vue, Svelte, Astro, Angular, plain HTML, WordPress shortcodes, and Shopify themes without a per-framework rewrite. RoxyAPI customers ship apps in every flavor of frontend, and locking the component layer to React would have forced the same wheel to be rebuilt three times. Web components also encapsulate styles in Shadow DOM, which means a tarot spread embedded inside a Webflow page does not collide with the host site CSS.

The dual-emit shape:

• @roxyapi/ui on npm: register the custom elements once, use the tag names anywhere
• @roxyapi/ui-react on npm: typed React wrappers (RoxyNatalChart, RoxyVedicKundli, RoxyTarotSpread, RoxyNumerologyCard, and the rest) for projects that want JSX props and ref forwarding
• jsDelivr UMD: one script tag, zero build step, ideal for WordPress and Shopify
• shadcn registry: copy the source into your repo and own the diff

The same library powers a vue astrology component, a svelte tarot widget, a wordpress kundli plugin, and a Next.js numerology dashboard. Source is open at github.com/RoxyAPI/ui under MIT, and the typed SDK that feeds these components is held to the same standard.

FAQ

How do I add an astrology birth chart to a React or Next.js app?

Install @roxyapi/ui-react and @roxyapi/sdk, fetch the natal chart with roxy.westernAstrology.natalChart(...), and pass the destructured data field to <RoxyNatalChart data={data} />. The component renders the wheel with planets, signs, houses, aspects, and accessible tooltips. The full Next.js App Router walkthrough with server-side fetching and RSC streaming lives at /docs/ui.

How do I render a Vedic kundli with panchang in JavaScript?

Use <roxy-vedic-kundli> for the birth chart and <roxy-panchang-table> for the daily panchang. Both accept the typed vedic astrology API response and render a finished kundli (North or South Indian style) plus the tithi, vara, nakshatra, yoga, karana, and muhurta rows. Add <roxy-dasha-timeline> to show mahadasha and antardasha on the same page, and <roxy-dosha-card> for Manglik or Kalsarpa lookups.

How do I show a tarot card spread on a website?

Use <roxy-tarot-spread> with the response from the tarot API. The component renders Celtic Cross, three-card draws, yes-no oracle, and daily readings with upright and reversed states, card meanings, and accessible alt text on every card image. For single cards, use <roxy-tarot-card>.

What is the best open source UI component library for astrology, vedic astrology, tarot, and numerology apps?

Roxy UI is the only open source library that ships components for all four domains plus biorhythm, I Ching, synastry, and daily horoscopes under one MIT-licensed package. The live demo catalog with every component is at /ui. Nineteen components in v0.1, framework-agnostic via web components, free for any commercial use.

Can I use Roxy UI in WordPress, Shopify, or plain HTML without a build step?

Yes. Add one script tag from jsDelivr, then drop the custom elements into any HTML file, WordPress shortcode, or Shopify Liquid template. The widgets auto-mount script reads data-endpoint and data-publishable-key attributes and renders the chart with no JavaScript wiring. Setup details and the auto-mount script are at /docs/ui.

How do I theme Roxy UI components to match my brand colors?

Override the CSS custom properties (--roxy-bg, --roxy-fg, --roxy-accent, --roxy-border, plus radius, font, and spacing tokens) at any ancestor selector. Every component below picks up the change automatically. If the host app uses shadcn, Roxy UI reads from --background, --foreground, and --primary through a fallback chain, so brand colors set once in globals.css apply everywhere. Full token reference at /docs/ui.

Is Roxy UI free to use in commercial astrology and tarot apps?

Yes. Roxy UI is MIT licensed and free to use in any commercial app, with no attribution requirement and no AGPL or GPL restriction. The components are open source on GitHub; the underlying RoxyAPI data layer is the paid product, with quotas and per-domain pricing at /pricing.

Conclusion

Roxy UI takes one install, ten domains, and an MIT license, and turns every RoxyAPI response into a finished React, Next.js, Vue, Svelte, or plain HTML chart. The library is live today at github.com/RoxyAPI/ui. Build with the astrology API and ship a complete reading experience this weekend. See pricing.