firebase · Ehesp · Oct 6, 2025 · Oct 6, 2025 · Oct 6, 2025 · Oct 6, 2025
diff --git a/eslint.config.ts b/eslint.config.ts
@@ -18,6 +18,7 @@ const config: any[] = [
     "**/releases/**",
     "packages/styles/dist.css",
     "packages/angular/**",
+    "packages/shadcn/public",
   ]),
   ...tseslint.configs.recommended,
   {
@@ -33,7 +34,7 @@ const config: any[] = [
   },
   {
     // React package specific rules
-    files: ["packages/react/src/**/*.{ts,tsx}"],
+    files: ["packages/react/src/**/*.{ts,tsx}", "packages/shadcn/src/**/*.{ts,tsx}"],
     plugins: { react: pluginReact, "react-hooks": pluginReactHooks },
     languageOptions: {
       parserOptions: {

diff --git a/examples/shadcn/.gitignore b/examples/shadcn/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/shadcn/README.md b/examples/shadcn/README.md
@@ -0,0 +1 @@
+TODO
diff --git a/examples/shadcn/components.json b/examples/shadcn/components.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {
+    "@dev": "http://localhost:5177/{name}.json",
+    "@firebase-ui": "https://ui.firebase.com/{name}.json"
+  }
+}
diff --git a/examples/shadcn/index.html b/examples/shadcn/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>shadcn</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/shadcn/package.json b/examples/shadcn/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "shadcn",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite"
+  },
+  "dependencies": {
+    "@firebase-ui/core": "workspace:*",
+    "@firebase-ui/react": "workspace:*",
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.544.0",
+    "react": "catalog:",
+    "react-dom": "catalog:",
+    "react-hook-form": "^7.64.0",
+    "tailwind-merge": "^3.3.1",
+    "zod": "catalog:"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "catalog:",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:",
+    "@types/react-dom": "catalog:",
+    "@vitejs/plugin-react": "catalog:",
+    "tailwindcss": "catalog:",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "catalog:",
+    "vite": "catalog:"
+  }
+}
diff --git a/examples/shadcn/public/vite.svg b/examples/shadcn/public/vite.svg
diff --git a/examples/shadcn/src/App.tsx b/examples/shadcn/src/App.tsx
@@ -0,0 +1,5 @@
+function App() {
+  return <>TODO</>;
+}
+
+export default App;
diff --git a/examples/shadcn/src/assets/react.svg b/examples/shadcn/src/assets/react.svg
diff --git a/examples/shadcn/src/components/policies.tsx b/examples/shadcn/src/components/policies.tsx
@@ -0,0 +1,50 @@
+import { cn } from "@/lib/utils";
+import { getTranslation } from "@firebase-ui/core";
+import { useUI, PolicyContext } from "@firebase-ui/react";
+import { cloneElement, useContext } from "react";
+
+export function Policies() {
+  const ui = useUI();
+  const policies = useContext(PolicyContext);
+
+  if (!policies) {
+    return null;
+  }
+
+  const { termsOfServiceUrl, privacyPolicyUrl, onNavigate } = policies;
+  const termsAndPrivacyText = getTranslation(ui, "messages", "termsAndPrivacy");
+  const parts = termsAndPrivacyText.split(/(\{tos\}|\{privacy\})/);
+
+  const className = cn("hover:underline font-semibold");
+  const Handler = onNavigate ? (
+    <button className={className} />
+  ) : (
+    <a target="_blank" rel="noopener noreferrer" className={className} />
+  );
+
+  return (
+    <div className="text-text-muted text-center text-xs">
+      {parts.map((part: string, index: number) => {
+        if (part === "{tos}") {
+          return cloneElement(Handler, {
+            key: index,
+            onClick: onNavigate ? () => onNavigate(termsOfServiceUrl) : undefined,
+            href: onNavigate ? undefined : termsOfServiceUrl,
+            children: getTranslation(ui, "labels", "termsOfService"),
+          });
+        }
+
+        if (part === "{privacy}") {
+          return cloneElement(Handler, {
+            key: index,
+            onClick: onNavigate ? () => onNavigate(privacyPolicyUrl) : undefined,
+            href: onNavigate ? undefined : privacyPolicyUrl,
+            children: getTranslation(ui, "labels", "privacyPolicy"),
+          });
+        }
+
+        return <span key={index}>{part}</span>;
+      })}
+    </div>
+  );
+}
diff --git a/examples/shadcn/src/components/sign-in-auth-form.tsx b/examples/shadcn/src/components/sign-in-auth-form.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import type { SignInAuthFormSchema } from "@firebase-ui/core";
+import { useSignInAuthFormAction, useSignInAuthFormSchema, useUI, SignInAuthFormProps } from "@firebase-ui/react";
+import { useForm } from "react-hook-form";
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import { FirebaseUIError, getTranslation } from "@firebase-ui/core";
+
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Policies } from "./policies";
+
+export type { SignInAuthFormProps };
+
+export function SignInAuthForm(props: SignInAuthFormProps) {
+  const ui = useUI();
+  const schema = useSignInAuthFormSchema();
+  const action = useSignInAuthFormAction();
+
+  const form = useForm<SignInAuthFormSchema>({
+    resolver: standardSchemaResolver(schema),
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
+
+  async function onSubmit(values: SignInAuthFormSchema) {
+    try {
+      const credential = await action(values);
+      props.onSignIn?.(credential);
+    } catch (error) {
+      const message = error instanceof FirebaseUIError ? error.message : String(error);
+      form.setError("root", { message });
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2">
+        <FormField
+          control={form.control}
+          name="email"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{getTranslation(ui, "labels", "emailAddress")}</FormLabel>
+              <FormControl>
+                <Input {...field} type="email" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          control={form.control}
+          name="password"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{getTranslation(ui, "labels", "password")}</FormLabel>
+              <FormControl>
+                <div className="flex items-center gap-2">
+                  <Input {...field} type="password" className="flex-grow" />
+                  {props.onForgotPasswordClick ? (
+                    <Button type="button" variant="secondary" onClick={props.onForgotPasswordClick}>
+                      {getTranslation(ui, "labels", "forgotPassword")}
+                    </Button>
+                  ) : null}
+                </div>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Policies />
+        <Button type="submit" disabled={ui.state !== "idle"}>
+          {getTranslation(ui, "labels", "signIn")}
+        </Button>
+        {form.formState.errors.root && <FormMessage>{form.formState.errors.root.message}</FormMessage>}
+        {props.onRegisterClick ? (
+          <>
+            <Button type="button" variant="secondary" onClick={props.onRegisterClick}>
+              {getTranslation(ui, "prompts", "noAccount")} {getTranslation(ui, "labels", "register")}
+            </Button>
+          </>
+        ) : null}
+      </form>
+    </Form>
+  );
+}
diff --git a/examples/shadcn/src/components/ui/button.tsx b/examples/shadcn/src/components/ui/button.tsx
@@ -0,0 +1,52 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return <Comp data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} />;
+}
+
+export { Button, buttonVariants };