|
| 1 | +<p align="center"> |
| 2 | + <a href="https://roxyapi.com/ui"> |
| 3 | + <img src="https://raw.githubusercontent.com/RoxyAPI/ui/main/assets/banner.png" alt="Roxy UI. Beautiful spiritual components in 30 minutes." width="100%"> |
| 4 | + </a> |
| 5 | +</p> |
| 6 | + |
| 7 | +# @roxyapi/ui |
| 8 | + |
| 9 | +[](https://www.npmjs.com/package/@roxyapi/ui) |
| 10 | +[](https://roxyapi.com/ui) |
| 11 | +[](https://roxyapi.com/api-reference) |
| 12 | +[](https://roxyapi.com/pricing) |
| 13 | + |
| 14 | +Web components for the RoxyAPI catalog. Drop astrology, tarot, numerology, and every other RoxyAPI domain into any framework with one script tag or one npm install. Stateless components, typed responses, beautiful defaults in 30 minutes. |
| 15 | + |
| 16 | +## Why developers use Roxy UI |
| 17 | + |
| 18 | +- One API key. Charts, tables, cards, forms for every domain in the catalog. |
| 19 | +- Works in React, Vue, Svelte, Angular, Solid, vanilla HTML, WordPress. |
| 20 | +- Stateless. Caller fetches via `@roxyapi/sdk`, passes the response as `data`. |
| 21 | +- Theming via CSS custom properties. No Tailwind required, no class-name overrides. |
| 22 | +- A11y zero violations under axe-core. Keyboard navigation. Reduced-motion honored. |
| 23 | +- Tree-shake friendly. Tight bundle budget enforced in CI. |
| 24 | + |
| 25 | +## Start with one component |
| 26 | + |
| 27 | +Vanilla HTML. Three lines. No build step. |
| 28 | + |
| 29 | +```html |
| 30 | +<script |
| 31 | + src="https://cdn.jsdelivr.net/npm/@roxyapi/ui@1/dist/cdn/roxy-ui.js" |
| 32 | + crossorigin="anonymous" |
| 33 | + defer |
| 34 | +></script> |
| 35 | +<roxy-natal-chart id="chart"></roxy-natal-chart> |
| 36 | +<script type="module"> |
| 37 | + import { createRoxy } from 'https://cdn.jsdelivr.net/npm/@roxyapi/sdk@1/dist/factory.js'; |
| 38 | + const roxy = createRoxy(import.meta.env?.ROXY_API_KEY); |
| 39 | + const { data } = await roxy.astrology.generateNatalChart({ |
| 40 | + body: { date: '1990-01-15', time: '14:30:00', latitude: 28.6139, longitude: 77.209, timezone: 5.5 }, |
| 41 | + }); |
| 42 | + document.getElementById('chart').data = data; |
| 43 | +</script> |
| 44 | +``` |
| 45 | +
|
| 46 | +Then add the kundli, the panchang, the dasha timeline, the tarot spread. |
| 47 | +
|
| 48 | +## Install |
| 49 | +
|
| 50 | +```bash |
| 51 | +npm install @roxyapi/ui |
| 52 | +# or |
| 53 | +bun add @roxyapi/ui |
| 54 | +``` |
| 55 | +
|
| 56 | +```ts |
| 57 | +import '@roxyapi/ui'; |
| 58 | +// or per component |
| 59 | +import '@roxyapi/ui/components/natal-chart'; |
| 60 | +``` |
| 61 | +
|
| 62 | +React users get a typed package with the same components. |
| 63 | +
|
| 64 | +```bash |
| 65 | +npm install @roxyapi/ui-react |
| 66 | +``` |
| 67 | +
|
| 68 | +```tsx |
| 69 | +import { RoxyNatalChart } from '@roxyapi/ui-react'; |
| 70 | +
|
| 71 | +export function Chart({ data }: { data: NatalChart }) { |
| 72 | + return <RoxyNatalChart data={data} />; |
| 73 | +} |
| 74 | +``` |
| 75 | +
|
| 76 | +## Quick start |
| 77 | +
|
| 78 | +```ts |
| 79 | +import { createRoxy } from '@roxyapi/sdk'; |
| 80 | +import '@roxyapi/ui'; |
| 81 | +
|
| 82 | +const roxy = createRoxy(process.env.ROXY_API_KEY!); |
| 83 | +
|
| 84 | +const { data: cities } = await roxy.location.searchCities({ query: { q: 'Mumbai' } }); |
| 85 | +const { latitude, longitude, timezone } = cities.cities[0]; |
| 86 | +
|
| 87 | +const { data: kundli } = await roxy.vedicAstrology.generateBirthChart({ |
| 88 | + body: { date: '1990-01-15', time: '14:30:00', latitude, longitude, timezone }, |
| 89 | +}); |
| 90 | +
|
| 91 | +document.querySelector('roxy-vedic-kundli')!.data = kundli; |
| 92 | +``` |
| 93 | +
|
| 94 | +Always call `/location/search` first. Every chart endpoint expects latitude, longitude, and timezone. |
| 95 | +
|
| 96 | +## Distribution |
| 97 | +
|
| 98 | +| Surface | URL | |
| 99 | +|---|---| |
| 100 | +| npm `@roxyapi/ui` | `npmjs.com/package/@roxyapi/ui` | |
| 101 | +| npm `@roxyapi/ui-react` | `npmjs.com/package/@roxyapi/ui-react` | |
| 102 | +| jsdelivr full UMD | `cdn.jsdelivr.net/npm/@roxyapi/ui@1/dist/cdn/roxy-ui.js` | |
| 103 | +| jsdelivr per-component UMD | `cdn.jsdelivr.net/npm/@roxyapi/ui@1/dist/cdn/components/{name}.js` | |
| 104 | +| Widgets auto-mount | `cdn.jsdelivr.net/npm/@roxyapi/ui@1/dist/cdn/widgets.js` | |
| 105 | +| shadcn registry | `bunx shadcn add https://cdn.jsdelivr.net/gh/RoxyAPI/ui@main/registry/{name}.json` | |
| 106 | +
|
| 107 | +## Phase 1 components |
| 108 | +
|
| 109 | +<!-- BEGIN:COMPONENTS --> |
| 110 | +| Element | Domain | Endpoint(s) | What it renders | |
| 111 | +|---|---|---|---| |
| 112 | +| `<roxy-natal-chart>` | Western | POST /astrology/natal-chart | Natal chart wheel with planet glyphs and aspect lines | |
| 113 | +| `<roxy-horoscope-card>` | Western | GET /astrology/horoscope/{sign}/{daily,weekly,monthly} | Daily, weekly, or monthly horoscope card | |
| 114 | +| `<roxy-synastry-chart>` | Western | POST /astrology/synastry | Dual-wheel synastry with inter-aspects table | |
| 115 | +| `<roxy-compatibility-card>` | Cross | POST /astrology/compatibility-score, /numerology/compatibility, /biorhythm/compatibility | Score card with category breakdown | |
| 116 | +| `<roxy-moon-phase>` | Western | GET /astrology/moon-phase/{current,upcoming,calendar/...} | Moon phase card and calendar | |
| 117 | +| `<roxy-vedic-kundli>` | Vedic | POST /vedic-astrology/birth-chart | South or North Indian kundli | |
| 118 | +| `<roxy-panchang-table>` | Vedic | POST /vedic-astrology/panchang/{basic,detailed} | 15+ muhurtas in detailed mode | |
| 119 | +| `<roxy-dasha-timeline>` | Vedic | POST /vedic-astrology/dasha/{current,major,sub/...} | Vimshottari mahadasha + antardasha + pratyantardasha | |
| 120 | +| `<roxy-dosha-card>` | Vedic | POST /vedic-astrology/dosha/{manglik,kalsarpa,sadhesati} | Presence, severity, remedies, scoped effects | |
| 121 | +| `<roxy-guna-milan>` | Vedic | POST /vedic-astrology/compatibility | 36-point Ashtakoota with eight sub-scores | |
| 122 | +| `<roxy-kp-planets-table>` | Vedic (KP) | POST /vedic-astrology/kp/planets | Sub-lord and sub-sub-lord columns | |
| 123 | +| `<roxy-numerology-card>` | Numerology | POST /numerology/{life-path,expression,personal-year,chart} | Life path, expression, personal year, full chart | |
| 124 | +| `<roxy-tarot-card>` | Tarot | GET /tarot/cards/{id}, POST /tarot/daily | Single card with upright and reversed flip | |
| 125 | +| `<roxy-tarot-spread>` | Tarot | POST /tarot/spreads/{three-card,celtic-cross,love}, /tarot/yes-no, /tarot/draw | Spreads with positions and reading | |
| 126 | +| `<roxy-biorhythm-chart>` | Biorhythm | POST /biorhythm/{daily,forecast,critical-days} | Daily bars, forecast cycle lines, critical days | |
| 127 | +| `<roxy-hexagram>` | I Ching | GET /iching/hexagrams/{number}, /iching/cast, POST /iching/daily, /iching/daily/cast | Hexagram with trigrams, judgment, image, changing lines | |
| 128 | +| `<roxy-endpoint-form>` | Helper | Any endpoint via x-roxy-ui hints | Schema-driven form, emits roxy-submit | |
| 129 | +| `<roxy-location-search>` | Helper | GET /location/search | Debounced city search input, emits roxy-location-select | |
| 130 | +| `<roxy-data>` | Helper | Any response shape | Generic fallback renderer for unknown shapes | |
| 131 | +<!-- END:COMPONENTS --> |
| 132 | +
|
| 133 | +## What you can build |
| 134 | +
|
| 135 | +- Astrology dating apps with synastry charts and compatibility scores. |
| 136 | +- Kundli matching platforms with Guna Milan and Mangal Dosha checks. |
| 137 | +- Daily horoscope embeds for wellness, news, and lifestyle apps. |
| 138 | +- Tarot reading apps with daily pulls, three-card spreads, and Celtic Cross. |
| 139 | +- Numerology calculators with full-chart breakdowns and personal year forecasts. |
| 140 | +- Biorhythm dashboards with critical-day alerts. |
| 141 | +- I Ching apps with hexagram lookup and three-coin casting. |
| 142 | +- Founder hosted-app surfaces consuming the same components under brand themes. |
| 143 | +
|
| 144 | +## Theming |
| 145 | +
|
| 146 | +Every component reads from `--roxy-*` CSS custom properties. Override globally on `:root` or per element. Light + dark defaults, container queries for responsive layouts at 320px and up. See [THEMING.md](packages/ui/THEMING.md) for the full token reference. |
| 147 | +
|
| 148 | +```css |
| 149 | +:root { |
| 150 | + --roxy-accent: #6d28d9; |
| 151 | + --roxy-radius-md: 12px; |
| 152 | +} |
| 153 | +
|
| 154 | +roxy-natal-chart { |
| 155 | + --roxy-accent: #ec4899; |
| 156 | +} |
| 157 | +``` |
| 158 | +
|
| 159 | +## Reliability |
| 160 | +
|
| 161 | +- Verified astronomical calculations from Roxy Ephemeris, verified against NASA JPL Horizons. |
| 162 | +- Stable, versioned API. New endpoints regenerate component types automatically. |
| 163 | +- Consistent response formats across every domain in the catalog. |
| 164 | +- A11y zero violations enforced in CI. |
| 165 | +- Tight per-component bundle budget enforced in CI. |
| 166 | +- Coverage of the highest-demand endpoints across Western astrology, Vedic astrology, numerology, tarot, biorhythm, I Ching, plus helpers for location search and schema-driven forms. |
| 167 | +
|
| 168 | +## Built for AI agents |
| 169 | +
|
| 170 | +- Works with Claude Code, Cursor, Copilot, Codex, Gemini CLI. |
| 171 | +- Ships with `AGENTS.md` so agents know which component to render for which response. |
| 172 | +- Combines with the `@roxyapi/sdk` for typed prop shapes that match the OpenAPI spec. |
| 173 | +- Remote MCP servers per domain at `roxyapi.com/mcp/{domain}`. No local setup, runs in seconds. |
| 174 | +
|
| 175 | +## Build anything, fast |
| 176 | +
|
| 177 | +```bash |
| 178 | +git clone https://github.com/RoxyAPI/ui.git |
| 179 | +cd ui |
| 180 | +bun install |
| 181 | +bun run build |
| 182 | +bun run preview |
| 183 | +# http://localhost:3001 |
| 184 | +``` |
| 185 | +
|
| 186 | +Three steps. Thirty minutes. See [examples](examples/) for a full vanilla HTML, React, Vue, and WordPress integration. |
| 187 | +
|
| 188 | +## License |
| 189 | +
|
| 190 | +MIT. See [LICENSE](LICENSE). |
| 191 | +
|
| 192 | +## Links |
| 193 | +
|
| 194 | +- [Documentation](https://roxyapi.com/ui) |
| 195 | +- [API reference](https://roxyapi.com/api-reference) |
| 196 | +- [Methodology](https://roxyapi.com/methodology) |
| 197 | +- [Pricing](https://roxyapi.com/pricing) |
| 198 | +- [Support](https://roxyapi.com/contact) |
0 commit comments