Thanks to visit codestin.com
Credit goes to roxyapi.com

Skip to content
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 10+ languages

See every component live.

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

Customizer

Twelve colour tokens in light and dark, previewed live on every component. Copy the theme CSS, the embed snippet, or the shadcn install command.

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

Every astrology UI component, natal wheel to bodygraph.

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

Every component, in the language your readers speak.

Readings and vocabulary come back in 10 languages: English, Turkish, German, Spanish, Hindi, Portuguese, French, Russian, Chinese (Simplified), Chinese (Traditional). A component reads the language off the page it is embedded in, so a site already published in Spanish or Hindi needs no change at all. Pick a language below to fix it instead, and the snippet updates with the one line that loads those labels.

Set it up once

The snippet below updates instantly. Your key stays in your browser, this page sends nothing to RoxyAPI.

No key yet? Create a publishable key in your account dashboard and list your site origin.

Match the page follows your site language. Pick one to fix it.

Example: <roxy-natal-chart> in plain HTML
<!-- Optional: warm practitioner theme (drop this line for the default look) -->
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/styles/themes/practitioner.css"> -->
<script src="https://cdn.jsdelivr.net/npm/@roxyapi/ui@latest/dist/cdn/roxy-ui.js" defer></script>
<roxy-natal-chart data-endpoint="astrology/natal-chart" publishable-key="pk_live_YOUR_KEY"></roxy-natal-chart>

Written readings and the vocabulary in the response follow the language everywhere. On-screen labels follow it on the charts that carry a translated label set today, and fall back to English elsewhere rather than breaking. Full language guide, including the npm import for bundled apps.

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, from your server or from an MCP tool result in your own AI chat (generative UI). 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

One platform behind the components

Roxy UI is one surface of the platform. The same key that feeds these components also powers the typed API, Remote MCP servers, typed SDKs, embeddable widgets, and Templates.

One API keyOne flat plan, all inclusive
  • Typed API: a complete result in one call, from a live typed OpenAPI spec
  • Remote MCP: hosted agent tools over Streamable HTTP, no local setup
  • Typed SDKs: TypeScript, Python, PHP, C#, and Go, generated from the spec
  • UI components: natal wheels, kundli, bodygraphs, and spreads rendered from the response
  • Embed widgets: paste one snippet on any site with a browser safe publishable key
  • Templates: MIT licensed apps to clone, white label, and ship as your own
  • Multilingual i18n: full interpretation text in 10+ languages, included in every plan

Every surface, across all 18 domains, under one flat subscription. No per-product fees, no per-request or token costs.

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.

Can an AI chatbot render Roxy UI components from a tool call?

Yes, this is generative UI for AI chat. When your LLM calls a RoxyAPI tool over Remote MCP, the result is the same JSON the components take. componentForTool, exported from @roxyapi/ui, @roxyapi/ui-react and @roxyapi/ui-vue, maps the tool name the model used to the component that draws it, and the compact tool result is decoded inside the component, so a natal chart, kundli or tarot spread renders beside the model reply in any chat UI where you control the markup: the Vercel AI SDK, assistant-ui, CopilotKit or your own. The walkthrough, including the Anthropic, OpenAI and Gemini connectors, is at /docs/tutorials/ai-chat-widgets.

Does Roxy UI support other languages?

Yes, eight: English, Turkish, German, Spanish, Hindi, Portuguese, French, and Russian. A component picks its language up from the page it is embedded in, so a site already published in another language needs no per-component change. Add one small file for the language you want, or import it in a bundled app, and the on-screen labels follow too. Readings and the planet, sign, and aspect names are localized on every endpoint; labels are translated on the charts that carry a translated label set today and fall back to English elsewhere rather than breaking. Setup and the honest coverage list are at /docs/ui.

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

Component preview

The real component, running on sample data.

Loading the component...