Sitelet https://roxyapi.com/ui
Skip to content
RoxyAPI
Open source MITFramework agnosticCSS custom propertiesA11y zero violations

Drop in spiritual components. Themed to your brand.

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 75 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.

75 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.

Off by default. Tick to add a small link back to RoxyAPI under every reading.

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" hide-sections="hint"></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 open-source component library for supported RoxyAPI responses, including natal charts, Vedic charts, numerology readings and tarot spreads. It supplies domain renderers and input forms so you can add these features without designing each visualization yourself. The components are MIT licensed, with packages for web components, React and Vue.

How do I install Roxy UI?

Choose @roxyapi/ui for web components, @roxyapi/ui-react for React, or @roxyapi/ui-vue for Vue. The React and Vue packages include their response types. The setup guide at /docs/ui covers package installation and the CDN option for pages without a build step.

Can I use Roxy UI with React?

The @roxyapi/ui-react package provides typed React wrappers for Roxy UI components. Interactive charts render in the browser, so server-rendered applications need a client rendering boundary. Follow the framework-specific setup in /docs/ui for your application.

Can I use Roxy UI with Vue?

The @roxyapi/ui-vue package provides typed Vue wrappers for Roxy UI components. Interactive charts require a browser context in server-rendered applications. The setup guide at /docs/ui explains the client rendering boundary.

Is Roxy UI free?

Roxy UI components are MIT licensed and free to use, modify and redistribute under that license. Live API calls require a RoxyAPI subscription and count against its request allowance. You can inspect example output in the interactive API reference before subscribing.

How do I theme Roxy UI components?

Roxy UI exposes CSS custom properties for accent colors, typography, spacing and other design choices. Apply a theme across a page or scope it to a component, with light and dark appearances supported. The token reference and examples are in /docs/ui.

Which frameworks does Roxy UI support?

Roxy UI supplies standard browser web components plus typed React and Vue packages. Other application stacks can use the web components where they support custom elements. Check /docs/ui for integration guidance, including browser rendering in server-rendered applications.

What does Roxy UI render?

Roxy UI renders domain data such as natal wheels, Vedic charts, panchang tables, dasha timelines, tarot spreads and biorhythm curves. Each specialized component supports particular API responses, rather than replacing the rest of your application interface. The gallery at /ui shows the available renderers and their data requirements.

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

The CDN bundle supports web pages without a build step. Components listed as embeddable in /widgets can fetch live readings with a publishable key, and the gallery provides snippets and hosted embed links. Add your site origins to that key and keep secret keys on your server.

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

Roxy UI can render supported API tool results beside a chat reply in an interface you control. The componentForTool helper maps supported tool names to specialized components; your application decides how to display other results. The guide at /docs/tutorials/ai-chat-widgets shows how to connect Remote MCP results to these renderers.

Does Roxy UI support other languages?

Roxy UI can inherit the page language and load a supported locale for its interface labels. Reading text comes from the API response, while untranslated component labels and some form headings remain in English. The coverage list and locale setup are in /docs/ui.

Where is the source code?

The MIT-licensed source is at github.com/RoxyAPI/ui. Packages are published as @roxyapi/ui, @roxyapi/ui-react and @roxyapi/ui-vue. The web component bundle is also available through the CDN setup documented at /docs/ui.

Get an API key. Render your first chart.

Roxy UI is free and open source. The RoxyAPI catalog powers every render.

Get API KeyBrowse the API

Component preview

The real component, running on sample data.

Loading the component...