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>
<roxy-natal-chart id="chart"></roxy-natal-chart>
<script type="module">
import { createRoxy } from 'https://cdn.jsdelivr.net/npm/@roxyapi/sdk@latest/dist/factory.js';
const roxy = createRoxy('YOUR_PUBLISHABLE_KEY');
const { data } = await roxy.astrology.generateNatalChart({
body: { date: '1990-01-15', time: '14:30:00', latitude: 19.076, longitude: 72.877, timezone: 5.5 },
});
document.getElementById('chart').data = data;
</script>- 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.
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 wrappers. Vue, Svelte, Angular, Solid, Astro, and Qwik consume the same Lit web components natively without a wrapper.
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.