RoxyAPI
Open source MITFramework agnosticCSS custom propertiesA11y zero violations

Drop in spiritual components. Beautiful in 30 minutes.

Charts, tables, cards, and forms for Western and Vedic astrology, forecast, human design, and every other RoxyAPI domain. One key. One npm install or one script tag. Stateless components, typed responses, theming via CSS custom properties.

See it liveRead the docs

Not a developer? Copy-paste widgets

npm @roxyapi/uijsdelivr CDN, served globallyReact, Vue, Svelte, Angular, vanilla HTML, WordPressOIDC published with SLSA provenanceEditorial interpretations in 8+ languages

See every component live.

All 61 components rendered against real production responses, each with a Preview tab and a copy-paste Code tab. The demo theme follows this site.

Embedded from roxyapi.github.io/ui. Source on github.com/RoxyAPI/ui (MIT).

Every astrology UI component, natal wheel to bodygraph.

61 open source components across 15 categories, each rendering the typed response from its matching endpoint. The fallback <roxy-data> renders any future response shape without hand wiring.

Why Roxy UI. Stateless, typed, themeable.

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

Components read the OpenAPI spec and render their own visitor-facing inputs: a zodiac tile picker, date and time fields, and city search. New endpoints get inputs automatically, with no form code.

Framework agnostic

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.

One library, every way you ship.

Pick the surface that fits your stack: npm, CDN, one-tag widgets, the shadcn registry, or source. Every surface ships the same components.

SurfaceURL
npm @roxyapi/uinpmjs.com/package/@roxyapi/ui
npm @roxyapi/ui-reactnpmjs.com/package/@roxyapi/ui-react
npm @roxyapi/ui-vuenpmjs.com/package/@roxyapi/ui-vue
jsdelivr full UMDcdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/cdn/roxy-ui.js
jsdelivr per componentcdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/cdn/components/*.js
widgets.js one tagcdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/cdn/widgets.js
practitioner themecdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/styles/themes/practitioner.css
shadcn registrybunx shadcn add cdn.jsdelivr.net/gh/RoxyAPI/ui@main/registry/{name}.json
GitHub sourcegithub.com/RoxyAPI/ui

Common questions

Roxy UI is a stateless component library. It renders the typed response you pass as the data property. No internal fetches, no global stores. Predictable in every framework.

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?

Install exactly one package. React, Next.js or Remix: `npm install @roxyapi/ui-react`. Vue or Nuxt: `npm install @roxyapi/ui-vue`. Everything else, including Svelte, Angular, Solid and Astro: `npm install @roxyapi/ui`. Each package is self contained and carries its own response types, so nothing else is needed to be fully typed. For vanilla HTML, WordPress, Stan Store, or no-build sites, load the script tag from jsDelivr instead: `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.

Does Roxy UI work with Nuxt and Vue server-side rendering?

Yes. The @roxyapi/ui-vue package ships Vue 3 wrappers and is safe to import in a server rendered app. The components mount custom elements and need the DOM, so render them in a client context: wrap them in ClientOnly, or give the file a .client.vue suffix. This is the same constraint as the use client directive in the Next.js App Router. You do not need to configure compilerOptions.isCustomElement.

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?

Set one variable. Put --roxy-accent on :root and every chart, table and card follows: the text safe accent shade and the focus ring are derived from it, so one line rebrands the library. If you want a different accent in dark mode, set it in your dark block too. Dark mode itself needs no wiring and works via the system preference, a dark class, or a data-theme attribute on any ancestor. Beyond the accent there are 30 plus design tokens for color, typography, spacing, radius, shadow and motion, all CSS custom properties on the root or per element. No Tailwind, no rebuild, no class overrides.

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 and Vue users get typed companion packages at @roxyapi/ui-react and @roxyapi/ui-vue.

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.

Can I use Roxy UI without a backend or build step?

Yes. Load the bundle from the jsDelivr CDN with one script tag and give any component a publishable key that starts with pk_, and it fetches live data straight from the browser: no server, no npm, no build. The key is browser safe and locked to the site origins you list. For a ready-made copy-paste snippet per component, plus a hosted embed URL for hosts that cannot run scripts, see the widgets gallery at /widgets.

Where is the source code?

Source on GitHub at github.com/RoxyAPI/ui. MIT license. Published to npm as @roxyapi/ui, @roxyapi/ui-react, and @roxyapi/ui-vue 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.

Get an API keyBrowse the API