Astrology UI components, charts, kundli, and tarot

Open source UI component library for every RoxyAPI domain. Drop in a natal chart, kundli wheel, panchang table, dasha timeline, human design bodygraph, forecast timeline, numerology card, tarot spread, biorhythm chart, hexagram, or location search. Ship a finished astrology, human design, or forecast app without writing a single line of SVG, table layout, or form code.

• npm: @roxyapi/ui, @roxyapi/ui-react, @roxyapi/ui-vue
• CDN: jsDelivr, no install needed
• No code: copy-paste widgets, a prefilled snippet per component for Squarespace, Wix, or any HTML block, powered by a publishable key
• shadcn registry: per-component install for Next.js + Tailwind projects
• Live preview: roxyapi.github.io/ui
• Source: github.com/RoxyAPI/ui, MIT licensed

Why RoxyAPI UI

Most data APIs leave you to build the visual layer yourself. Birth charts mean SVG geometry, panchang means complex tables, dasha means timelines, tarot means card layouts and reversed-card flips. We ship the finished components so you keep your time for product work.

• Stateless. You fetch with the SDK, pass the response as the data prop, the component renders. No internal fetches, no auth, no global stores.
• Framework agnostic. React, Next.js, Vue, Svelte, Angular, Solid, vanilla HTML, WordPress. Same components everywhere.
• CSS custom properties for theming. Override 30+ tokens for color, spacing, radius, motion. Match any brand without rebuilding the bundle.
• Accessible by default. WAI-ARIA roles, keyboard navigation, reduced-motion gating, axe-core verified.
• Tiny. ~85 KB gzipped for the full bundle (every domain), ~9-21 KB per component when imported individually.
• MIT licensed. Use it in commercial apps. No AGPL, no copyleft, no obligations.

Pick your path

Not a developer, or you just want a live reading on an existing site with zero code? Use Copy-paste widgets below. Building an app in a framework? Path A (most developers pick this). Path C is a Path A accelerator that drops a typed React wrapper into your repo per component.

Copy-paste widgets (no code)

The fastest way to put a live reading on a site you already have. A widget is the SAME component as the library below, run in a self-contained mode: paste one snippet, add a browser-safe publishable key, and the widget draws its own inputs (a birth-data form, a zodiac picker), fetches on submit, and renders the result. No SDK call to write, no server, no build step.

Every embeddable component has a prefilled snippet on the widgets gallery: paste your key there once and every snippet on the page fills itself in, so you copy ready-to-paste code for exactly the widget you want. Three ways to embed, same key.

https://roxyapi.com/embed/natal-chart?pk=pk_live_YOUR_KEY

<iframe src="https://roxyapi.com/embed/natal-chart?pk=pk_live_YOUR_KEY" title="Natal chart widget" style="border:0;width:100%;height:600px" loading="lazy"></iframe>

<script type="module" src="https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/cdn/widgets.js"></script>
<div data-roxy-widget="natal-chart" data-publishable-key="pk_live_YOUR_KEY"></div>

<script type="module" src="https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/cdn/roxy-ui.js"></script>
<roxy-natal-chart data-endpoint="astrology/natal-chart" publishable-key="pk_live_YOUR_KEY"></roxy-natal-chart>

GET-based widgets (daily horoscope, moon phase) need method="GET" on the component tag; the one-tag data-roxy-widget form sets it for you. The widgets gallery always shows the exact snippet per widget. Platform walkthroughs: Squarespace, Wix, Shopify, and WordPress.

Path A: Next.js, Nuxt, and any other framework

1. Install

npm install @roxyapi/ui-react

Building with Vue or Nuxt instead:

npm install @roxyapi/ui-vue

@roxyapi/ui-react ships React 19 wrappers and @roxyapi/ui-vue ships Vue 3 wrappers. Both cover every component, take the same data prop, and load the underlying components from jsDelivr at mount time, so library updates ship to you without a re-install.

Any other framework (Svelte, Angular, Solid, Qwik, Astro) renders the elements natively: npm install @roxyapi/ui and use <roxy-vedic-kundli> directly. The wrapper packages exist for typed props and idiomatic imports, not because the components need them.

2. Set your API key

In .env.local at the project root:

ROXY_API_KEY=your_api_key_here

Get a key at roxyapi.com/account. Server-side use only.

3. Fetch on the server, render on the client

This is the recommended Next.js App Router pattern. The Server Component fetches with your secret key, the Client Component renders the wheel.

app/page.tsx:

import { createRoxy } from '@roxyapi/sdk';
import BirthChartView from './birth-chart-view';

const roxy = createRoxy(process.env.ROXY_API_KEY!);

export default async function Page() {
  const { data } = await roxy.vedicAstrology.generateBirthChart({
    body: {
      date: '1990-01-15',
      time: '14:30:00',
      latitude: 28.6139,
      longitude: 77.209,
      timezone: 5.5,
    },
  });

  return (
    <main>
      <h1>My astrology app</h1>
      <BirthChartView data={data} />
    </main>
  );
}

app/birth-chart-view.tsx:

'use client';

import { RoxyVedicKundli, type BirthChartResponse } from '@roxyapi/ui-react';

export default function BirthChartView({ data }: { data: BirthChartResponse }) {
  return <RoxyVedicKundli data={data} />;
}

Every response type is exported from the component package, so you never declare your own interface and never install a second package just for types.

The Vue equivalent, for a Nuxt or Vite app. Fetch on the server exactly as above, then pass the response straight through:

<script setup lang="ts">
import { RoxyVedicKundli, type BirthChartResponse } from '@roxyapi/ui-vue';

defineProps<{ data: BirthChartResponse }>();
</script>

<template>
  <RoxyVedicKundli :data="data" />
</template>

In Nuxt, render these in a client context (<ClientOnly> or a .client.vue file): they mount custom elements and need the DOM, the same constraint as 'use client' in the Next.js App Router. You do not need compilerOptions.isCustomElement.

4. Run

npm run dev

Open http://localhost:3000. The kundli renders.

Path B: Plain HTML (zero build step)

For a single page, an existing site, a WordPress shortcode, a Wix Embed HTML element, a Shopify theme, a Stan Store custom-code block, or a Linktree embed. This path fetches the data yourself and passes it to the component, so you control the exact request. If you would rather paste a ready-made widget that draws its own form and fetches for the visitor, use Copy-paste widgets above.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My astrology page</title>
  <script
    src="https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/cdn/roxy-ui.js"
    crossorigin="anonymous"
    defer
  ></script>
</head>
<body>
  <roxy-vedic-kundli id="kundli"></roxy-vedic-kundli>

  <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.vedicAstrology.generateBirthChart({
      body: {
        date: '1990-01-15',
        time: '14:30:00',
        latitude: 28.6139,
        longitude: 77.209,
        timezone: 5.5,
      },
    });
    document.getElementById('kundli').data = data;
  </script>
</body>
</html>

Open the file in any browser. The kundli renders. Same pattern works in WordPress shortcodes, Shopify themes, Stan Store, Linktree, Notion, Bubble, Wix, Squarespace, or any builder that accepts custom HTML.

Pin the version in production

Marketing snippets use @latest. Production code should pin to a concrete version so a CDN update never surprises you.

<script src="https://cdn.jsdelivr.net/npm/@roxyapi/ui@0/dist/cdn/roxy-ui.js"></script>

Path C: shadcn registry (Next.js + Tailwind)

Already running shadcn? Install per-component. Each entry drops a typed React wrapper into components/roxy-ui/{name}.tsx and merges the CSS variable theme bridge into your globals.css so your existing shadcn theme drives RoxyAPI components automatically.

npx shadcn@latest add https://cdn.jsdelivr.net/gh/RoxyAPI/ui@latest/registry/vedic-kundli.json

Use the wrapper:

import { RoxyVedicKundli } from '@/components/roxy-ui/vedic-kundli';

export default async function Page() {
  const data = await fetchKundliFromYourServer();
  return <RoxyVedicKundli data={data} />;
}

The wrapper file is a starter you own. Open it and customize freely.

What you can render

Every component takes a typed response from the matching endpoint. Pass the SDK response, the component figures out the rest.

Full live preview of every component at roxyapi.github.io/ui. Click any component for a Preview tab and a copy-paste Code tab.

Theming

Every component reads from CSS custom properties on :root. Override globally to match your brand.

:root {
  --roxy-bg: #fafafa;
  --roxy-fg: #0a0a0a;
  --roxy-muted: #71717a;
  --roxy-border: #e4e4e7;

  --roxy-accent: #f59e0b;
  /* Derived from --roxy-accent. Do not set it: you would pin it to one hue. */

  --roxy-radius-md: 12px;
  --roxy-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --roxy-motion-duration: 200ms;
}

[data-theme="dark"] {
  --roxy-bg: #0a0a0a;
  --roxy-fg: #fafafa;
  --roxy-muted: #a1a1aa;
  --roxy-border: #27272a;
}

Or override per element to deviate one component without touching the rest:

roxy-natal-chart {
  --roxy-accent: #ec4899;
  --roxy-radius-md: 8px;
}

The live preview at roxyapi.github.io/ui has a Customize button (top right) that visualizes every token and outputs a CSS block you paste into your project.

Already on shadcn?

Path C installs a thin bridge that maps your existing shadcn --background, --foreground, --primary, --border, --radius onto the RoxyAPI variables. Your shadcn theme drives RoxyAPI components automatically. Path A and Path B users can ship the same bridge as a small CSS file:

@layer base {
  :root {
    --roxy-bg: var(--background, #fafafa);
    --roxy-fg: var(--foreground, #0a0a0a);
    --roxy-accent: var(--primary, #f59e0b);
    --roxy-border: var(--border, #e4e4e7);
    --roxy-radius-md: var(--radius, 12px);
  }
}

Wiring custom events

Some components dispatch typed events: roxy-submit, roxy-location-select, roxy-validation-error. The React wrappers expose them as handler props.

import { RoxyLocationSearch } from '@roxyapi/ui-react';

<RoxyLocationSearch
  onRoxyLocationSelect={(e) => {
    console.log(e.detail.latitude, e.detail.longitude, e.detail.timezone);
  }}
/>

In vanilla HTML, listen the standard way:

<roxy-location-search id="search"></roxy-location-search>
<script>
  document.getElementById('search').addEventListener('roxy-location-select', (e) => {
    console.log(e.detail.latitude, e.detail.longitude, e.detail.timezone);
  });
</script>

Common gotchas

const response = await roxy.vedicAstrology.generateBirthChart({...});
element.data = response;

const { data } = await roxy.vedicAstrology.generateBirthChart({...});
element.data = data;

<link
  rel="preload"
  as="script"
  crossOrigin="anonymous"
  href="https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/cdn/roxy-ui.js"
/>

Verification checklist

After integrating, confirm:

• No [object Object] strings in any chart, table, or card.
• No "Loading..." that never resolves.
• Browser console has no errors and no warnings.
• Dark mode flips when you toggle [data-theme="dark"] on <html>.
• Production build (npm run build) compiles without errors.
• The key in any client-bundled code is a publishable key, not a secret one.

Where to go next

• Live customizer at roxyapi.github.io/ui. Theme tokens, copy-paste integration snippets, every component rendered against real responses.
• Source code at github.com/RoxyAPI/ui. MIT licensed. Issues, contributions, and release notes welcome.
• Catalog page at roxyapi.com/ui for distribution surfaces and FAQ.
• SDK reference at /docs/sdk for every endpoint method.
• Get an API key at roxyapi.com/pricing. Instant delivery, no approval queue.

Frequently asked questions