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>
The language control translates what the components write. The sample data
stays English because it is a fixed fixture; a live response carries its own
?lang= values.
- 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.
Can an LLM render these components from a Remote MCP tool call?
Yes, and it is what the tool-result helper exists for. Your model calls a Remote MCP tool at roxyapi.com/mcp/{domain} and hands back a tool name and a JSON string. componentForTool(name) turns that name into the component that draws it, so the reply carries a real natal chart, kundli or tarot spread instead of a wall of fields. It works in any chat UI that renders your own markup for a tool result.
The helper ships inside @roxyapi/ui, @roxyapi/ui-react and @roxyapi/ui-vue, so whichever package you already installed has it. Full recipe: roxyapi.com/docs/tutorials/ai-chat-widgets.
What is generative UI for astrology and tarot apps?
A language model should never draw a chart. It should call a tool and hand the result to something that already knows how to draw it. That is generative UI: the model picks the tool, your interface picks the component. Every component here is a stateless data consumer and a tool result is the same JSON the SDK returns, so the one piece your app supplies is the map from the tool name to the component. Worked example: render astrology charts from LLM tool calls.
Which chat frameworks can host a RoxyAPI chart?
Any chat UI that lets you return your own markup for a tool result, because the render slot is ordinary JSX and the component is an ordinary element. That covers the Vercel AI SDK, assistant-ui, CopilotKit, AI Elements, and a hand-rolled React, Vue, Svelte, Angular or Solid interface. Plain HTML works with no build step: load the script tag, create the element the binding names, set data.
Vendor hosted connectors from Anthropic, OpenAI and Google change only where you read the tool name and the result text from, never the lines that follow. Each one is written out in the chat widget tutorial.
Do I need to turn the compact MCP response off?
No, leave it on. Every component decodes the compact shape on the way in, so you keep the lower token cost per turn and still pass the tool result straight through with no preprocessing of your own. If your own code wants the plain object, expandCompact is exported from all three packages.
How do I map a tool name to a component?
One call. componentForTool('post_astrology_natal_chart') returns tag, pascal, operationId and attrs. tag is the custom element for plain DOM, pascal is the export name in the React and Vue packages, and attrs is present when one component covers several tools and needs an attribute to tell them apart.
A name a host prefixed with its server, such as roxy_tarot:post_tarot_daily, resolves the same as a bare one. A tool nothing draws returns undefined, so a bot that calls a reference lookup keeps answering in prose instead of breaking.
Is RoxyAPI UI free?
The components are MIT licensed and free to use, modify, and redistribute. Rendering live data requires a RoxyAPI key. A free tier is available; paid plans cover every domain in the catalog. See roxyapi.com/pricing for the current plan menu.
How do I theme components?
Override CSS custom properties on the root or per element. About 47 design tokens cover color, typography, spacing, radius, shadow, and motion. Your own declaration always wins, including from inside a Tailwind or shadcn layer, so no extra selector weight and no !important. The Customize Colors panel above generates the override CSS for you.