docs: last changes

docs/app/changelogs/_components/changelog-layout.tsx

@@ -1,9 +1,9 @@
 import Link from "next/link";
-
-import { Button } from "@/components/ui/button";
 import { useId } from "react";
 
 import clsx from "clsx";
+import { Logo } from "@/components/logo";
+import { DiscordLogoIcon } from "@radix-ui/react-icons";
 
 function BookIcon(props: React.ComponentPropsWithoutRef<"svg">) {
 	return (
@@ -44,18 +44,14 @@ function XIcon(props: React.ComponentPropsWithoutRef<"svg">) {
 export function Intro() {
 	return (
 		<>
-			<div className="">
-				<Link href="/">
-					{/* <Logo className="inline-block h-8 w-auto" /> */}
-				</Link>
-			</div>
 			<h1 className="mt-14  font-sans  font-semibold tracking-tighter text-5xl">
 				All of the changes made will be{" "}
 				<span className="">available here.</span>
 			</h1>
 			<p className="mt-4 text-sm text-gray-600 dark:text-gray-300">
-				Better Auth is advanced authentication library for typescript packed by
-				customizable and extendible plugin ecosystem
+				Better Auth is comprehensive authentication library for TypeScript that
+				provides a wide range of features to make authentication easier and more
+				secure.
 			</p>
 			<hr className="h-px bg-gray-300 mt-5" />
 			<div className="mt-8 flex flex-wrap text-gray-600 dark:text-gray-300  justify-center gap-x-1 gap-y-3 sm:gap-x-2 lg:justify-start">
@@ -74,11 +70,11 @@ export function Intro() {
 					GitHub
 				</IconLink>
 				<IconLink
-					href="/feed.xml"
-					icon={FeedIcon}
+					href="https://discord.gg/GYC3W7tZzb"
+					icon={DiscordLogoIcon}
 					className="flex-none text-gray-600 dark:text-gray-300"
 				>
-					RSS
+					Community
 				</IconLink>
 			</div>
 		</>

docs/app/changelogs/_logs/2024-09-28.tsx

@@ -1,8 +1,16 @@
 import { AnimatePresence } from "@/components/ui/fade-in";
 
-const listOfFeatures = ["The first better-auth public beta release"];
-
-const bugFixes = [""];
+const listOfFeatures = [
+	"Multiple framework support",
+	"Email & Password Authentication",
+	"OAuth Authentication",
+	"Account & Session Management",
+	"Rate Limiting",
+	"Multiple Plugins",
+	"Migration CLI",
+	"Multiple Plugins",
+	"And more...",
+];
 
 const ChangelogOne = () => {
 	return (
@@ -12,10 +20,7 @@ const ChangelogOne = () => {
 					<h2 className="text-2xl font-bold tracking-tighter">
 						Public Beta Release
 					</h2>
-					<p>
-						The first public beta release of better-auth is now available. This
-						release includes a lot of new features and improvements.
-					</p>
+					<p>The first public beta release of better-auth is now available!</p>
 				</div>
 				<p className="text-gray-600 dark:text-gray-300 text-[0.855rem]"></p>
 				<div className="flex flex-col gap-2">

docs/app/changelogs/layout.tsx

@@ -32,7 +32,7 @@ function Glow() {
 	let id = useId();
 
 	return (
-		<div className="absolute  inset-0 -z-10 overflow-hidden bg-gradient-to-tr from-transparent via-stone-950/5 to-transparent/10 lg:right-[calc(max(2rem,50%-38rem)+40rem)] lg:min-w-[32rem]">
+		<div className="absolute  inset-0 -z-10 overflow-hidden bg-gradient-to-tr from-transparent dark:via-stone-950/5 via-stone-100/30 to-stone-200/20 dark:to-transparent/10 lg:right-[calc(max(2rem,50%-38rem)+40rem)] lg:min-w-[32rem]">
 			<svg
 				className="absolute -bottom-48 left-[-40%] h-[80rem] w-[180%] lg:-right-40 lg:bottom-auto lg:left-auto lg:top-[-40%] lg:h-[180%] lg:w-[80rem]"
 				aria-hidden="true"
@@ -62,7 +62,7 @@ function Glow() {
 					className="lg:hidden"
 				/>
 			</svg>
-			<div className="absolute inset-x-0 bottom-0 right-0 h-px bg-white/5 mix-blend-overlay lg:left-auto lg:top-0 lg:h-auto lg:w-px" />
+			<div className="absolute inset-x-0 bottom-0 right-0 h-px dark:bg-white/5 mix-blend-overlay lg:left-auto lg:top-0 lg:h-auto lg:w-px" />
 		</div>
 	);
 }

docs/app/changelogs/page.tsx

@@ -10,7 +10,7 @@ const ChangelogPage = () => {
 						<div className="relative my-5 h-auto">
 							<div className="sticky top-2 flex-1 h-full">
 								<FormattedDate
-									className="absolute md:-left-32 left-0 text-sm -top-8 md:top-0 font-light"
+									className="absolute md:-left-36 left-0 text-sm -top-8 md:top-0 font-light"
 									date={log.date}
 								/>
 							</div>

docs/app/docs/[[...slug]]/page.tsx

@@ -50,7 +50,7 @@ export async function generateStaticParams() {
 export function generateMetadata({ params }: { params: { slug?: string[] } }) {
 	const page = getPage(params.slug);
 	if (page == null) notFound();
-	const baseUrl = process.env.NEXT_APP_PUBLIC_URL || process.env.VERCEL_URL;
+	const baseUrl = process.env.NEXT_PUBLIC_URL || process.env.VERCEL_URL;
 	const url = new URL(`${baseUrl}/api/og`);
 	const { title, description } = page.data;
 	const pageSlug = page.file.path;

docs/app/layout.tsx

@@ -8,12 +8,14 @@ import { GeistSans } from "geist/font/sans";
 import { baseUrl, createMetadata } from "@/lib/metadata";
 import { Banner } from "fumadocs-ui/components/banner";
 import Link from "next/link";
+import Loglib from "@loglib/tracker/react";
+
 export const metadata = createMetadata({
 	title: {
 		template: "%s | Better Auth",
 		default: "Better Auth",
 	},
-	description: "The authentication library for typescript",
+	description: "The most comprehensive authentication library for TypeScript.",
 	metadataBase: baseUrl,
 });
 
@@ -47,6 +49,12 @@ export default function Layout({ children }: { children: ReactNode }) {
 						{children}
 					</NavbarProvider>
 				</RootProvider>
+				<Loglib
+					config={{
+						id: "better-auth",
+						consent: "granted",
+					}}
+				/>
 			</body>
 		</html>
 	);

docs/components/fork-button.tsx

@@ -0,0 +1,23 @@
+import Link from "next/link";
+import { Button } from "./ui/button";
+import { GitHubLogoIcon } from "@radix-ui/react-icons";
+import { ExternalLink } from "lucide-react";
+
+export function ForkButton({ url }: { url: string }) {
+	return (
+		<div className="flex items-center gap-2 my-2">
+			<Link href={`https://codesandbox.io/p/github/${url}`} target="_blank">
+				<Button className="gap-2" variant="outline" size="sm">
+					<ExternalLink size={12} />
+					Fork
+				</Button>
+			</Link>
+			<Link href={`https://github.com/${url}`} target="_blank">
+				<Button className="gap-2" variant="secondary" size="sm">
+					<GitHubLogoIcon />
+					View on GitHub
+				</Button>
+			</Link>
+		</div>
+	);
+}

docs/components/landing/hero.tsx

@@ -109,7 +109,7 @@ export default function Hero() {
 							</div>
 
 							<p className="mt-3 md:text-2xl tracking-tight dark:text-zinc-300 text-zinc-800">
-								The most comprehensive authentication library for typescript.
+								The most comprehensive authentication library for TypeScript.
 							</p>
 							{
 								<>

docs/components/nav-bar.tsx

@@ -20,7 +20,6 @@ export const Navbar = () => {
 						<Logo />
 						<p>BETTER-AUTH.</p>
 					</div>
-					{/* <PulicBetaBadge /> */}
 				</div>
 			</Link>
 			<div className="md:col-span-10 flex items-center justify-end">

docs/components/side-bar.tsx

@@ -19,6 +19,7 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "./ui/select";
+import { loglib } from "@loglib/tracker";
 
 export default function ArticleLayout() {
 	const { setOpenSearch } = useSearchContext();
@@ -47,6 +48,7 @@ export default function ArticleLayout() {
 				defaultValue="docs"
 				value={group}
 				onValueChange={(val) => {
+					loglib.track("sidebar-group-change", { group: val });
 					setGroup(val);
 					if (val === "docs") {
 						router.push("/docs");
@@ -80,7 +82,7 @@ export default function ArticleLayout() {
 							Docs
 						</div>
 						<p className="text-xs text-muted-foreground">
-							getting started, concepts, and plugins
+							get started, concepts, and plugins
 						</p>
 					</SelectItem>
 					<SelectItem value="examples">
@@ -112,7 +114,7 @@ export default function ArticleLayout() {
 							</svg>
 							Examples
 						</div>
-						<p className="text-xs">examples and use cases</p>
+						<p className="text-xs">examples and guides</p>
 					</SelectItem>
 				</SelectContent>
 			</Select>
@@ -120,6 +122,7 @@ export default function ArticleLayout() {
 				className="flex items-center gap-2 p-2 px-4 border-b bg-gradient-to-br dark:from-stone-900 dark:to-stone-950/80"
 				onClick={() => {
 					setOpenSearch(true);
+					loglib.track("sidebar-search-open");
 				}}
 			>
 				<Search className="h-4 w-4" />
@@ -144,7 +147,15 @@ export default function ArticleLayout() {
 						<AccordionContent className=" space-y-1  p-0">
 							<FadeInStagger faster>
 								{item.list.map((listItem, j) => (
-									<FadeIn key={listItem.title}>
+									<FadeIn
+										key={listItem.title}
+										onClick={() => {
+											loglib.track("sidebar-link-click", {
+												title: listItem.title,
+												href: listItem.href,
+											});
+										}}
+									>
 										<Suspense fallback={<>Loading...</>}>
 											{listItem.group ? (
 												<div className="flex flex-row gap-2 items-center mx-5 my-1  ">

docs/components/sidebar-content.tsx

@@ -628,62 +628,52 @@ export const contents: Content[] = [
 
 export const examples: Content[] = [
 	{
-		title: "Next JS",
+		title: "Examples",
 		href: "/docs/examples/next",
-		Icon: Icons.nextJS,
-		list: [
-			{
-				title: "Full Demo",
-				href: "/docs/examples/next-js",
-				icon: Icons.book,
-			},
-		],
-	},
-	{
-		title: "Astro",
-		href: "/docs/examples/astro",
-		Icon: Icons.astro,
+		Icon: () => (
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="1.4em"
+				height="1.4em"
+				viewBox="0 0 24 24"
+			>
+				<path
+					fill="currentColor"
+					d="M2 6.95c0-.883 0-1.324.07-1.692A4 4 0 0 1 5.257 2.07C5.626 2 6.068 2 6.95 2c.386 0 .58 0 .766.017a4 4 0 0 1 2.18.904c.144.119.28.255.554.529L11 4c.816.816 1.224 1.224 1.712 1.495a4 4 0 0 0 .848.352C14.098 6 14.675 6 15.828 6h.374c2.632 0 3.949 0 4.804.77q.119.105.224.224c.77.855.77 2.172.77 4.804V14c0 3.771 0 5.657-1.172 6.828S17.771 22 14 22h-4c-3.771 0-5.657 0-6.828-1.172S2 17.771 2 14z"
+					opacity=".5"
+				></path>
+				<path
+					fill="currentColor"
+					d="M20 6.238c0-.298-.005-.475-.025-.63a3 3 0 0 0-2.583-2.582C17.197 3 16.965 3 16.5 3H9.988c.116.104.247.234.462.45L11 4c.816.816 1.224 1.224 1.712 1.495a4 4 0 0 0 .849.352C14.098 6 14.675 6 15.829 6h.373c1.78 0 2.957 0 3.798.238"
+				></path>
+				<path
+					fill="currentColor"
+					fillRule="evenodd"
+					d="M12.25 10a.75.75 0 0 1 .75-.75h5a.75.75 0 0 1 0 1.5h-5a.75.75 0 0 1-.75-.75"
+					clipRule="evenodd"
+				></path>
+			</svg>
+		),
 		list: [
 			{
 				title: "Astro + SolidJs",
 				href: "/docs/examples/astro",
-				icon: Icons.book,
+				icon: Icons.astro,
 			},
-		],
+			{
+				title: "Next JS",
+				href: "/docs/examples/next-js",
+				icon: Icons.nextJS,
 			},
 			{
 				title: "Nuxt",
 				href: "/docs/examples/nuxt",
-		Icon: Icons.nuxt,
-		list: [
-			{
-				title: "Basic Auth",
-				href: "/docs/examples/nuxt-basic-auth",
-				icon: Icons.book,
-			},
-		],
+				icon: Icons.nuxt,
 			},
 			{
 				title: "Svelte Kit",
 				href: "/docs/examples/svelte-kit",
-		Icon: Icons.svelteKit,
-		list: [
-			{
-				title: "Basic Auth",
-				href: "/docs/examples/svelte-kit-basic-auth",
-				icon: Icons.book,
-			},
-		],
-	},
-	{
-		title: "Solid Start",
-		href: "/docs/examples/solid-start",
-		Icon: Icons.solidStart,
-		list: [
-			{
-				title: "Github OAuth",
-				icon: Icons.book,
-				href: "/docs/examples/solid-start/github-oauth",
+				icon: Icons.svelteKit,
 			},
 		],
 	},

docs/content/docs/examples/astro.mdx

@@ -3,14 +3,44 @@ title: Astro example
 descirption: Better auth astro example
 ---
 
-<iframe src="https://stackblitz.com/github/Bekacru/better-fetch/tree/main/dev?title=BetterAuthNextJS&terminalHeight"
-     style={
-        {
+This is an example of how to use Better Auth with Astro. It uses Solid for buildng the components.
+
+
+**Implements the following features:**
+Email & Password . Social Sign-in with Google . Passkeys . Email Verification . Password Reset . Two Factor Authentication . Profile Update . Session Management
+
+
+<ForkButton url="better-auth/better-auth/examples/astro-example"  />
+
+<iframe src="https://codesandbox.io/p/github/better-auth/better-auth/tree/main/examples/astro-example?codemirror=1&fontsize=14&hidenavigation=1&runonclick=1&hidedevtools=1"
+   style={{
       width: "100%",
-          height: "600px",
+      height: "500px",
       border: 0,
       borderRadius: "4px",
       overflow: "hidden"
-        }
-     }>
+   }}
+   title="Better Auth Astro+Solid Example"
+   allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   >
 </iframe>
+
+
+## How to run
+
+1. Clone the code sandbox (or the repo) and open it in your code editor
+2. Provide .env file with the following variables
+   ```txt
+   GOOGLE_CLIENT_ID=
+   GOOGLE_CLIENT_SECRET=
+   BETTER_AUTH_SECRET=
+   ```
+   //if you don't have these, you can get them from the google developer console. If you don't want to use google sign-in, you can remove the google config from the `auth.ts` file.
+
+3. Run the following commands
+   ```bash
+   pnpm install
+   pnpm run dev
+   ```
+4. Open the browser and navigate to `http://localhost:3000`

docs/content/docs/examples/next-js.mdx

@@ -3,14 +3,37 @@ title: Next js example
 descirption: Better auth next js example
 ---
 
-<iframe src="https://stackblitz.com/github/Bekacru/better-fetch/tree/main/dev?title=BetterAuthNextJS"
-     style={
-        {
+This is an example of how to use Better Auth with Next. 
+
+**Implements the following features:**
+Email & Password . Social Sign-in . Passkeys . Email Verification . Password Reset . Two Factor Authentication . Profile Update . Session Management . Oragnization, Members and Roles
+
+See [Demo](https://demo.better-auth.com)
+
+<ForkButton url="better-auth/better-auth/examples/nextjs-example"  />
+
+<iframe src="https://codesandbox.io/p/github/better-auth/better-auth/tree/main/examples/nextjs-example?codemirror=1&fontsize=14&hidenavigation=1&runonclick=1&hidedevtools=1"
+   style={{
       width: "100%",
       height: "500px",
       border: 0,
       borderRadius: "4px",
       overflow: "hidden"
-        }
-     }>
+   }}
+   title="Better Auth Next Js Example"
+   allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   >
 </iframe>
+
+
+## How to run
+
+1. Clone the code sandbox (or the repo) and open it in your code editor
+2. Move .env.example to .env and provide necessary variables
+3. Run the following commands
+   ```bash
+   pnpm install
+   pnpm dev
+   ```
+4. Open the browser and navigate to `http://localhost:3000`

docs/content/docs/examples/nuxt.mdx

@@ -0,0 +1,38 @@
+---
+title: Nuxt js example
+descirption: better auth nuxt js example
+---
+
+This is an example of how to use Better Auth with Nuxt
+
+**Implements the following features:**
+Email & Password . Social Sign-in with Google 
+
+<ForkButton url="better-auth/better-auth/examples/nux-example"  />
+
+
+<iframe src="https://codesandbox.io/p/github/better-auth/better-auth/tree/main/examples/nuxt-example?codemirror=1&fontsize=14&hidenavigation=1&runonclick=1&hidedevtools=1"
+   style={{
+      width: "100%",
+      height: "500px",
+      border: 0,
+      borderRadius: "4px",
+      overflow: "hidden"
+   }}
+   title="Better Auth Nuxt Example"
+   allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   >
+</iframe>
+
+
+## How to run
+
+1. Clone the code sandbox (or the repo) and open it in your code editor
+2. Move .env.example to .env and provide necessary variables
+3. Run the following commands
+   ```bash
+   pnpm install
+   pnpm dev
+   ```
+4. Open the browser and navigate to `http://localhost:3000`

docs/content/docs/examples/svelte-kit.mdx

@@ -0,0 +1,38 @@
+---
+title: Svelte Kit
+descirption: Better auth Svelte Kit example
+---
+
+This is an example of how to use Better Auth with Svelte Kit.
+
+**Implements the following features:**
+
+<u>Email & Password</u> . <u>Social Sign-in with Google</u> . Passkeys . Email Verification . Password Reset . Two Factor Authentication . Profile Update . Session Management
+
+<ForkButton url="better-auth/better-auth/examples/svlete-kit-example"  />
+
+<iframe src="https://codesandbox.io/p/github/better-auth/better-auth/tree/main/examples/svlte-kit-example?codemirror=1&fontsize=14&hidenavigation=1&runonclick=1&hidedevtools=1"
+   style={{
+      width: "100%",
+      height: "500px",
+      border: 0,
+      borderRadius: "4px",
+      overflow: "hidden"
+   }}
+   title="Better Auth Svlete Kit Example"
+   allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   >
+</iframe>
+
+## How to run
+
+1. Clone the code sandbox (or the repo) and open it in your code editor
+2. Move .env.example to .env and provide necessary variables
+3. Run the following commands
+   ```bash
+   pnpm install
+   pnpm dev
+   ```
+4. Open the browser and navigate to `http://localhost:3000`
+

docs/mdx-components.tsx

@@ -9,6 +9,7 @@ import { AnimatePresence } from "./components/ui/fade-in";
 import { Popup, PopupContent, PopupTrigger } from "fumadocs-ui/twoslash/popup";
 import { TypeTable } from "fumadocs-ui/components/type-table";
 import { Features } from "./components/blocks/features";
+import { ForkButton } from "./components/fork-button";
 
 export function useMDXComponents(components: MDXComponents): MDXComponents {
 	return {
@@ -31,6 +32,7 @@ export function useMDXComponents(components: MDXComponents): MDXComponents {
 		AnimatePresence,
 		TypeTable,
 		Features,
+		ForkButton,
 		iframe: (props) => <iframe {...props} className="w-full h-[500px]" />,
 	};
 }

docs/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@codesandbox/sandpack-react": "^2.19.8",
     "@hookform/resolvers": "^3.9.0",
+    "@loglib/tracker": "^0.8.0",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-alert-dialog": "^1.1.1",
     "@radix-ui/react-aspect-ratio": "^1.1.0",

examples/nextjs-example/.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for commiting if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

examples/nextjs-example/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

examples/nextjs-example/app/(auth)/forget-password/page.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { client } from "@/lib/auth-client";
+import { AlertCircle, ArrowLeft, CheckCircle2 } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+
+export default function Component() {
+	const [email, setEmail] = useState("");
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [isSubmitted, setIsSubmitted] = useState(false);
+	const [error, setError] = useState("");
+
+	const handleSubmit = async (e: React.FormEvent) => {
+		e.preventDefault();
+		setIsSubmitting(true);
+		setError("");
+
+		// Simulate API call
+		try {
+			const res = await client.forgetPassword({
+				email,
+				redirectTo: "/reset-password",
+			});
+			// If the API call is successful, set isSubmitted to true
+			setIsSubmitted(true);
+		} catch (err) {
+			setError("An error occurred. Please try again.");
+		} finally {
+			setIsSubmitting(false);
+		}
+	};
+
+	if (isSubmitted) {
+		return (
+			<main className="flex flex-col items-center justify-center min-h-[calc(100vh-10rem)]">
+				<Card className="w-[350px]">
+					<CardHeader>
+						<CardTitle>Check your email</CardTitle>
+						<CardDescription>
+							We've sent a password reset link to your email.
+						</CardDescription>
+					</CardHeader>
+					<CardContent>
+						<Alert>
+							<CheckCircle2 className="h-4 w-4" />
+							<AlertDescription>
+								If you don't see the email, check your spam folder.
+							</AlertDescription>
+						</Alert>
+					</CardContent>
+					<CardFooter>
+						<Button
+							variant="outline"
+							className="w-full"
+							onClick={() => setIsSubmitted(false)}
+						>
+							<ArrowLeft className="mr-2 h-4 w-4" /> Back to reset password
+						</Button>
+					</CardFooter>
+				</Card>
+			</main>
+		);
+	}
+
+	return (
+		<main className="flex flex-col items-center justify-center min-h-[calc(100vh-10rem)]">
+			{/* Radial gradient for the container to give a faded look */}
+			<div className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
+			<Card className="w-[350px]">
+				<CardHeader>
+					<CardTitle>Forgot password</CardTitle>
+					<CardDescription>
+						Enter your email to reset your password
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<form onSubmit={handleSubmit}>
+						<div className="grid w-full items-center gap-4">
+							<div className="flex flex-col space-y-1.5">
+								<Label htmlFor="email">Email</Label>
+								<Input
+									id="email"
+									type="email"
+									placeholder="Enter your email"
+									value={email}
+									onChange={(e) => setEmail(e.target.value)}
+									required
+								/>
+							</div>
+						</div>
+						{error && (
+							<Alert variant="destructive" className="mt-4">
+								<AlertCircle className="h-4 w-4" />
+								<AlertDescription>{error}</AlertDescription>
+							</Alert>
+						)}
+						<Button
+							className="w-full mt-4"
+							type="submit"
+							disabled={isSubmitting}
+						>
+							{isSubmitting ? "Sending..." : "Send reset link"}
+						</Button>
+					</form>
+				</CardContent>
+				<CardFooter className="flex justify-center">
+					<Link href="/sign-in">
+						<Button variant="link" className="px-0">
+							Back to sign in
+						</Button>
+					</Link>
+				</CardFooter>
+			</Card>
+		</main>
+	);
+}

examples/nextjs-example/app/(auth)/reset-password/page.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { PasswordInput } from "@/components/ui/password-input";
+import { client } from "@/lib/auth-client";
+import { AlertCircle } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { toast } from "sonner";
+
+export default function ResetPassword({
+	params,
+}: {
+	params: { token: string };
+}) {
+	const [password, setPassword] = useState("");
+	const [confirmPassword, setConfirmPassword] = useState("");
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [error, setError] = useState("");
+	const token = params.token;
+	const router = useRouter();
+	async function handleSubmit(e: React.FormEvent) {
+		e.preventDefault();
+		setIsSubmitting(true);
+		setError("");
+		const res = await client.resetPassword({
+			newPassword: password,
+		});
+		if (res.error) {
+			toast.error(res.error.message);
+		}
+		setIsSubmitting(false);
+		router.push("/sign-in");
+	}
+	return (
+		<div className="flex flex-col items-center justify-center min-h-[calc(100vh-10rem)]">
+			<Card className="w-[350px]">
+				<CardHeader>
+					<CardTitle>Reset password</CardTitle>
+					<CardDescription>
+						Enter new password and confirm it to reset your password
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<form onSubmit={handleSubmit}>
+						<div className="grid w-full items-center gap-2">
+							<div className="flex flex-col space-y-1.5">
+								<Label htmlFor="email">New password</Label>
+								<PasswordInput
+									id="password"
+									value={password}
+									onChange={(e) => setPassword(e.target.value)}
+									autoComplete="password"
+									placeholder="Password"
+								/>
+							</div>
+							<div className="flex flex-col space-y-1.5">
+								<Label htmlFor="email">Confirm password</Label>
+								<PasswordInput
+									id="password"
+									value={confirmPassword}
+									onChange={(e) => setConfirmPassword(e.target.value)}
+									autoComplete="password"
+									placeholder="Password"
+								/>
+							</div>
+						</div>
+						{error && (
+							<Alert variant="destructive" className="mt-4">
+								<AlertCircle className="h-4 w-4" />
+								<AlertDescription>{error}</AlertDescription>
+							</Alert>
+						)}
+						<Button
+							className="w-full mt-4"
+							type="submit"
+							disabled={isSubmitting}
+						>
+							{isSubmitting ? "Resetting..." : "Reset password"}
+						</Button>
+					</form>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}

examples/nextjs-example/app/(auth)/sign-in/page.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import SignIn from "@/components/sign-in";
+import { SignUp } from "@/components/sign-up";
+import { Tabs } from "@/components/ui/tabs2";
+
+export default function Page() {
+	return (
+		<div className="w-full">
+			<div className="flex items-center flex-col justify-center w-full md:py-10">
+				<div className="md:w-[400px]">
+					<Tabs
+						tabs={[
+							{
+								title: "Sign In",
+								value: "sign-in",
+								content: <SignIn />,
+							},
+							{
+								title: "Sign Up",
+								value: "sign-up",
+								content: <SignUp />,
+							},
+						]}
+					/>
+				</div>
+			</div>
+		</div>
+	);
+}

examples/nextjs-example/app/(auth)/two-factor/otp/page.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { client } from "@/lib/auth-client";
+import { AlertCircle, CheckCircle2, Mail } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+
+export default function Component() {
+	const [otp, setOtp] = useState("");
+	const [isOtpSent, setIsOtpSent] = useState(false);
+	const [message, setMessage] = useState("");
+	const [isError, setIsError] = useState(false);
+	const [isValidated, setIsValidated] = useState(false);
+	const [OTP, setOTP] = useState("");
+
+	// In a real app, this email would come from your authentication context
+	const userEmail = "user@example.com";
+
+	const requestOTP = async () => {
+		const res = await client.twoFactor.sendOtp({
+			fetchOptions: {
+				body: {
+					returnOTP: true,
+				},
+			},
+		});
+		setOTP(res.data?.OTP || "");
+		// In a real app, this would call your backend API to send the OTP
+		setMessage("OTP sent to your email");
+		setIsError(false);
+		setIsOtpSent(true);
+	};
+	const router = useRouter();
+
+	const validateOTP = async () => {
+		const res = await client.twoFactor.verifyOtp({
+			code: otp,
+		});
+		if (res.data) {
+			setMessage("OTP validated successfully");
+			setIsError(false);
+			setIsValidated(true);
+			router.push("/");
+		} else {
+			setIsError(true);
+			setMessage("Invalid OTP");
+		}
+	};
+	return (
+		<main className="flex flex-col items-center justify-center min-h-[calc(100vh-10rem)]">
+			<Card className="w-[350px]">
+				<CardHeader>
+					<CardTitle>Two-Factor Authentication</CardTitle>
+					<CardDescription>
+						Verify your identity with a one-time password
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<div className="grid w-full items-center gap-4">
+						{!isOtpSent ? (
+							<Button onClick={requestOTP} className="w-full">
+								<Mail className="mr-2 h-4 w-4" /> Send OTP to Email
+							</Button>
+						) : (
+							<>
+								<div className="flex flex-col space-y-1.5">
+									<Label htmlFor="otp">One-Time Password</Label>
+									<Label className="py-2">
+										Use{" "}
+										<span className="text-blue-100 bg-slate-800 px-2">
+											{OTP}
+										</span>{" "}
+										(on real app, this would be sent to your email)
+									</Label>
+									<Input
+										id="otp"
+										placeholder="Enter 6-digit OTP"
+										value={otp}
+										onChange={(e) => setOtp(e.target.value)}
+										maxLength={6}
+									/>
+								</div>
+								<Button
+									onClick={validateOTP}
+									disabled={otp.length !== 6 || isValidated}
+								>
+									Validate OTP
+								</Button>
+							</>
+						)}
+					</div>
+					{message && (
+						<div
+							className={`flex items-center gap-2 mt-4 ${
+								isError ? "text-red-500" : "text-primary"
+							}`}
+						>
+							{isError ? (
+								<AlertCircle className="h-4 w-4" />
+							) : (
+								<CheckCircle2 className="h-4 w-4" />
+							)}
+							<p className="text-sm">{message}</p>
+						</div>
+					)}
+				</CardContent>
+			</Card>
+		</main>
+	);
+}

examples/nextjs-example/app/(auth)/two-factor/page.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { client } from "@/lib/auth-client";
+import { AlertCircle, CheckCircle2 } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+
+export default function Component() {
+	const [totpCode, setTotpCode] = useState("");
+	const [error, setError] = useState("");
+	const [success, setSuccess] = useState(false);
+
+	const handleSubmit = (e: React.FormEvent) => {
+		e.preventDefault();
+		if (totpCode.length !== 6 || !/^\d+$/.test(totpCode)) {
+			setError("TOTP code must be 6 digits");
+			return;
+		}
+		client.twoFactor
+			.verifyTotp({
+				code: totpCode,
+			})
+			.then((res) => {
+				if (res.data?.status) {
+					setSuccess(true);
+					setError("");
+				} else {
+					setError("Invalid TOTP code");
+				}
+			});
+	};
+
+	return (
+		<main className="flex flex-col items-center justify-center min-h-[calc(100vh-10rem)]">
+			<Card className="w-[350px]">
+				<CardHeader>
+					<CardTitle>TOTP Verification</CardTitle>
+					<CardDescription>
+						Enter your 6-digit TOTP code to authenticate
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					{!success ? (
+						<form onSubmit={handleSubmit}>
+							<div className="space-y-2">
+								<Label htmlFor="totp">TOTP Code</Label>
+								<Input
+									id="totp"
+									type="text"
+									inputMode="numeric"
+									pattern="\d{6}"
+									maxLength={6}
+									value={totpCode}
+									onChange={(e) => setTotpCode(e.target.value)}
+									placeholder="Enter 6-digit code"
+									required
+								/>
+							</div>
+							{error && (
+								<div className="flex items-center mt-2 text-red-500">
+									<AlertCircle className="w-4 h-4 mr-2" />
+									<span className="text-sm">{error}</span>
+								</div>
+							)}
+							<Button type="submit" className="w-full mt-4">
+								Verify
+							</Button>
+						</form>
+					) : (
+						<div className="flex flex-col items-center justify-center space-y-2">
+							<CheckCircle2 className="w-12 h-12 text-green-500" />
+							<p className="text-lg font-semibold">Verification Successful</p>
+						</div>
+					)}
+				</CardContent>
+				<CardFooter className="text-sm text-muted-foreground gap-2">
+					<Link href="/two-factor/otp">
+						<Button variant="link" size="sm">
+							Switch to Email Verification
+						</Button>
+					</Link>
+				</CardFooter>
+			</Card>
+		</main>
+	);
+}

examples/nextjs-example/app/accept-invitation/[id]/invitation-error.tsx

@@ -0,0 +1,43 @@
+import {
+	Card,
+	CardHeader,
+	CardTitle,
+	CardDescription,
+	CardContent,
+	CardFooter,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { AlertCircle } from "lucide-react";
+import Link from "next/link";
+
+export function InvitationError() {
+	return (
+		<Card className="w-full max-w-md mx-auto">
+			<CardHeader>
+				<div className="flex items-center space-x-2">
+					<AlertCircle className="w-6 h-6 text-destructive" />
+					<CardTitle className="text-xl text-destructive">
+						Invitation Error
+					</CardTitle>
+				</div>
+				<CardDescription>
+					There was an issue with your invitation.
+				</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<p className="mb-4 text-sm text-muted-foreground">
+					The invitation you're trying to access is either invalid or you don't
+					have the correct permissions. Please check your email for a valid
+					invitation or contact the person who sent it.
+				</p>
+			</CardContent>
+			<CardFooter>
+				<Link href="/" className="w-full">
+					<Button variant="outline" className="w-full">
+						Go back to home
+					</Button>
+				</Link>
+			</CardFooter>
+		</Card>
+	);
+}

examples/nextjs-example/app/accept-invitation/[id]/page.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { CheckIcon, XIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { Skeleton } from "@/components/ui/skeleton";
+import { client, organization } from "@/lib/auth-client";
+import { InvitationError } from "./invitation-error";
+import { Invitation } from "@/lib/auth-types";
+
+export default function InvitationPage({
+	params,
+}: {
+	params: {
+		id: string;
+	};
+}) {
+	const router = useRouter();
+	const [invitationStatus, setInvitationStatus] = useState<
+		"pending" | "accepted" | "rejected"
+	>("pending");
+
+	const handleAccept = async () => {
+		await organization
+			.acceptInvitation({
+				invitationId: params.id,
+			})
+			.then((res) => {
+				if (res.error) {
+					setError(res.error.message || "An error occurred");
+				} else {
+					setInvitationStatus("accepted");
+					router.push(`/dashboard`);
+				}
+			});
+	};
+
+	const handleReject = async () => {
+		await organization
+			.rejectInvitation({
+				invitationId: params.id,
+			})
+			.then((res) => {
+				if (res.error) {
+					setError(res.error.message || "An error occurred");
+				} else {
+					setInvitationStatus("rejected");
+				}
+			});
+	};
+
+	const [invitation, setInvitation] = useState<{
+		organizationName: string;
+		organizationSlug: string;
+		inviterEmail: string;
+		id: string;
+		status: "pending" | "accepted" | "rejected" | "canceled";
+		email: string;
+		expiresAt: Date;
+		organizationId: string;
+		role: "member" | "admin" | "owner";
+		inviterId: string;
+	} | null>(null);
+
+	const [error, setError] = useState<string | null>(null);
+
+	useEffect(() => {
+		client.organization
+			.getInvitation({
+				query: {
+					id: params.id,
+				},
+			})
+			.then((res) => {
+				if (res.error) {
+					setError(res.error.message || "An error occurred");
+				} else {
+					setInvitation(res.data);
+				}
+			});
+	}, []);
+
+	return (
+		<div className="min-h-[80vh] flex items-center justify-center">
+			<div className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"></div>
+			{invitation ? (
+				<Card className="w-full max-w-md">
+					<CardHeader>
+						<CardTitle>Organization Invitation</CardTitle>
+						<CardDescription>
+							You've been invited to join an organization
+						</CardDescription>
+					</CardHeader>
+					<CardContent>
+						{invitationStatus === "pending" && (
+							<div className="space-y-4">
+								<p>
+									<strong>{invitation?.inviterEmail}</strong> has invited you to
+									join <strong>{invitation?.organizationName}</strong>.
+								</p>
+								<p>
+									This invitation was sent to{" "}
+									<strong>{invitation?.email}</strong>.
+								</p>
+							</div>
+						)}
+						{invitationStatus === "accepted" && (
+							<div className="space-y-4">
+								<div className="flex items-center justify-center w-16 h-16 mx-auto bg-green-100 rounded-full">
+									<CheckIcon className="w-8 h-8 text-green-600" />
+								</div>
+								<h2 className="text-2xl font-bold text-center">
+									Welcome to {invitation?.organizationName}!
+								</h2>
+								<p className="text-center">
+									You've successfully joined the organization. We're excited to
+									have you on board!
+								</p>
+							</div>
+						)}
+						{invitationStatus === "rejected" && (
+							<div className="space-y-4">
+								<div className="flex items-center justify-center w-16 h-16 mx-auto bg-red-100 rounded-full">
+									<XIcon className="w-8 h-8 text-red-600" />
+								</div>
+								<h2 className="text-2xl font-bold text-center">
+									Invitation Declined
+								</h2>
+								<p className="text-center">
+									You&lsquo;ve declined the invitation to join{" "}
+									{invitation?.organizationName}.
+								</p>
+							</div>
+						)}
+					</CardContent>
+					{invitationStatus === "pending" && (
+						<CardFooter className="flex justify-between">
+							<Button variant="outline" onClick={handleReject}>
+								Decline
+							</Button>
+							<Button onClick={handleAccept}>Accept Invitation</Button>
+						</CardFooter>
+					)}
+				</Card>
+			) : error ? (
+				<InvitationError />
+			) : (
+				<InvitationSkeleton />
+			)}
+		</div>
+	);
+}
+
+function InvitationSkeleton() {
+	return (
+		<Card className="w-full max-w-md mx-auto">
+			<CardHeader>
+				<div className="flex items-center space-x-2">
+					<Skeleton className="w-6 h-6 rounded-full" />
+					<Skeleton className="h-6 w-24" />
+				</div>
+				<Skeleton className="h-4 w-full mt-2" />
+				<Skeleton className="h-4 w-2/3 mt-2" />
+			</CardHeader>
+			<CardContent>
+				<div className="space-y-2">
+					<Skeleton className="h-4 w-full" />
+					<Skeleton className="h-4 w-full" />
+					<Skeleton className="h-4 w-2/3" />
+				</div>
+			</CardContent>
+			<CardFooter className="flex justify-end">
+				<Skeleton className="h-10 w-24" />
+			</CardFooter>
+		</Card>
+	);
+}

examples/nextjs-example/app/api/auth/[...all]/route.ts

@@ -0,0 +1,4 @@
+import { auth } from "@/lib/auth";
+import { toNextJsHandler } from "better-auth/next-js";
+
+export const { GET, POST } = toNextJsHandler(auth);

examples/nextjs-example/app/dashboard/client.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+export function ManageAccount() {
+	return (
+		<div className="flex items-center gap-2">
+			<p>Manage Account</p>
+		</div>
+	);
+}

examples/nextjs-example/app/dashboard/organization-card.tsx

@@ -0,0 +1,528 @@
+"use client";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import {
+	organization,
+	useActiveOrganization,
+	useListOrganizations,
+	useSession,
+} from "@/lib/auth-client";
+import { ActiveOrganization, Session } from "@/lib/auth-types";
+import { ChevronDownIcon, PlusIcon } from "@radix-ui/react-icons";
+import { Loader2, MailPlus } from "lucide-react";
+import { useState, useEffect } from "react";
+import { toast } from "sonner";
+import { AnimatePresence, motion } from "framer-motion";
+import CopyButton from "@/components/ui/copy-button";
+import Image from "next/image";
+
+export function OrganizationCard(props: { session: Session | null }) {
+	const organizations = useListOrganizations();
+	const activeOrg = useActiveOrganization();
+	const [optimisticOrg, setOptimisticOrg] = useState<ActiveOrganization | null>(
+		null,
+	);
+	const [isRevoking, setIsRevoking] = useState<string[]>([]);
+	useEffect(() => {
+		setOptimisticOrg(activeOrg.data);
+	}, [activeOrg.data]);
+
+	const inviteVariants = {
+		hidden: { opacity: 0, height: 0 },
+		visible: { opacity: 1, height: "auto" },
+		exit: { opacity: 0, height: 0 },
+	};
+
+	const { data } = useSession();
+	const session = data || props.session;
+
+	const currentMember = optimisticOrg?.members.find(
+		(member) => member.userId === session?.user.id,
+	);
+
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle>Organization</CardTitle>
+				<div className="flex justify-between">
+					<DropdownMenu>
+						<DropdownMenuTrigger asChild>
+							<div className="flex items-center gap-1 cursor-pointer">
+								<p className="text-sm">
+									<span className="font-bold"></span>{" "}
+									{optimisticOrg?.name || "Personal"}
+								</p>
+
+								<ChevronDownIcon />
+							</div>
+						</DropdownMenuTrigger>
+						<DropdownMenuContent align="start">
+							<DropdownMenuItem
+								className=" py-1"
+								onClick={() => {
+									organization.setActive(null);
+									setOptimisticOrg(null);
+								}}
+							>
+								<p className="text-sm sm">Personal</p>
+							</DropdownMenuItem>
+							{organizations.data?.map((org) => (
+								<DropdownMenuItem
+									className=" py-1"
+									key={org.id}
+									onClick={() => {
+										if (org.id === optimisticOrg?.id) {
+											return;
+										}
+										organization.setActive(org.id);
+										setOptimisticOrg({
+											members: [],
+											invitations: [],
+											...org,
+										});
+									}}
+								>
+									<p className="text-sm sm">{org.name}</p>
+								</DropdownMenuItem>
+							))}
+						</DropdownMenuContent>
+					</DropdownMenu>
+					<div>
+						<CreateOrganizationDialog />
+					</div>
+				</div>
+				<div className="flex items-center gap-2">
+					<Avatar className="rounded-none">
+						<AvatarImage
+							className="object-cover w-full h-full rounded-none"
+							src={optimisticOrg?.logo || ""}
+						/>
+						<AvatarFallback className="rounded-none">
+							{optimisticOrg?.name?.charAt(0) || "P"}
+						</AvatarFallback>
+					</Avatar>
+					<div>
+						<p>{optimisticOrg?.name || "Personal"}</p>
+						<p className="text-xs text-muted-foreground">
+							{optimisticOrg?.members.length || 1} members
+						</p>
+					</div>
+				</div>
+			</CardHeader>
+			<CardContent>
+				<div className="flex gap-8 flex-col md:flex-row">
+					<div className="flex flex-col gap-2 flex-grow">
+						<p className="font-medium border-b-2 border-b-foreground/10">
+							Members
+						</p>
+						<div className="flex flex-col gap-2">
+							{optimisticOrg?.members.map((member) => (
+								<div
+									key={member.id}
+									className="flex justify-between items-center"
+								>
+									<div className="flex items-center gap-2">
+										<Avatar className="sm:flex w-9 h-9">
+											<AvatarImage
+												src={member.user.image}
+												className="object-cover"
+											/>
+											<AvatarFallback>
+												{member.user.name?.charAt(0)}
+											</AvatarFallback>
+										</Avatar>
+										<div>
+											<p className="text-sm">{member.user.name}</p>
+											<p className="text-xs text-muted-foreground">
+												{member.role}
+											</p>
+										</div>
+									</div>
+									{member.role !== "owner" &&
+										(currentMember?.role === "owner" ||
+											currentMember?.role === "admin") && (
+											<Button
+												size="sm"
+												variant="destructive"
+												onClick={() => {
+													organization.removeMember({
+														memberIdOrEmail: member.id,
+													});
+												}}
+											>
+												{currentMember?.id === member.id ? "Leave" : "Remove"}
+											</Button>
+										)}
+								</div>
+							))}
+							{!optimisticOrg?.id && (
+								<div>
+									<div className="flex items-center gap-2">
+										<Avatar>
+											<AvatarImage src={session?.user.image} />
+											<AvatarFallback>
+												{session?.user.name?.charAt(0)}
+											</AvatarFallback>
+										</Avatar>
+										<div>
+											<p className="text-sm">{session?.user.name}</p>
+											<p className="text-xs text-muted-foreground">Owner</p>
+										</div>
+									</div>
+								</div>
+							)}
+						</div>
+					</div>
+					<div className="flex flex-col gap-2 flex-grow">
+						<p className="font-medium border-b-2 border-b-foreground/10">
+							Invites
+						</p>
+						<div className="flex flex-col gap-2">
+							<AnimatePresence>
+								{optimisticOrg?.invitations
+									.filter((invitation) => invitation.status === "pending")
+									.map((invitation) => (
+										<motion.div
+											key={invitation.id}
+											className="flex items-center justify-between"
+											variants={inviteVariants}
+											initial="hidden"
+											animate="visible"
+											exit="exit"
+											layout
+										>
+											<div>
+												<p className="text-sm">{invitation.email}</p>
+												<p className="text-xs text-muted-foreground">
+													{invitation.role}
+												</p>
+											</div>
+											<div className="flex items-center gap-2">
+												<Button
+													disabled={isRevoking.includes(invitation.id)}
+													size="sm"
+													variant="destructive"
+													onClick={() => {
+														organization.cancelInvitation({
+															invitationId: invitation.id,
+															fetchOptions: {
+																onRequest: () => {
+																	setIsRevoking([...isRevoking, invitation.id]);
+																},
+																onSuccess: () => {
+																	toast.message(
+																		"Invitation revoked successfully",
+																	);
+																	setIsRevoking(
+																		isRevoking.filter(
+																			(id) => id !== invitation.id,
+																		),
+																	);
+																	setOptimisticOrg({
+																		...optimisticOrg,
+																		invitations:
+																			optimisticOrg?.invitations.filter(
+																				(inv) => inv.id !== invitation.id,
+																			),
+																	});
+																},
+																onError: (ctx) => {
+																	toast.error(ctx.error.message);
+																	setIsRevoking(
+																		isRevoking.filter(
+																			(id) => id !== invitation.id,
+																		),
+																	);
+																},
+															},
+														});
+													}}
+												>
+													{isRevoking.includes(invitation.id) ? (
+														<Loader2 className="animate-spin" size={16} />
+													) : (
+														"Revoke"
+													)}
+												</Button>
+												<div>
+													<CopyButton
+														textToCopy={`${window.location.origin}/accept-invitation/${invitation.id}`}
+													/>
+												</div>
+											</div>
+										</motion.div>
+									))}
+							</AnimatePresence>
+							{optimisticOrg?.invitations.length === 0 && (
+								<motion.p
+									className="text-sm text-muted-foreground"
+									initial={{ opacity: 0 }}
+									animate={{ opacity: 1 }}
+									exit={{ opacity: 0 }}
+								>
+									No Active Invitations
+								</motion.p>
+							)}
+							{!optimisticOrg?.id && (
+								<Label className="text-xs text-muted-foreground">
+									You can&apos;t invite members to your personal workspace.
+								</Label>
+							)}
+						</div>
+					</div>
+				</div>
+				<div className="flex justify-end w-full mt-4">
+					<div>
+						<div>
+							{optimisticOrg?.id && (
+								<InviteMemberDialog
+									setOptimisticOrg={setOptimisticOrg}
+									optimisticOrg={optimisticOrg}
+								/>
+							)}
+						</div>
+					</div>
+				</div>
+			</CardContent>
+		</Card>
+	);
+}
+
+function CreateOrganizationDialog() {
+	const [name, setName] = useState("");
+	const [slug, setSlug] = useState("");
+	const [loading, setLoading] = useState(false);
+	const [open, setOpen] = useState(false);
+	const [isSlugEdited, setIsSlugEdited] = useState(false);
+	const [logo, setLogo] = useState<string | null>(null);
+
+	useEffect(() => {
+		if (!isSlugEdited) {
+			const generatedSlug = name.trim().toLowerCase().replace(/\s+/g, "-");
+			setSlug(generatedSlug);
+		}
+	}, [name, isSlugEdited]);
+
+	useEffect(() => {
+		if (open) {
+			setName("");
+			setSlug("");
+			setIsSlugEdited(false);
+			setLogo(null);
+		}
+	}, [open]);
+
+	const handleLogoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		if (e.target.files && e.target.files[0]) {
+			const file = e.target.files[0];
+			const reader = new FileReader();
+			reader.onloadend = () => {
+				setLogo(reader.result as string);
+			};
+			reader.readAsDataURL(file);
+		}
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<Button size="sm" className="w-full gap-2" variant="default">
+					<PlusIcon />
+					<p>New Organization</p>
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-[425px] w-11/12">
+				<DialogHeader>
+					<DialogTitle>New Organization</DialogTitle>
+					<DialogDescription>
+						Create a new organization to collaborate with your team.
+					</DialogDescription>
+				</DialogHeader>
+				<div className="flex flex-col gap-4">
+					<div className="flex flex-col gap-2">
+						<Label>Organization Name</Label>
+						<Input
+							placeholder="Name"
+							value={name}
+							onChange={(e) => setName(e.target.value)}
+						/>
+					</div>
+					<div className="flex flex-col gap-2">
+						<Label>Organization Slug</Label>
+						<Input
+							value={slug}
+							onChange={(e) => {
+								setSlug(e.target.value);
+								setIsSlugEdited(true);
+							}}
+							placeholder="Slug"
+						/>
+					</div>
+					<div className="flex flex-col gap-2">
+						<Label>Logo</Label>
+						<Input type="file" accept="image/*" onChange={handleLogoChange} />
+						{logo && (
+							<div className="mt-2">
+								<Image
+									src={logo}
+									alt="Logo preview"
+									className="w-16 h-16 object-cover"
+									width={16}
+									height={16}
+								/>
+							</div>
+						)}
+					</div>
+				</div>
+				<DialogFooter>
+					<Button
+						disabled={loading}
+						onClick={async () => {
+							setLoading(true);
+							await organization.create({
+								name: name,
+								slug: slug,
+								logo: logo || undefined,
+								fetchOptions: {
+									onResponse: () => {
+										setLoading(false);
+									},
+									onSuccess: () => {
+										toast.success("Organization created successfully");
+										setOpen(false);
+									},
+									onError: (error) => {
+										toast.error(error.error.message);
+										setLoading(false);
+									},
+								},
+							});
+						}}
+					>
+						{loading ? (
+							<Loader2 className="animate-spin" size={16} />
+						) : (
+							"Create"
+						)}
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+function InviteMemberDialog({
+	setOptimisticOrg,
+	optimisticOrg,
+}: {
+	setOptimisticOrg: (org: ActiveOrganization | null) => void;
+	optimisticOrg: ActiveOrganization | null;
+}) {
+	const [open, setOpen] = useState(false);
+	const [email, setEmail] = useState("");
+	const [role, setRole] = useState("member");
+	const [loading, setLoading] = useState(false);
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button size="sm" className="w-full gap-2" variant="secondary">
+					<MailPlus size={16} />
+					<p>Invite Member</p>
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-[425px] w-11/12">
+				<DialogHeader>
+					<DialogTitle>Invite Member</DialogTitle>
+					<DialogDescription>
+						Invite a member to your organization.
+					</DialogDescription>
+				</DialogHeader>
+				<div className="flex flex-col gap-2">
+					<Label>Email</Label>
+					<Input
+						placeholder="Email"
+						value={email}
+						onChange={(e) => setEmail(e.target.value)}
+					/>
+					<Label>Role</Label>
+					<Select value={role} onValueChange={setRole}>
+						<SelectTrigger>
+							<SelectValue placeholder="Select a role" />
+						</SelectTrigger>
+						<SelectContent>
+							<SelectItem value="admin">Admin</SelectItem>
+							<SelectItem value="member">Member</SelectItem>
+						</SelectContent>
+					</Select>
+				</div>
+				<DialogFooter>
+					<DialogClose>
+						<Button
+							disabled={loading}
+							onClick={async () => {
+								const invite = organization.inviteMember({
+									email: email,
+									role: role as "member",
+									fetchOptions: {
+										throw: true,
+										onSuccess: (ctx) => {
+											if (optimisticOrg) {
+												setOptimisticOrg({
+													...optimisticOrg,
+													invitations: [
+														...(optimisticOrg?.invitations || []),
+														ctx.data,
+													],
+												});
+											}
+										},
+									},
+								});
+								toast.promise(invite, {
+									loading: "Inviting member...",
+									success: "Member invited successfully",
+									error: (error) => error.error.message,
+								});
+							}}
+						>
+							Invite
+						</Button>
+					</DialogClose>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}

examples/nextjs-example/app/dashboard/page.tsx

@@ -0,0 +1,29 @@
+import { auth } from "@/lib/auth";
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
+import UserCard from "./user-card";
+import { OrganizationCard } from "./organization-card";
+
+export default async function DashboardPage() {
+	const [session, activeSessions] = await Promise.all([
+		auth.api.getSession({
+			headers: headers(),
+		}),
+		auth.api.listSessions({
+			headers: headers(),
+		}),
+	]).catch((e) => {
+		throw redirect("/sign-in");
+	});
+	return (
+		<div className="w-full">
+			<div className="flex gap-4 flex-col">
+				<UserCard
+					session={JSON.parse(JSON.stringify(session))}
+					activeSessions={JSON.parse(JSON.stringify(activeSessions))}
+				/>
+				<OrganizationCard session={JSON.parse(JSON.stringify(session))} />
+			</div>
+		</div>
+	);
+}

examples/nextjs-example/app/dashboard/user-card.tsx

@@ -0,0 +1,792 @@
+"use client";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardDescription,
+	CardContent,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { PasswordInput } from "@/components/ui/password-input";
+import { client, signOut, user, useSession } from "@/lib/auth-client";
+import { Session } from "@/lib/auth-types";
+import { MobileIcon } from "@radix-ui/react-icons";
+import {
+	Edit,
+	Fingerprint,
+	Laptop,
+	Loader2,
+	LogOut,
+	Plus,
+	QrCode,
+	ShieldCheck,
+	ShieldOff,
+	Trash,
+	X,
+} from "lucide-react";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { UAParser } from "ua-parser-js";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableHeader,
+	TableRow,
+} from "@/components/ui/table";
+import QRCode from "react-qr-code";
+import CopyButton from "@/components/ui/copy-button";
+
+export default function UserCard(props: {
+	session: Session | null;
+	activeSessions: Session["session"][];
+}) {
+	const router = useRouter();
+	const { data, isPending, error } = useSession(props.session);
+	const [ua, setUa] = useState<UAParser.UAParserInstance>();
+
+	const session = data || props.session;
+
+	useEffect(() => {
+		setUa(new UAParser(session?.session.userAgent));
+	}, [session?.session.userAgent]);
+
+	const [isTerminating, setIsTerminating] = useState<string>();
+
+	const { data: qr } = useQuery({
+		queryKey: ["two-factor-qr"],
+		queryFn: async () => {
+			const res = await client.twoFactor.getTotpUri();
+			if (res.error) {
+				throw res.error;
+			}
+			return res.data;
+		},
+		enabled: !!session?.user.twoFactorEnabled,
+	});
+
+	const [isPendingTwoFa, setIsPendingTwoFa] = useState<boolean>(false);
+	const [twoFaPassword, setTwoFaPassword] = useState<string>("");
+	const [twoFactorDialog, setTwoFactorDialog] = useState<boolean>(false);
+	const [isSignOut, setIsSignOut] = useState<boolean>(false);
+	const [emailVerificationPending, setEmailVerificationPending] =
+		useState<boolean>(false);
+	return (
+		<Card>
+			<CardHeader>
+				<CardTitle>User</CardTitle>
+			</CardHeader>
+			<CardContent className="grid gap-8 grid-cols-1">
+				<div className="flex items-start justify-between">
+					<div className="flex items-center gap-4">
+						<Avatar className="hidden h-9 w-9 sm:flex ">
+							<AvatarImage
+								src={session?.user.image || "#"}
+								alt="Avatar"
+								className="object-cover"
+							/>
+							<AvatarFallback>{session?.user.name.charAt(0)}</AvatarFallback>
+						</Avatar>
+						<div className="grid gap-1">
+							<p className="text-sm font-medium leading-none">
+								{session?.user.name}
+							</p>
+							<p className="text-sm">{session?.user.email}</p>
+						</div>
+					</div>
+					<EditUserDialog session={session} />
+				</div>
+
+				{session?.user.emailVerified ? null : (
+					<Alert>
+						<AlertTitle>Verify Your Email Address</AlertTitle>
+						<AlertDescription className="text-muted-foreground">
+							Please verify your email address. Check your inbox for the
+							verification email. If you haven't received the email, click the
+							button below to resend.
+						</AlertDescription>
+						<Button
+							size="sm"
+							variant="secondary"
+							className="mt-2"
+							onClick={async () => {
+								await client.sendVerificationEmail({
+									email: session?.user.email || "",
+									fetchOptions: {
+										onRequest(context) {
+											setEmailVerificationPending(true);
+										},
+										onError(context) {
+											toast.error(context.error.message);
+											setEmailVerificationPending(false);
+										},
+										onSuccess() {
+											toast.success("Verification email sent successfully");
+											setEmailVerificationPending(false);
+										},
+									},
+								});
+							}}
+						>
+							{emailVerificationPending ? (
+								<Loader2 size={15} className="animate-spin" />
+							) : (
+								"Resend Verification Email"
+							)}
+						</Button>
+					</Alert>
+				)}
+
+				<div className="border-l-2 px-2 w-max gap-1 flex flex-col">
+					<p className="text-xs font-medium ">Active Sessions</p>
+					{props.activeSessions
+						.filter((session) => session.userAgent)
+						.map((session) => {
+							return (
+								<div key={session.id}>
+									<div className="flex items-center gap-2 text-sm  text-black font-medium dark:text-white">
+										{new UAParser(session.userAgent).getDevice().type ===
+										"mobile" ? (
+											<MobileIcon />
+										) : (
+											<Laptop size={16} />
+										)}
+										{new UAParser(session.userAgent).getOS().name},{" "}
+										{new UAParser(session.userAgent).getBrowser().name}
+										<button
+											className="text-red-500 opacity-80  cursor-pointer text-xs border-muted-foreground border-red-600  underline "
+											onClick={async () => {
+												setIsTerminating(session.id);
+												const res = await client.user.revokeSession({
+													id: session.id,
+												});
+
+												if (res.error) {
+													toast.error(res.error.message);
+												} else {
+													toast.success("Session terminated successfully");
+												}
+												router.refresh();
+												setIsTerminating(undefined);
+											}}
+										>
+											{isTerminating === session.id ? (
+												<Loader2 size={15} className="animate-spin" />
+											) : session.id === props.session?.session.id ? (
+												"Sign Out"
+											) : (
+												"Terminate"
+											)}
+										</button>
+									</div>
+								</div>
+							);
+						})}
+				</div>
+				<div className="border-y py-4 flex items-center flex-wrap justify-between gap-2">
+					<div className="flex flex-col gap-2">
+						<p className="text-sm">Passkeys</p>
+						<div className="flex gap-2 flex-wrap">
+							<AddPasskey />
+							<ListPasskeys />
+						</div>
+					</div>
+					<div className="flex flex-col gap-2">
+						<p className="text-sm">Two Factor</p>
+						<div className="flex gap-2">
+							{session?.user.twoFactorEnabled && (
+								<Dialog>
+									<DialogTrigger asChild>
+										<Button variant="outline" className="gap-2">
+											<QrCode size={16} />
+											<span className="md:text-sm text-xs">Scan QR Code</span>
+										</Button>
+									</DialogTrigger>
+									<DialogContent className="sm:max-w-[425px] w-11/12">
+										<DialogHeader>
+											<DialogTitle>Scan QR Code</DialogTitle>
+											<DialogDescription>
+												Scan the QR code with your TOTP app
+											</DialogDescription>
+										</DialogHeader>
+										<div className="flex items-center justify-center">
+											<QRCode value={qr?.totpURI || ""} />
+										</div>
+										<div className="flex gap-2 items-center justify-center">
+											<p className="text-sm text-muted-foreground">
+												Copy URI to clipboard
+											</p>
+											<CopyButton textToCopy={qr?.totpURI || ""} />
+										</div>
+									</DialogContent>
+								</Dialog>
+							)}
+							<Dialog open={twoFactorDialog} onOpenChange={setTwoFactorDialog}>
+								<DialogTrigger asChild>
+									<Button
+										variant={
+											session?.user.twoFactorEnabled ? "destructive" : "outline"
+										}
+										className="gap-2"
+									>
+										{session?.user.twoFactorEnabled ? (
+											<ShieldOff size={16} />
+										) : (
+											<ShieldCheck size={16} />
+										)}
+										<span className="md:text-sm text-xs">
+											{session?.user.twoFactorEnabled
+												? "Disable 2FA"
+												: "Enable 2FA"}
+										</span>
+									</Button>
+								</DialogTrigger>
+								<DialogContent className="sm:max-w-[425px] w-11/12">
+									<DialogHeader>
+										<DialogTitle>
+											{session?.user.twoFactorEnabled
+												? "Disable 2FA"
+												: "Enable 2FA"}
+										</DialogTitle>
+										<DialogDescription>
+											{session?.user.twoFactorEnabled
+												? "Disable the second factor authentication from your account"
+												: "Enable 2FA to secure your account"}
+										</DialogDescription>
+									</DialogHeader>
+									<div className="flex flex-col gap-2">
+										<Label htmlFor="password">Password</Label>
+										<PasswordInput
+											id="password"
+											placeholder="Password"
+											value={twoFaPassword}
+											onChange={(e) => setTwoFaPassword(e.target.value)}
+										/>
+									</div>
+									<DialogFooter>
+										<Button
+											disabled={isPendingTwoFa}
+											onClick={async () => {
+												if (twoFaPassword.length < 8) {
+													toast.error("Password must be at least 8 characters");
+													return;
+												}
+												setIsPendingTwoFa(true);
+												if (session?.user.twoFactorEnabled) {
+													const res = await client.twoFactor.disable({
+														//@ts-ignore
+														password: twoFaPassword,
+														fetchOptions: {
+															onError(context) {
+																toast.error(context.error.message);
+															},
+															onSuccess() {
+																toast("2FA disabled successfully");
+																setTwoFactorDialog(false);
+															},
+														},
+													});
+												} else {
+													const res = await client.twoFactor.enable({
+														password: twoFaPassword,
+														fetchOptions: {
+															onError(context) {
+																toast.error(context.error.message);
+															},
+															onSuccess() {
+																toast.success("2FA enabled successfully");
+																setTwoFactorDialog(false);
+															},
+														},
+													});
+												}
+												setIsPendingTwoFa(false);
+												setTwoFaPassword("");
+											}}
+										>
+											{isPendingTwoFa ? (
+												<Loader2 size={15} className="animate-spin" />
+											) : session?.user.twoFactorEnabled ? (
+												"Disable 2FA"
+											) : (
+												"Enable 2FA"
+											)}
+										</Button>
+									</DialogFooter>
+								</DialogContent>
+							</Dialog>
+						</div>
+					</div>
+				</div>
+			</CardContent>
+			<CardFooter className="gap-2 justify-between items-center">
+				<ChangePassword />
+				<Button
+					className="gap-2 z-10"
+					variant="secondary"
+					onClick={async () => {
+						setIsSignOut(true);
+						await signOut({
+							fetchOptions: {
+								body: {
+									callbackURL: "/",
+								},
+							},
+						});
+						setIsSignOut(false);
+					}}
+					disabled={isSignOut}
+				>
+					<span className="text-sm">
+						{isSignOut ? (
+							<Loader2 size={15} className="animate-spin" />
+						) : (
+							<div className="flex items-center gap-2">
+								<LogOut size={16} />
+								Sign Out
+							</div>
+						)}
+					</span>
+				</Button>
+			</CardFooter>
+		</Card>
+	);
+}
+
+async function convertImageToBase64(file: File): Promise<string> {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onloadend = () => resolve(reader.result as string);
+		reader.onerror = reject;
+		reader.readAsDataURL(file);
+	});
+}
+
+function ChangePassword() {
+	const [currentPassword, setCurrentPassword] = useState<string>("");
+	const [newPassword, setNewPassword] = useState<string>("");
+	const [confirmPassword, setConfirmPassword] = useState<string>("");
+	const [loading, setLoading] = useState<boolean>(false);
+	const [open, setOpen] = useState<boolean>(false);
+	const [signOutDevices, setSignOutDevices] = useState<boolean>(false);
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<Button className="gap-2 z-10" variant="outline" size="sm">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="1em"
+						height="1em"
+						viewBox="0 0 24 24"
+					>
+						<path
+							fill="currentColor"
+							d="M2.5 18.5v-1h19v1zm.535-5.973l-.762-.442l.965-1.693h-1.93v-.884h1.93l-.965-1.642l.762-.443L4 9.066l.966-1.643l.761.443l-.965 1.642h1.93v.884h-1.93l.965 1.693l-.762.442L4 10.835zm8 0l-.762-.442l.966-1.693H9.308v-.884h1.93l-.965-1.642l.762-.443L12 9.066l.966-1.643l.761.443l-.965 1.642h1.93v.884h-1.93l.965 1.693l-.762.442L12 10.835zm8 0l-.762-.442l.966-1.693h-1.931v-.884h1.93l-.965-1.642l.762-.443L20 9.066l.966-1.643l.761.443l-.965 1.642h1.93v.884h-1.93l.965 1.693l-.762.442L20 10.835z"
+						></path>
+					</svg>
+					<span className="text-sm text-muted-foreground">Change Password</span>
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-[425px] w-11/12">
+				<DialogHeader>
+					<DialogTitle>Change Password</DialogTitle>
+					<DialogDescription>Change your password</DialogDescription>
+				</DialogHeader>
+				<div className="grid gap-2">
+					<Label htmlFor="current-password">Current Password</Label>
+					<PasswordInput
+						id="current-password"
+						value={currentPassword}
+						onChange={(e) => setCurrentPassword(e.target.value)}
+						autoComplete="new-password"
+						placeholder="Password"
+					/>
+					<Label htmlFor="new-password">New Password</Label>
+					<PasswordInput
+						value={newPassword}
+						onChange={(e) => setNewPassword(e.target.value)}
+						autoComplete="new-password"
+						placeholder="New Password"
+					/>
+					<Label htmlFor="password">Confirm Password</Label>
+					<PasswordInput
+						value={confirmPassword}
+						onChange={(e) => setConfirmPassword(e.target.value)}
+						autoComplete="new-password"
+						placeholder="Confirm Password"
+					/>
+					<div className="flex gap-2 items-center">
+						<Checkbox
+							onCheckedChange={(checked) =>
+								checked ? setSignOutDevices(true) : setSignOutDevices(false)
+							}
+						/>
+						<p className="text-sm">Sign out from other devices</p>
+					</div>
+				</div>
+				<DialogFooter>
+					<Button
+						onClick={async () => {
+							if (newPassword !== confirmPassword) {
+								toast.error("Passwords do not match");
+								return;
+							}
+							if (newPassword.length < 8) {
+								toast.error("Password must be at least 8 characters");
+								return;
+							}
+							setLoading(true);
+							const res = await user.changePassword({
+								newPassword: newPassword,
+								currentPassword: currentPassword,
+								revokeOtherSessions: signOutDevices,
+							});
+							setLoading(false);
+							if (res.error) {
+								toast.error(
+									res.error.message ||
+										"Couldn't change your password! Make sure it's correct",
+								);
+							} else {
+								setOpen(false);
+								toast.success("Password changed successfully");
+								setCurrentPassword("");
+								setNewPassword("");
+								setConfirmPassword("");
+							}
+						}}
+					>
+						{loading ? (
+							<Loader2 size={15} className="animate-spin" />
+						) : (
+							"Change Password"
+						)}
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+function EditUserDialog(props: { session: Session | null }) {
+	const [name, setName] = useState<string>();
+	const router = useRouter();
+	const [image, setImage] = useState<File | null>(null);
+	const [imagePreview, setImagePreview] = useState<string | null>(null);
+	const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const file = e.target.files?.[0];
+		if (file) {
+			setImage(file);
+			const reader = new FileReader();
+			reader.onloadend = () => {
+				setImagePreview(reader.result as string);
+			};
+			reader.readAsDataURL(file);
+		}
+	};
+	const [open, setOpen] = useState<boolean>(false);
+	const [isLoading, setIsLoading] = useState<boolean>(false);
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<Button size="sm" className="gap-2" variant="secondary">
+					<Edit size={13} />
+					Edit User
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-[425px] w-11/12">
+				<DialogHeader>
+					<DialogTitle>Edit User</DialogTitle>
+					<DialogDescription>Edit user information</DialogDescription>
+				</DialogHeader>
+				<div className="grid gap-2">
+					<Label htmlFor="name">Full Name</Label>
+					<Input
+						id="name"
+						type="name"
+						placeholder={props.session?.user.name}
+						required
+						onChange={(e) => {
+							setName(e.target.value);
+						}}
+					/>
+					<div className="grid gap-2">
+						<Label htmlFor="image">Profile Image</Label>
+						<div className="flex items-end gap-4">
+							{imagePreview && (
+								<div className="relative w-16 h-16 rounded-sm overflow-hidden">
+									<Image
+										src={imagePreview}
+										alt="Profile preview"
+										layout="fill"
+										objectFit="cover"
+									/>
+								</div>
+							)}
+							<div className="flex items-center gap-2 w-full">
+								<Input
+									id="image"
+									type="file"
+									accept="image/*"
+									onChange={handleImageChange}
+									className="w-full text-muted-foreground"
+								/>
+								{imagePreview && (
+									<X
+										className="cursor-pointer"
+										onClick={() => {
+											setImage(null);
+											setImagePreview(null);
+										}}
+									/>
+								)}
+							</div>
+						</div>
+					</div>
+				</div>
+				<DialogFooter>
+					<Button
+						disabled={isLoading}
+						onClick={async () => {
+							setIsLoading(true);
+							await user.update({
+								image: image ? await convertImageToBase64(image) : undefined,
+								name: name ? name : undefined,
+								fetchOptions: {
+									onSuccess: () => {
+										toast.success("User updated successfully");
+									},
+									onError: (error) => {
+										toast.error(error.error.message);
+									},
+								},
+							});
+							setName("");
+							router.refresh();
+							setImage(null);
+							setImagePreview(null);
+							setIsLoading(false);
+							setOpen(false);
+						}}
+					>
+						{isLoading ? (
+							<Loader2 size={15} className="animate-spin" />
+						) : (
+							"Update"
+						)}
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+function AddPasskey() {
+	const [isOpen, setIsOpen] = useState(false);
+	const [passkeyName, setPasskeyName] = useState("");
+	const queryClient = useQueryClient();
+	const [isLoading, setIsLoading] = useState(false);
+
+	const handleAddPasskey = async () => {
+		if (!passkeyName) {
+			toast.error("Passkey name is required");
+			return;
+		}
+		setIsLoading(true);
+		const res = await client.passkey.addPasskey({
+			name: passkeyName,
+		});
+		if (res?.error) {
+			toast.error(res?.error.message);
+		} else {
+			setIsOpen(false);
+			toast.success("Passkey added successfully. You can now use it to login.");
+		}
+		setIsLoading(false);
+	};
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<Button variant="outline" className="gap-2 text-xs md:text-sm">
+					<Plus size={15} />
+					Add New Passkey
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-[425px] w-11/12">
+				<DialogHeader>
+					<DialogTitle>Add New Passkey</DialogTitle>
+					<DialogDescription>
+						Create a new passkey to securely access your account without a
+						password.
+					</DialogDescription>
+				</DialogHeader>
+				<div className="grid gap-2">
+					<Label htmlFor="passkey-name">Passkey Name</Label>
+					<Input
+						id="passkey-name"
+						value={passkeyName}
+						onChange={(e) => setPasskeyName(e.target.value)}
+					/>
+				</div>
+				<DialogFooter>
+					<Button
+						disabled={isLoading}
+						type="submit"
+						onClick={handleAddPasskey}
+						className="w-full"
+					>
+						{isLoading ? (
+							<Loader2 size={15} className="animate-spin" />
+						) : (
+							<>
+								<Fingerprint className="mr-2 h-4 w-4" />
+								Create Passkey
+							</>
+						)}
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+function ListPasskeys() {
+	const { data, error } = client.useListPasskeys();
+	const [isOpen, setIsOpen] = useState(false);
+	const [passkeyName, setPasskeyName] = useState("");
+
+	const handleAddPasskey = async () => {
+		if (!passkeyName) {
+			toast.error("Passkey name is required");
+			return;
+		}
+		setIsLoading(true);
+		const res = await client.passkey.addPasskey({
+			name: passkeyName,
+		});
+		setIsLoading(false);
+		if (res?.error) {
+			toast.error(res?.error.message);
+		} else {
+			toast.success("Passkey added successfully. You can now use it to login.");
+		}
+	};
+	const [isLoading, setIsLoading] = useState(false);
+	const [isDeletePasskey, setIsDeletePasskey] = useState<boolean>(false);
+	return (
+		<Dialog open={isOpen} onOpenChange={setIsOpen}>
+			<DialogTrigger asChild>
+				<Button variant="outline" className="text-xs md:text-sm">
+					<Fingerprint className="mr-2 h-4 w-4" />
+					<span>Passkeys {data?.length ? `[${data?.length}]` : ""}</span>
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-[425px] w-11/12">
+				<DialogHeader>
+					<DialogTitle>Passkeys</DialogTitle>
+					<DialogDescription>List of passkeys</DialogDescription>
+				</DialogHeader>
+				{data?.length ? (
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>Name</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{data.map((passkey) => (
+								<TableRow
+									key={passkey.id}
+									className="flex  justify-between items-center"
+								>
+									<TableCell>{passkey.name || "My Passkey"}</TableCell>
+									<TableCell className="text-right">
+										<button
+											onClick={async () => {
+												const res = await client.passkey.deletePasskey({
+													id: passkey.id,
+													fetchOptions: {
+														onRequest: () => {
+															setIsDeletePasskey(true);
+														},
+														onSuccess: () => {
+															toast("Passkey deleted successfully");
+															setIsDeletePasskey(false);
+														},
+														onError: (error) => {
+															toast.error(error.error.message);
+															setIsDeletePasskey(false);
+														},
+													},
+												});
+											}}
+										>
+											{isDeletePasskey ? (
+												<Loader2 size={15} className="animate-spin" />
+											) : (
+												<Trash
+													size={15}
+													className="cursor-pointer text-red-600"
+												/>
+											)}
+										</button>
+									</TableCell>
+								</TableRow>
+							))}
+						</TableBody>
+					</Table>
+				) : (
+					<p className="text-sm text-muted-foreground">No passkeys found</p>
+				)}
+				{!data?.length && (
+					<div className="flex flex-col gap-2">
+						<div className="flex flex-col gap-2">
+							<Label htmlFor="passkey-name" className="text-sm">
+								New Passkey
+							</Label>
+							<Input
+								id="passkey-name"
+								value={passkeyName}
+								onChange={(e) => setPasskeyName(e.target.value)}
+								placeholder="My Passkey"
+							/>
+						</div>
+						<Button type="submit" onClick={handleAddPasskey} className="w-full">
+							{isLoading ? (
+								<Loader2 size={15} className="animate-spin" />
+							) : (
+								<>
+									<Fingerprint className="mr-2 h-4 w-4" />
+									Create Passkey
+								</>
+							)}
+						</Button>
+					</div>
+				)}
+				<DialogFooter>
+					<Button onClick={() => setIsOpen(false)}>Close</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}

examples/nextjs-example/app/features.tsx

@@ -0,0 +1,98 @@
+"use client";
+import React from "react";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { Logo } from "@/components/logo";
+
+export function Features() {
+	return (
+		<>
+			<div className="flex flex-col lg:flex-row bg-white dark:bg-black w-full gap-4 mx-auto px-8">
+				<Card title="BetterAuth" icon={<Logo className=" w-44" />}></Card>
+			</div>
+		</>
+	);
+}
+
+const Card = ({
+	title,
+	icon,
+	children,
+}: {
+	title: string;
+	icon: React.ReactNode;
+	children?: React.ReactNode;
+}) => {
+	const [hovered, setHovered] = React.useState(false);
+	return (
+		<div
+			onMouseEnter={() => setHovered(true)}
+			onMouseLeave={() => setHovered(false)}
+			className="border border-black/[0.2] group/canvas-card flex items-center justify-center dark:border-white/[0.2]  max-w-sm w-full mx-auto p-4 relative h-[18rem]"
+		>
+			<Icon className="absolute h-6 w-6 -top-3 -left-3 dark:text-white text-black" />
+			<Icon className="absolute h-6 w-6 -bottom-3 -left-3 dark:text-white text-black" />
+			<Icon className="absolute h-6 w-6 -top-3 -right-3 dark:text-white text-black" />
+			<Icon className="absolute h-6 w-6 -bottom-3 -right-3 dark:text-white text-black" />
+
+			<AnimatePresence>
+				{hovered && (
+					<motion.div
+						initial={{ opacity: 0 }}
+						animate={{ opacity: 1 }}
+						className="h-full w-full absolute inset-0"
+					>
+						{children}
+					</motion.div>
+				)}
+			</AnimatePresence>
+
+			<div className="relative z-20">
+				<div className="text-center group-hover/canvas-card:-translate-y-4 group-hover/canvas-card:opacity-0 transition duration-200 w-full  mx-auto flex items-center justify-center">
+					{icon}
+				</div>
+				<h2 className="dark:text-white text-xl opacity-0 group-hover/canvas-card:opacity-100 relative z-10 text-black mt-4  font-bold group-hover/canvas-card:text-white group-hover/canvas-card:-translate-y-2 transition duration-200">
+					{title}
+				</h2>
+			</div>
+		</div>
+	);
+};
+
+const AceternityIcon = () => {
+	return (
+		<svg
+			width="66"
+			height="65"
+			viewBox="0 0 66 65"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className="h-10 w-10 text-black dark:text-white group-hover/canvas-card:text-white "
+		>
+			<path
+				d="M8 8.05571C8 8.05571 54.9009 18.1782 57.8687 30.062C60.8365 41.9458 9.05432 57.4696 9.05432 57.4696"
+				stroke="currentColor"
+				strokeWidth="15"
+				strokeMiterlimit="3.86874"
+				strokeLinecap="round"
+				style={{ mixBlendMode: "darken" }}
+			/>
+		</svg>
+	);
+};
+
+export const Icon = ({ className, ...rest }: any) => {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			fill="none"
+			viewBox="0 0 24 24"
+			strokeWidth="1.5"
+			stroke="currentColor"
+			className={className}
+			{...rest}
+		>
+			<path strokeLinecap="round" strokeLinejoin="round" d="M12 6v12m6-6H6" />
+		</svg>
+	);
+};

examples/nextjs-example/app/globals.css

@@ -0,0 +1,81 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 20 14.3% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 20 14.3% 4.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;
+    --primary: 24 9.8% 10%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 60 4.8% 95.9%;
+    --secondary-foreground: 24 9.8% 10%;
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 20 14.3% 4.1%;
+    --radius: 0.3rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+    --primary: 60 9.1% 97.8%;
+    --primary-foreground: 24 9.8% 10%;
+    --secondary: 12 6.5% 15.1%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 24 5.7% 82.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+
+.no-visible-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
+}
+ 
+.no-visible-scrollbar::-webkit-scrollbar {
+  display: none;
+}

examples/nextjs-example/app/layout.tsx

@@ -0,0 +1,40 @@
+import type { Metadata } from "next";
+import localFont from "next/font/local";
+import "./globals.css";
+import { Toaster } from "@/components/ui/sonner";
+import { ThemeProvider } from "@/components/theme-provider";
+import { GeistMono } from "geist/font/mono";
+import { GeistSans } from "geist/font/sans";
+import { Wrapper, WrapperWithQuery } from "@/components/wrapper";
+import { createMetadata } from "@/lib/metadata";
+
+export const metadata = createMetadata({
+	title: {
+		template: "%s | Better Auth",
+		default: "Better Auth",
+	},
+	description: "The most comprehensive authentication library for typescript",
+	metadataBase: new URL("https://demo.better-auth.com"),
+});
+
+export default function RootLayout({
+	children,
+}: Readonly<{
+	children: React.ReactNode;
+}>) {
+	return (
+		<html lang="en" suppressHydrationWarning>
+			<head>
+				<link rel="icon" href="/favicon/favicon.ico" sizes="any" />
+			</head>
+			<body className={`${GeistSans.variable} ${GeistMono.variable} font-sans`}>
+				<ThemeProvider attribute="class" defaultTheme="dark">
+					<Wrapper>
+						<WrapperWithQuery>{children}</WrapperWithQuery>
+					</Wrapper>
+					<Toaster richColors closeButton />
+				</ThemeProvider>
+			</body>
+		</html>
+	);
+}

examples/nextjs-example/app/page.tsx

@@ -0,0 +1,64 @@
+import { SignInButton, SignInFallback } from "@/components/sign-in-btn";
+import { headers } from "next/headers";
+import { Suspense } from "react";
+
+export default async function Home() {
+	const features = [
+		"Email & Password",
+		"Organization | Teams",
+		"Passkeys",
+		"Multi Factor",
+		"Password Reset",
+		"Email Verification",
+		"Roles & Permissions",
+		"Rate Limiting",
+		"Session Management",
+	];
+	return (
+		<div className="min-h-[80vh] flex items-center justify-center overflow-hidden no-visible-scrollbar px-6 md:px-0">
+			<main className="flex flex-col gap-4 row-start-2 items-center justify-center">
+				<div className="flex flex-col gap-1">
+					<h3 className="font-bold text-4xl text-black dark:text-white text-center">
+						Better Auth.
+					</h3>
+					<p className="text-center break-words text-sm md:text-base">
+						Official demo to showcase{" "}
+						<a
+							href="https://better-auth.com"
+							target="_blank"
+							className="italic underline"
+						>
+							better-auth.
+						</a>{" "}
+						features and capabilities. <br />
+					</p>
+				</div>
+				<div className="md:w-10/12 w-full flex flex-col gap-4">
+					<div className="flex flex-col gap-3 pt-2 flex-wrap">
+						<div className="border-y py-2 border-dotted bg-secondary/60 opacity-80">
+							<div className="text-xs flex items-center gap-2 justify-center text-muted-foreground ">
+								<span className="text-center">
+									All features on this demo are Implemented with better auth
+									without any custom backend code
+								</span>
+							</div>
+						</div>
+						<div className="flex gap-2 justify-center flex-wrap">
+							{features.map((feature) => (
+								<span
+									className="border-b pb-1 text-muted-foreground text-xs cursor-pointer hover:text-foreground duration-150 ease-in-out transition-all hover:border-foreground flex items-center gap-1"
+									key={feature}
+								>
+									{feature}.
+								</span>
+							))}
+						</div>
+					</div>
+					<Suspense fallback={<SignInFallback />}>
+						<SignInButton />
+					</Suspense>
+				</div>
+			</main>
+		</div>
+	);
+}

examples/nextjs-example/components.json

@@ -0,0 +1,20 @@
+{
+	"$schema": "https://ui.shadcn.com/schema.json",
+	"style": "new-york",
+	"rsc": true,
+	"tsx": true,
+	"tailwind": {
+		"config": "tailwind.config.ts",
+		"css": "app/globals.css",
+		"baseColor": "neutral",
+		"cssVariables": true,
+		"prefix": ""
+	},
+	"aliases": {
+		"components": "@/components",
+		"utils": "@/lib/utils",
+		"ui": "@/components/ui",
+		"lib": "@/lib",
+		"hooks": "@/hooks"
+	}
+}

examples/nextjs-example/components/logo.tsx

@@ -0,0 +1,24 @@
+import { SVGProps } from "react";
+
+export const Logo = (props: SVGProps<any>) => {
+	return (
+		<svg
+			width="22"
+			height="22"
+			viewBox="0 0 200 200"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			{...props}
+		>
+			<rect width="200" height="200" fill="#D9D9D9" />
+			<line x1="21.5" y1="2.18557e-08" x2="21.5" y2="200" stroke="#C4C4C4" />
+			<line x1="173.5" y1="2.18557e-08" x2="173.5" y2="200" stroke="#C4C4C4" />
+			<line x1="200" y1="176.5" x2="-4.37114e-08" y2="176.5" stroke="#C4C4C4" />
+			<line x1="200" y1="24.5" x2="-4.37114e-08" y2="24.5" stroke="#C4C4C4" />
+			<path
+				d="M64.4545 135V65.1818H88.8636C93.7273 65.1818 97.7386 66.0227 100.898 67.7045C104.057 69.3636 106.409 71.6023 107.955 74.4205C109.5 77.2159 110.273 80.3182 110.273 83.7273C110.273 86.7273 109.739 89.2045 108.67 91.1591C107.625 93.1136 106.239 94.6591 104.511 95.7955C102.807 96.9318 100.955 97.7727 98.9545 98.3182V99C101.091 99.1364 103.239 99.8864 105.398 101.25C107.557 102.614 109.364 104.568 110.818 107.114C112.273 109.659 113 112.773 113 116.455C113 119.955 112.205 123.102 110.614 125.898C109.023 128.693 106.511 130.909 103.08 132.545C99.6477 134.182 95.1818 135 89.6818 135H64.4545ZM72.9091 127.5H89.6818C95.2045 127.5 99.125 126.432 101.443 124.295C103.784 122.136 104.955 119.523 104.955 116.455C104.955 114.091 104.352 111.909 103.148 109.909C101.943 107.886 100.227 106.273 98 105.068C95.7727 103.841 93.1364 103.227 90.0909 103.227H72.9091V127.5ZM72.9091 95.8636H88.5909C91.1364 95.8636 93.4318 95.3636 95.4773 94.3636C97.5455 93.3636 99.1818 91.9545 100.386 90.1364C101.614 88.3182 102.227 86.1818 102.227 83.7273C102.227 80.6591 101.159 78.0568 99.0227 75.9205C96.8864 73.7614 93.5 72.6818 88.8636 72.6818H72.9091V95.8636ZM131.665 135.545C129.983 135.545 128.54 134.943 127.335 133.739C126.131 132.534 125.528 131.091 125.528 129.409C125.528 127.727 126.131 126.284 127.335 125.08C128.54 123.875 129.983 123.273 131.665 123.273C133.347 123.273 134.79 123.875 135.994 125.08C137.199 126.284 137.801 127.727 137.801 129.409C137.801 130.523 137.517 131.545 136.949 132.477C136.403 133.409 135.665 134.159 134.733 134.727C133.824 135.273 132.801 135.545 131.665 135.545Z"
+				fill="#302208"
+			/>
+		</svg>
+	);
+};

examples/nextjs-example/components/sign-in-btn.tsx

@@ -0,0 +1,87 @@
+import Link from "next/link";
+import { Button } from "./ui/button";
+import { auth } from "@/lib/auth";
+import { headers } from "next/headers";
+
+export async function SignInButton() {
+	const session = await auth.api.getSession({
+		headers: headers(),
+	});
+
+	return (
+		<Link
+			href={session?.session ? "/dashboard" : "/sign-in"}
+			className="flex justify-center"
+		>
+			<Button className="gap-2  justify-between" variant="default">
+				{!session?.session ? (
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="1.2em"
+						height="1.2em"
+						viewBox="0 0 24 24"
+					>
+						<path
+							fill="currentColor"
+							d="M5 3H3v4h2V5h14v14H5v-2H3v4h18V3zm12 8h-2V9h-2V7h-2v2h2v2H3v2h10v2h-2v2h2v-2h2v-2h2z"
+						></path>
+					</svg>
+				) : (
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="1.2em"
+						height="1.2em"
+						viewBox="0 0 24 24"
+					>
+						<path fill="currentColor" d="M2 3h20v18H2zm18 16V7H4v12z"></path>
+					</svg>
+				)}
+				<span>{session?.session ? "Dashboard" : "Sign In"}</span>
+			</Button>
+		</Link>
+	);
+}
+
+function checkOptimisticSession(headers: Headers) {
+	const guessIsSignIn =
+		headers.get("cookie")?.includes("better-auth.session") ||
+		headers.get("cookie")?.includes("__Secure-better-auth.session-token");
+	return !!guessIsSignIn;
+}
+
+export function SignInFallback() {
+	//to avoid flash of unauthenticated state
+	const guessIsSignIn = checkOptimisticSession(headers());
+	return (
+		<Link
+			href={guessIsSignIn ? "/dashboard" : "/sign-in"}
+			className="flex justify-center"
+		>
+			<Button className="gap-2  justify-between" variant="default">
+				{!guessIsSignIn ? (
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="1.2em"
+						height="1.2em"
+						viewBox="0 0 24 24"
+					>
+						<path
+							fill="currentColor"
+							d="M5 3H3v4h2V5h14v14H5v-2H3v4h18V3zm12 8h-2V9h-2V7h-2v2h2v2H3v2h10v2h-2v2h2v-2h2v-2h2z"
+						></path>
+					</svg>
+				) : (
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						width="1.2em"
+						height="1.2em"
+						viewBox="0 0 24 24"
+					>
+						<path fill="currentColor" d="M2 3h20v18H2zm18 16V7H4v12z"></path>
+					</svg>
+				)}
+				<span>{guessIsSignIn ? "Dashboard" : "Sign In"}</span>
+			</Button>
+		</Link>
+	);
+}

examples/nextjs-example/components/sign-in.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { PasswordInput } from "@/components/ui/password-input";
+import { signIn } from "@/lib/auth-client";
+import { GitHubLogoIcon } from "@radix-ui/react-icons";
+import { Key, Loader2 } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { toast } from "sonner";
+
+export default function SignIn() {
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [rememberMe, setRememberMe] = useState(false);
+	const router = useRouter();
+	const [loading, setLoading] = useState(false);
+	return (
+		<Card className="z-50 rounded-md rounded-t-none max-w-md">
+			<CardHeader>
+				<CardTitle className="text-lg md:text-xl">Sign In</CardTitle>
+				<CardDescription className="text-xs md:text-sm">
+					Enter your email below to login to your account
+				</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<div className="grid gap-4">
+					<div className="grid gap-2">
+						<Label htmlFor="email">Email</Label>
+						<Input
+							id="email"
+							type="email"
+							placeholder="m@example.com"
+							required
+							onChange={(e) => {
+								setEmail(e.target.value);
+							}}
+							value={email}
+						/>
+					</div>
+					<div className="grid gap-2">
+						<div className="flex items-center">
+							<Label htmlFor="password">Password</Label>
+							<Link
+								href="/forget-password"
+								className="ml-auto inline-block text-sm underline"
+							>
+								Forgot your password?
+							</Link>
+						</div>
+						<PasswordInput
+							id="password"
+							value={password}
+							onChange={(e) => setPassword(e.target.value)}
+							autoComplete="password"
+							placeholder="Password"
+						/>
+					</div>
+					<div className="flex items-center gap-2">
+						<Checkbox
+							onClick={() => {
+								setRememberMe(!rememberMe);
+							}}
+						/>
+						<Label>Remember me</Label>
+					</div>
+
+					<Button
+						type="submit"
+						className="w-full"
+						disabled={loading}
+						onClick={async () => {
+							await signIn.email({
+								email: email,
+								password: password,
+								callbackURL: "/dashboard",
+								dontRememberMe: !rememberMe,
+								fetchOptions: {
+									onRequest: () => {
+										setLoading(true);
+									},
+									onResponse: () => {
+										setLoading(false);
+									},
+									onError: (ctx) => {
+										toast.error(ctx.error.message);
+									},
+								},
+							});
+						}}
+					>
+						{loading ? <Loader2 size={16} className="animate-spin" /> : "Login"}
+					</Button>
+					<Button
+						variant="outline"
+						className="w-full gap-2"
+						onClick={async () => {
+							await signIn.social({
+								provider: "github",
+								callbackURL: "/dashboard",
+							});
+						}}
+					>
+						<GitHubLogoIcon />
+						Continue with Github
+					</Button>
+					<Button
+						variant="outline"
+						className="w-full gap-2"
+						onClick={async () => {
+							await signIn.social({
+								provider: "google",
+								callbackURL: "/dashboard",
+							});
+						}}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="0.98em"
+							height="1em"
+							viewBox="0 0 256 262"
+						>
+							<path
+								fill="#4285F4"
+								d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
+							/>
+							<path
+								fill="#34A853"
+								d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
+							/>
+							<path
+								fill="#FBBC05"
+								d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z"
+							/>
+							<path
+								fill="#EB4335"
+								d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
+							/>
+						</svg>
+						Continue with Google
+					</Button>
+					<Button
+						variant="outline"
+						className="gap-2"
+						onClick={async () => {
+							await signIn.passkey({
+								callbackURL: "/dashboard",
+							});
+						}}
+					>
+						<Key size={16} />
+						Sign-in with Passkey
+					</Button>
+				</div>
+			</CardContent>
+			<CardFooter>
+				<div className="flex justify-center w-full border-t py-4">
+					<p className="text-center text-xs text-neutral-500">
+						Secured by <span className="text-orange-400">better-auth.</span>
+					</p>
+				</div>
+			</CardFooter>
+		</Card>
+	);
+}

examples/nextjs-example/components/sign-up.tsx

@@ -0,0 +1,263 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { PasswordInput } from "@/components/ui/password-input";
+import { GitHubLogoIcon } from "@radix-ui/react-icons";
+import { useState } from "react";
+import { client, signIn, signUp } from "@/lib/auth-client";
+import Image from "next/image";
+import { Loader2, X } from "lucide-react";
+import { toast } from "sonner";
+
+export function SignUp() {
+	const [firstName, setFirstName] = useState("");
+	const [lastName, setLastName] = useState("");
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [passwordConfirmation, setPasswordConfirmation] = useState("");
+	const [image, setImage] = useState<File | null>(null);
+	const [imagePreview, setImagePreview] = useState<string | null>(null);
+
+	const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const file = e.target.files?.[0];
+		if (file) {
+			setImage(file);
+			const reader = new FileReader();
+			reader.onloadend = () => {
+				setImagePreview(reader.result as string);
+			};
+			reader.readAsDataURL(file);
+		}
+	};
+	const [loading, setLoading] = useState(false);
+
+	return (
+		<Card className="z-50 rounded-md rounded-t-none max-w-md">
+			<CardHeader>
+				<CardTitle className="text-lg md:text-xl">Sign Up</CardTitle>
+				<CardDescription className="text-xs md:text-sm">
+					Enter your information to create an account
+				</CardDescription>
+			</CardHeader>
+			<CardContent>
+				<div className="grid gap-4">
+					<div className="grid grid-cols-2 gap-4">
+						<div className="grid gap-2">
+							<Label htmlFor="first-name">First name</Label>
+							<Input
+								id="first-name"
+								placeholder="Max"
+								required
+								onChange={(e) => {
+									setFirstName(e.target.value);
+								}}
+								value={firstName}
+							/>
+						</div>
+						<div className="grid gap-2">
+							<Label htmlFor="last-name">Last name</Label>
+							<Input
+								id="last-name"
+								placeholder="Robinson"
+								required
+								onChange={(e) => {
+									setLastName(e.target.value);
+								}}
+								value={lastName}
+							/>
+						</div>
+					</div>
+					<div className="grid gap-2">
+						<Label htmlFor="email">Email</Label>
+						<Input
+							id="email"
+							type="email"
+							placeholder="m@example.com"
+							required
+							onChange={(e) => {
+								setEmail(e.target.value);
+							}}
+							value={email}
+						/>
+					</div>
+					<div className="grid gap-2">
+						<Label htmlFor="password">Password</Label>
+						<PasswordInput
+							id="password"
+							value={password}
+							onChange={(e) => setPassword(e.target.value)}
+							autoComplete="new-password"
+							placeholder="Password"
+						/>
+					</div>
+					<div className="grid gap-2">
+						<Label htmlFor="password">Confirm Password</Label>
+						<PasswordInput
+							id="password_confirmation"
+							value={passwordConfirmation}
+							onChange={(e) => setPasswordConfirmation(e.target.value)}
+							autoComplete="new-password"
+							placeholder="Confirm Password"
+						/>
+					</div>
+					<div className="grid gap-2">
+						<Label htmlFor="image">Profile Image (optional)</Label>
+						<div className="flex items-end gap-4">
+							{imagePreview && (
+								<div className="relative w-16 h-16 rounded-sm overflow-hidden">
+									<Image
+										src={imagePreview}
+										alt="Profile preview"
+										layout="fill"
+										objectFit="cover"
+									/>
+								</div>
+							)}
+							<div className="flex items-center gap-2 w-full">
+								<Input
+									id="image"
+									type="file"
+									accept="image/*"
+									onChange={handleImageChange}
+									className="w-full"
+								/>
+								{imagePreview && (
+									<X
+										className="cursor-pointer"
+										onClick={() => {
+											setImage(null);
+											setImagePreview(null);
+										}}
+									/>
+								)}
+							</div>
+						</div>
+					</div>
+					<Button
+						type="submit"
+						className="w-full"
+						disabled={loading}
+						onClick={async () => {
+							await signUp.email({
+								email,
+								password,
+								name: `${firstName} ${lastName}`,
+								image: image ? await convertImageToBase64(image) : "",
+								callbackURL: "/dashboard",
+								fetchOptions: {
+									onResponse: () => {
+										setLoading(false);
+									},
+									onRequest: () => {
+										setLoading(true);
+									},
+									onError: (ctx) => {
+										toast.error(ctx.error.message);
+									},
+								},
+							});
+						}}
+					>
+						{loading ? (
+							<Loader2 size={16} className="animate-spin" />
+						) : (
+							"Create an account"
+						)}
+					</Button>
+					<Button
+						variant="outline"
+						className="w-full gap-2"
+						onClick={async () => {
+							const res = await client.signIn.social({
+								provider: "google",
+								callbackURL: "/dashboard",
+								fetchOptions: {
+									onRequest: () => {
+										setLoading(true);
+									},
+									onResponse: () => {
+										setLoading(false);
+									},
+								},
+							});
+						}}
+						disabled={loading}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="0.98em"
+							height="1em"
+							viewBox="0 0 256 262"
+						>
+							<path
+								fill="#4285F4"
+								d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
+							/>
+							<path
+								fill="#34A853"
+								d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
+							/>
+							<path
+								fill="#FBBC05"
+								d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z"
+							/>
+							<path
+								fill="#EB4335"
+								d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
+							/>
+						</svg>
+						Continue with Google
+					</Button>
+					<Button
+						variant="outline"
+						className="w-full gap-2"
+						onClick={async () => {
+							await signIn.social({
+								provider: "github",
+								callbackURL: "/dashboard",
+								fetchOptions: {
+									onRequest: () => {
+										setLoading(true);
+									},
+									onResponse: () => {
+										setLoading(false);
+									},
+								},
+							});
+						}}
+						disabled={loading}
+					>
+						<GitHubLogoIcon />
+						Continue with Github
+					</Button>
+				</div>
+			</CardContent>
+			<CardFooter>
+				<div className="flex justify-center w-full border-t py-4">
+					<p className="text-center text-xs text-neutral-500">
+						Secured by <span className="text-orange-400">better-auth.</span>
+					</p>
+				</div>
+			</CardFooter>
+		</Card>
+	);
+}
+
+async function convertImageToBase64(file: File): Promise<string> {
+	return new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.onloadend = () => resolve(reader.result as string);
+		reader.onerror = reject;
+		reader.readAsDataURL(file);
+	});
+}

examples/nextjs-example/components/theme-provider.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes/dist/types";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+	return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

examples/nextjs-example/components/theme-toggle.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import * as React from "react";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+
+import { Button } from "@/components/ui/button";
+
+export function ThemeToggle() {
+	const { setTheme, theme } = useTheme();
+
+	return (
+		<Button
+			variant="ghost"
+			size="icon"
+			onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+		>
+			<Sun className="h-[1.5rem] w-[1.3rem] dark:hidden" color="#000" />
+			<Moon className="hidden h-5 w-5 dark:block" />
+			<span className="sr-only">Toggle theme</span>
+		</Button>
+	);
+}

examples/nextjs-example/components/ui/accordion.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+
+import { cn } from "@/lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+	React.ElementRef<typeof AccordionPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+	<AccordionPrimitive.Item
+		ref={ref}
+		className={cn("border-b", className)}
+		{...props}
+	/>
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+	React.ElementRef<typeof AccordionPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+	<AccordionPrimitive.Header className="flex">
+		<AccordionPrimitive.Trigger
+			ref={ref}
+			className={cn(
+				"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+		</AccordionPrimitive.Trigger>
+	</AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+	React.ElementRef<typeof AccordionPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+	<AccordionPrimitive.Content
+		ref={ref}
+		className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+		{...props}
+	>
+		<div className={cn("pb-4 pt-0", className)}>{children}</div>
+	</AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

examples/nextjs-example/components/ui/alert-dialog.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+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";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Overlay
+		className={cn(
+			"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+			className,
+		)}
+		{...props}
+		ref={ref}
+	/>
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPortal>
+		<AlertDialogOverlay />
+		<AlertDialogPrimitive.Content
+			ref={ref}
+			className={cn(
+				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+				className,
+			)}
+			{...props}
+		/>
+	</AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div
+		className={cn(
+			"flex flex-col space-y-2 text-center sm:text-left",
+			className,
+		)}
+		{...props}
+	/>
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div
+		className={cn(
+			"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+			className,
+		)}
+		{...props}
+	/>
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Title
+		ref={ref}
+		className={cn("text-lg font-semibold", className)}
+		{...props}
+	/>
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Description
+		ref={ref}
+		className={cn("text-sm text-muted-foreground", className)}
+		{...props}
+	/>
+));
+AlertDialogDescription.displayName =
+	AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Action>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Action
+		ref={ref}
+		className={cn(buttonVariants(), className)}
+		{...props}
+	/>
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+	React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+	<AlertDialogPrimitive.Cancel
+		ref={ref}
+		className={cn(
+			buttonVariants({ variant: "outline" }),
+			"mt-2 sm:mt-0",
+			className,
+		)}
+		{...props}
+	/>
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+	AlertDialog,
+	AlertDialogPortal,
+	AlertDialogOverlay,
+	AlertDialogTrigger,
+	AlertDialogContent,
+	AlertDialogHeader,
+	AlertDialogFooter,
+	AlertDialogTitle,
+	AlertDialogDescription,
+	AlertDialogAction,
+	AlertDialogCancel,
+};

examples/nextjs-example/components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+	"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+	{
+		variants: {
+			variant: {
+				default: "bg-background text-foreground",
+				destructive:
+					"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+const Alert = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+	<div
+		ref={ref}
+		role="alert"
+		className={cn(alertVariants({ variant }), className)}
+		{...props}
+	/>
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+	<h5
+		ref={ref}
+		className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+		{...props}
+	/>
+));
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn("text-sm [&_p]:leading-relaxed", className)}
+		{...props}
+	/>
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };

examples/nextjs-example/components/ui/aspect-ratio.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+const AspectRatio = AspectRatioPrimitive.Root;
+
+export { AspectRatio };

examples/nextjs-example/components/ui/avatar.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "@/lib/utils";
+
+const Avatar = React.forwardRef<
+	React.ElementRef<typeof AvatarPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+	<AvatarPrimitive.Root
+		ref={ref}
+		className={cn(
+			"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+			className,
+		)}
+		{...props}
+	/>
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+	React.ElementRef<typeof AvatarPrimitive.Image>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+	<AvatarPrimitive.Image
+		ref={ref}
+		className={cn("aspect-square h-full w-full", className)}
+		{...props}
+	/>
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+	React.ElementRef<typeof AvatarPrimitive.Fallback>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+	<AvatarPrimitive.Fallback
+		ref={ref}
+		className={cn(
+			"flex h-full w-full items-center justify-center rounded-full bg-muted",
+			className,
+		)}
+		{...props}
+	/>
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

examples/nextjs-example/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+	"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+	{
+		variants: {
+			variant: {
+				default:
+					"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+				secondary:
+					"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+				destructive:
+					"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+				outline: "text-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+export interface BadgeProps
+	extends React.HTMLAttributes<HTMLDivElement>,
+		VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+	return (
+		<div className={cn(badgeVariants({ variant }), className)} {...props} />
+	);
+}
+
+export { Badge, badgeVariants };

examples/nextjs-example/components/ui/breadcrumb.tsx

@@ -0,0 +1,115 @@
+import * as React from "react";
+import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons";
+import { Slot } from "@radix-ui/react-slot";
+
+import { cn } from "@/lib/utils";
+
+const Breadcrumb = React.forwardRef<
+	HTMLElement,
+	React.ComponentPropsWithoutRef<"nav"> & {
+		separator?: React.ReactNode;
+	}
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = React.forwardRef<
+	HTMLOListElement,
+	React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+	<ol
+		ref={ref}
+		className={cn(
+			"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+			className,
+		)}
+		{...props}
+	/>
+));
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = React.forwardRef<
+	HTMLLIElement,
+	React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+	<li
+		ref={ref}
+		className={cn("inline-flex items-center gap-1.5", className)}
+		{...props}
+	/>
+));
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = React.forwardRef<
+	HTMLAnchorElement,
+	React.ComponentPropsWithoutRef<"a"> & {
+		asChild?: boolean;
+	}
+>(({ asChild, className, ...props }, ref) => {
+	const Comp = asChild ? Slot : "a";
+
+	return (
+		<Comp
+			ref={ref}
+			className={cn("transition-colors hover:text-foreground", className)}
+			{...props}
+		/>
+	);
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef<
+	HTMLSpanElement,
+	React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+	<span
+		ref={ref}
+		role="link"
+		aria-disabled="true"
+		aria-current="page"
+		className={cn("font-normal text-foreground", className)}
+		{...props}
+	/>
+));
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({
+	children,
+	className,
+	...props
+}: React.ComponentProps<"li">) => (
+	<li
+		role="presentation"
+		aria-hidden="true"
+		className={cn("[&>svg]:size-3.5", className)}
+		{...props}
+	>
+		{children ?? <ChevronRightIcon />}
+	</li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({
+	className,
+	...props
+}: React.ComponentProps<"span">) => (
+	<span
+		role="presentation"
+		aria-hidden="true"
+		className={cn("flex h-9 w-9 items-center justify-center", className)}
+		{...props}
+	>
+		<DotsHorizontalIcon className="h-4 w-4" />
+		<span className="sr-only">More</span>
+	</span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+
+export {
+	Breadcrumb,
+	BreadcrumbList,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+	BreadcrumbEllipsis,
+};

examples/nextjs-example/components/ui/button.tsx

@@ -0,0 +1,57 @@
+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 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+	{
+		variants: {
+			variant: {
+				default:
+					"bg-primary text-primary-foreground shadow hover:bg-primary/90",
+				destructive:
+					"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+				outline:
+					"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+				secondary:
+					"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2",
+				sm: "h-8 rounded-md px-3 text-xs",
+				lg: "h-10 rounded-md px-8",
+				icon: "h-9 w-9",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+export interface ButtonProps
+	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+		VariantProps<typeof buttonVariants> {
+	asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+	({ className, variant, size, asChild = false, ...props }, ref) => {
+		const Comp = asChild ? Slot : "button";
+		return (
+			<Comp
+				className={cn(buttonVariants({ variant, size, className }))}
+				ref={ref}
+				{...props}
+			/>
+		);
+	},
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

examples/nextjs-example/components/ui/calendar.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import * as React from "react";
+import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
+import { DayPicker } from "react-day-picker";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({
+	className,
+	classNames,
+	showOutsideDays = true,
+	...props
+}: CalendarProps) {
+	return (
+		<DayPicker
+			showOutsideDays={showOutsideDays}
+			className={cn("p-3", className)}
+			classNames={{
+				months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+				month: "space-y-4",
+				caption: "flex justify-center pt-1 relative items-center",
+				caption_label: "text-sm font-medium",
+				nav: "space-x-1 flex items-center",
+				nav_button: cn(
+					buttonVariants({ variant: "outline" }),
+					"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+				),
+				nav_button_previous: "absolute left-1",
+				nav_button_next: "absolute right-1",
+				table: "w-full border-collapse space-y-1",
+				head_row: "flex",
+				head_cell:
+					"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+				row: "flex w-full mt-2",
+				cell: cn(
+					"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+					props.mode === "range"
+						? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+						: "[&:has([aria-selected])]:rounded-md",
+				),
+				day: cn(
+					buttonVariants({ variant: "ghost" }),
+					"h-8 w-8 p-0 font-normal aria-selected:opacity-100",
+				),
+				day_range_start: "day-range-start",
+				day_range_end: "day-range-end",
+				day_selected:
+					"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+				day_today: "bg-accent text-accent-foreground",
+				day_outside:
+					"day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+				day_disabled: "text-muted-foreground opacity-50",
+				day_range_middle:
+					"aria-selected:bg-accent aria-selected:text-accent-foreground",
+				day_hidden: "invisible",
+				...classNames,
+			}}
+			components={{
+				IconLeft: ({ ...props }) => <ChevronLeftIcon className="h-4 w-4" />,
+				IconRight: ({ ...props }) => <ChevronRightIcon className="h-4 w-4" />,
+			}}
+			{...props}
+		/>
+	);
+}
+Calendar.displayName = "Calendar";
+
+export { Calendar };

examples/nextjs-example/components/ui/canvas-reveal-effect.tsx

@@ -0,0 +1,308 @@
+"use client";
+import { cn } from "@/lib/utils";
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+import React, { useMemo, useRef } from "react";
+import * as THREE from "three";
+
+export const CanvasRevealEffect = ({
+	animationSpeed = 0.4,
+	opacities = [0.3, 0.3, 0.3, 0.5, 0.5, 0.5, 0.8, 0.8, 0.8, 1],
+	colors = [[0, 255, 255]],
+	containerClassName,
+	dotSize,
+	showGradient = true,
+}: {
+	/**
+	 * 0.1 - slower
+	 * 1.0 - faster
+	 */
+	animationSpeed?: number;
+	opacities?: number[];
+	colors?: number[][];
+	containerClassName?: string;
+	dotSize?: number;
+	showGradient?: boolean;
+}) => {
+	return (
+		<div className={cn("h-full relative bg-white w-full", containerClassName)}>
+			<div className="h-full w-full">
+				<DotMatrix
+					colors={colors ?? [[0, 255, 255]]}
+					dotSize={dotSize ?? 3}
+					opacities={
+						opacities ?? [0.3, 0.3, 0.3, 0.5, 0.5, 0.5, 0.8, 0.8, 0.8, 1]
+					}
+					shader={`
+              float animation_speed_factor = ${animationSpeed.toFixed(1)};
+              float intro_offset = distance(u_resolution / 2.0 / u_total_size, st2) * 0.01 + (random(st2) * 0.15);
+              opacity *= step(intro_offset, u_time * animation_speed_factor);
+              opacity *= clamp((1.0 - step(intro_offset + 0.1, u_time * animation_speed_factor)) * 1.25, 1.0, 1.25);
+            `}
+					center={["x", "y"]}
+				/>
+			</div>
+			{showGradient && (
+				<div className="absolute inset-0 bg-gradient-to-t from-gray-950 to-[84%]" />
+			)}
+		</div>
+	);
+};
+
+interface DotMatrixProps {
+	colors?: number[][];
+	opacities?: number[];
+	totalSize?: number;
+	dotSize?: number;
+	shader?: string;
+	center?: ("x" | "y")[];
+}
+
+const DotMatrix: React.FC<DotMatrixProps> = ({
+	colors = [[0, 0, 0]],
+	opacities = [0.04, 0.04, 0.04, 0.04, 0.04, 0.08, 0.08, 0.08, 0.08, 0.14],
+	totalSize = 4,
+	dotSize = 2,
+	shader = "",
+	center = ["x", "y"],
+}) => {
+	const uniforms = React.useMemo(() => {
+		let colorsArray = [
+			colors[0],
+			colors[0],
+			colors[0],
+			colors[0],
+			colors[0],
+			colors[0],
+		];
+		if (colors.length === 2) {
+			colorsArray = [
+				colors[0],
+				colors[0],
+				colors[0],
+				colors[1],
+				colors[1],
+				colors[1],
+			];
+		} else if (colors.length === 3) {
+			colorsArray = [
+				colors[0],
+				colors[0],
+				colors[1],
+				colors[1],
+				colors[2],
+				colors[2],
+			];
+		}
+
+		return {
+			u_colors: {
+				value: colorsArray.map((color) => [
+					color[0] / 255,
+					color[1] / 255,
+					color[2] / 255,
+				]),
+				type: "uniform3fv",
+			},
+			u_opacities: {
+				value: opacities,
+				type: "uniform1fv",
+			},
+			u_total_size: {
+				value: totalSize,
+				type: "uniform1f",
+			},
+			u_dot_size: {
+				value: dotSize,
+				type: "uniform1f",
+			},
+		};
+	}, [colors, opacities, totalSize, dotSize]);
+
+	return (
+		<Shader
+			source={`
+        precision mediump float;
+        in vec2 fragCoord;
+
+        uniform float u_time;
+        uniform float u_opacities[10];
+        uniform vec3 u_colors[6];
+        uniform float u_total_size;
+        uniform float u_dot_size;
+        uniform vec2 u_resolution;
+        out vec4 fragColor;
+        float PHI = 1.61803398874989484820459;
+        float random(vec2 xy) {
+            return fract(tan(distance(xy * PHI, xy) * 0.5) * xy.x);
+        }
+        float map(float value, float min1, float max1, float min2, float max2) {
+            return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
+        }
+        void main() {
+            vec2 st = fragCoord.xy;
+            ${
+							center.includes("x")
+								? "st.x -= abs(floor((mod(u_resolution.x, u_total_size) - u_dot_size) * 0.5));"
+								: ""
+						}
+            ${
+							center.includes("y")
+								? "st.y -= abs(floor((mod(u_resolution.y, u_total_size) - u_dot_size) * 0.5));"
+								: ""
+						}
+      float opacity = step(0.0, st.x);
+      opacity *= step(0.0, st.y);
+
+      vec2 st2 = vec2(int(st.x / u_total_size), int(st.y / u_total_size));
+
+      float frequency = 5.0;
+      float show_offset = random(st2);
+      float rand = random(st2 * floor((u_time / frequency) + show_offset + frequency) + 1.0);
+      opacity *= u_opacities[int(rand * 10.0)];
+      opacity *= 1.0 - step(u_dot_size / u_total_size, fract(st.x / u_total_size));
+      opacity *= 1.0 - step(u_dot_size / u_total_size, fract(st.y / u_total_size));
+
+      vec3 color = u_colors[int(show_offset * 6.0)];
+
+      ${shader}
+
+      fragColor = vec4(color, opacity);
+      fragColor.rgb *= fragColor.a;
+        }`}
+			uniforms={uniforms}
+			maxFps={60}
+		/>
+	);
+};
+
+type Uniforms = {
+	[key: string]: {
+		value: number[] | number[][] | number;
+		type: string;
+	};
+};
+const ShaderMaterial = ({
+	source,
+	uniforms,
+	maxFps = 60,
+}: {
+	source: string;
+	hovered?: boolean;
+	maxFps?: number;
+	uniforms: Uniforms;
+}) => {
+	const { size } = useThree();
+	const ref = useRef<THREE.Mesh>();
+	let lastFrameTime = 0;
+
+	useFrame(({ clock }) => {
+		if (!ref.current) return;
+		const timestamp = clock.getElapsedTime();
+		if (timestamp - lastFrameTime < 1 / maxFps) {
+			return;
+		}
+		lastFrameTime = timestamp;
+
+		const material: any = ref.current.material;
+		const timeLocation = material.uniforms.u_time;
+		timeLocation.value = timestamp;
+	});
+
+	const getUniforms = () => {
+		const preparedUniforms: any = {};
+
+		for (const uniformName in uniforms) {
+			const uniform: any = uniforms[uniformName];
+
+			switch (uniform.type) {
+				case "uniform1f":
+					preparedUniforms[uniformName] = { value: uniform.value, type: "1f" };
+					break;
+				case "uniform3f":
+					preparedUniforms[uniformName] = {
+						value: new THREE.Vector3().fromArray(uniform.value),
+						type: "3f",
+					};
+					break;
+				case "uniform1fv":
+					preparedUniforms[uniformName] = { value: uniform.value, type: "1fv" };
+					break;
+				case "uniform3fv":
+					preparedUniforms[uniformName] = {
+						value: uniform.value.map((v: number[]) =>
+							new THREE.Vector3().fromArray(v),
+						),
+						type: "3fv",
+					};
+					break;
+				case "uniform2f":
+					preparedUniforms[uniformName] = {
+						value: new THREE.Vector2().fromArray(uniform.value),
+						type: "2f",
+					};
+					break;
+				default:
+					console.error(`Invalid uniform type for '${uniformName}'.`);
+					break;
+			}
+		}
+
+		preparedUniforms["u_time"] = { value: 0, type: "1f" };
+		preparedUniforms["u_resolution"] = {
+			value: new THREE.Vector2(size.width * 2, size.height * 2),
+		}; // Initialize u_resolution
+		return preparedUniforms;
+	};
+
+	// Shader material
+	const material = useMemo(() => {
+		const materialObject = new THREE.ShaderMaterial({
+			vertexShader: `
+      precision mediump float;
+      in vec2 coordinates;
+      uniform vec2 u_resolution;
+      out vec2 fragCoord;
+      void main(){
+        float x = position.x;
+        float y = position.y;
+        gl_Position = vec4(x, y, 0.0, 1.0);
+        fragCoord = (position.xy + vec2(1.0)) * 0.5 * u_resolution;
+        fragCoord.y = u_resolution.y - fragCoord.y;
+      }
+      `,
+			fragmentShader: source,
+			uniforms: getUniforms(),
+			glslVersion: THREE.GLSL3,
+			blending: THREE.CustomBlending,
+			blendSrc: THREE.SrcAlphaFactor,
+			blendDst: THREE.OneFactor,
+		});
+
+		return materialObject;
+	}, [size.width, size.height, source]);
+
+	return (
+		<mesh ref={ref as any}>
+			<planeGeometry args={[2, 2]} />
+			<primitive object={material} attach="material" />
+		</mesh>
+	);
+};
+
+const Shader: React.FC<ShaderProps> = ({ source, uniforms, maxFps = 60 }) => {
+	return (
+		<Canvas className="absolute inset-0  h-full w-full">
+			<ShaderMaterial source={source} uniforms={uniforms} maxFps={maxFps} />
+		</Canvas>
+	);
+};
+interface ShaderProps {
+	source: string;
+	uniforms: {
+		[key: string]: {
+			value: number[] | number[][] | number;
+			type: string;
+		};
+	};
+	maxFps?: number;
+}

examples/nextjs-example/components/ui/card.tsx

@@ -0,0 +1,83 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn(
+			"rounded-xl border bg-card text-card-foreground shadow",
+			className,
+		)}
+		{...props}
+	/>
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn("flex flex-col space-y-1.5 p-6", className)}
+		{...props}
+	/>
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+	<h3
+		ref={ref}
+		className={cn("font-semibold leading-none tracking-tight", className)}
+		{...props}
+	/>
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+	<p
+		ref={ref}
+		className={cn("text-sm text-muted-foreground", className)}
+		{...props}
+	/>
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn("flex items-center p-6 pt-0", className)}
+		{...props}
+	/>
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+	Card,
+	CardHeader,
+	CardFooter,
+	CardTitle,
+	CardDescription,
+	CardContent,
+};

examples/nextjs-example/components/ui/carousel.tsx

@@ -0,0 +1,262 @@
+"use client";
+
+import * as React from "react";
+import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
+import useEmblaCarousel, {
+	type UseEmblaCarouselType,
+} from "embla-carousel-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+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<typeof useEmblaCarousel>[0];
+	api: ReturnType<typeof useEmblaCarousel>[1];
+	scrollPrev: () => void;
+	scrollNext: () => void;
+	canScrollPrev: boolean;
+	canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+	const context = React.useContext(CarouselContext);
+
+	if (!context) {
+		throw new Error("useCarousel must be used within a <Carousel />");
+	}
+
+	return context;
+}
+
+const Carousel = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+	(
+		{
+			orientation = "horizontal",
+			opts,
+			setApi,
+			plugins,
+			className,
+			children,
+			...props
+		},
+		ref,
+	) => {
+		const [carouselRef, api] = useEmblaCarousel(
+			{
+				...opts,
+				axis: orientation === "horizontal" ? "x" : "y",
+			},
+			plugins,
+		);
+		const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+		const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+		const onSelect = React.useCallback((api: CarouselApi) => {
+			if (!api) {
+				return;
+			}
+
+			setCanScrollPrev(api.canScrollPrev());
+			setCanScrollNext(api.canScrollNext());
+		}, []);
+
+		const scrollPrev = React.useCallback(() => {
+			api?.scrollPrev();
+		}, [api]);
+
+		const scrollNext = React.useCallback(() => {
+			api?.scrollNext();
+		}, [api]);
+
+		const handleKeyDown = React.useCallback(
+			(event: React.KeyboardEvent<HTMLDivElement>) => {
+				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 (
+			<CarouselContext.Provider
+				value={{
+					carouselRef,
+					api: api,
+					opts,
+					orientation:
+						orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+					scrollPrev,
+					scrollNext,
+					canScrollPrev,
+					canScrollNext,
+				}}
+			>
+				<div
+					ref={ref}
+					onKeyDownCapture={handleKeyDown}
+					className={cn("relative", className)}
+					role="region"
+					aria-roledescription="carousel"
+					{...props}
+				>
+					{children}
+				</div>
+			</CarouselContext.Provider>
+		);
+	},
+);
+Carousel.displayName = "Carousel";
+
+const CarouselContent = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+	const { carouselRef, orientation } = useCarousel();
+
+	return (
+		<div ref={carouselRef} className="overflow-hidden">
+			<div
+				ref={ref}
+				className={cn(
+					"flex",
+					orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+					className,
+				)}
+				{...props}
+			/>
+		</div>
+	);
+});
+CarouselContent.displayName = "CarouselContent";
+
+const CarouselItem = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+	const { orientation } = useCarousel();
+
+	return (
+		<div
+			ref={ref}
+			role="group"
+			aria-roledescription="slide"
+			className={cn(
+				"min-w-0 shrink-0 grow-0 basis-full",
+				orientation === "horizontal" ? "pl-4" : "pt-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+});
+CarouselItem.displayName = "CarouselItem";
+
+const CarouselPrevious = React.forwardRef<
+	HTMLButtonElement,
+	React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+	return (
+		<Button
+			ref={ref}
+			variant={variant}
+			size={size}
+			className={cn(
+				"absolute  h-8 w-8 rounded-full",
+				orientation === "horizontal"
+					? "-left-12 top-1/2 -translate-y-1/2"
+					: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+				className,
+			)}
+			disabled={!canScrollPrev}
+			onClick={scrollPrev}
+			{...props}
+		>
+			<ArrowLeftIcon className="h-4 w-4" />
+			<span className="sr-only">Previous slide</span>
+		</Button>
+	);
+});
+CarouselPrevious.displayName = "CarouselPrevious";
+
+const CarouselNext = React.forwardRef<
+	HTMLButtonElement,
+	React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+	const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+	return (
+		<Button
+			ref={ref}
+			variant={variant}
+			size={size}
+			className={cn(
+				"absolute h-8 w-8 rounded-full",
+				orientation === "horizontal"
+					? "-right-12 top-1/2 -translate-y-1/2"
+					: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+				className,
+			)}
+			disabled={!canScrollNext}
+			onClick={scrollNext}
+			{...props}
+		>
+			<ArrowRightIcon className="h-4 w-4" />
+			<span className="sr-only">Next slide</span>
+		</Button>
+	);
+});
+CarouselNext.displayName = "CarouselNext";
+
+export {
+	type CarouselApi,
+	Carousel,
+	CarouselContent,
+	CarouselItem,
+	CarouselPrevious,
+	CarouselNext,
+};

examples/nextjs-example/components/ui/chart.tsx

@@ -0,0 +1,370 @@
+"use client";
+
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+import {
+	NameType,
+	Payload,
+	ValueType,
+} from "recharts/types/component/DefaultTooltipContent";
+
+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<keyof typeof THEMES, string> }
+	);
+};
+
+type ChartContextProps = {
+	config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+	const context = React.useContext(ChartContext);
+
+	if (!context) {
+		throw new Error("useChart must be used within a <ChartContainer />");
+	}
+
+	return context;
+}
+
+const ChartContainer = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & {
+		config: ChartConfig;
+		children: React.ComponentProps<
+			typeof RechartsPrimitive.ResponsiveContainer
+		>["children"];
+	}
+>(({ id, className, children, config, ...props }, ref) => {
+	const uniqueId = React.useId();
+	const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+	return (
+		<ChartContext.Provider value={{ config }}>
+			<div
+				data-chart={chartId}
+				ref={ref}
+				className={cn(
+					"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+					className,
+				)}
+				{...props}
+			>
+				<ChartStyle id={chartId} config={config} />
+				<RechartsPrimitive.ResponsiveContainer>
+					{children}
+				</RechartsPrimitive.ResponsiveContainer>
+			</div>
+		</ChartContext.Provider>
+	);
+});
+ChartContainer.displayName = "Chart";
+
+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 (
+		<style
+			dangerouslySetInnerHTML={{
+				__html: Object.entries(THEMES)
+					.map(
+						([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+	.map(([key, itemConfig]) => {
+		const color =
+			itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+			itemConfig.color;
+		return color ? `  --color-${key}: ${color};` : null;
+	})
+	.join("\n")}
+}
+`,
+					)
+					.join("\n"),
+			}}
+		/>
+	);
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+const ChartTooltipContent = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+		React.ComponentProps<"div"> & {
+			hideLabel?: boolean;
+			hideIndicator?: boolean;
+			indicator?: "line" | "dot" | "dashed";
+			nameKey?: string;
+			labelKey?: string;
+		}
+>(
+	(
+		{
+			active,
+			payload,
+			className,
+			indicator = "dot",
+			hideLabel = false,
+			hideIndicator = false,
+			label,
+			labelFormatter,
+			labelClassName,
+			formatter,
+			color,
+			nameKey,
+			labelKey,
+		},
+		ref,
+	) => {
+		const { config } = useChart();
+
+		const tooltipLabel = React.useMemo(() => {
+			if (hideLabel || !payload?.length) {
+				return null;
+			}
+
+			const [item] = payload;
+			const key = `${labelKey || item.dataKey || item.name || "value"}`;
+			const itemConfig = getPayloadConfigFromPayload(config, item, key);
+			const value =
+				!labelKey && typeof label === "string"
+					? config[label as keyof typeof config]?.label || label
+					: itemConfig?.label;
+
+			if (labelFormatter) {
+				return (
+					<div className={cn("font-medium", labelClassName)}>
+						{labelFormatter(value, payload)}
+					</div>
+				);
+			}
+
+			if (!value) {
+				return null;
+			}
+
+			return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+		}, [
+			label,
+			labelFormatter,
+			payload,
+			hideLabel,
+			labelClassName,
+			config,
+			labelKey,
+		]);
+
+		if (!active || !payload?.length) {
+			return null;
+		}
+
+		const nestLabel = payload.length === 1 && indicator !== "dot";
+
+		return (
+			<div
+				ref={ref}
+				className={cn(
+					"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+					className,
+				)}
+			>
+				{!nestLabel ? tooltipLabel : null}
+				<div className="grid gap-1.5">
+					{payload.map((item, index) => {
+						const key = `${nameKey || item.name || item.dataKey || "value"}`;
+						const itemConfig = getPayloadConfigFromPayload(config, item, key);
+						const indicatorColor = color || item.payload.fill || item.color;
+
+						return (
+							<div
+								key={item.dataKey}
+								className={cn(
+									"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+									indicator === "dot" && "items-center",
+								)}
+							>
+								{formatter && item?.value !== undefined && item.name ? (
+									formatter(item.value, item.name, item, index, item.payload)
+								) : (
+									<>
+										{itemConfig?.icon ? (
+											<itemConfig.icon />
+										) : (
+											!hideIndicator && (
+												<div
+													className={cn(
+														"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+														{
+															"h-2.5 w-2.5": indicator === "dot",
+															"w-1": indicator === "line",
+															"w-0 border-[1.5px] border-dashed bg-transparent":
+																indicator === "dashed",
+															"my-0.5": nestLabel && indicator === "dashed",
+														},
+													)}
+													style={
+														{
+															"--color-bg": indicatorColor,
+															"--color-border": indicatorColor,
+														} as React.CSSProperties
+													}
+												/>
+											)
+										)}
+										<div
+											className={cn(
+												"flex flex-1 justify-between leading-none",
+												nestLabel ? "items-end" : "items-center",
+											)}
+										>
+											<div className="grid gap-1.5">
+												{nestLabel ? tooltipLabel : null}
+												<span className="text-muted-foreground">
+													{itemConfig?.label || item.name}
+												</span>
+											</div>
+											{item.value && (
+												<span className="font-mono font-medium tabular-nums text-foreground">
+													{item.value.toLocaleString()}
+												</span>
+											)}
+										</div>
+									</>
+								)}
+							</div>
+						);
+					})}
+				</div>
+			</div>
+		);
+	},
+);
+ChartTooltipContent.displayName = "ChartTooltip";
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+const ChartLegendContent = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> &
+		Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+			hideIcon?: boolean;
+			nameKey?: string;
+		}
+>(
+	(
+		{ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+		ref,
+	) => {
+		const { config } = useChart();
+
+		if (!payload?.length) {
+			return null;
+		}
+
+		return (
+			<div
+				ref={ref}
+				className={cn(
+					"flex items-center justify-center gap-4",
+					verticalAlign === "top" ? "pb-3" : "pt-3",
+					className,
+				)}
+			>
+				{payload.map((item) => {
+					const key = `${nameKey || item.dataKey || "value"}`;
+					const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+					return (
+						<div
+							key={item.value}
+							className={cn(
+								"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
+							)}
+						>
+							{itemConfig?.icon && !hideIcon ? (
+								<itemConfig.icon />
+							) : (
+								<div
+									className="h-2 w-2 shrink-0 rounded-[2px]"
+									style={{
+										backgroundColor: item.color,
+									}}
+								/>
+							)}
+							{itemConfig?.label}
+						</div>
+					);
+				})}
+			</div>
+		);
+	},
+);
+ChartLegendContent.displayName = "ChartLegend";
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+	config: ChartConfig,
+	payload: unknown,
+	key: string,
+) {
+	if (typeof payload !== "object" || payload === null) {
+		return undefined;
+	}
+
+	const payloadPayload =
+		"payload" in payload &&
+		typeof payload.payload === "object" &&
+		payload.payload !== null
+			? payload.payload
+			: undefined;
+
+	let configLabelKey: string = key;
+
+	if (
+		key in payload &&
+		typeof payload[key as keyof typeof payload] === "string"
+	) {
+		configLabelKey = payload[key as keyof typeof payload] as string;
+	} else if (
+		payloadPayload &&
+		key in payloadPayload &&
+		typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+	) {
+		configLabelKey = payloadPayload[
+			key as keyof typeof payloadPayload
+		] as string;
+	}
+
+	return configLabelKey in config
+		? config[configLabelKey]
+		: config[key as keyof typeof config];
+}
+
+export {
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+	ChartLegend,
+	ChartLegendContent,
+	ChartStyle,
+};

examples/nextjs-example/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "@radix-ui/react-icons";
+
+import { cn } from "@/lib/utils";
+
+const Checkbox = React.forwardRef<
+	React.ElementRef<typeof CheckboxPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+	<CheckboxPrimitive.Root
+		ref={ref}
+		className={cn(
+			"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+			className,
+		)}
+		{...props}
+	>
+		<CheckboxPrimitive.Indicator
+			className={cn("flex items-center justify-center text-current")}
+		>
+			<CheckIcon className="h-4 w-4" />
+		</CheckboxPrimitive.Indicator>
+	</CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };

examples/nextjs-example/components/ui/collapsible.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

examples/nextjs-example/components/ui/command.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { Command as CommandPrimitive } from "cmdk";
+
+import { cn } from "@/lib/utils";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+
+const Command = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive
+		ref={ref}
+		className={cn(
+			"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+			className,
+		)}
+		{...props}
+	/>
+));
+Command.displayName = CommandPrimitive.displayName;
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+	return (
+		<Dialog {...props}>
+			<DialogContent className="overflow-hidden p-0">
+				<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+					{children}
+				</Command>
+			</DialogContent>
+		</Dialog>
+	);
+};
+
+const CommandInput = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Input>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+	<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+		<MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+		<CommandPrimitive.Input
+			ref={ref}
+			className={cn(
+				"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		/>
+	</div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.List>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.List
+		ref={ref}
+		className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+		{...props}
+	/>
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Empty>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+	<CommandPrimitive.Empty
+		ref={ref}
+		className="py-6 text-center text-sm"
+		{...props}
+	/>
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Group>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Group
+		ref={ref}
+		className={cn(
+			"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+			className,
+		)}
+		{...props}
+	/>
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Separator
+		ref={ref}
+		className={cn("-mx-1 h-px bg-border", className)}
+		{...props}
+	/>
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+	React.ElementRef<typeof CommandPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+	<CommandPrimitive.Item
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+			className,
+		)}
+		{...props}
+	/>
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+	return (
+		<span
+			className={cn(
+				"ml-auto text-xs tracking-widest text-muted-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+	Command,
+	CommandDialog,
+	CommandInput,
+	CommandList,
+	CommandEmpty,
+	CommandGroup,
+	CommandItem,
+	CommandShortcut,
+	CommandSeparator,
+};

examples/nextjs-example/components/ui/context-menu.tsx

@@ -0,0 +1,204 @@
+"use client";
+
+import * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import {
+	CheckIcon,
+	ChevronRightIcon,
+	DotFilledIcon,
+} from "@radix-ui/react-icons";
+
+import { cn } from "@/lib/utils";
+
+const ContextMenu = ContextMenuPrimitive.Root;
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+const ContextMenuSubTrigger = React.forwardRef<
+	React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+		inset?: boolean;
+	}
+>(({ className, inset, children, ...props }, ref) => (
+	<ContextMenuPrimitive.SubTrigger
+		ref={ref}
+		className={cn(
+			"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<ChevronRightIcon className="ml-auto h-4 w-4" />
+	</ContextMenuPrimitive.SubTrigger>
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+
+const ContextMenuSubContent = React.forwardRef<
+	React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+	<ContextMenuPrimitive.SubContent
+		ref={ref}
+		className={cn(
+			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			className,
+		)}
+		{...props}
+	/>
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+
+const ContextMenuContent = React.forwardRef<
+	React.ElementRef<typeof ContextMenuPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+	<ContextMenuPrimitive.Portal>
+		<ContextMenuPrimitive.Content
+			ref={ref}
+			className={cn(
+				"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				className,
+			)}
+			{...props}
+		/>
+	</ContextMenuPrimitive.Portal>
+));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+
+const ContextMenuItem = React.forwardRef<
+	React.ElementRef<typeof ContextMenuPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+		inset?: boolean;
+	}
+>(({ className, inset, ...props }, ref) => (
+	<ContextMenuPrimitive.Item
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+
+const ContextMenuCheckboxItem = React.forwardRef<
+	React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+	<ContextMenuPrimitive.CheckboxItem
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className,
+		)}
+		checked={checked}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<ContextMenuPrimitive.ItemIndicator>
+				<CheckIcon className="h-4 w-4" />
+			</ContextMenuPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</ContextMenuPrimitive.CheckboxItem>
+));
+ContextMenuCheckboxItem.displayName =
+	ContextMenuPrimitive.CheckboxItem.displayName;
+
+const ContextMenuRadioItem = React.forwardRef<
+	React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+	<ContextMenuPrimitive.RadioItem
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className,
+		)}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<ContextMenuPrimitive.ItemIndicator>
+				<DotFilledIcon className="h-4 w-4 fill-current" />
+			</ContextMenuPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</ContextMenuPrimitive.RadioItem>
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+
+const ContextMenuLabel = React.forwardRef<
+	React.ElementRef<typeof ContextMenuPrimitive.Label>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+		inset?: boolean;
+	}
+>(({ className, inset, ...props }, ref) => (
+	<ContextMenuPrimitive.Label
+		ref={ref}
+		className={cn(
+			"px-2 py-1.5 text-sm font-semibold text-foreground",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+
+const ContextMenuSeparator = React.forwardRef<
+	React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+	<ContextMenuPrimitive.Separator
+		ref={ref}
+		className={cn("-mx-1 my-1 h-px bg-border", className)}
+		{...props}
+	/>
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+
+const ContextMenuShortcut = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+	return (
+		<span
+			className={cn(
+				"ml-auto text-xs tracking-widest text-muted-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
+};
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+
+export {
+	ContextMenu,
+	ContextMenuTrigger,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuCheckboxItem,
+	ContextMenuRadioItem,
+	ContextMenuLabel,
+	ContextMenuSeparator,
+	ContextMenuShortcut,
+	ContextMenuGroup,
+	ContextMenuPortal,
+	ContextMenuSub,
+	ContextMenuSubContent,
+	ContextMenuSubTrigger,
+	ContextMenuRadioGroup,
+};

examples/nextjs-example/components/ui/copy-button.tsx

@@ -0,0 +1,58 @@
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Copy, Check } from "lucide-react";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+interface CopyButtonProps {
+	textToCopy: string;
+}
+
+export default function CopyButton({ textToCopy }: CopyButtonProps) {
+	const [isCopied, setIsCopied] = useState(false);
+
+	useEffect(() => {
+		if (isCopied) {
+			const timer = setTimeout(() => setIsCopied(false), 2000);
+			return () => clearTimeout(timer);
+		}
+	}, [isCopied]);
+
+	const handleCopy = async () => {
+		try {
+			await navigator.clipboard.writeText(textToCopy);
+			setIsCopied(true);
+		} catch (err) {
+			console.error("Failed to copy text: ", err);
+		}
+	};
+
+	return (
+		<TooltipProvider>
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<Button
+						variant="link"
+						size="icon"
+						onClick={handleCopy}
+						className="h-8 w-8"
+					>
+						{isCopied ? (
+							<Check className="h-4 w-4 " />
+						) : (
+							<Copy className="h-4 w-4" />
+						)}
+						<span className="sr-only">Copy to clipboard</span>
+					</Button>
+				</TooltipTrigger>
+				<TooltipContent>
+					<p>{isCopied ? "Copied!" : "Copy to clipboard"}</p>
+				</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+	);
+}

examples/nextjs-example/components/ui/dialog.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Cross2Icon } from "@radix-ui/react-icons";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+	React.ElementRef<typeof DialogPrimitive.Overlay>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+	<DialogPrimitive.Overlay
+		ref={ref}
+		className={cn(
+			"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+			className,
+		)}
+		{...props}
+	/>
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+	React.ElementRef<typeof DialogPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+	<DialogPortal>
+		<DialogOverlay />
+		<DialogPrimitive.Content
+			ref={ref}
+			className={cn(
+				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+				<Cross2Icon className="h-4 w-4" />
+				<span className="sr-only">Close</span>
+			</DialogPrimitive.Close>
+		</DialogPrimitive.Content>
+	</DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div
+		className={cn(
+			"flex flex-col space-y-1.5 text-center sm:text-left",
+			className,
+		)}
+		{...props}
+	/>
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div
+		className={cn(
+			"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+			className,
+		)}
+		{...props}
+	/>
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+	React.ElementRef<typeof DialogPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+	<DialogPrimitive.Title
+		ref={ref}
+		className={cn(
+			"text-lg font-semibold leading-none tracking-tight",
+			className,
+		)}
+		{...props}
+	/>
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+	React.ElementRef<typeof DialogPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+	<DialogPrimitive.Description
+		ref={ref}
+		className={cn("text-sm text-muted-foreground", className)}
+		{...props}
+	/>
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+	Dialog,
+	DialogPortal,
+	DialogOverlay,
+	DialogTrigger,
+	DialogClose,
+	DialogContent,
+	DialogHeader,
+	DialogFooter,
+	DialogTitle,
+	DialogDescription,
+};

examples/nextjs-example/components/ui/drawer.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+
+import { cn } from "@/lib/utils";
+
+const Drawer = ({
+	shouldScaleBackground = true,
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+	<DrawerPrimitive.Root
+		shouldScaleBackground={shouldScaleBackground}
+		{...props}
+	/>
+);
+Drawer.displayName = "Drawer";
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
+
+const DrawerPortal = DrawerPrimitive.Portal;
+
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = React.forwardRef<
+	React.ElementRef<typeof DrawerPrimitive.Overlay>,
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+	<DrawerPrimitive.Overlay
+		ref={ref}
+		className={cn("fixed inset-0 z-50 bg-black/80", className)}
+		{...props}
+	/>
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+
+const DrawerContent = React.forwardRef<
+	React.ElementRef<typeof DrawerPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+	<DrawerPortal>
+		<DrawerOverlay />
+		<DrawerPrimitive.Content
+			ref={ref}
+			className={cn(
+				"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+				className,
+			)}
+			{...props}
+		>
+			<div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+			{children}
+		</DrawerPrimitive.Content>
+	</DrawerPortal>
+));
+DrawerContent.displayName = "DrawerContent";
+
+const DrawerHeader = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div
+		className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+		{...props}
+	/>
+);
+DrawerHeader.displayName = "DrawerHeader";
+
+const DrawerFooter = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div
+		className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+		{...props}
+	/>
+);
+DrawerFooter.displayName = "DrawerFooter";
+
+const DrawerTitle = React.forwardRef<
+	React.ElementRef<typeof DrawerPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+	<DrawerPrimitive.Title
+		ref={ref}
+		className={cn(
+			"text-lg font-semibold leading-none tracking-tight",
+			className,
+		)}
+		{...props}
+	/>
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+const DrawerDescription = React.forwardRef<
+	React.ElementRef<typeof DrawerPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+	<DrawerPrimitive.Description
+		ref={ref}
+		className={cn("text-sm text-muted-foreground", className)}
+		{...props}
+	/>
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+export {
+	Drawer,
+	DrawerPortal,
+	DrawerOverlay,
+	DrawerTrigger,
+	DrawerClose,
+	DrawerContent,
+	DrawerHeader,
+	DrawerFooter,
+	DrawerTitle,
+	DrawerDescription,
+};

examples/nextjs-example/components/ui/dropdown-menu.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import {
+	CheckIcon,
+	ChevronRightIcon,
+	DotFilledIcon,
+} from "@radix-ui/react-icons";
+
+import { cn } from "@/lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+		inset?: boolean;
+	}
+>(({ className, inset, children, ...props }, ref) => (
+	<DropdownMenuPrimitive.SubTrigger
+		ref={ref}
+		className={cn(
+			"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<ChevronRightIcon className="ml-auto h-4 w-4" />
+	</DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+	DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+	<DropdownMenuPrimitive.SubContent
+		ref={ref}
+		className={cn(
+			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			className,
+		)}
+		{...props}
+	/>
+));
+DropdownMenuSubContent.displayName =
+	DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+	<DropdownMenuPrimitive.Portal>
+		<DropdownMenuPrimitive.Content
+			ref={ref}
+			sideOffset={sideOffset}
+			className={cn(
+				"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				className,
+			)}
+			{...props}
+		/>
+	</DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+		inset?: boolean;
+	}
+>(({ className, inset, ...props }, ref) => (
+	<DropdownMenuPrimitive.Item
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+	<DropdownMenuPrimitive.CheckboxItem
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className,
+		)}
+		checked={checked}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<DropdownMenuPrimitive.ItemIndicator>
+				<CheckIcon className="h-4 w-4" />
+			</DropdownMenuPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+	DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+	<DropdownMenuPrimitive.RadioItem
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className,
+		)}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<DropdownMenuPrimitive.ItemIndicator>
+				<DotFilledIcon className="h-4 w-4 fill-current" />
+			</DropdownMenuPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+		inset?: boolean;
+	}
+>(({ className, inset, ...props }, ref) => (
+	<DropdownMenuPrimitive.Label
+		ref={ref}
+		className={cn(
+			"px-2 py-1.5 text-sm font-semibold",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+	React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+	<DropdownMenuPrimitive.Separator
+		ref={ref}
+		className={cn("-mx-1 my-1 h-px bg-muted", className)}
+		{...props}
+	/>
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+	return (
+		<span
+			className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+			{...props}
+		/>
+	);
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+	DropdownMenu,
+	DropdownMenuTrigger,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuCheckboxItem,
+	DropdownMenuRadioItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuGroup,
+	DropdownMenuPortal,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuRadioGroup,
+};

examples/nextjs-example/components/ui/form.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import {
+	Controller,
+	ControllerProps,
+	FieldPath,
+	FieldValues,
+	FormProvider,
+	useFormContext,
+} from "react-hook-form";
+
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+	name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+	{} as FormFieldContextValue,
+);
+
+const FormField = <
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+	...props
+}: ControllerProps<TFieldValues, TName>) => {
+	return (
+		<FormFieldContext.Provider value={{ name: props.name }}>
+			<Controller {...props} />
+		</FormFieldContext.Provider>
+	);
+};
+
+const useFormField = () => {
+	const fieldContext = React.useContext(FormFieldContext);
+	const itemContext = React.useContext(FormItemContext);
+	const { getFieldState, formState } = useFormContext();
+
+	const fieldState = getFieldState(fieldContext.name, formState);
+
+	if (!fieldContext) {
+		throw new Error("useFormField should be used within <FormField>");
+	}
+
+	const { id } = itemContext;
+
+	return {
+		id,
+		name: fieldContext.name,
+		formItemId: `${id}-form-item`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		...fieldState,
+	};
+};
+
+type FormItemContextValue = {
+	id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+	{} as FormItemContextValue,
+);
+
+const FormItem = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+	const id = React.useId();
+
+	return (
+		<FormItemContext.Provider value={{ id }}>
+			<div ref={ref} className={cn("space-y-2", className)} {...props} />
+		</FormItemContext.Provider>
+	);
+});
+FormItem.displayName = "FormItem";
+
+const FormLabel = React.forwardRef<
+	React.ElementRef<typeof LabelPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+	const { error, formItemId } = useFormField();
+
+	return (
+		<Label
+			ref={ref}
+			className={cn(error && "text-destructive", className)}
+			htmlFor={formItemId}
+			{...props}
+		/>
+	);
+});
+FormLabel.displayName = "FormLabel";
+
+const FormControl = React.forwardRef<
+	React.ElementRef<typeof Slot>,
+	React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+	const { error, formItemId, formDescriptionId, formMessageId } =
+		useFormField();
+
+	return (
+		<Slot
+			ref={ref}
+			id={formItemId}
+			aria-describedby={
+				!error
+					? `${formDescriptionId}`
+					: `${formDescriptionId} ${formMessageId}`
+			}
+			aria-invalid={!!error}
+			{...props}
+		/>
+	);
+});
+FormControl.displayName = "FormControl";
+
+const FormDescription = React.forwardRef<
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+	const { formDescriptionId } = useFormField();
+
+	return (
+		<p
+			ref={ref}
+			id={formDescriptionId}
+			className={cn("text-[0.8rem] text-muted-foreground", className)}
+			{...props}
+		/>
+	);
+});
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+	const { error, formMessageId } = useFormField();
+	const body = error ? String(error?.message) : children;
+
+	if (!body) {
+		return null;
+	}
+
+	return (
+		<p
+			ref={ref}
+			id={formMessageId}
+			className={cn("text-[0.8rem] font-medium text-destructive", className)}
+			{...props}
+		>
+			{body}
+		</p>
+	);
+});
+FormMessage.displayName = "FormMessage";
+
+export {
+	useFormField,
+	Form,
+	FormItem,
+	FormLabel,
+	FormControl,
+	FormDescription,
+	FormMessage,
+	FormField,
+};

examples/nextjs-example/components/ui/hover-card.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+
+import { cn } from "@/lib/utils";
+
+const HoverCard = HoverCardPrimitive.Root;
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+const HoverCardContent = React.forwardRef<
+	React.ElementRef<typeof HoverCardPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+	<HoverCardPrimitive.Content
+		ref={ref}
+		align={align}
+		sideOffset={sideOffset}
+		className={cn(
+			"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			className,
+		)}
+		{...props}
+	/>
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };

examples/nextjs-example/components/ui/input-otp.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import * as React from "react";
+import { DashIcon } from "@radix-ui/react-icons";
+import { OTPInput, OTPInputContext } from "input-otp";
+
+import { cn } from "@/lib/utils";
+
+const InputOTP = React.forwardRef<
+	React.ElementRef<typeof OTPInput>,
+	React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+	<OTPInput
+		ref={ref}
+		containerClassName={cn(
+			"flex items-center gap-2 has-[:disabled]:opacity-50",
+			containerClassName,
+		)}
+		className={cn("disabled:cursor-not-allowed", className)}
+		{...props}
+	/>
+));
+InputOTP.displayName = "InputOTP";
+
+const InputOTPGroup = React.forwardRef<
+	React.ElementRef<"div">,
+	React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+	<div ref={ref} className={cn("flex items-center", className)} {...props} />
+));
+InputOTPGroup.displayName = "InputOTPGroup";
+
+const InputOTPSlot = React.forwardRef<
+	React.ElementRef<"div">,
+	React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+	const inputOTPContext = React.useContext(OTPInputContext);
+	const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+
+	return (
+		<div
+			ref={ref}
+			className={cn(
+				"relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+				isActive && "z-10 ring-1 ring-ring",
+				className,
+			)}
+			{...props}
+		>
+			{char}
+			{hasFakeCaret && (
+				<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+					<div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+				</div>
+			)}
+		</div>
+	);
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+
+const InputOTPSeparator = React.forwardRef<
+	React.ElementRef<"div">,
+	React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+	<div ref={ref} role="separator" {...props}>
+		<DashIcon />
+	</div>
+));
+InputOTPSeparator.displayName = "InputOTPSeparator";
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };

examples/nextjs-example/components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface InputProps
+	extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+	({ className, type, ...props }, ref) => {
+		return (
+			<input
+				type={type}
+				className={cn(
+					"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+					className,
+				)}
+				ref={ref}
+				{...props}
+			/>
+		);
+	},
+);
+Input.displayName = "Input";
+
+export { Input };

examples/nextjs-example/components/ui/label.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva(
+	"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+const Label = React.forwardRef<
+	React.ElementRef<typeof LabelPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+		VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+	<LabelPrimitive.Root
+		ref={ref}
+		className={cn(labelVariants(), className)}
+		{...props}
+	/>
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

examples/nextjs-example/components/ui/menubar.tsx

@@ -0,0 +1,240 @@
+"use client";
+
+import * as React from "react";
+import {
+	CheckIcon,
+	ChevronRightIcon,
+	DotFilledIcon,
+} from "@radix-ui/react-icons";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+
+import { cn } from "@/lib/utils";
+
+const MenubarMenu = MenubarPrimitive.Menu;
+
+const MenubarGroup = MenubarPrimitive.Group;
+
+const MenubarPortal = MenubarPrimitive.Portal;
+
+const MenubarSub = MenubarPrimitive.Sub;
+
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+
+const Menubar = React.forwardRef<
+	React.ElementRef<typeof MenubarPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+	<MenubarPrimitive.Root
+		ref={ref}
+		className={cn(
+			"flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
+			className,
+		)}
+		{...props}
+	/>
+));
+Menubar.displayName = MenubarPrimitive.Root.displayName;
+
+const MenubarTrigger = React.forwardRef<
+	React.ElementRef<typeof MenubarPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+	<MenubarPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			"flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+			className,
+		)}
+		{...props}
+	/>
+));
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
+
+const MenubarSubTrigger = React.forwardRef<
+	React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+		inset?: boolean;
+	}
+>(({ className, inset, children, ...props }, ref) => (
+	<MenubarPrimitive.SubTrigger
+		ref={ref}
+		className={cn(
+			"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<ChevronRightIcon className="ml-auto h-4 w-4" />
+	</MenubarPrimitive.SubTrigger>
+));
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+
+const MenubarSubContent = React.forwardRef<
+	React.ElementRef<typeof MenubarPrimitive.SubContent>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+	<MenubarPrimitive.SubContent
+		ref={ref}
+		className={cn(
+			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			className,
+		)}
+		{...props}
+	/>
+));
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+
+const MenubarContent = React.forwardRef<
+	React.ElementRef<typeof MenubarPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(
+	(
+		{ className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+		ref,
+	) => (
+		<MenubarPrimitive.Portal>
+			<MenubarPrimitive.Content
+				ref={ref}
+				align={align}
+				alignOffset={alignOffset}
+				sideOffset={sideOffset}
+				className={cn(
+					"z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+					className,
+				)}
+				{...props}
+			/>
+		</MenubarPrimitive.Portal>
+	),
+);
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+
+const MenubarItem = React.forwardRef<
+	React.ElementRef<typeof MenubarPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+		inset?: boolean;
+	}
+>(({ className, inset, ...props }, ref) => (
+	<MenubarPrimitive.Item
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
+));
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;
+
+const MenubarCheckboxItem = React.forwardRef<
+	React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+	<MenubarPrimitive.CheckboxItem
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className,
+		)}
+		checked={checked}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<MenubarPrimitive.ItemIndicator>
+				<CheckIcon className="h-4 w-4" />
+			</MenubarPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</MenubarPrimitive.CheckboxItem>
+));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+
+const MenubarRadioItem = React.forwardRef<
+	React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+	<MenubarPrimitive.RadioItem
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className,
+		)}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<MenubarPrimitive.ItemIndicator>
+				<DotFilledIcon className="h-4 w-4 fill-current" />
+			</MenubarPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</MenubarPrimitive.RadioItem>
+));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+
+const MenubarLabel = React.forwardRef<
+	React.ElementRef<typeof MenubarPrimitive.Label>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+		inset?: boolean;
+	}
+>(({ className, inset, ...props }, ref) => (
+	<MenubarPrimitive.Label
+		ref={ref}
+		className={cn(
+			"px-2 py-1.5 text-sm font-semibold",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
+));
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
+
+const MenubarSeparator = React.forwardRef<
+	React.ElementRef<typeof MenubarPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+	<MenubarPrimitive.Separator
+		ref={ref}
+		className={cn("-mx-1 my-1 h-px bg-muted", className)}
+		{...props}
+	/>
+));
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
+
+const MenubarShortcut = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+	return (
+		<span
+			className={cn(
+				"ml-auto text-xs tracking-widest text-muted-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
+};
+MenubarShortcut.displayname = "MenubarShortcut";
+
+export {
+	Menubar,
+	MenubarMenu,
+	MenubarTrigger,
+	MenubarContent,
+	MenubarItem,
+	MenubarSeparator,
+	MenubarLabel,
+	MenubarCheckboxItem,
+	MenubarRadioGroup,
+	MenubarRadioItem,
+	MenubarPortal,
+	MenubarSubContent,
+	MenubarSubTrigger,
+	MenubarGroup,
+	MenubarSub,
+	MenubarShortcut,
+};

examples/nextjs-example/components/ui/navigation-menu.tsx

@@ -0,0 +1,128 @@
+import * as React from "react";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const NavigationMenu = React.forwardRef<
+	React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+	<NavigationMenuPrimitive.Root
+		ref={ref}
+		className={cn(
+			"relative z-10 flex max-w-max flex-1 items-center justify-center",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<NavigationMenuViewport />
+	</NavigationMenuPrimitive.Root>
+));
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+
+const NavigationMenuList = React.forwardRef<
+	React.ElementRef<typeof NavigationMenuPrimitive.List>,
+	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+	<NavigationMenuPrimitive.List
+		ref={ref}
+		className={cn(
+			"group flex flex-1 list-none items-center justify-center space-x-1",
+			className,
+		)}
+		{...props}
+	/>
+));
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item;
+
+const navigationMenuTriggerStyle = cva(
+	"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
+);
+
+const NavigationMenuTrigger = React.forwardRef<
+	React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+	<NavigationMenuPrimitive.Trigger
+		ref={ref}
+		className={cn(navigationMenuTriggerStyle(), "group", className)}
+		{...props}
+	>
+		{children}{" "}
+		<ChevronDownIcon
+			className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+			aria-hidden="true"
+		/>
+	</NavigationMenuPrimitive.Trigger>
+));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+
+const NavigationMenuContent = React.forwardRef<
+	React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+	<NavigationMenuPrimitive.Content
+		ref={ref}
+		className={cn(
+			"left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+			className,
+		)}
+		{...props}
+	/>
+));
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link;
+
+const NavigationMenuViewport = React.forwardRef<
+	React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+	<div className={cn("absolute left-0 top-full flex justify-center")}>
+		<NavigationMenuPrimitive.Viewport
+			className={cn(
+				"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+				className,
+			)}
+			ref={ref}
+			{...props}
+		/>
+	</div>
+));
+NavigationMenuViewport.displayName =
+	NavigationMenuPrimitive.Viewport.displayName;
+
+const NavigationMenuIndicator = React.forwardRef<
+	React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+	<NavigationMenuPrimitive.Indicator
+		ref={ref}
+		className={cn(
+			"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+			className,
+		)}
+		{...props}
+	>
+		<div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+	</NavigationMenuPrimitive.Indicator>
+));
+NavigationMenuIndicator.displayName =
+	NavigationMenuPrimitive.Indicator.displayName;
+
+export {
+	navigationMenuTriggerStyle,
+	NavigationMenu,
+	NavigationMenuList,
+	NavigationMenuItem,
+	NavigationMenuContent,
+	NavigationMenuTrigger,
+	NavigationMenuLink,
+	NavigationMenuIndicator,
+	NavigationMenuViewport,
+};

examples/nextjs-example/components/ui/pagination.tsx

@@ -0,0 +1,121 @@
+import * as React from "react";
+import {
+	ChevronLeftIcon,
+	ChevronRightIcon,
+	DotsHorizontalIcon,
+} from "@radix-ui/react-icons";
+
+import { cn } from "@/lib/utils";
+import { ButtonProps, buttonVariants } from "@/components/ui/button";
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+	<nav
+		role="navigation"
+		aria-label="pagination"
+		className={cn("mx-auto flex w-full justify-center", className)}
+		{...props}
+	/>
+);
+Pagination.displayName = "Pagination";
+
+const PaginationContent = React.forwardRef<
+	HTMLUListElement,
+	React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+	<ul
+		ref={ref}
+		className={cn("flex flex-row items-center gap-1", className)}
+		{...props}
+	/>
+));
+PaginationContent.displayName = "PaginationContent";
+
+const PaginationItem = React.forwardRef<
+	HTMLLIElement,
+	React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+	<li ref={ref} className={cn("", className)} {...props} />
+));
+PaginationItem.displayName = "PaginationItem";
+
+type PaginationLinkProps = {
+	isActive?: boolean;
+} & Pick<ButtonProps, "size"> &
+	React.ComponentProps<"a">;
+
+const PaginationLink = ({
+	className,
+	isActive,
+	size = "icon",
+	...props
+}: PaginationLinkProps) => (
+	<a
+		aria-current={isActive ? "page" : undefined}
+		className={cn(
+			buttonVariants({
+				variant: isActive ? "outline" : "ghost",
+				size,
+			}),
+			className,
+		)}
+		{...props}
+	/>
+);
+PaginationLink.displayName = "PaginationLink";
+
+const PaginationPrevious = ({
+	className,
+	...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+	<PaginationLink
+		aria-label="Go to previous page"
+		size="default"
+		className={cn("gap-1 pl-2.5", className)}
+		{...props}
+	>
+		<ChevronLeftIcon className="h-4 w-4" />
+		<span>Previous</span>
+	</PaginationLink>
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+
+const PaginationNext = ({
+	className,
+	...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+	<PaginationLink
+		aria-label="Go to next page"
+		size="default"
+		className={cn("gap-1 pr-2.5", className)}
+		{...props}
+	>
+		<span>Next</span>
+		<ChevronRightIcon className="h-4 w-4" />
+	</PaginationLink>
+);
+PaginationNext.displayName = "PaginationNext";
+
+const PaginationEllipsis = ({
+	className,
+	...props
+}: React.ComponentProps<"span">) => (
+	<span
+		aria-hidden
+		className={cn("flex h-9 w-9 items-center justify-center", className)}
+		{...props}
+	>
+		<DotsHorizontalIcon className="h-4 w-4" />
+		<span className="sr-only">More pages</span>
+	</span>
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+export {
+	Pagination,
+	PaginationContent,
+	PaginationLink,
+	PaginationItem,
+	PaginationPrevious,
+	PaginationNext,
+	PaginationEllipsis,
+};

examples/nextjs-example/components/ui/password-input.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { EyeIcon, EyeOffIcon } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@/components/ui/button";
+import { Input, type InputProps } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+const PasswordInput = React.forwardRef<HTMLInputElement, InputProps>(
+	({ className, ...props }, ref) => {
+		const [showPassword, setShowPassword] = React.useState(false);
+		const disabled =
+			props.value === "" || props.value === undefined || props.disabled;
+
+		return (
+			<div className="relative">
+				<Input
+					type={showPassword ? "text" : "password"}
+					className={cn("hide-password-toggle pr-10", className)}
+					ref={ref}
+					{...props}
+				/>
+				<Button
+					type="button"
+					variant="ghost"
+					size="sm"
+					className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+					onClick={() => setShowPassword((prev) => !prev)}
+					disabled={disabled}
+				>
+					{showPassword && !disabled ? (
+						<EyeIcon className="h-4 w-4" aria-hidden="true" />
+					) : (
+						<EyeOffIcon className="h-4 w-4" aria-hidden="true" />
+					)}
+					<span className="sr-only">
+						{showPassword ? "Hide password" : "Show password"}
+					</span>
+				</Button>
+
+				{/* hides browsers password toggles */}
+				<style>{`
+					.hide-password-toggle::-ms-reveal,
+					.hide-password-toggle::-ms-clear {
+						visibility: hidden;
+						pointer-events: none;
+						display: none;
+					}
+				`}</style>
+			</div>
+		);
+	},
+);
+PasswordInput.displayName = "PasswordInput";
+
+export { PasswordInput };

examples/nextjs-example/components/ui/popover.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@/lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = React.forwardRef<
+	React.ElementRef<typeof PopoverPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+	<PopoverPrimitive.Portal>
+		<PopoverPrimitive.Content
+			ref={ref}
+			align={align}
+			sideOffset={sideOffset}
+			className={cn(
+				"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				className,
+			)}
+			{...props}
+		/>
+	</PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

examples/nextjs-example/components/ui/progress.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+
+import { cn } from "@/lib/utils";
+
+const Progress = React.forwardRef<
+	React.ElementRef<typeof ProgressPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+	<ProgressPrimitive.Root
+		ref={ref}
+		className={cn(
+			"relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+			className,
+		)}
+		{...props}
+	>
+		<ProgressPrimitive.Indicator
+			className="h-full w-full flex-1 bg-primary transition-all"
+			style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+		/>
+	</ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };

examples/nextjs-example/components/ui/radio-group.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import * as React from "react";
+import { CheckIcon } from "@radix-ui/react-icons";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+
+import { cn } from "@/lib/utils";
+
+const RadioGroup = React.forwardRef<
+	React.ElementRef<typeof RadioGroupPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+	return (
+		<RadioGroupPrimitive.Root
+			className={cn("grid gap-2", className)}
+			{...props}
+			ref={ref}
+		/>
+	);
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+	React.ElementRef<typeof RadioGroupPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+	return (
+		<RadioGroupPrimitive.Item
+			ref={ref}
+			className={cn(
+				"aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		>
+			<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+				<CheckIcon className="h-3.5 w-3.5 fill-primary" />
+			</RadioGroupPrimitive.Indicator>
+		</RadioGroupPrimitive.Item>
+	);
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };

examples/nextjs-example/components/ui/resizable.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { DragHandleDots2Icon } from "@radix-ui/react-icons";
+import * as ResizablePrimitive from "react-resizable-panels";
+
+import { cn } from "@/lib/utils";
+
+const ResizablePanelGroup = ({
+	className,
+	...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+	<ResizablePrimitive.PanelGroup
+		className={cn(
+			"flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+			className,
+		)}
+		{...props}
+	/>
+);
+
+const ResizablePanel = ResizablePrimitive.Panel;
+
+const ResizableHandle = ({
+	withHandle,
+	className,
+	...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+	withHandle?: boolean;
+}) => (
+	<ResizablePrimitive.PanelResizeHandle
+		className={cn(
+			"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+			className,
+		)}
+		{...props}
+	>
+		{withHandle && (
+			<div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+				<DragHandleDots2Icon className="h-2.5 w-2.5" />
+			</div>
+		)}
+	</ResizablePrimitive.PanelResizeHandle>
+);
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

examples/nextjs-example/components/ui/scroll-area.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+import { cn } from "@/lib/utils";
+
+const ScrollArea = React.forwardRef<
+	React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+	<ScrollAreaPrimitive.Root
+		ref={ref}
+		className={cn("relative overflow-hidden", className)}
+		{...props}
+	>
+		<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+			{children}
+		</ScrollAreaPrimitive.Viewport>
+		<ScrollBar />
+		<ScrollAreaPrimitive.Corner />
+	</ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+	React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+	React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+	<ScrollAreaPrimitive.ScrollAreaScrollbar
+		ref={ref}
+		orientation={orientation}
+		className={cn(
+			"flex touch-none select-none transition-colors",
+			orientation === "vertical" &&
+				"h-full w-2.5 border-l border-l-transparent p-[1px]",
+			orientation === "horizontal" &&
+				"h-2.5 flex-col border-t border-t-transparent p-[1px]",
+			className,
+		)}
+		{...props}
+	>
+		<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+	</ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

examples/nextjs-example/components/ui/select.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import * as React from "react";
+import {
+	CaretSortIcon,
+	CheckIcon,
+	ChevronDownIcon,
+	ChevronUpIcon,
+} from "@radix-ui/react-icons";
+import * as SelectPrimitive from "@radix-ui/react-select";
+
+import { cn } from "@/lib/utils";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+	<SelectPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<SelectPrimitive.Icon asChild>
+			<CaretSortIcon className="h-4 w-4 opacity-50" />
+		</SelectPrimitive.Icon>
+	</SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+	<SelectPrimitive.ScrollUpButton
+		ref={ref}
+		className={cn(
+			"flex cursor-default items-center justify-center py-1",
+			className,
+		)}
+		{...props}
+	>
+		<ChevronUpIcon />
+	</SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+	<SelectPrimitive.ScrollDownButton
+		ref={ref}
+		className={cn(
+			"flex cursor-default items-center justify-center py-1",
+			className,
+		)}
+		{...props}
+	>
+		<ChevronDownIcon />
+	</SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+	SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+	<SelectPrimitive.Portal>
+		<SelectPrimitive.Content
+			ref={ref}
+			className={cn(
+				"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				position === "popper" &&
+					"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+				className,
+			)}
+			position={position}
+			{...props}
+		>
+			<SelectScrollUpButton />
+			<SelectPrimitive.Viewport
+				className={cn(
+					"p-1",
+					position === "popper" &&
+						"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+				)}
+			>
+				{children}
+			</SelectPrimitive.Viewport>
+			<SelectScrollDownButton />
+		</SelectPrimitive.Content>
+	</SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Label>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+	<SelectPrimitive.Label
+		ref={ref}
+		className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+		{...props}
+	/>
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+	<SelectPrimitive.Item
+		ref={ref}
+		className={cn(
+			"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className,
+		)}
+		{...props}
+	>
+		<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+			<SelectPrimitive.ItemIndicator>
+				<CheckIcon className="h-4 w-4" />
+			</SelectPrimitive.ItemIndicator>
+		</span>
+		<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+	</SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+	React.ElementRef<typeof SelectPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+	<SelectPrimitive.Separator
+		ref={ref}
+		className={cn("-mx-1 my-1 h-px bg-muted", className)}
+		{...props}
+	/>
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+	Select,
+	SelectGroup,
+	SelectValue,
+	SelectTrigger,
+	SelectContent,
+	SelectLabel,
+	SelectItem,
+	SelectSeparator,
+	SelectScrollUpButton,
+	SelectScrollDownButton,
+};

examples/nextjs-example/components/ui/separator.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "@/lib/utils";
+
+const Separator = React.forwardRef<
+	React.ElementRef<typeof SeparatorPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+	(
+		{ className, orientation = "horizontal", decorative = true, ...props },
+		ref,
+	) => (
+		<SeparatorPrimitive.Root
+			ref={ref}
+			decorative={decorative}
+			orientation={orientation}
+			className={cn(
+				"shrink-0 bg-border",
+				orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+				className,
+			)}
+			{...props}
+		/>
+	),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

examples/nextjs-example/components/ui/sheet.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+	React.ElementRef<typeof SheetPrimitive.Overlay>,
+	React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+	<SheetPrimitive.Overlay
+		className={cn(
+			"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+			className,
+		)}
+		{...props}
+		ref={ref}
+	/>
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+	"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+	{
+		variants: {
+			side: {
+				top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+				bottom:
+					"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+				left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+				right:
+					"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+			},
+		},
+		defaultVariants: {
+			side: "right",
+		},
+	},
+);
+
+interface SheetContentProps
+	extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+		VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+	React.ElementRef<typeof SheetPrimitive.Content>,
+	SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+	<SheetPortal>
+		<SheetOverlay />
+		<SheetPrimitive.Content
+			ref={ref}
+			className={cn(sheetVariants({ side }), className)}
+			{...props}
+		>
+			<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+				<Cross2Icon className="h-4 w-4" />
+				<span className="sr-only">Close</span>
+			</SheetPrimitive.Close>
+			{children}
+		</SheetPrimitive.Content>
+	</SheetPortal>
+));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div
+		className={cn(
+			"flex flex-col space-y-2 text-center sm:text-left",
+			className,
+		)}
+		{...props}
+	/>
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div
+		className={cn(
+			"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+			className,
+		)}
+		{...props}
+	/>
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+	React.ElementRef<typeof SheetPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+	<SheetPrimitive.Title
+		ref={ref}
+		className={cn("text-lg font-semibold text-foreground", className)}
+		{...props}
+	/>
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+	React.ElementRef<typeof SheetPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+	<SheetPrimitive.Description
+		ref={ref}
+		className={cn("text-sm text-muted-foreground", className)}
+		{...props}
+	/>
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+	Sheet,
+	SheetPortal,
+	SheetOverlay,
+	SheetTrigger,
+	SheetClose,
+	SheetContent,
+	SheetHeader,
+	SheetFooter,
+	SheetTitle,
+	SheetDescription,
+};

examples/nextjs-example/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+	return (
+		<div
+			className={cn("animate-pulse rounded-md bg-primary/10", className)}
+			{...props}
+		/>
+	);
+}
+
+export { Skeleton };

examples/nextjs-example/components/ui/slider.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+
+import { cn } from "@/lib/utils";
+
+const Slider = React.forwardRef<
+	React.ElementRef<typeof SliderPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+	<SliderPrimitive.Root
+		ref={ref}
+		className={cn(
+			"relative flex w-full touch-none select-none items-center",
+			className,
+		)}
+		{...props}
+	>
+		<SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
+			<SliderPrimitive.Range className="absolute h-full bg-primary" />
+		</SliderPrimitive.Track>
+		<SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+	</SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };

examples/nextjs-example/components/ui/sonner.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Toaster as Sonner } from "sonner";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+	const { theme = "system" } = useTheme();
+
+	return (
+		<Sonner
+			theme={theme as ToasterProps["theme"]}
+			className="toaster group"
+			toastOptions={{
+				classNames: {
+					toast:
+						"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+					description: "group-[.toast]:text-muted-foreground",
+					actionButton:
+						"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+					cancelButton:
+						"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+				},
+			}}
+			{...props}
+		/>
+	);
+};
+
+export { Toaster };

examples/nextjs-example/components/ui/switch.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+
+import { cn } from "@/lib/utils";
+
+const Switch = React.forwardRef<
+	React.ElementRef<typeof SwitchPrimitives.Root>,
+	React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+	<SwitchPrimitives.Root
+		className={cn(
+			"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+			className,
+		)}
+		{...props}
+		ref={ref}
+	>
+		<SwitchPrimitives.Thumb
+			className={cn(
+				"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+			)}
+		/>
+	</SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

examples/nextjs-example/components/ui/table.tsx

@@ -0,0 +1,120 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Table = React.forwardRef<
+	HTMLTableElement,
+	React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+	<div className="relative w-full overflow-auto">
+		<table
+			ref={ref}
+			className={cn("w-full caption-bottom text-sm", className)}
+			{...props}
+		/>
+	</div>
+));
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+	HTMLTableSectionElement,
+	React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+	<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+	HTMLTableSectionElement,
+	React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+	<tbody
+		ref={ref}
+		className={cn("[&_tr:last-child]:border-0", className)}
+		{...props}
+	/>
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+	HTMLTableSectionElement,
+	React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+	<tfoot
+		ref={ref}
+		className={cn(
+			"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+			className,
+		)}
+		{...props}
+	/>
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<
+	HTMLTableRowElement,
+	React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+	<tr
+		ref={ref}
+		className={cn(
+			"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+			className,
+		)}
+		{...props}
+	/>
+));
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+	HTMLTableCellElement,
+	React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+	<th
+		ref={ref}
+		className={cn(
+			"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+			className,
+		)}
+		{...props}
+	/>
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+	HTMLTableCellElement,
+	React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+	<td
+		ref={ref}
+		className={cn(
+			"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+			className,
+		)}
+		{...props}
+	/>
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+	HTMLTableCaptionElement,
+	React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+	<caption
+		ref={ref}
+		className={cn("mt-4 text-sm text-muted-foreground", className)}
+		{...props}
+	/>
+));
+TableCaption.displayName = "TableCaption";
+
+export {
+	Table,
+	TableHeader,
+	TableBody,
+	TableFooter,
+	TableHead,
+	TableRow,
+	TableCell,
+	TableCaption,
+};

examples/nextjs-example/components/ui/tabs.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+	React.ElementRef<typeof TabsPrimitive.List>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.List
+		ref={ref}
+		className={cn(
+			"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+			className,
+		)}
+		{...props}
+	/>
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+	React.ElementRef<typeof TabsPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+			className,
+		)}
+		{...props}
+	/>
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+	React.ElementRef<typeof TabsPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.Content
+		ref={ref}
+		className={cn(
+			"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+			className,
+		)}
+		{...props}
+	/>
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

examples/nextjs-example/components/ui/tabs2.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import { useState } from "react";
+import { motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+
+type Tab = {
+	title: string;
+	value: string;
+	content?: string | React.ReactNode | any;
+};
+
+export const Tabs = ({
+	tabs: propTabs,
+	containerClassName,
+	activeTabClassName,
+	tabClassName,
+	contentClassName,
+}: {
+	tabs: Tab[];
+	containerClassName?: string;
+	activeTabClassName?: string;
+	tabClassName?: string;
+	contentClassName?: string;
+}) => {
+	const [active, setActive] = useState<Tab>(propTabs[0]);
+	const [tabs, setTabs] = useState<Tab[]>(propTabs);
+
+	const moveSelectedTabToTop = (idx: number) => {
+		const newTabs = [...propTabs];
+		const selectedTab = newTabs.splice(idx, 1);
+		newTabs.unshift(selectedTab[0]);
+		setTabs(newTabs);
+		setActive(newTabs[0]);
+	};
+
+	const [hovering, setHovering] = useState(false);
+
+	return (
+		<>
+			<div
+				className={cn(
+					"flex flex-row items-center justify-start mt-0 [perspective:1000px] relative overflow-auto sm:overflow-visible no-visible-scrollbar border-x w-full border-t max-w-max bg-opacity-0",
+					containerClassName,
+				)}
+			>
+				{propTabs.map((tab, idx) => (
+					<button
+						key={tab.title}
+						onClick={() => {
+							moveSelectedTabToTop(idx);
+						}}
+						onMouseEnter={() => setHovering(true)}
+						onMouseLeave={() => setHovering(false)}
+						className={cn(
+							"relative px-4 py-2 rounded-full opacity-80 hover:opacity-100",
+							tabClassName,
+						)}
+						style={{
+							transformStyle: "preserve-3d",
+						}}
+					>
+						{active.value === tab.value && (
+							<motion.div
+								transition={{
+									duration: 0.2,
+									delay: 0.1,
+
+									type: "keyframes",
+								}}
+								animate={{
+									x: tabs.indexOf(tab) === 0 ? [0, 0, 0] : [0, 0, 0],
+								}}
+								className={cn(
+									"absolute inset-0 bg-gray-200 dark:bg-zinc-900/90 opacity-100",
+									activeTabClassName,
+								)}
+							/>
+						)}
+
+						<span
+							className={cn(
+								"relative block text-black dark:text-white",
+								active.value === tab.value
+									? "text-opacity-100 font-medium"
+									: "opacity-40 ",
+							)}
+						>
+							{tab.title}
+						</span>
+					</button>
+				))}
+			</div>
+			<FadeInDiv
+				tabs={tabs}
+				active={active}
+				key={active.value}
+				hovering={hovering}
+				className={cn("", contentClassName)}
+			/>
+		</>
+	);
+};
+
+export const FadeInDiv = ({
+	className,
+	tabs,
+}: {
+	className?: string;
+	key?: string;
+	tabs: Tab[];
+	active: Tab;
+	hovering?: boolean;
+}) => {
+	const isActive = (tab: Tab) => {
+		return tab.value === tabs[0].value;
+	};
+	return (
+		<div className="relative w-full h-full">
+			{tabs.map((tab, idx) => (
+				<motion.div
+					key={tab.value}
+					style={{
+						scale: 1 - idx * 0.1,
+						zIndex: -idx,
+						opacity: idx < 3 ? 1 - idx * 0.1 : 0,
+					}}
+					animate={{
+						transition: {
+							duration: 0.2,
+							delay: 0.1,
+							type: "keyframes",
+						},
+					}}
+					className={cn(
+						"w-50 h-full",
+						isActive(tab) ? "" : "hidden",
+						className,
+					)}
+				>
+					{tab.content}
+				</motion.div>
+			))}
+		</div>
+	);
+};

examples/nextjs-example/components/ui/textarea.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface TextareaProps
+	extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+	({ className, ...props }, ref) => {
+		return (
+			<textarea
+				className={cn(
+					"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+					className,
+				)}
+				ref={ref}
+				{...props}
+			/>
+		);
+	},
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };

examples/nextjs-example/components/ui/toast.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import * as React from "react";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Viewport>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+	<ToastPrimitives.Viewport
+		ref={ref}
+		className={cn(
+			"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+			className,
+		)}
+		{...props}
+	/>
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+	"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+	{
+		variants: {
+			variant: {
+				default: "border bg-background text-foreground",
+				destructive:
+					"destructive group border-destructive bg-destructive text-destructive-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+const Toast = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Root>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+		VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+	return (
+		<ToastPrimitives.Root
+			ref={ref}
+			className={cn(toastVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Action>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+	<ToastPrimitives.Action
+		ref={ref}
+		className={cn(
+			"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+			className,
+		)}
+		{...props}
+	/>
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Close>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+	<ToastPrimitives.Close
+		ref={ref}
+		className={cn(
+			"absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+			className,
+		)}
+		toast-close=""
+		{...props}
+	>
+		<Cross2Icon className="h-4 w-4" />
+	</ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Title>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+	<ToastPrimitives.Title
+		ref={ref}
+		className={cn("text-sm font-semibold [&+div]:text-xs", className)}
+		{...props}
+	/>
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Description>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+	<ToastPrimitives.Description
+		ref={ref}
+		className={cn("text-sm opacity-90", className)}
+		{...props}
+	/>
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+	type ToastProps,
+	type ToastActionElement,
+	ToastProvider,
+	ToastViewport,
+	Toast,
+	ToastTitle,
+	ToastDescription,
+	ToastClose,
+	ToastAction,
+};

examples/nextjs-example/components/ui/toaster.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useToast } from "@/hooks/use-toast";
+import {
+	Toast,
+	ToastClose,
+	ToastDescription,
+	ToastProvider,
+	ToastTitle,
+	ToastViewport,
+} from "@/components/ui/toast";
+
+export function Toaster() {
+	const { toasts } = useToast();
+
+	return (
+		<ToastProvider>
+			{toasts.map(function ({ id, title, description, action, ...props }) {
+				return (
+					<Toast key={id} {...props}>
+						<div className="grid gap-1">
+							{title && <ToastTitle>{title}</ToastTitle>}
+							{description && (
+								<ToastDescription>{description}</ToastDescription>
+							)}
+						</div>
+						{action}
+						<ToastClose />
+					</Toast>
+				);
+			})}
+			<ToastViewport />
+		</ToastProvider>
+	);
+}

examples/nextjs-example/components/ui/toggle-group.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { toggleVariants } from "@/components/ui/toggle";
+
+const ToggleGroupContext = React.createContext<
+	VariantProps<typeof toggleVariants>
+>({
+	size: "default",
+	variant: "default",
+});
+
+const ToggleGroup = React.forwardRef<
+	React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+		VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+	<ToggleGroupPrimitive.Root
+		ref={ref}
+		className={cn("flex items-center justify-center gap-1", className)}
+		{...props}
+	>
+		<ToggleGroupContext.Provider value={{ variant, size }}>
+			{children}
+		</ToggleGroupContext.Provider>
+	</ToggleGroupPrimitive.Root>
+));
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+
+const ToggleGroupItem = React.forwardRef<
+	React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+		VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+	const context = React.useContext(ToggleGroupContext);
+
+	return (
+		<ToggleGroupPrimitive.Item
+			ref={ref}
+			className={cn(
+				toggleVariants({
+					variant: context.variant || variant,
+					size: context.size || size,
+				}),
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</ToggleGroupPrimitive.Item>
+	);
+});
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+export { ToggleGroup, ToggleGroupItem };

examples/nextjs-example/components/ui/toggle.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const toggleVariants = cva(
+	"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+	{
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				outline:
+					"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+			},
+			size: {
+				default: "h-9 px-3",
+				sm: "h-8 px-2",
+				lg: "h-10 px-3",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+const Toggle = React.forwardRef<
+	React.ElementRef<typeof TogglePrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+		VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+	<TogglePrimitive.Root
+		ref={ref}
+		className={cn(toggleVariants({ variant, size, className }))}
+		{...props}
+	/>
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };

examples/nextjs-example/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@/lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+	React.ElementRef<typeof TooltipPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+	<TooltipPrimitive.Content
+		ref={ref}
+		sideOffset={sideOffset}
+		className={cn(
+			"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			className,
+		)}
+		{...props}
+	/>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

examples/nextjs-example/components/wrapper.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import Link from "next/link";
+import { ThemeToggle } from "./theme-toggle";
+import { Logo } from "./logo";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+export function Wrapper(props: { children: React.ReactNode }) {
+	return (
+		<div className="min-h-screen w-full dark:bg-black bg-white  dark:bg-grid-small-white/[0.2] bg-grid-small-black/[0.2] relative flex justify-center">
+			<div className="absolute pointer-events-none inset-0 md:flex items-center justify-center dark:bg-black bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] hidden"></div>
+			<div className="bg-white dark:bg-black border-b py-2 flex justify-between items-center border-border absolute z-50 w-full lg:w-8/12 px-4 md:px-1">
+				<Link href="/">
+					<div className="flex gap-2 cursor-pointer">
+						<Logo />
+						<p className="dark:text-white text-black">BETTER-AUTH.</p>
+					</div>
+				</Link>
+				<div className="z-50 flex items-center">
+					<ThemeToggle />
+				</div>
+			</div>
+			<div className="mt-20 lg:w-7/12 w-full">{props.children}</div>
+		</div>
+	);
+}
+
+const queryClient = new QueryClient();
+
+export function WrapperWithQuery(props: { children: React.ReactNode }) {
+	return (
+		<QueryClientProvider client={queryClient}>
+			{props.children}
+		</QueryClientProvider>
+	);
+}

examples/nextjs-example/hooks/use-toast.ts

@@ -0,0 +1,192 @@
+"use client";
+
+// Inspired by react-hot-toast library
+import * as React from "react";
+
+import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+type ToasterToast = ToastProps & {
+	id: string;
+	title?: React.ReactNode;
+	description?: React.ReactNode;
+	action?: ToastActionElement;
+};
+
+const actionTypes = {
+	ADD_TOAST: "ADD_TOAST",
+	UPDATE_TOAST: "UPDATE_TOAST",
+	DISMISS_TOAST: "DISMISS_TOAST",
+	REMOVE_TOAST: "REMOVE_TOAST",
+} as const;
+
+let count = 0;
+
+function genId() {
+	count = (count + 1) % Number.MAX_SAFE_INTEGER;
+	return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+	| {
+			type: ActionType["ADD_TOAST"];
+			toast: ToasterToast;
+	  }
+	| {
+			type: ActionType["UPDATE_TOAST"];
+			toast: Partial<ToasterToast>;
+	  }
+	| {
+			type: ActionType["DISMISS_TOAST"];
+			toastId?: ToasterToast["id"];
+	  }
+	| {
+			type: ActionType["REMOVE_TOAST"];
+			toastId?: ToasterToast["id"];
+	  };
+
+interface State {
+	toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+	if (toastTimeouts.has(toastId)) {
+		return;
+	}
+
+	const timeout = setTimeout(() => {
+		toastTimeouts.delete(toastId);
+		dispatch({
+			type: "REMOVE_TOAST",
+			toastId: toastId,
+		});
+	}, TOAST_REMOVE_DELAY);
+
+	toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+	switch (action.type) {
+		case "ADD_TOAST":
+			return {
+				...state,
+				toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+			};
+
+		case "UPDATE_TOAST":
+			return {
+				...state,
+				toasts: state.toasts.map((t) =>
+					t.id === action.toast.id ? { ...t, ...action.toast } : t,
+				),
+			};
+
+		case "DISMISS_TOAST": {
+			const { toastId } = action;
+
+			// ! Side effects ! - This could be extracted into a dismissToast() action,
+			// but I'll keep it here for simplicity
+			if (toastId) {
+				addToRemoveQueue(toastId);
+			} else {
+				state.toasts.forEach((toast) => {
+					addToRemoveQueue(toast.id);
+				});
+			}
+
+			return {
+				...state,
+				toasts: state.toasts.map((t) =>
+					t.id === toastId || toastId === undefined
+						? {
+								...t,
+								open: false,
+							}
+						: t,
+				),
+			};
+		}
+		case "REMOVE_TOAST":
+			if (action.toastId === undefined) {
+				return {
+					...state,
+					toasts: [],
+				};
+			}
+			return {
+				...state,
+				toasts: state.toasts.filter((t) => t.id !== action.toastId),
+			};
+	}
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+	memoryState = reducer(memoryState, action);
+
+	listeners.forEach((listener) => {
+		listener(memoryState);
+	});
+}
+
+type Toast = Omit<ToasterToast, "id">;
+
+function toast({ ...props }: Toast) {
+	const id = genId();
+
+	const update = (props: ToasterToast) =>
+		dispatch({
+			type: "UPDATE_TOAST",
+			toast: { ...props, id },
+		});
+	const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+
+	dispatch({
+		type: "ADD_TOAST",
+		toast: {
+			...props,
+			id,
+			open: true,
+			onOpenChange: (open) => {
+				if (!open) dismiss();
+			},
+		},
+	});
+
+	return {
+		id: id,
+		dismiss,
+		update,
+	};
+}
+
+function useToast() {
+	const [state, setState] = React.useState<State>(memoryState);
+
+	React.useEffect(() => {
+		listeners.push(setState);
+		return () => {
+			const index = listeners.indexOf(setState);
+			if (index > -1) {
+				listeners.splice(index, 1);
+			}
+		};
+	}, [state]);
+
+	return {
+		...state,
+		toast,
+		dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+	};
+}
+
+export { useToast, toast };

examples/nextjs-example/lib/auth-client.ts

@@ -0,0 +1,35 @@
+import { createAuthClient } from "better-auth/react";
+import {
+	organizationClient,
+	passkeyClient,
+	twoFactorClient,
+} from "better-auth/client/plugins";
+import { toast } from "sonner";
+
+export const client = createAuthClient({
+	plugins: [
+		organizationClient(),
+		twoFactorClient({
+			twoFactorPage: "/two-factor",
+		}),
+		passkeyClient(),
+	],
+	fetchOptions: {
+		onError(e) {
+			if (e.error.status === 429) {
+				toast.error("Too many requests. Please try again later.");
+			}
+		},
+	},
+});
+
+export const {
+	signUp,
+	signIn,
+	signOut,
+	useSession,
+	user,
+	organization,
+	useListOrganizations,
+	useActiveOrganization,
+} = client;

examples/nextjs-example/lib/auth-types.ts

@@ -0,0 +1,6 @@
+import type { auth } from "./auth";
+import { client } from "./auth-client";
+
+export type Session = typeof auth.$Infer.Session;
+export type ActiveOrganization = typeof client.$Infer.ActiveOrganization;
+export type Invitation = typeof client.$Infer.Invitation;