@quantabit/ui-sdk

QuantaBit Universal UI Component Library - Includes Header, Footer, LanguageSelector, and other reusable components with built-in i18n support.

Features

• 🌍 Built-in i18n - Supports Chinese, English, Japanese, Korean
• 🎨 Universal Components - LanguageSelector, ThemeToggle, SearchBox, and more
• 🔧 Utility Hooks - useMounted, useMediaQuery, useLocalStorage, and more
• 💅 Style Utilities - Colors, gradients, shadows, spacing presets
• ⚡ SSR Safe - All components support server-side rendering, no hydration errors

Installation

npm install @quantabit/ui-sdk
# or
yarn add @quantabit/ui-sdk

Quick Start

Using Components

import { LanguageSelector, ThemeToggle, SearchBox } from "@quantabit/ui-sdk";

function Header() {
  return (
    <header>
      <ThemeToggle theme="light" onToggle={handleThemeChange} />
      <LanguageSelector />
      <SearchBox onSearch={handleSearch} />
    </header>
  );
}

Using i18n

import { useTranslation, t } from "@quantabit/ui-sdk/i18n";

function MyComponent() {
  const { t, language, setLanguage } = useTranslation();

  return (
    <div>
      <h1>{t("common.home")}</h1>
      <button onClick={() => setLanguage("en")}>English</button>
    </div>
  );
}

Using Namespaced Translations

import { useTranslation } from "@quantabit/ui-sdk/i18n";

function UserMenu() {
  // Use the 'user' namespace
  const { t } = useTranslation("user");

  return (
    <ul>
      <li>{t("myDashboard")}</li> {/* equivalent to t('user.myDashboard') */}
      <li>{t("myProfile")}</li>
      <li>{t("logout")}</li>
    </ul>
  );
}

Using Hooks

import {
  useMounted,
  useMediaQuery,
  useCopyToClipboard,
} from "@quantabit/ui-sdk/hooks";

function MyComponent() {
  const isMounted = useMounted();
  const isMobile = useMediaQuery("(max-width: 768px)");
  const [copied, copy] = useCopyToClipboard();

  // SSR-safe dynamic text
  const text = isMounted ? t("dynamic.key") : "default";

  return (
    <div>
      {isMobile ? <MobileView /> : <DesktopView />}
      <button onClick={() => copy("Hello")}>
        {copied ? "Copied" : "Copy"}
      </button>
    </div>
  );
}

Using Style Utilities

import { colors, gradients, shadows, alpha } from "@quantabit/ui-sdk/styles";

const buttonStyle = {
  background: gradients.primary,
  boxShadow: shadows.lg,
  color: colors.primary.contrastText,
  "&:hover": {
    boxShadow: shadows.glow,
    backgroundColor: alpha(colors.primary.main, 0.8),
  },
};

Global Language Sync

This SDK uses @quantabit/sdk-config for global language synchronization. Initialize at app entry:

// app/providers.jsx
import { initLanguage, setLanguage } from "@quantabit/sdk-config";

export function Providers({ children }) {
  useEffect(() => {
    // Initialize language (reads from localStorage or browser preference)
    initLanguage();
  }, []);

  return <>{children}</>;
}

// Set language anywhere, all SDKs auto-sync
setLanguage("en");

Component API

LanguageSelector

| Prop | Type | Default | Description | | ---------------- | ------------------------------ | -------- | ------------------ | | size | 'small' | 'medium' | 'large' | 'medium' | Button size | | showFlag | boolean | true | Show country flags | | tooltipPlacement | string | 'bottom' | Tooltip position |

ThemeToggle

| Prop | Type | Default | Description | | -------- | ------------------------------ | -------- | --------------- | | theme | 'light' | 'dark' | 'light' | Current theme | | onToggle | (theme: string) => void | - | Toggle callback | | size | 'small' | 'medium' | 'large' | 'medium' | Button size |

SearchBox

| Prop | Type | Default | Description | | ------------ | ----------------------- | ------- | ------------------ | | onSearch | (query: string) => void | - | Search callback | | placeholder | string | - | Placeholder text | | expandable | boolean | false | Whether expandable | | defaultValue | string | '' | Default value |

Translation Keys

common

• common.home - Home
• common.login - Login
• common.register - Register
• common.logout - Logout
• common.settings - Settings
• common.menu - Menu
• ...

theme

• theme.toggle - Toggle Theme
• theme.light - Light Mode
• theme.dark - Dark Mode

language

• language.select - Select Language
• language.zh - Simplified Chinese
• language.en - English
• ...

user

• user.myDashboard - My Dashboard
• user.myProfile - My Profile
• user.logout - Logout
• ...

License

MIT

🌐 Brand & Links

• Official Mainnet: QuantaBit Chain
• Developer Platform: Developer Platform
• Open Platform: Open Platform
• Payment Platform: Pay Platform
• Feedback: Feedback