UI Components

Stop reinventing the wheel. Use our pre-built, accessible, and customizable components.

Login Screen

The <SignIn /> component renders a complete login form with email/password and social providers.

import { SignIn } from '@optare/react';
 
export default function LoginPage() {
  return (
    <div className="flex justify-center items-center h-screen">
      <SignIn 
        redirectUrl="/dashboard"
        appearance={{
          theme: 'dark',
          variables: { colorPrimary: '#000' }
        }}
      />
    </div>
  );
}

User Button

A profile dropdown that handles logout and account management.

import { UserButton } from '@optare/react';
 
function Header() {
  return (
    <nav>
      <Logo />
      <UserButton />
    </nav>
  );
}

Organization Switcher

Allow users to toggle between their organizations easily.

import { OrganizationSwitcher } from '@optare/react';
 
function Sidebar() {
  return (
    <aside>
      <OrganizationSwitcher />
      {/* ... */}
    </aside>
  );
}

Frontend SDK CLI Reference