Sonr
Browser

Use Web Components

Get up and running with our Design System in minutes

Welcome to Nebula! This guide will help you get started with our comprehensive web components library designed specifically for blockchain and cryptocurrency interfaces.

Getting Started

Choose Your Installation Method

Nebula can be loaded via CDN or installed locally through npm. The CDN approach is the easiest way to get started.

<!-- Autoloader (Recommended) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sonr.io/nebula@latest/dist/themes/light.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@sonr.io/nebula@latest/dist/nebula-autoloader.js"></script>

The autoloader watches for unregistered Nebula elements and loads them on demand.

npm install @sonr.io/nebula

Then include the files in your HTML:

<link rel="stylesheet" href="/node_modules/@sonr.io/nebula/dist/themes/light.css" />
<script type="module" src="/node_modules/@sonr.io/nebula/dist/shoelace.js"></script>
import '@sonr.io/nebula/dist/themes/light.css';
import '@sonr.io/nebula/dist/components/button/button.js';
import '@sonr.io/nebula/dist/components/icon/icon.js';
import { setBasePath } from '@sonr.io/nebula/dist/utilities/base-path.js';

// Set the base path for assets
setBasePath('/node_modules/@sonr.io/nebula/dist');

Add Your First Component

Once Nebula is loaded, you can start using components immediately. Here's a simple button example:

<nu-button variant="primary">
  Connect Wallet
</nu-button>
import SlButton from '@sonr.io/nebula/dist/react/button';

function App() {
  return (
    <SlButton variant="primary">
      Connect Wallet
    </NuButton>
  );
}

Configure Your Theme

Nebula supports both light and dark themes. You can set the theme by adding a class to your HTML element:

<!-- Light theme (default) -->
<html>
  <!-- Dark theme -->
  <html class="sl-theme-dark">
    <!-- Auto theme based on system preference -->
    <link
      rel="stylesheet"
      media="(prefers-color-scheme:light)"
      href="https://cdn.jsdelivr.net/npm/@sonr.io/nebula@latest/dist/themes/light.css"
    />
    <link
      rel="stylesheet"
      media="(prefers-color-scheme:dark)"
      href="https://cdn.jsdelivr.net/npm/@sonr.io/nebula@latest/dist/themes/dark.css"
      onload="document.documentElement.classList.add('sl-theme-dark');"
    />
  </html>
</html>

Add Blockchain-Specific Icons

Nebula includes a comprehensive set of cryptocurrency icons. Enable them by registering the crypto icon library:

import { registerIconLibrary } from "@sonr.io/nebula/dist/utilities/icon-library.js";

// Register cryptocurrency icons
registerIconLibrary("crypto", {
  resolver: (name) =>
    `https://cdn.jsdelivr.net/npm/@sonr.io/nebula@latest/dist/assets/crypto-icons/${name}.svg`,
});

Then use them in your components:

<nu-icon library="crypto" name="btc"></nu-icon>
<nu-icon library="crypto" name="eth"></nu-icon>
<nu-icon library="crypto" name="usdc"></nu-icon>

Explore our most commonly used components designed for blockchain applications:

Buttons

Interactive buttons with multiple variants for actions like wallet connections and transactions

Auth Components

Specialized login and register buttons for Web3 authentication flows

Cards

Content containers perfect for displaying token information and NFT galleries

Charts

Trading charts including line, area, candle, and pie charts for market data

Framework Integration

Nebula provides React wrappers for all components:

import { SlButton, SlIcon, SlCard } from '@sonr.io/nebula/dist/react';

function WalletCard() {
  return (
    <SlCard>
      <SlIcon library="crypto" name="metamask" slot="image"></NuIcon>
      <strong>MetaMask Wallet</strong>
      <SlButton variant="primary">Connect</NuButton>
    </NuCard>
  );
}

Use Nebula components directly in Vue templates:

<template>
  <nu-card>
    <nu-icon library="crypto" name="metamask" slot="image"></nu-icon>
    <strong>MetaMask Wallet</strong>
    <nu-button variant="primary" @click="connectWallet">
      Connect
    </nu-button>
  </nu-card>
</template>

<script>
export default {
  methods: {
    connectWallet() {
      // Connection logic
    }
  }
}
</script>

Add CUSTOM_ELEMENTS_SCHEMA to your module:

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

Then use in templates:

<nu-card>
  <nu-icon library="crypto" name="metamask" slot="image"></nu-icon>
  <strong>MetaMask Wallet</strong>
  <nu-button variant="primary" (click)="connectWallet()">
    Connect
  </nu-button>
</nu-card>

Common Patterns

Wallet Connection Button

<nu-button variant="primary" size="medium">
  <nu-icon library="crypto" name="wallet" slot="prefix"></nu-icon>
  Connect Wallet
</nu-button>

Transaction Status Alert

<nu-alert variant="success" open closable>
  <nu-icon slot="icon" name="check2-circle"></nu-icon>
  <strong>Transaction Confirmed!</strong><br />
  Your transaction has been successfully processed on the blockchain.
</nu-alert>

Token Balance Card

<nu-card class="token-balance">
  <div slot="header">
    <nu-icon library="crypto" name="eth"></nu-icon>
    Ethereum
  </div>
  <nu-format-number
    value="1234.5678"
    type="currency"
    currency="USD"
  ></nu-format-number>
  <small
    ><nu-format-number
      value="0.5423"
      minimumFractionDigits="4"
    ></nu-format-number>
    ETH</small
  >
</nu-card>

Frequently Asked Questions

Next Steps

Explore Components

Browse our full component library

Design Tokens

Customize the look and feel

GitHub

View source code and contribute

Need help? Join our Discord community or check out our GitHub discussions.

Browser Quickstart

A quick start guide for using Sonr in web browsers with WebAuthn integration.

Golang Quickstart

A quick start guide for building applications with Sonr using the Go programming language.