Astrology, Vedic, Tarot UI Component Library for React

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 covers Western astrology, Vedic astrology, KP, human design, tarot, numerology, biorhythm, I Ching, crystals, dreams, angel numbers, and cross-domain forecasts, in 63 components. Each one is a stateless web component: pass the API response, get a production wheel, table, or card. This post has copy-paste examples for the questions developers ask most when adding charts and widgets to a React, Next.js, or Vue 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 shape, one prop, one finished UI block.

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

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

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

Chart endpoints need coordinates, so resolve the birth city first with roxy.location.searchCities({ query: { q: 'London, UK' } }) and feed the result straight in. The full Next.js walkthrough with App Router and server-side fetching lives at /docs/ui.

Ready to build with this? Astrology API gives you 176 plus endpoints across 12 domains under one key. See pricing.

Which components ship, by domain

Tag names are the custom element form for plain HTML. React and Vue projects import the same components as Roxy{PascalCase} from @roxyapi/ui-react or @roxyapi/ui-vue.

Cross-domain coverage matters 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 pairs spreads with a daily draw; a numerology dashboard benefits from the biorhythm chart beside the Life Path number. One library covers all of it without a per-domain rewrite. Every component has a live preview at roxyapi.github.io/ui, with a Preview tab and a copy-paste Code tab.

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; Vue and Nuxt install @roxyapi/ui-vue. 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 paths consume the same components and the same theme tokens; only the wrapper differs.

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

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

<script src="https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/cdn/widgets.js" async></script>

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

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

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 are documented under the API key model at /docs/ui.

How theming works without owning a design system

Every component reads its colors, fonts, spacing, radius, and motion from --roxy-* CSS custom properties. Custom properties inherit through the Shadow DOM boundary, so a value set on :root reaches every component below it. There is no Tailwind inside the components, no global CSS reset, and no theme provider to wire.

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

Those four are the common case. The full reference, with the light and dark default for every token, is THEMING.md in the repo, which also carries ready-made presets for dark mode, high contrast, per-domain accents, and a Tailwind token map. If the host app already uses shadcn, Roxy UI reads --background, --foreground, --primary, and --border through a fallback chain, so a brand color set once in globals.css applies to every chart, table, and card.

How to hide or restyle part of a reading

Components are not all-or-nothing, which matters when a reading sits inside your own editorial layout. Every structural block carries a part name, so a stylesheet outside the component can restyle or remove any of them with no JavaScript and no fork.

/* The wheel, the tables and the numbers stay; the written report goes. */
roxy-natal-chart::part(readings) { display: none }

/* Or restyle a single block. */
roxy-natal-chart::part(card) { border: 0; box-shadow: none }

Two attributes do the same job in markup. hide-readings leaves the interpretive prose out of the page entirely, which is what you want when your own copy supplies the words, and every chart, table, glyph, and number stays. hide-sections takes a comma-separated list of part names and removes those blocks outright.

<roxy-natal-chart hide-readings></roxy-natal-chart>
<roxy-natal-chart hide-sections="patterns, legend"></roxy-natal-chart>

<RoxyNatalChart data={chart} hideReadings />
<RoxyNatalChart data={chart} hideSections="patterns" />

The difference is worth knowing. hide-readings draws its line on the content, so a block made of measurements stays even when it reads like analysis: a T-Square is a geometric fact, so its figure, element, modality, tightness, and planets all survive and only the paragraph under them goes. hide-sections removes the block whatever it holds. Use a ::part() rule when one decision should cover a whole site, and hide-sections when two components on the same page need to differ.

Do the components speak other languages?

Yes, eight of them: English, Spanish, German, French, Hindi, Portuguese, Russian, and Turkish. A component reads the page language and renders its own labels in it, so set lang on the element, on any ancestor, or on <html>, and add the label file for that language.

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

Two halves stay separate on purpose. The label file is the wording the library writes: headings, tabs, table captions, legends. The wording the API returns is localized by the request, so ask a chart for Spanish and the planet, sign, and aspect names read Spanish on the wheel and in the tables too. A regional tag resolves to its language, so es-AR, es-MX, and es-419 all read the es file, and dates and numbers follow the same tag: a Spanish page reads 15 ene 1990, a German one 15. Jan. 1990, 14:30.

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, so a tarot spread embedded in a Webflow page does not collide with the host site CSS.

The shipping shape:

• @roxyapi/ui on npm: register the custom elements once, use the tag names anywhere
• @roxyapi/ui-react and @roxyapi/ui-vue: typed wrappers for projects that want framework props and ref forwarding
• jsDelivr: 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 chart with roxy.astrology.generateNatalChart({ body: { date, time, latitude, longitude, timezone } }), 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 App Router walkthrough 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 in South, North, or East Indian style plus the tithi, vara, nakshatra, yoga, karana, and muhurta rows. Add <roxy-dasha-timeline> for Vimshottari dasha on the same page, and <roxy-dosha-card> for Manglik or Kalsarpa.

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

Use <roxy-tarot-spread> with the response from the tarot API. It renders Celtic Cross, three-card, love, and career spreads with upright and reversed states, card meanings, and accessible alt text on every image. For single cards use <roxy-tarot-card>, and for a full deck gallery use <roxy-tarot-catalog>.

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 human design, biorhythm, I Ching, crystals, dreams, angel numbers, and cross-domain forecasts under one MIT-licensed package. The live catalog is at /ui. 63 components, 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 a <div data-roxy-widget="natal-chart"> into any HTML file, WordPress template, or Shopify Liquid theme. The auto-mount script reads data-roxy-widget plus data-publishable-key and renders the chart with no JavaScript wiring. WordPress sites can skip the script entirely and use the official plugin, which ships these components as blocks and shortcodes.

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

Override the --roxy-* custom properties at :root or on a single element. Every component below picks up the change automatically. If the host app uses shadcn, Roxy UI reads --background, --foreground, and --primary through a fallback chain. The full token table is in THEMING.md.

Can I show the chart without the written interpretation?

Yes. Set hide-readings on the component, or hideReadings in React and Vue, and the interpretive prose is left out of the markup while every chart, table, and number stays. To remove a whole block instead, name it with hide-sections="patterns" or target it with ::part(patterns) in your stylesheet.

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 pricing at /pricing.

Conclusion

Roxy UI takes one install, 12 domains, and an MIT license, and turns every RoxyAPI response into a finished React, Next.js, Vue, Svelte, or plain HTML chart. Sixty-three components, eight languages, and one attribute to drop any block you do not want. The library is open at github.com/RoxyAPI/ui. Build with the astrology API and ship a complete reading experience this weekend. See pricing.