npm
For React, Next.js, Hono, Vue, Svelte, Solid.
RoxyAPI UI
The open source design library for insight apps. Drop-in UI components for astrology, Vedic astrology charts, numerology, tarot readers, kundli, panchang, biorhythm, and I Ching. Works in React, Next.js, Hono SSR, Vue, Svelte, and vanilla HTML. Production-ready in one afternoon.
Quick start · vanilla HTML
<script src="https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/cdn/roxy-ui.js" defer></script>
<!-- Fetch /astrology/natal-chart on your server with your key, then inline the JSON. -->
<roxy-natal-chart>
<script type="application/json" class="roxy-data">{ "planets": [ ... ], "aspects": [ ... ], "ascendant": { ... } }</script>
</roxy-natal-chart>- Astrology, Vedic, numerology, tarot Every domain shipped in one component library
- Every RoxyAPI domain, one API key 30 minutes to first render in your app
- MCP and AI agent ready Render straight from tool-call JSON responses
- MIT licensed No AGPL, no copyleft, no ephemeris fees
Three ways to install
Same web components, three distribution channels. Pick the one that fits your stack.
jsDelivr
For vanilla HTML, WordPress, Shopify, no-build sites.
shadcn registry
Drop-in components fork into your repo, theme freely.
Server-rendered, no JavaScript wiring
Render the response into a child <script type="application/json" class="roxy-data"> on the server. The component reads it on load. No per-element script, no API key in the browser. The same pattern powers the WordPress plugin and any JSX SSR page.
Frequently asked
Is there a free open source UI component library for astrology, tarot, and numerology apps?
Yes. RoxyAPI UI is the official MIT licensed component library for insight and prediction apps. It ships drop-in web components for astrology natal charts, Vedic kundli, panchang tables, dasha timelines, tarot daily cards and spreads, numerology life path cards, biorhythm, and I Ching hexagrams.
How do I add an astrology chart to my website?
Three lines. Drop the @roxyapi/ui script tag from jsDelivr, add a roxy-natal-chart custom element, then call createRoxy from @roxyapi/sdk and assign the response to the element data property. Works in plain HTML, WordPress, and any modern browser with no build step.
Does this work with React, Next.js, Vue, and Svelte?
Yes. The @roxyapi/ui-react package ships typed React components for every entry in the catalog. Vue, Svelte, Angular, Solid, Astro, and Qwik consume the same Lit web components natively, no extra install required.
Can I use RoxyAPI UI with shadcn in a Next.js or React app?
Yes. Every component is published to a shadcn-compatible registry. Install with npx shadcn@latest add https://cdn.jsdelivr.net/gh/RoxyAPI/ui@latest/registry/natal-chart.json. The source lands in your repo for full ownership and Tailwind-friendly theming. Map a namespace in your components.json to skip the URL on every install:
{
"registries": {
"@roxyapi": "https://cdn.jsdelivr.net/gh/RoxyAPI/ui@latest/registry/{name}.json"
}
}Then npx shadcn@latest add @roxyapi/natal-chart. Pairs cleanly with shadcn's own button, card, and dialog primitives in the same app.
Can I use this with AI agents and MCP?
Yes. RoxyAPI ships a remote MCP server per domain (Streamable HTTP, no local setup). The same JSON shape your agent receives over MCP feeds straight into the matching component data prop. See roxyapi.com/docs/mcp for the full setup.
How do I theme components?
Override CSS custom properties on the root or per element. About 30 design tokens cover color, typography, spacing, radius, shadow, and motion. The Customize Colors panel above generates the override CSS for you.