Firebase UI for Web - Shadcn

This package is private and not published to npm.

The shadcn package exposes React components via the Shadcn Registy, allowing users to take advantage of Firebase UI for Web logic but bringing their own UI via Shadcn.

To get started, add the @firebase registry namespace to your components.json:

{
  // ...
  "registries": {
    "@firebase": "https://ui.firebase.com/{name}.json"
  }
}

Next install one of the registry components - this will automatically install the @invertase/firebaseui-react for you, alongwith adding any additionally required components.

npx shadcn@latest add @firebase/sign-up-auth-screen

Before consuming a component, ensure you have initalized your Firebase UI application:

import { initalizeUI } from '@invertase/firebaseui-core';
import { FirebaseUIProvider } from '@invertase/firebaseui-react';
import { SignInAuthScreen } from '@/components/sign-in-auth-screen';

const ui = initalizeUI(...);

function App() {
  return (
    <FirebaseUIProvider ui={ui}>
      <SignInAuthScreen />
    </FirebaseUIProvider>
  );
}

Building the registry

To build the registry, run the build script:

pnpm build

Note, the script run (build.ts) expects a domain, which replaces the {{ DOMAIN }} field within the registy-spec.json. This enables building the registry for different domains without updating the domain in the actual registry.json file Shadcn expects.