Interactive Components Showcase

Discover interactive components that enhance user engagement and provide dynamic content experiences.

🗂️ Tabs Component

Basic Tabs

Overview
Features
Pricing

Proper Labs Overview

We're building the bridge between Web3 and AI, creating tools and frameworks that empower developers to build the next generation of decentralized applications.

Key focus areas:

Blockchain integration
AI model deployment
Smart contract automation
Decentralized governance

Plan	Price	Features
Starter	$99/mo	Basic features, 10k requests
Pro	$299/mo	Advanced features, 100k requests
Enterprise	Custom	Unlimited, dedicated support

Synchronized Tabs (groupId)

Windows
macOS
Linux

# Windows Installation
npm install -g proper-labs-cli
proper-labs init my-project

# macOS Installation
brew install proper-labs-cli
proper-labs init my-project

# Linux Installation
sudo apt-get install proper-labs-cli
proper-labs init my-project

These tabs will sync with other tabs using the same groupId:

Windows
macOS
Linux

Windows-specific configuration files

Code Example Tabs

JavaScript
Python
Rust

example.js
// JavaScript Implementation
class ProperLabsSDK {
  constructor(apiKey) {
    this.apiKey = apiKey;
    this.baseURL = 'https://api.properlabs.io';
  }

  async deployContract(contract) {
    const response = await fetch(`${this.baseURL}/deploy`, {
      method: 'POST',
      headers: { 'Authorization': `Bearer ${this.apiKey}` },
      body: JSON.stringify(contract)
    });
    return response.json();
  }
}

example.py
# Python Implementation
import requests

class ProperLabsSDK:
    def __init__(self, api_key):
        self.api_key = api_key
        self.base_url = 'https://api.properlabs.io'

    def deploy_contract(self, contract):
        response = requests.post(
            f'{self.base_url}/deploy',
            headers={'Authorization': f'Bearer {self.api_key}'},
            json=contract
        )
        return response.json()

example.rs
// Rust Implementation
use reqwest;
use serde_json::Value;

pub struct ProperLabsSDK {
    api_key: String,
    base_url: String,
}

impl ProperLabsSDK {
    pub fn new(api_key: String) -> Self {
        ProperLabsSDK {
            api_key,
            base_url: "https://api.properlabs.io".to_string(),
        }
    }

    pub async fn deploy_contract(&self, contract: Value) -> Result<Value, reqwest::Error> {
        let client = reqwest::Client::new();
        let response = client
            .post(format!("{}/deploy", self.base_url))
            .bearer_auth(&self.api_key)
            .json(&contract)
            .send()
            .await?
            .json()
            .await?;
        Ok(response)
    }
}

🎚️ Toggle Components

Checkbox Examples

Enable AI-powered optimizationUse smart contract automationEnable analytics tracking

Radio Button Groups

Select Deployment Network:

Ethereum MainnetPolygonArbitrum

📝 Interactive Forms

Contact Form Example

💡 Tooltips

Hover over these elements to see tooltips:

BX Framework ℹ️

AX Framework ℹ️

PX Framework ℹ️

🔄 Loading States

Spinner Examples

Progress Bars

Deployment Progress75%

AI Training45%

🎬 Interactive Buttons

https://proper-labs.io/demo

Pagination

...

Implementation Notes

Use Tabs for organizing related content
Add Forms for user input and feedback
Implement Tooltips for contextual help
Design Loading States for async operations
Create Interactive Buttons with clear CTAs

🗂️ Tabs Component​

Basic Tabs​

Synchronized Tabs (groupId)​

Code Example Tabs​

🎚️ Toggle Components​

Checkbox Examples​

Radio Button Groups​

📝 Interactive Forms​

Contact Form Example​

💡 Tooltips​

🔄 Loading States​

Spinner Examples​

Progress Bars​

🎬 Interactive Buttons​

🎯 Interactive Navigation​

Breadcrumb Navigation​

Pagination​