The vanilla JavaScript UI component library for the OASIS Platform. Drop 126 pre-built components into any website or web app to integrate avatar SSO, karma, NFTs, quests, map, seeds, messaging, OApps, providers and more — no framework required.
npm install @oasisomniverse/jsOr via CDN:
<script src="https://cdn.jsdelivr.net/npm/@oasisomniverse/js/dist/oasis.min.js"></script>import { Login, AvatarConnect, KarmaToast } from '@oasisomniverse/js';
// Mount a login widget into a container element
const login = new Login('#login-container', {
apiUrl: 'https://api.web4.oasisomniverse.one',
onSuccess: (session) => console.log('Logged in:', session)
});
login.open();
// Show a karma toast notification
OasisKarmaToast.show({ message: 'Quest completed', amount: 150 });All components accept an apiUrl option that defaults to https://api.web4.oasisomniverse.one. Callbacks are always optional.
Avatar login popup widget.
const login = new OasisLogin({
container, // optional HTMLElement — mounts inline instead of as a popup
apiUrl, // string
onSuccess, // (session: { avatarId, username, karma }) => void
onClose // () => void
});
login.open(); // show as popup
login.close(); // dismiss
login.destroy(); // remove from DOM| Option | Type | Default | Description |
|---|---|---|---|
container |
HTMLElement |
— | Mount inline instead of as a floating popup |
apiUrl |
string |
'https://api.web4.oasisomniverse.one' |
OASIS API base URL |
onSuccess |
function |
null |
Called with session object on successful login |
onClose |
function |
null |
Called when the popup is dismissed |
New avatar registration popup.
const signup = new OasisSignup({
apiUrl,
onSuccess, // (data) => void
onClose
});
signup.open();| Option | Type | Default | Description |
|---|---|---|---|
apiUrl |
string |
'https://api.web4.oasisomniverse.one' |
OASIS API base URL |
onSuccess |
function |
null |
Called with new avatar data on registration |
onClose |
function |
null |
Called when the popup is dismissed |
Login/logout toggle chip — mounts into your nav bar and manages session state automatically.
const ac = new OasisAvatarConnect({
container: document.querySelector('#nav-auth'),
apiUrl,
sessionKey, // localStorage key for session persistence
onLogin, // (session) => void
onLogout // () => void
});
ac.destroy(); // remove from DOM| Option | Type | Default | Description |
|---|---|---|---|
container |
HTMLElement |
required | Element to mount the chip into |
apiUrl |
string |
'https://api.web4.oasisomniverse.one' |
OASIS API base URL |
sessionKey |
string |
'oasis_session' |
sessionStorage key used to persist login state |
onLogin |
function |
null |
Called with session object after login |
onLogout |
function |
null |
Called after logout |
Password reset request popup.
const fp = new OasisForgotPassword({ apiUrl, onClose });
fp.open();Password reset form — typically opened from a link in a reset email.
const rp = new OasisResetPassword({ apiUrl, token, onSuccess, onClose });
rp.open();| Option | Type | Default | Description |
|---|---|---|---|
token |
string |
required | Reset token from the email link |
Email verification confirmation widget.
const ve = new OasisVerifyEmail({ apiUrl, token, onSuccess });
ve.open();Search the OASIS avatar directory.
const sa = new OasisSearchAvatars({ apiUrl, onSelect });
sa.open();| Option | Type | Description |
|---|---|---|
onSelect |
(avatar) => void |
Called when the user picks an avatar from results |
Send or accept a Seeds-based invite.
new OasisSendInvite({ apiUrl, onSuccess }).open();
new OasisAcceptInvite({ apiUrl, inviteCode, onSuccess }).open();View the current avatar's full profile.
new OasisAvatarProfile({ apiUrl, avatarId, onClose }).open();| Option | Type | Description |
|---|---|---|
avatarId |
string |
Avatar to display — defaults to logged-in user |
Read-only avatar card for any avatar.
new OasisViewAvatar({ apiUrl, avatarId }).open();Edit the logged-in avatar's profile fields.
new OasisEditAvatar({ apiUrl, onSuccess, onClose }).open();Karma breakdown for an avatar.
new OasisViewAvatarKarma({ apiUrl, avatarId }).open();Static singleton — shows a floating toast notification.
OasisKarmaToast.show({
message: 'Quest completed', // string — reason text shown below the amount
amount: 150 // number — karma delta (positive or negative)
});| Option | Type | Description |
|---|---|---|
message |
string |
Reason text displayed below the karma amount |
amount |
number |
Karma delta — positive values shown in cyan, negative in red |
Full karma dashboard for the logged-in avatar.
new OasisKarmaPanel({ apiUrl, onClose }).open();Interactive 3D globe with holon and quest overlays.
new OasisMap({ apiUrl, onClose }).open();Read-only global map view.
new OasisViewGlobal3DMap({ apiUrl }).open();View and manage a single NFT.
new OasisNFT({ apiUrl, nftId, onClose }).open();NFT purchase flow.
new OasisPurchaseNFT({ apiUrl, nftId, onSuccess, onClose }).open();Step-by-step OApp creation wizard.
new OasisCreateOApp({ apiUrl, onSuccess, onClose }).open();Launch an installed OApp.
new OasisLaunchOApp({ apiUrl, oappId, onClose }).open();Seeds wallet overview for the logged-in avatar.
new OasisSeeds({ apiUrl, onClose }).open();Seeds payment flow.
new OasisPayWithSeeds({ apiUrl, amount, recipientId, onSuccess, onClose }).open();Reusable modal wrapper — used internally by all popup components, but also available directly.
const modal = new OasisModal({
title, // string
content, // string — inner HTML
accentColor, // string — CSS colour for the header accent
onClose // () => void
});
modal.open();
modal.close();
modal.destroy();| Option | Type | Default | Description |
|---|---|---|---|
title |
string |
'' |
Modal header title text |
content |
string |
'' |
Inner HTML content of the modal body |
accentColor |
string |
'#00c8ff' |
Colour applied to the header accent bar |
onClose |
function |
null |
Called when the modal is dismissed |
Top navigation bar with avatar connect chip, karma display and menu links.
new OasisNavBar({
container: document.querySelector('#header'),
apiUrl,
links: [{ label: 'Map', href: '/map' }]
}).mount();Collapsible side navigation panel.
new OasisSideNav({ container, links }).mount();User settings panel (provider, theme, notifications).
new OasisSettings({ apiUrl, onClose }).open();Multi-chain wallet overview for the logged-in avatar.
new OasisWallet({ apiUrl, onClose }).open();Distributed file system browser.
new OasisHyperDrive({ apiUrl, onClose }).open();Animated star field background — attach to any container.
new OasisStarField({ container: document.body }).mount();Placeholder widget for features not yet live.
new OasisComingSoon({ container, label: 'Quests' }).mount();| Group | Components |
|---|---|
| Auth & Identity | AcceptInvite, AvatarConnect, ForgotPassword, Login, ResetPassword, SearchAvatar, SearchAvatars, SendInvite, Signup, VerifyEmail |
| Avatar | AvatarProfile, AvatarWallet, EditAvatar, SearchProfiles, ViewAchievements, ViewAvatar, ViewAvatarKarma, ViewLeagues, ViewOrganizations, ViewTournaments |
| Data Screen | ActivityPub, AddData, EOSIO, Ethereum, Holochain, IPFS, LoadData, ManageData, MongoDB, Neo4j, OffChainManagement, SearchData, Solana, Solid, SQLite, ThreeFold |
| Eggs | Eggs, ManageEggs, SearchEggs, ViewEggs |
| Game | Game |
| Karma | KarmaPanel, KarmaToast, SearchKarma, ViewKarma, VoteKarma |
| Map | Add2DObjectToMap, Add3DObjectToMap, AddQuestToMap, DownloadMap, ManageMap, Map, PlotRouteOnMap, SearchMap, ViewGlobal3DMap, ViewHalonsOnMap, ViewOAppOnMap, ViewQuestOnMap |
| Messages | MenuMessage, Message, MessageContacts, Messaging |
| Mission | ManageMission, Mission, SearchMission, ViewMission |
| NFT | ContactPopupNFT, ManageNFT, NFT, PurchaseNFT, PurchaseVirtualLandNFT, SearchNFT, ViewNFT |
| OApp | CreateOApp, DeployOApp, DownloadOApp, EditOApp, InstallOApp, LaunchOApp, ManageOApp, OApp, SearchOApp |
| Providers | CompareProviderSpeeds, CrossChainManagement, ManageAutoFailover, ManageAutoReplication, ManageLoadBalancing, ManageProviders, ProviderDropdown, Providers, SearchProviders, SeedsProvider, ViewProviderStats, ViewProviders |
| Quest | ManageQuest, Quest, SearchQuest, ViewQuest |
| Seeds | DonateSeeds, ManageSeeds, PayWithSeeds, RewardSeeds, SearchSeeds, Seeds, ViewSeeds |
| Common UI | ComingSoon, Confirmation, Contact, HyperDrive, NavBar, ONET, ONODE, OasisModal, Settings, SideNav, StarField, Wallet |
The OASIS component library ships with the Dark Space design system — a deep-space aesthetic built for the OASIS Omniverse:
- Background: near-black (
#0a0d14) with subtle nebula gradients - Primary accent: electric cyan (
#00c8ff) - Typography: Orbitron for headings, Rajdhani for body text
- Text: always bright (
#e0f0ff/#fff) — never dim or faded - Borders: translucent cyan (
rgba(0,200,255,0.2)) - Cards: glassy dark panels with
backdrop-filter: blur
All CSS custom properties are exposed on :root so you can theme components for your own OAPP:
:root {
--oasis-bg: #0a0d14;
--oasis-accent: #00c8ff;
--oasis-text: #e0f0ff;
--oasis-border: rgba(0, 200, 255, 0.2);
}oportal.oasisomniverse.one — the JS OPORTAL running all 126 components live.