OOBE UI SDK

A secure, scalable React/Next.js UI SDK with 185+ components from Cult UI, Magic UI, and shadcn/ui — branded for OOBE Protocol and Synapse Agent Protocol.

Branch Strategy

| Branch | Purpose | Contains | |--------|---------|----------| | main | SDK package — npm publish | lib/, components/, styles/, package.json | | develop | Full Next.js app — testing & gallery | Everything in main + app/, gallery/, scripts/, docs/ |

Installation

pnpm add @oobe-protocol-labs/oobe-ui-sdk

Peer Dependencies

pnpm add react@>=19 react-dom@>=19 motion@>=12 tailwindcss@>=4 clsx@>=2 tailwind-merge@>=3 class-variance-authority@>=0.7 lucide-react@>=0.400 radix-ui@>=1.6

Usage

import {
  // Primitives
  Button, Card, Input, Dialog, Tabs, Select,
  // Effects
  BorderBeam, Meteors, TextAnimate, NumberTicker,
  // Templates
  NavbarRounded, HeroParallax, FooterGlass, CarouselLogos,
  SectionParallaxLayers, VisualBarChart,
  // Motion
  AnimatedSection, TiltCard, MagneticButton, RevealText,
  fadeUp, blurIn, staggerContainer,
  // Brand system
  BrandThemeProvider, useBrandTheme,
  // Utils
  cn, isDevMode, useReducedMotion,
} from "@oobe-protocol-labs/oobe-ui-sdk"

Subpath Imports (tree-shaking)

import { BrandThemeProvider, useBrandTheme } from "@oobe-protocol-labs/oobe-ui-sdk/brand"
import { motionDuration, fadeUp, blurIn } from "@oobe-protocol-labs/oobe-ui-sdk/motion"
import { useReducedMotion } from "@oobe-protocol-labs/oobe-ui-sdk/hooks"
import { isDevMode, isSafeRedirect } from "@oobe-protocol-labs/oobe-ui-sdk/security"

Direct Component Imports

import { TextureCard } from "@oobe-protocol-labs/oobe-ui-sdk/components/effects/texture-card"
import { NeonGradientCard } from "@oobe-protocol-labs/oobe-ui-sdk/components/ui/neon-gradient-card"

Dual Brand System

import { BrandThemeProvider } from "@oobe-protocol-labs/oobe-ui-sdk"

export default function App({ children }) {
  return (
    <BrandThemeProvider defaultBrand="oobe" defaultMode="dark">
      {children}
    </BrandThemeProvider>
  )
}

Switch brand at runtime:

import { useBrandTheme } from "@oobe-protocol-labs/oobe-ui-sdk"

function BrandSwitcher() {
  const { brand, setBrand, colorMode, toggleColorMode } = useBrandTheme()
  return (
    <button onClick={() => setBrand(brand === "oobe" ? "sap" : "oobe")}>
      {brand === "oobe" ? "OOBE" : "Synapse"}
    </button>
  )
}

Stats

• 392 exported names
• 108 shadcn/ui + Magic UI components
• 76 Cult UI effects
• 30 template components (navbars, heroes, footers, carousels, sections, visuals)
• 25+ motion presets
• 2 brands × 2 modes = 4 themes
• 0 TypeScript errors
• 0 ESLint errors

License

MIT © OOBE Protocol