Drop in spiritual components.Beautiful in 30 minutes.
Charts, tables, cards, and forms for astrology, tarot, numerology, and every other RoxyAPI domain. One key. One npm install or one script tag. Stateless components, typed responses, theming via CSS custom properties.
View on GitHubInstall in seconds
Two paths. Pick whichever your stack prefers. Both ship the same components.
npm or bun
For React, Next.js, Vue, Svelte, Angular, Solid, or any bundler-based project.
npm install @roxyapi/ui @roxyapi/sdkjsdelivr CDN
For vanilla HTML, no-build sites, WordPress, Stan Store, Linktree.
<script src="https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/cdn/roxy-ui.js"></script>Drop into any framework
The same web components render in every modern framework. Pick your stack.
One script tag. Use the custom element. Pass an API response as the `data` property.
<script src="https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/cdn/roxy-ui.js"></script>
<roxy-natal-chart id="chart"></roxy-natal-chart>
<script type="module">
const res = await fetch('https://roxyapi.com/api/v2/astrology/natal-chart', {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'X-API-Key': 'YOUR_KEY' },
body: JSON.stringify({
date: '1990-01-15', time: '14:30:00',
latitude: 28.6139, longitude: 77.2090, timezone: 5.5,
}),
});
document.getElementById('chart').data = await res.json();
</script>Works with Next.js 16 app router and React 19. Mark the file as a client component. Server components render the placeholder, the browser hydrates with the typed render.
'use client';
import { createRoxy } from '@roxyapi/sdk';
import { RoxyNatalChart } from '@roxyapi/ui-react';
import { useEffect, useState } from 'react';
const roxy = createRoxy(process.env.NEXT_PUBLIC_ROXY_API_KEY!);
export default function Page() {
const [chart, setChart] = useState(null);
useEffect(() => {
roxy.astrology.generateNatalChart({
body: { date: '1990-01-15', time: '14:30:00', latitude: 28.6139, longitude: 77.2090, timezone: 5.5 },
}).then(({ data }) => setChart(data));
}, []);
return chart ? <RoxyNatalChart data={chart} /> : null;
}For peak Next.js performance, also add <Script src="https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/cdn/roxy-ui.js" strategy="beforeInteractive" /> to your app/layout.tsx.
For Vite, Create React App, Remix, or any React 18+ project.
import { createRoxy } from '@roxyapi/sdk';
import { RoxyNatalChart } from '@roxyapi/ui-react';
import { useEffect, useState } from 'react';
const roxy = createRoxy(import.meta.env.VITE_ROXY_API_KEY);
export function Chart() {
const [data, setData] = useState(null);
useEffect(() => {
roxy.astrology.generateNatalChart({
body: { date: '1990-01-15', time: '14:30:00', latitude: 28.6139, longitude: 77.2090, timezone: 5.5 },
}).then((r) => setData(r.data));
}, []);
return data ? <RoxyNatalChart data={data} /> : <p>Loading</p>;
}Vue and Nuxt render custom elements natively. Load the script once, use the tag in any template.
<script setup>
import { ref, onMounted } from 'vue';
import { createRoxy } from '@roxyapi/sdk';
import '@roxyapi/ui';
const roxy = createRoxy(import.meta.env.VITE_ROXY_API_KEY);
const chart = ref(null);
onMounted(async () => {
const { data } = await roxy.astrology.generateNatalChart({
body: { date: '1990-01-15', time: '14:30:00', latitude: 28.6139, longitude: 77.2090, timezone: 5.5 },
});
chart.value = data;
});
</script>
<template>
<roxy-natal-chart :data="chart" />
</template>Enqueue the script, then use the custom element in any template, shortcode, or Gutenberg block. Wrap with <noscript> for AMP and feed readers.
add_action('wp_enqueue_scripts', function () {
wp_enqueue_script(
'roxy-ui',
'https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/cdn/roxy-ui.js',
[], null, true
);
});
// In a template or shortcode handler:
echo '<roxy-natal-chart data="' . esc_attr(wp_json_encode($response)) . '"></roxy-natal-chart>';Why Roxy UI
Built for builders shipping insight and prediction apps. Designed for AI agents that render structured responses. Themed for any brand.
Stateless by design
Components render the response you pass as the data property. No internal fetches, no global stores. Predictable in every framework.
CSS custom properties
Override 30+ design tokens for color, typography, spacing, radius, shadow, motion. Match any brand without rebuilding the bundle.
A11y zero violations
WAI-ARIA 2.0 roles, keyboard navigation, focus rings, and reduced-motion gating. Verified with axe-core in CI on every release.
Schema driven forms
The endpoint-form component reads the OpenAPI spec and renders inputs for any endpoint. New endpoints get forms automatically.
Lit web components
Standard custom elements that render in React, Vue, Svelte, Angular, Solid, vanilla HTML, and WordPress. Shadow DOM scoping included.
Provenance attested
Both packages publish via OIDC trusted publisher with SLSA provenance. Verifiable supply chain on every release.
Typed end to end
Component prop shapes regenerate from the OpenAPI spec on every release. Your IDE catches schema drift before runtime.
Tree-shake friendly
Per component imports for bundlers. Lean prod bundle. Generous budgets enforced in CI on every release.
jsdelivr global CDN
Multi-CDN delivery from Cloudflare, Fastly, and Bunny. Every region, every browser. SRI hash auto-generated.
What you can render
Every component takes a typed response from the matching endpoint. The fallback <roxy-data> renders any future response shape without hand wiring.
| Element | Domain | Renders |
|---|---|---|
| <roxy-natal-chart> | Western | Natal chart wheel with planet glyphs and aspect lines |
| <roxy-horoscope-card> | Western | Daily, weekly, or monthly horoscope card |
| <roxy-synastry-chart> | Western | Dual-wheel synastry with inter-aspects table |
| <roxy-compatibility-card> | Cross-domain | Score card with category breakdown |
| <roxy-moon-phase> | Western | Moon phase card and calendar grid |
| <roxy-vedic-kundli> | Vedic | South or North Indian kundli layout |
| <roxy-panchang-table> | Vedic | 15+ muhurtas in detailed mode |
| <roxy-dasha-timeline> | Vedic | Vimshottari mahadasha plus antardasha plus pratyantardasha |
| <roxy-dosha-card> | Vedic | Presence, severity, remedies, scoped effects |
| <roxy-guna-milan> | Vedic | 36-point Ashtakoota with eight sub-scores |
| <roxy-kp-planets-table> | Vedic (KP) | Sub-lord and sub-sub-lord columns |
| <roxy-numerology-card> | Numerology | Life path, expression, personal year, or full chart |
| <roxy-tarot-card> | Tarot | Single card with upright and reversed flip |
| <roxy-tarot-spread> | Tarot | Spreads with positions and reading |
| <roxy-biorhythm-chart> | Biorhythm | Daily bars, forecast curves, critical days |
| <roxy-hexagram> | I Ching | Hexagram with trigrams, judgment, image, changing lines |
| <roxy-endpoint-form> | Helper | Schema-driven form, emits roxy-submit |
| <roxy-location-search> | Helper | Debounced city search, emits roxy-location-select |
Theme it like Apple
Override CSS custom properties on the root or per element. Light and dark defaults built in. Reduced motion honored automatically.
:root {
--roxy-primary: #0f172a;
--roxy-accent: #6d28d9;
--roxy-radius-md: 12px;
--roxy-shadow-md: 0 8px 30px rgb(0 0 0 / 0.08);
--roxy-motion-duration: 240ms;
--roxy-font-sans: 'Geist', system-ui, sans-serif;
}
[data-theme="dark"] {
--roxy-bg: #0a0a0a;
--roxy-fg: #fafafa;
}
roxy-natal-chart {
--roxy-accent: #ec4899;
}See the full token reference in THEMING.md.
Distribution surfaces
Pick the surface that fits your stack. Every surface ships the same components.
| Surface | URL |
|---|---|
| npm @roxyapi/ui | npmjs.com/package/@roxyapi/ui |
| npm @roxyapi/ui-react | npmjs.com/package/@roxyapi/ui-react |
| jsdelivr full UMD | cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/cdn/roxy-ui.js |
| jsdelivr per component | cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/cdn/components/*.js |
| shadcn registry | bunx shadcn add cdn.jsdelivr.net/gh/RoxyAPI/ui@main/registry/{name}.json |
| GitHub source | github.com/RoxyAPI/ui |
Common questions
Designed for AI Overviews and developer searches. Same questions feed the FAQPage structured data for Google rich results.
What is Roxy UI?
Roxy UI is the official open-source web component library for the RoxyAPI catalog. It ships drop-in charts, tables, cards, and forms for astrology, Vedic astrology, numerology, tarot, biorhythm, I Ching, crystals, dreams, and angel numbers. Components are stateless: caller fetches via the SDK and passes the response as a typed data prop. MIT licensed, published with SLSA provenance via OIDC.
How do I install Roxy UI?
Two paths. For React, Next.js, Vue, Svelte, Angular, or any bundler-based project, install via npm: `npm install @roxyapi/ui` (or `npm install @roxyapi/ui-react` for typed React components). For vanilla HTML, WordPress, Stan Store, or no-build sites, load the script tag from jsDelivr: `https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/cdn/roxy-ui.js`.
Does Roxy UI work with Next.js 16 and React 19?
Yes. The @roxyapi/ui-react package is server-side-render safe in Next.js 16 with React 19. Mark the file containing the component as a client component with the use client directive. Components render a placeholder on the server and hydrate with the typed render on the client. For peak Next.js performance, add the jsDelivr script tag with strategy beforeInteractive in your app/layout.tsx.
Is Roxy UI free?
Yes. Roxy UI is open source under the MIT license. The components themselves are free to use, modify, and redistribute. Rendering live data requires a RoxyAPI key, which starts at free for evaluation and standard subscription tiers for production usage.
How do I theme Roxy UI components?
Theming is via CSS custom properties on the root or per element. Override 30 plus design tokens for color, typography, spacing, radius, shadow, and motion. No Tailwind required, no class-name overrides, no rebuild. Light and dark defaults built in. Reduced motion honored automatically.
Which frameworks does Roxy UI support?
Roxy UI ships standard Lit web components that render natively in React, Next.js, Vue, Nuxt, Svelte, SvelteKit, Angular, Solid, Qwik, Astro, vanilla HTML, and WordPress. The same components work in every framework. React users get a typed companion package at @roxyapi/ui-react.
How does Roxy UI compare to shadcn or Material UI?
Roxy UI is purpose-built for spiritual data APIs. It renders specific RoxyAPI endpoint responses (natal charts, kundli wheels, panchang tables, dasha timelines, tarot spreads, biorhythm curves, hexagrams, numerology cards) out of the box. shadcn and Material UI are general-purpose UI primitives. Use Roxy UI alongside shadcn or Material UI: Roxy UI for the domain renderers, your existing library for the rest of the app.
Where is the source code?
Source on GitHub at github.com/RoxyAPI/ui. MIT license. Published to npm as @roxyapi/ui and @roxyapi/ui-react with SLSA provenance attestation via OIDC trusted publisher. Globally served via jsDelivr CDN.
Get an API key.Render your first chart in 30 minutes.
Roxy UI is free and open source. The RoxyAPI catalog powers every render.