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.
See every component live
All 30 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).
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.
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.
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-synastry-chart> | Western | Dual-wheel synastry with inter-aspects table |
| <roxy-western-planets-table> | Western | Sign, degree, house, motion columns plus ASC, MC, PoF, Vertex |
| <roxy-transits-table> | Western | Transit planet positions plus optional aspects to a natal chart |
| <roxy-moon-phase> | Western | Moon phase card and calendar |
| <roxy-horoscope-card> | Western | Daily, weekly, or monthly horoscope card |
| <roxy-compatibility-card> | Cross | Score card with category breakdown |
| <roxy-vedic-kundli> | Vedic | South, North, or East Indian kundli with degree detail |
| <roxy-divisional-chart> | Vedic | Generic divisional varga wheel from D2 Hora to D60 Shashtiamsa |
| <roxy-kp-chart> | Vedic (KP) | Ascendant, cusps, and planets with KP stellar hierarchy |
| <roxy-vedic-planets-table> | Vedic | Degree, nakshatra, pada, lord, bhava, avastha columns |
| <roxy-kp-planets-table> | Vedic (KP) | Sub-lord and sub-sub-lord columns |
| <roxy-kp-ruling-planets> | Vedic (KP) | Day lord, Moon/Lagna hierarchies, ruling planets, significators |
| <roxy-ashtakavarga-grid> | Vedic | Sarva, Bhinna, and Shodhya Pinda views in a tabbed heatmap |
| <roxy-shadbala-table> | Vedic | Six-fold planetary strength bar plus rupas and adequacy badge |
| <roxy-dasha-timeline> | Vedic | Vimshottari mahadasha plus antardasha plus pratyantardasha |
| <roxy-guna-milan> | Vedic | 36-point Ashtakoota with eight sub-scores |
| <roxy-panchang-table> | Vedic | 15+ muhurtas in detailed mode |
| <roxy-choghadiya-grid> | Vedic | Day and night Choghadiya muhurta tiles colored by effect |
| <roxy-yoga-list> | Vedic | Filterable yoga cards from the 300 plus yoga catalog |
| <roxy-nakshatra-card> | Vedic | Lord, deity, symbol, characteristics, remedies |
| <roxy-dosha-card> | Vedic | Presence, severity, remedies, scoped effects |
| <roxy-numerology-card> | Numerology | Life path, expression, personal year, 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 cycle lines, 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 input, emits roxy-location-select |
| <roxy-data> | Helper | Generic fallback renderer for unknown shapes |
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.