({
+ resolver: standardSchemaResolver(schema),
+ defaultValues: {
+ phoneNumber: "",
+ },
+ });
+
+ async function onSubmit(values: PhoneAuthNumberFormSchema) {
+ 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 (
+
+
+ );
+}
diff --git a/examples/shadcn/src/components/policies.tsx b/examples/shadcn/src/components/policies.tsx
new file mode 100644
index 00000000..970cf37f
--- /dev/null
+++ 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 ? (
+
+ {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 {part} ;
+ })}
+
+ );
+}
diff --git a/examples/shadcn/src/components/sign-in-auth-form.tsx b/examples/shadcn/src/components/sign-in-auth-form.tsx
new file mode 100644
index 00000000..93c2bef6
--- /dev/null
+++ 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, type 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({
+ 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 (
+
+
+ );
+}
diff --git a/examples/shadcn/src/components/sign-in-auth-screen.tsx b/examples/shadcn/src/components/sign-in-auth-screen.tsx
new file mode 100644
index 00000000..0b6cf4ea
--- /dev/null
+++ b/examples/shadcn/src/components/sign-in-auth-screen.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { getTranslation } from "@firebase-ui/core";
+import { useUI, type SignInAuthScreenProps } from "@firebase-ui/react";
+
+import { SignInAuthForm } from "@/components/sign-in-auth-form";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+
+export type { SignInAuthScreenProps };
+
+export function SignInAuthScreen({ children, ...props }: SignInAuthScreenProps) {
+ const ui = useUI();
+
+ const titleText = getTranslation(ui, "labels", "signIn");
+ const subtitleText = getTranslation(ui, "prompts", "signInToAccount");
+
+ return (
+
+
+
+ {titleText}
+ {subtitleText}
+
+
+ {getTranslation(ui, "messages", "dividerOr")}
+ {children}
+
+ ) : null}
+
+
+
({
+ resolver: standardSchemaResolver(schema),
+ defaultValues: {
+ email: "",
+ password: "",
+ displayName: requireDisplayName ? "" : undefined,
+ },
+ });
+
+ async function onSubmit(values: SignUpAuthFormSchema) {
+ try {
+ const credential = await action(values);
+ props.onSignUp?.(credential);
+ } catch (error) {
+ const message = error instanceof FirebaseUIError ? error.message : String(error);
+ form.setError("root", { message });
+ }
+ }
+
+ return (
+
+
+ );
+}
diff --git a/examples/shadcn/src/components/sign-up-auth-screen.tsx b/examples/shadcn/src/components/sign-up-auth-screen.tsx
new file mode 100644
index 00000000..e12daf3a
--- /dev/null
+++ b/examples/shadcn/src/components/sign-up-auth-screen.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import { getTranslation } from "@firebase-ui/core";
+import { useUI, type SignUpAuthScreenProps } from "@firebase-ui/react";
+
+import { SignUpAuthForm } from "@/components/sign-up-auth-form";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+
+export type { SignUpAuthScreenProps };
+
+export function SignUpAuthScreen({ children, ...props }: SignUpAuthScreenProps) {
+ const ui = useUI();
+
+ const titleText = getTranslation(ui, "labels", "register");
+ const subtitleText = getTranslation(ui, "prompts", "enterDetailsToCreate");
+
+ return (
+
+
+
+ {titleText}
+ {subtitleText}
+
+
+ {getTranslation(ui, "messages", "dividerOr")}
+ {children}
+
+ ) : null}
+
+
+
) {
+ return ) {
+ return (
+ ) {
+ return (
+
+ svg]:rotate-180",
+ className
+ )}
+ {...props}
+ >
+ {children}
+
+
+ );
+}
+
+function AccordionContent({ className, children, ...props }: React.ComponentProps) {
+ return (
+
+ {children}
+
+ );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/examples/shadcn/src/components/ui/alert-dialog.tsx b/examples/shadcn/src/components/ui/alert-dialog.tsx
new file mode 100644
index 00000000..271c9cff
--- /dev/null
+++ b/examples/shadcn/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,111 @@
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+function AlertDialog({ ...props }: React.ComponentProps) {
+ return ) {
+ return ) {
+ return ) {
+ return (
+ ) {
+ return (
+
+
+ );
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function AlertDialogTitle({ className, ...props }: React.ComponentProps) {
+ return (
+ ) {
+ return (
+ ) {
+ return ) {
+ return ) {
+ return
;
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+export { Alert, AlertTitle, AlertDescription };
diff --git a/examples/shadcn/src/components/ui/aspect-ratio.tsx b/examples/shadcn/src/components/ui/aspect-ratio.tsx
new file mode 100644
index 00000000..59d6b357
--- /dev/null
+++ b/examples/shadcn/src/components/ui/aspect-ratio.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+function AspectRatio({ ...props }: React.ComponentProps) {
+ return ) {
+ return (
+ ) {
+ return (
+ ) {
+ return (
+ & { asChild?: boolean }) {
+ const Comp = asChild ? Slot : "span";
+
+ return svg]:size-3.5", className)}
+ {...props}
+ >
+ {children ??
+ );
+}
+
+function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) {
+ return (
+
+ More
+
+ );
+}
+
+export {
+ Breadcrumb,
+ BreadcrumbList,
+ BreadcrumbItem,
+ BreadcrumbLink,
+ BreadcrumbPage,
+ BreadcrumbSeparator,
+ BreadcrumbEllipsis,
+};
diff --git a/examples/shadcn/src/components/ui/button-group.tsx b/examples/shadcn/src/components/ui/button-group.tsx
new file mode 100644
index 00000000..0621505f
--- /dev/null
+++ b/examples/shadcn/src/components/ui/button-group.tsx
@@ -0,0 +1,75 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { Separator } from "@/components/ui/separator";
+
+const buttonGroupVariants = cva(
+ "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+ {
+ variants: {
+ orientation: {
+ horizontal:
+ "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+ vertical:
+ "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+ },
+ },
+ defaultVariants: {
+ orientation: "horizontal",
+ },
+ }
+);
+
+function ButtonGroup({
+ className,
+ orientation,
+ ...props
+}: React.ComponentProps<"div"> & VariantProps) {
+ return (
+
+ );
+}
+
+function ButtonGroupText({
+ className,
+ asChild = false,
+ ...props
+}: React.ComponentProps<"div"> & {
+ asChild?: boolean;
+}) {
+ const Comp = asChild ? Slot : "div";
+
+ return (
+ ) {
+ return (
+ & {
+ asChild?: boolean;
+ }) {
+ const Comp = asChild ? Slot : "button";
+
+ return & {
+ buttonVariant?: React.ComponentProps["variant"];
+}) {
+ const defaultClassNames = getDefaultClassNames();
+
+ return (
+ svg]:rotate-180`,
+ String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+ className
+ )}
+ captionLayout={captionLayout}
+ formatters={{
+ formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+ ...formatters,
+ }}
+ classNames={{
+ root: cn("w-fit", defaultClassNames.root),
+ months: cn("flex gap-4 flex-col md:flex-row relative", defaultClassNames.months),
+ month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+ nav: cn("flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between", defaultClassNames.nav),
+ button_previous: cn(
+ buttonVariants({ variant: buttonVariant }),
+ "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+ defaultClassNames.button_previous
+ ),
+ button_next: cn(
+ buttonVariants({ variant: buttonVariant }),
+ "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+ defaultClassNames.button_next
+ ),
+ month_caption: cn(
+ "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+ defaultClassNames.month_caption
+ ),
+ dropdowns: cn(
+ "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+ defaultClassNames.dropdowns
+ ),
+ dropdown_root: cn(
+ "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+ defaultClassNames.dropdown_root
+ ),
+ dropdown: cn("absolute bg-popover inset-0 opacity-0", defaultClassNames.dropdown),
+ caption_label: cn(
+ "select-none font-medium",
+ captionLayout === "label"
+ ? "text-sm"
+ : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+ defaultClassNames.caption_label
+ ),
+ table: "w-full border-collapse",
+ weekdays: cn("flex", defaultClassNames.weekdays),
+ weekday: cn(
+ "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+ defaultClassNames.weekday
+ ),
+ week: cn("flex w-full mt-2", defaultClassNames.week),
+ week_number_header: cn("select-none w-(--cell-size)", defaultClassNames.week_number_header),
+ week_number: cn("text-[0.8rem] select-none text-muted-foreground", defaultClassNames.week_number),
+ day: cn(
+ "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+ defaultClassNames.day
+ ),
+ range_start: cn("rounded-l-md bg-accent", defaultClassNames.range_start),
+ range_middle: cn("rounded-none", defaultClassNames.range_middle),
+ range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+ today: cn(
+ "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+ defaultClassNames.today
+ ),
+ outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
+ disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+ hidden: cn("invisible", defaultClassNames.hidden),
+ ...classNames,
+ }}
+ components={{
+ Root: ({ className, rootRef, ...props }) => {
+ return
;
+ },
+ Chevron: ({ className, orientation, ...props }) => {
+ if (orientation === "left") {
+ return
+ {children}
+
+ );
+ },
+ ...components,
+ }}
+ {...props}
+ />
+ );
+}
+
+function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps) {
+ const defaultClassNames = getDefaultClassNames();
+
+ const ref = React.useRef(null);
+ React.useEffect(() => {
+ if (modifiers.focused) ref.current?.focus();
+ }, [modifiers.focused]);
+
+ return (
+ span]:text-xs [&>span]:opacity-70",
+ defaultClassNames.day,
+ className
+ )}
+ {...props}
+ />
+ );
+}
+
+export { Calendar, CalendarDayButton };
diff --git a/examples/shadcn/src/components/ui/card.tsx b/examples/shadcn/src/components/ui/card.tsx
new file mode 100644
index 00000000..9939da87
--- /dev/null
+++ b/examples/shadcn/src/components/ui/card.tsx
@@ -0,0 +1,56 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+ return
;
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+ return
;
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+ return
;
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
diff --git a/examples/shadcn/src/components/ui/carousel.tsx b/examples/shadcn/src/components/ui/carousel.tsx
new file mode 100644
index 00000000..823f83a3
--- /dev/null
+++ b/examples/shadcn/src/components/ui/carousel.tsx
@@ -0,0 +1,214 @@
+import * as React from "react";
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+ opts?: CarouselOptions;
+ plugins?: CarouselPlugin;
+ orientation?: "horizontal" | "vertical";
+ setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+ carouselRef: ReturnType[0];
+ api: ReturnType[1];
+ scrollPrev: () => void;
+ scrollNext: () => void;
+ canScrollPrev: boolean;
+ canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext(null);
+
+function useCarousel() {
+ const context = React.useContext(CarouselContext);
+
+ if (!context) {
+ throw new Error("useCarousel must be used within a ) => {
+ if (event.key === "ArrowLeft") {
+ event.preventDefault();
+ scrollPrev();
+ } else if (event.key === "ArrowRight") {
+ event.preventDefault();
+ scrollNext();
+ }
+ },
+ [scrollPrev, scrollNext]
+ );
+
+ React.useEffect(() => {
+ if (!api || !setApi) return;
+ setApi(api);
+ }, [api, setApi]);
+
+ React.useEffect(() => {
+ if (!api) return;
+ onSelect(api);
+ api.on("reInit", onSelect);
+ api.on("select", onSelect);
+
+ return () => {
+ api?.off("select", onSelect);
+ };
+ }, [api, onSelect]);
+
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+ const { carouselRef, orientation } = useCarousel();
+
+ return (
+
+ );
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+ const { orientation } = useCarousel();
+
+ return (
+
+ );
+}
+
+function CarouselPrevious({
+ className,
+ variant = "outline",
+ size = "icon",
+ ...props
+}: React.ComponentProps) {
+ const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+ return (
+
+ Previous slide
+
+ );
+}
+
+function CarouselNext({
+ className,
+ variant = "outline",
+ size = "icon",
+ ...props
+}: React.ComponentProps) {
+ const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+ return (
+
+ Next slide
+
+ );
+}
+
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };
diff --git a/examples/shadcn/src/components/ui/chart.tsx b/examples/shadcn/src/components/ui/chart.tsx
new file mode 100644
index 00000000..5547ef14
--- /dev/null
+++ b/examples/shadcn/src/components/ui/chart.tsx
@@ -0,0 +1,298 @@
+"use client";
+
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "@/lib/utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+ [k in string]: {
+ label?: React.ReactNode;
+ icon?: React.ComponentType;
+ } & ({ color?: string; theme?: never } | { color?: never; theme: Record });
+};
+
+type ChartContextProps = {
+ config: ChartConfig;
+};
+
+const ChartContext = React.createContext(null);
+
+function useChart() {
+ const context = React.useContext(ChartContext);
+
+ if (!context) {
+ throw new Error("useChart must be used within a ["children"];
+}) {
+ const uniqueId = React.useId();
+ const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+ return (
+
+
+ {children}
+
+
+ );
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+ const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
+
+ if (!colorConfig.length) {
+ return null;
+ }
+
+ return (
+