UI Components

import {
  // Auth
  SignInForm, SignUpForm, UserProfile,

  // Billing
  BillingSection, InvoiceHistory,

  // AI
  ChatInterface, ModelSelector,

  // Analytics
  AnalyticsDashboard, StatsCard,

  // ... and more
} from '@sylphx/platform-sdk/react'

import {
  SignInForm,
  defaultTheme,
  darkTheme,
  type ThemeVariables
} from '@sylphx/platform-sdk/react'

// Use built-in themes
<SignInForm theme={darkTheme} />

// Custom theme
const myTheme: ThemeVariables = {
  ...defaultTheme,
  colorPrimary: '#6366f1',
  colorBackground: '#fafafa',
  fontFamily: 'Inter, sans-serif',
  borderRadius: '0.75rem',
}

<SignInForm theme={myTheme} />

import { SylphxProvider } from '@sylphx/platform-sdk/react'

export default function RootLayout({ children }) {
  return (
    <SylphxProvider
      appId={process.env.NEXT_PUBLIC_SYLPHX_APP_ID!}
      environment={process.env.NEXT_PUBLIC_SYLPHX_ENV as 'development' | 'staging' | 'production'}
    >
      {children}
    </SylphxProvider>
  )
}

import { ChatInterface } from '@sylphx/platform-sdk/react'

// Without provider - pass config directly
<ChatInterface
  apiKey={process.env.NEXT_PUBLIC_SYLPHX_KEY}
  model="gpt-4o"
  systemPrompt="You are a helpful assistant"
/>