The Next.js UI component library for the OASIS Platform. 126 components covering avatar SSO, karma, NFTs, quests, map, seeds, messaging, OApps, providers and more — built for Next.js App Router and Pages Router, with full SSR/SSG support.
npm install @oasisomniverse/nextjsAll components include 'use client' internally. In App Router, import and use them directly:
import { AvatarConnect, KarmaToast, showKarmaToast } from '@oasisomniverse/nextjs';
// Render once in your root layout:
export default function RootLayout({ children }) {
return (
<html>
<body>
<AvatarConnect onLogin={(s) => console.log(s)} />
<KarmaToast />
{children}
</body>
</html>
);
}
// Trigger toast from anywhere:
showKarmaToast({ message: 'Quest completed', amount: 150 });The API endpoint is configured in src/config/api.js — set API_BASE_URL there. Most newer components also accept apiUrl and sessionKey props to override it per-instance.
Avatar login popup/form.
<Login
config={config}
onSuccess={(session) => console.log(session)}
onClose={() => {}}
/>| Prop | Type | Default | Description |
|---|---|---|---|
config |
{ apiUrl: string } |
default endpoint | OASIS API configuration |
onSuccess |
(session) => void |
— | Called with session object on successful login |
onClose |
() => void |
— | Called when the popup is dismissed |
New avatar registration form.
<Signup config={config} onSuccess={(data) => console.log(data)} onClose={() => {}} />| Prop | Type | Description |
|---|---|---|
onSuccess |
(data) => void |
Called with new avatar data on registration |
onClose |
() => void |
Called when dismissed |
Login/logout toggle chip — manages session state automatically.
<AvatarConnect
config={config}
sessionKey="oasis_session"
onLogin={(session) => console.log(session)}
onLogout={() => {}}
/>| Prop | Type | Default | Description |
|---|---|---|---|
config |
{ apiUrl: string } |
default endpoint | OASIS API configuration |
sessionKey |
string |
'oasis_session' |
sessionStorage key for login state persistence |
onLogin |
(session) => void |
— | Called with session object after login |
onLogout |
() => void |
— | Called after logout |
<ForgotPassword config={config} onClose={() => {}} />Password reset form — use with the token from the reset email link.
<ResetPassword config={config} token={tokenFromSearchParams} onSuccess={() => {}} />| Prop | Type | Description |
|---|---|---|
token |
string |
Required. Reset token from the email link |
<VerifyEmail config={config} token={tokenFromSearchParams} onSuccess={() => {}} /><SearchAvatars config={config} onSelect={(avatar) => console.log(avatar)} />| Prop | Type | Description |
|---|---|---|
onSelect |
(avatar) => void |
Called when the user picks an avatar |
<SendInvite config={config} onSuccess={() => {}} />
<AcceptInvite config={config} inviteCode={code} onSuccess={() => {}} /><AvatarProfile config={config} avatarId="abc123" onClose={() => {}} />| Prop | Type | Description |
|---|---|---|
avatarId |
string |
Avatar to display — defaults to logged-in user |
<ViewAvatar config={config} avatarId="abc123" /><EditAvatar config={config} onSuccess={() => {}} onClose={() => {}} /><ViewAvatarKarma config={config} avatarId="abc123" />Singleton toast — render it once (e.g. in your root layout), then trigger it imperatively via showKarmaToast().
import { KarmaToast, showKarmaToast } from '@oasisomniverse/nextjs';
// In root layout:
<KarmaToast />
// Anywhere:
showKarmaToast({ message: 'Quest completed', amount: 150 });
showKarmaToast({ message: 'Penalty applied', amount: -20, duration: 5000 });showKarmaToast options:
| Option | Type | Default | Description |
|---|---|---|---|
message |
string |
required | Reason text shown below the karma amount |
amount |
number |
required | Karma delta — positive shown in cyan, negative in red |
duration |
number |
4000 |
Auto-dismiss delay in milliseconds |
<KarmaPanel config={config} onClose={() => {}} /><Map config={config} onClose={() => {}} /><NFT config={config} nftId="nft-001" onClose={() => {}} />
<PurchaseNFT config={config} nftId="nft-001" onSuccess={() => {}} onClose={() => {}} /><CreateOApp config={config} onSuccess={(oapp) => console.log(oapp)} onClose={() => {}} />
<LaunchOApp config={config} oappId="my-oapp" onClose={() => {}} /><Seeds config={config} onClose={() => {}} />
<PayWithSeeds config={config} amount={50} recipientId="abc123" onSuccess={() => {}} onClose={() => {}} /><OasisModal title="My Modal" accentColor="#00c8ff" onClose={() => {}}>
<p>Modal content goes here.</p>
</OasisModal>| Prop | Type | Default | Description |
|---|---|---|---|
title |
string |
'' |
Modal header title |
accentColor |
string |
'#00c8ff' |
Header accent colour |
onClose |
() => void |
— | Called when dismissed |
children |
ReactNode |
— | Modal body content |
<NavBar config={config} links={[{ label: 'Map', href: '/map' }]} /><Settings config={config} onClose={() => {}} />
<Wallet config={config} onClose={() => {}} />
<StarField />
<ComingSoon label="Quests" />Add the Dark Space design system fonts in your layout.tsx:
import { Orbitron, Rajdhani } from 'next/font/google';
const orbitron = Orbitron({ subsets: ['latin'], variable: '--font-orbitron' });
const rajdhani = Rajdhani({ subsets: ['latin'], weight: ['400', '600', '700'], variable: '--font-rajdhani' });
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={`${orbitron.variable} ${rajdhani.variable}`}>
<body>{children}</body>
</html>
);
}| 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:
- 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
Override CSS custom properties to theme components for your own OAPP:
:root {
--oasis-bg: #0a0d14;
--oasis-accent: #00c8ff;
--oasis-text: #e0f0ff;
--oasis-border: rgba(0, 200, 255, 0.2);
}See the full component matrix at oportal.oasisomniverse.one.