:::note **TL;DR** - Roxy UI is an open source web component library that turns every RoxyAPI response into a finished UI block. No D3, no canvas math, no design system to author. - v0.1 ships nineteen components covering Western astrology, vedic astrology, kundli, panchang, dasha, tarot, numerology, biorhythm, and I Ching. MIT licensed at [github.com/RoxyAPI/ui](https://github.com/RoxyAPI/ui). - Three install paths: npm with [@roxyapi/ui-react](/docs/ui "Roxy UI installation guide for Next.js, plain HTML, and shadcn"), one CDN script tag from jsDelivr, or shadcn registry copy. - Stateless props in, custom events out. Theme with CSS custom properties. Works in React, Next.js, Vue, Svelte, Astro, plain HTML, WordPress, and Shopify. - Build with the [astrology API](/products/astrology-api "production-ready astrology API with natal charts, transits, and synastry") and ship a complete reading experience this weekend. ::: 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](https://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 ``, 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. ```tsx '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 ; } ``` The full Next.js walkthrough with App Router, RSC streaming, and the publishable-key path lives at [/docs/ui](/docs/ui "Roxy UI integration guide for React, Next.js, plain HTML, and shadcn"). Ready to build with this? [Astrology API](/products/astrology-api "production-ready astrology API with natal charts, transits, synastry, and daily horoscopes") gives you the natal chart endpoint plus twenty-three more under one key. [See pricing](/pricing "RoxyAPI pricing tiers and quotas"). ## 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`. | Domain | Components | Renders | |---|---|---| | Western astrology | ``, ``, ``, ``, `` | Birth chart wheel, dual-wheel synastry, daily and weekly horoscopes, lunar phase card, cross-domain compatibility scores | | Vedic astrology | ``, ``, ``, ``, ``, `` | Kundli (North or South Indian style), panchang (tithi, vara, nakshatra, yoga, karana, muhurtas), mahadasha and antardasha timeline, Manglik and Kalsarpa and Sade Sati dosha card, 36-point Ashtakoota Guna Milan, KP sub-lord planets | | Tarot | ``, `` | Single card upright or reversed, Celtic Cross, three-card spread, yes-no oracle, daily draw | | Numerology | `` | Life Path number, Expression, Soul Urge, Personality, personal year, master number detection (11, 22, 33) | | Biorhythm | `` | Physical, emotional, intellectual cycles | | I Ching | `` | Hexagram with changing lines and Book of Changes interpretation | | Helpers | ``, ``, `` | Schema-driven form for any endpoint, geocoding autocomplete, generic fallback renderer | Cross-domain components matter because most production apps need at least two surfaces side by side. A [vedic astrology app](/products/vedic-astrology-api "vedic astrology API with kundli, panchang, dasha, and KP") usually wants the kundli plus the panchang plus a dasha timeline; a [tarot app](/products/tarot-api "tarot API with spreads, cards, and yes-no readings") often pairs spreads with a daily draw; a [numerology dashboard](/products/numerology-api "numerology API for Life Path, Expression, and personal year") benefits from the [biorhythm chart](/products/biorhythm-api "biorhythm API for physical, emotional, and intellectual cycles") next to the Life Path number; and an [I Ching reading app](/products/iching-api "I Ching API with hexagrams and Book of Changes") 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. :::tabs ### npm (React, Next.js, Astro) ```bash npm install @roxyapi/ui-react @roxyapi/sdk ``` ```tsx import { RoxyNatalChart } from '@roxyapi/ui-react'; ``` ### CDN (plain HTML, WordPress, Shopify) ```html
``` ### shadcn registry ```bash 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](/docs/ui "Roxy UI integration guide for React, Next.js, plain HTML, and shadcn"). The endpoint reference is at [/api-reference](/api-reference "RoxyAPI endpoint reference with live OpenAPI playground"). For a complete tutorial that wires a horoscope widget end to end, see [/docs/tutorials/horoscope-widget](/docs/tutorials/horoscope-widget "horoscope widget tutorial with copy-paste code"). 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. ```css :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](/docs/ui "Roxy UI theming and CSS custom properties"). ## Why ship web components instead of a React-only library A web component runs in any framework. The same `` 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](https://github.com/RoxyAPI/ui) under MIT, and the typed [SDK](/docs/sdk "Roxy SDK for TypeScript and Python") 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 ``. 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](/docs/ui "Roxy UI integration guide for Next.js and React"). **How do I render a Vedic kundli with panchang in JavaScript?** Use `` for the birth chart and `` for the daily panchang. Both accept the typed [vedic astrology API](/products/vedic-astrology-api "vedic astrology API with kundli, panchang, dasha, and KP") response and render a finished kundli (North or South Indian style) plus the tithi, vara, nakshatra, yoga, karana, and muhurta rows. Add `` to show mahadasha and antardasha on the same page, and `` for Manglik or Kalsarpa lookups. **How do I show a tarot card spread on a website?** Use `` with the response from the [tarot API](/products/tarot-api "tarot API with Celtic Cross, three-card, and yes-no spreads"). 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 ``. **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](/ui "Roxy UI live component catalog"). 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 a `
` (or any other widget name) into any HTML file, WordPress shortcode, or Shopify Liquid template. The auto-mount script reads `data-roxy-widget` plus the `data-publishable-key` and renders the chart with no JavaScript wiring. Setup details are at [/docs/ui](/docs/ui "Roxy UI plain HTML and WordPress install"). **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](/docs/ui "Roxy UI theming and CSS custom properties"). **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](https://github.com/RoxyAPI/ui); the underlying RoxyAPI data layer is the paid product, with quotas and per-domain pricing at [/pricing](/pricing "RoxyAPI pricing tiers, quotas, and per-domain cost"). ## 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](https://github.com/RoxyAPI/ui). Build with the [astrology API](/products/astrology-api "production-ready astrology API with natal charts, transits, and synastry") and ship a complete reading experience this weekend. [See pricing](/pricing "RoxyAPI pricing tiers and quotas").