NAVI Protocol Developer Docs
  • 🖥️Build with NAVI Protocol
  • 📖Smart Contract Overview
    • 1️Lending Core
    • 2️Flash Loan
    • 3️Calculator
    • 4️Dynamic Calculator
    • 5️Storage
  • 🕓Decentralized Oracle
    • 💽Oracle Interface
  • 🗺️Contract Configuration
    • 1️⃣Get the Latest Package ID
    • 2️⃣Get Pools Config and Oracle Price Feeds
    • 3️⃣Get Flashloan Config
  • 🛩️NAVI SDK
    • 1️Getting Started
    • 2️Retrieve Info & Data
    • 3️Interactions With NAVI
    • 4️PTB Functions
    • 5️Other Ways to Interact with NAVI
    • 6️Demo
  • 📲NAVI UI SDK
    • ⭐Getting Started
    • 🅰️Aggregator Components
  • 🎧Contract Integration with NAVI
    • 1️⃣Retrieve Pools Info inside Contract
    • 2️⃣Integration with Account Cap
    • 3️⃣Demo
  • 🏅NAVI Aggregator
    • 1️⃣Getting Started
    • 2️⃣Aggregator SDK
    • 3️⃣Aggregator API
    • 🛜Contact Page
  • NAVI Bridge
    • 🚀Quick Start
    • 📄Bridge SDK
  • 📊NAVI Uptime Status Page
  • 📚NAVI API Collection
    • NAVI API
    • afSui, haSui, vSui API
  • ❓FAQ
Powered by GitBook
On this page
  • Installation
  • Usage
  • Demo
  • 🌟 Features
  • 🛠 Showcase Link
  • 🚀 Get Started Today!
  1. NAVI UI SDK

Getting Started

PreviousNAVI UI SDKNextAggregator Components

Last updated 3 months ago

Installation

Start an easy integration of react project with NAVI UI SDK. Install it via npm:

npm i navi-web-component

Usage

Import the SwapPanelClient, a client-side interface for managing the SwapPanel web component, designed for token swap functionality in browser environments:

import { SwapPanelClient } from 'navi-web-component'

Find out more details via:

Demo

This demo leverages Next.js, a modern framework for building fast, scalable web applications. Whether you're a developer looking to explore NAVI's features or integrate them into your app, this is the perfect starting point.

🌟 Features

Seamless Setup: Get started with minimal configuration.

Live Preview: Auto-updating UI for instant feedback during development.

Customizable Components: Integrate the NAVI UI SDK and tailor it to match your app's branding.

API Exploration: Experiment with pre-configured API routes for dynamic interactions

🛠 Showcase Link

https://web-component-demo.vercel.app/

🚀 Get Started Today!

Ready to dive in? Clone the repo, start the dev server, and bring the power of NAVI UI SDK into your project in minutes. Happy coding! 💻✨

📲
⭐
🅰️Aggregator Components
LogoGitHub - naviprotocol/web-component-demoGitHub
Demo for UI SDK