@better-auth-ui/heroui 1.6.5 → 1.6.7

package/dist/components/auth/theme/theme-toggle-item.js

@@ -1,58 +1,62 @@
 import { themePlugin as e } from "../../../lib/auth/theme-plugin.js";
 import { useAuthPlugin as t } from "@better-auth-ui/react";
-import { Display as n, Moon as r, Sun as i } from "@gravity-ui/icons";
-import { Dropdown as a, Label as o, Tabs as s } from "@heroui/react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Display as n, Moon as r, Palette as i, Sun as a } from "@gravity-ui/icons";
+import { Dropdown as o, Label as s, Tabs as c } from "@heroui/react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/auth/theme/theme-toggle-item.tsx
-var u = "[role=\"tab\"][aria-selected=\"true\"]";
-function d() {
-	let { useTheme: d, localization: f } = t(e), { theme: p, setTheme: m, themes: h = [] } = d();
-	return /* @__PURE__ */ l(a.Item, {
+var d = "[role=\"tab\"][aria-selected=\"true\"]";
+function f() {
+	let { useTheme: f, localization: p } = t(e), { theme: m, setTheme: h, themes: g = [] } = f();
+	return /* @__PURE__ */ u(o.Item, {
 		className: "py-1 pe-2",
 		onFocus: (e) => {
-			e.target === e.currentTarget && e.currentTarget.querySelector(u)?.focus({ preventScroll: !0 });
+			e.target === e.currentTarget && e.currentTarget.querySelector(d)?.focus({ preventScroll: !0 });
 		},
 		shouldCloseOnSelect: !1,
-		children: [/* @__PURE__ */ c(o, { children: f.theme }), /* @__PURE__ */ c(s, {
-			className: "ml-auto",
-			selectedKey: p,
-			onSelectionChange: (e) => m(e),
-			children: /* @__PURE__ */ c(s.ListContainer, {
-				onKeyDown: (e) => {
-					if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
-					let t = e.target;
-					if (t.getAttribute("role") !== "tab") return;
-					let n = t.closest("[role=\"menuitem\"]"), r = n?.closest("[role=\"menu\"]");
-					if (!n || !r) return;
-					let i = Array.from(r.querySelectorAll("[role=\"menuitem\"]:not([data-disabled])")), a = i.indexOf(n);
-					if (a === -1) return;
-					let o = i[e.key === "ArrowDown" ? a + 1 : a - 1];
-					o && (e.preventDefault(), o.focus());
-				},
-				children: /* @__PURE__ */ l(s.List, {
-					"aria-label": f.theme,
-					className: "*:h-5 *:w-5 *:p-0",
-					children: [
-						h.includes("system") && /* @__PURE__ */ l(s.Tab, {
-							id: "system",
-							"aria-label": f.system,
-							children: [/* @__PURE__ */ c(n, { className: "size-3" }), /* @__PURE__ */ c(s.Indicator, {})]
-						}),
-						h.includes("light") && /* @__PURE__ */ l(s.Tab, {
-							id: "light",
-							"aria-label": f.light,
-							children: [/* @__PURE__ */ c(i, { className: "size-3" }), /* @__PURE__ */ c(s.Indicator, {})]
-						}),
-						h.includes("dark") && /* @__PURE__ */ l(s.Tab, {
-							id: "dark",
-							"aria-label": f.dark,
-							children: [/* @__PURE__ */ c(r, { className: "size-3" }), /* @__PURE__ */ c(s.Indicator, {})]
-						})
-					]
+		children: [
+			/* @__PURE__ */ l(i, { className: "text-muted" }),
+			/* @__PURE__ */ l(s, { children: p.theme }),
+			/* @__PURE__ */ l(c, {
+				className: "ml-auto",
+				selectedKey: m,
+				onSelectionChange: (e) => h(e),
+				children: /* @__PURE__ */ l(c.ListContainer, {
+					onKeyDown: (e) => {
+						if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+						let t = e.target;
+						if (t.getAttribute("role") !== "tab") return;
+						let n = t.closest("[role=\"menuitem\"]"), r = n?.closest("[role=\"menu\"]");
+						if (!n || !r) return;
+						let i = Array.from(r.querySelectorAll("[role=\"menuitem\"]:not([data-disabled])")), a = i.indexOf(n);
+						if (a === -1) return;
+						let o = i[e.key === "ArrowDown" ? a + 1 : a - 1];
+						o && (e.preventDefault(), o.focus());
+					},
+					children: /* @__PURE__ */ u(c.List, {
+						"aria-label": p.theme,
+						className: "*:h-5 *:w-5 *:p-0",
+						children: [
+							g.includes("system") && /* @__PURE__ */ u(c.Tab, {
+								id: "system",
+								"aria-label": p.system,
+								children: [/* @__PURE__ */ l(n, { className: "size-3" }), /* @__PURE__ */ l(c.Indicator, {})]
+							}),
+							g.includes("light") && /* @__PURE__ */ u(c.Tab, {
+								id: "light",
+								"aria-label": p.light,
+								children: [/* @__PURE__ */ l(a, { className: "size-3" }), /* @__PURE__ */ l(c.Indicator, {})]
+							}),
+							g.includes("dark") && /* @__PURE__ */ u(c.Tab, {
+								id: "dark",
+								"aria-label": p.dark,
+								children: [/* @__PURE__ */ l(r, { className: "size-3" }), /* @__PURE__ */ l(c.Indicator, {})]
+							})
+						]
+					})
 				})
 			})
-		})]
+		]
 	});
 }
 //#endregion
-export { d as ThemeToggleItem };
+export { f as ThemeToggleItem };

package/dist/components/auth/user/user-button.d.ts

@@ -1,4 +1,23 @@
-import { ButtonProps, DropdownPopoverProps } from '@heroui/react';
+import { ButtonProps, DropdownItemProps, DropdownPopoverProps } from '@heroui/react';
+import { ReactElement, ReactNode } from 'react';
+/** Auth states a `UserButton` link can be visible in. */
+export type UserButtonLinkVisibility = "authenticated" | "unauthenticated" | "always";
+/** A simple link entry rendered as a `Dropdown.Item` in the `UserButton` menu. */
+export type UserButtonLink = {
+    /** Visible label. */
+    label: ReactNode;
+    /** Destination URL. */
+    href: string;
+    /** Optional leading icon. Sized/coloured to match built-in items. */
+    icon?: ReactNode;
+    /** Forwarded to the underlying `Dropdown.Item`. */
+    variant?: DropdownItemProps["variant"];
+    /**
+     * When this link is visible based on auth state.
+     * @default "always"
+     */
+    visibility?: UserButtonLinkVisibility;
+};
 export type UserButtonProps = {
     className?: string;
     size?: "default" | "icon";
@@ -8,6 +27,10 @@ export type UserButtonProps = {
      */
     placement?: DropdownPopoverProps["placement"];
     variant?: ButtonProps["variant"];
+    /** Additional menu entries rendered above the built-in items. */
+    links?: (UserButtonLink | ReactElement)[];
+    /** Hide the built-in "Settings" link. Useful when replacing it via `links`. */
+    hideSettings?: boolean;
 };
 /**
  * Render a user account dropdown button that shows account actions.
@@ -16,6 +39,8 @@ export type UserButtonProps = {
  * @param placement - Dropdown popover placement (e.g., "bottom", "top-start", "bottom-end")
  * @param size - "icon" renders an avatar-only trigger; "default" renders a button with label and chevron
  * @param variant - Button visual variant passed to the underlying Button component
+ * @param links - Additional menu entries rendered above the built-in items
+ * @param hideSettings - Hide the built-in "Settings" link
  * @returns The user button and its dropdown menu as a JSX element
  */
-export declare function UserButton({ className, placement, size, variant }: UserButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function UserButton({ className, placement, size, variant, links, hideSettings }: UserButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/auth/user/user-button.js

@@ -2,54 +2,73 @@ import { UserAvatar as e } from "./user-avatar.js";
 import { UserView as t } from "./user-view.js";
 import { useAuth as n, useSession as r } from "@better-auth-ui/react";
 import { ArrowRightFromSquare as i, ArrowRightToSquare as a, ChevronsExpandVertical as o, Gear as s, PersonPlus as c } from "@gravity-ui/icons";
-import { Button as l, Dropdown as u, Label as d, Separator as f, cn as p } from "@heroui/react";
+import { Button as l, Dropdown as u, Label as d, cn as f } from "@heroui/react";
+import { isValidElement as p } from "react";
 import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/auth/user/user-button.tsx
-function _({ className: _, placement: v = "bottom", size: y = "default", variant: b = "ghost" }) {
-	let { authClient: x, basePaths: S, viewPaths: C, localization: w, plugins: T } = n(), { data: E, isPending: D } = r(x), O = T.flatMap((e) => e.userMenuItems?.map((t, n) => /* @__PURE__ */ h(t, {}, `${e.id}-${n.toString()}`)) ?? []);
-	return /* @__PURE__ */ g(u, { children: [y === "icon" ? /* @__PURE__ */ h(u.Trigger, {
-		className: p("rounded-full", _),
+function _(e, t) {
+	if (p(e)) return e;
+	let { label: n, href: r, icon: i, variant: a } = e;
+	return /* @__PURE__ */ g(u.Item, {
+		href: r,
+		variant: a,
+		textValue: typeof n == "string" ? n : void 0,
+		children: [i, /* @__PURE__ */ h(d, { children: n })]
+	}, t);
+}
+function v({ className: v, placement: y = "bottom", size: b = "default", variant: x = "ghost", links: S, hideSettings: C = !1 }) {
+	let { authClient: w, basePaths: T, viewPaths: E, localization: D, plugins: O } = n(), { data: k, isPending: A } = r(w), j = O.flatMap((e) => e.userMenuItems?.map((t, n) => /* @__PURE__ */ h(t, {}, `${e.id}-${n.toString()}`)) ?? []), M = S?.flatMap((e, t) => {
+		if (!p(e)) {
+			let t = e.visibility ?? "always";
+			if (t === "authenticated" && !k || t === "unauthenticated" && k) return [];
+		}
+		return [_(e, `user-button-link-${t.toString()}`)];
+	});
+	return /* @__PURE__ */ g(u, { children: [b === "icon" ? /* @__PURE__ */ h(u.Trigger, {
+		className: f("rounded-full", v),
 		children: /* @__PURE__ */ h(e, {})
 	}) : /* @__PURE__ */ g(l, {
-		variant: b,
-		className: p("h-auto font-normal justify-start px-3 py-2 text-left", _),
-		children: [E || D ? /* @__PURE__ */ h(t, { isPending: D }) : /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(e, {}), /* @__PURE__ */ h("p", {
+		variant: x,
+		className: f("h-auto font-normal justify-start px-3 py-2 text-left", v),
+		children: [k || A ? /* @__PURE__ */ h(t, { isPending: A }) : /* @__PURE__ */ g(m, { children: [/* @__PURE__ */ h(e, {}), /* @__PURE__ */ h("p", {
 			className: "text-sm font-medium",
-			children: w.auth.account
+			children: D.auth.account
 		})] }), /* @__PURE__ */ h(o, { className: "ml-auto size-3.5" })]
 	}), /* @__PURE__ */ g(u.Popover, {
-		placement: v,
+		placement: y,
 		className: "min-w-40 md:min-w-56 max-w-[48svw]",
-		children: [E && /* @__PURE__ */ h("div", {
+		children: [k && /* @__PURE__ */ h("div", {
 			className: "px-3 pt-3 pb-1",
 			children: /* @__PURE__ */ h(t, {})
-		}), /* @__PURE__ */ h(u.Menu, { children: E ? /* @__PURE__ */ g(m, { children: [
-			/* @__PURE__ */ g(u.Item, {
-				textValue: w.settings.settings,
-				href: `${S.settings}/${C.settings.account}`,
-				children: [/* @__PURE__ */ h(s, { className: "text-muted" }), /* @__PURE__ */ h(d, { children: w.settings.settings })]
+		}), /* @__PURE__ */ h(u.Menu, { children: k ? /* @__PURE__ */ g(m, { children: [
+			M,
+			!C && /* @__PURE__ */ g(u.Item, {
+				textValue: D.settings.settings,
+				href: `${T.settings}/${E.settings.account}`,
+				children: [/* @__PURE__ */ h(s, { className: "text-muted" }), /* @__PURE__ */ h(d, { children: D.settings.settings })]
 			}),
-			O,
-			/* @__PURE__ */ h(f, {}),
+			j,
 			/* @__PURE__ */ g(u.Item, {
-				textValue: w.auth.signOut,
-				href: `${S.auth}/${C.auth.signOut}`,
-				children: [/* @__PURE__ */ h(i, { className: "text-muted" }), /* @__PURE__ */ h(d, { children: w.auth.signOut })]
+				textValue: D.auth.signOut,
+				href: `${T.auth}/${E.auth.signOut}`,
+				variant: "danger",
+				children: [/* @__PURE__ */ h(i, { className: "text-danger" }), /* @__PURE__ */ h(d, { children: D.auth.signOut })]
 			})
 		] }) : /* @__PURE__ */ g(m, { children: [
+			M,
 			/* @__PURE__ */ g(u.Item, {
-				textValue: w.auth.signIn,
-				href: `${S.auth}/${C.auth.signIn}`,
-				children: [/* @__PURE__ */ h(a, { className: "text-muted" }), /* @__PURE__ */ h(d, { children: w.auth.signIn })]
+				textValue: D.auth.signIn,
+				href: `${T.auth}/${E.auth.signIn}`,
+				children: [/* @__PURE__ */ h(a, { className: "text-muted" }), /* @__PURE__ */ h(d, { children: D.auth.signIn })]
 			}),
 			/* @__PURE__ */ g(u.Item, {
-				textValue: w.auth.signUp,
-				href: `${S.auth}/${C.auth.signUp}`,
-				children: [/* @__PURE__ */ h(c, { className: "text-muted" }), /* @__PURE__ */ h(d, { children: w.auth.signUp })]
+				textValue: D.auth.signUp,
+				href: `${T.auth}/${E.auth.signUp}`,
+				children: [/* @__PURE__ */ h(c, { className: "text-muted" }), /* @__PURE__ */ h(d, { children: D.auth.signUp })]
 			}),
-			O
+			j
 		] }) })]
 	})] });
 }
 //#endregion
-export { _ as UserButton };
+export { v as UserButton };

package/dist/lib/auth/api-key-plugin.d.ts

@@ -0,0 +1,23 @@
+import { ApiKeyPluginOptions } from '@better-auth-ui/core/plugins';
+import { ApiKeys } from '../../components/auth/api-key/api-keys';
+export declare const apiKeyPlugin: ((options?: ApiKeyPluginOptions | undefined) => Omit<{
+    securityCards: (typeof ApiKeys)[];
+    localization: {
+        apiKey: string;
+        apiKeys: string;
+        apiKeysDescription: string;
+        createApiKey: string;
+        noApiKeys: string;
+        name: string;
+        newApiKey: string;
+        newApiKeyWarning: string;
+        deleteApiKey: string;
+        deleteApiKeyWarning: string;
+        dismissNewKey: string;
+    };
+    id: "apiKey";
+}, "id"> & {
+    id: "apiKey";
+}) & {
+    id: "apiKey";
+};

package/dist/lib/auth/api-key-plugin.js

@@ -0,0 +1,10 @@
+import { ApiKeys as e } from "../../components/auth/api-key/api-keys.js";
+import { createAuthPlugin as t } from "@better-auth-ui/core";
+import { apiKeyPlugin as n } from "@better-auth-ui/core/plugins";
+//#region src/lib/auth/api-key-plugin.ts
+var r = t(n.id, (t = {}) => ({
+	...n(t),
+	securityCards: [e]
+}));
+//#endregion
+export { r as apiKeyPlugin };

package/dist/plugins.d.ts

@@ -1,3 +1,4 @@
+export * from './components/auth/api-key/api-keys';
 export * from './components/auth/delete-user/danger-zone';
 export * from './components/auth/delete-user/delete-user';
 export * from './components/auth/magic-link/magic-link';
@@ -11,6 +12,7 @@ export * from './components/auth/theme/appearance';
 export * from './components/auth/theme/theme-toggle-item';
 export * from './components/auth/username/sign-in-username';
 export * from './components/auth/username/username-field';
+export * from './lib/auth/api-key-plugin';
 export * from './lib/auth/auth-plugin';
 export * from './lib/auth/delete-user-plugin';
 export * from './lib/auth/magic-link-plugin';

package/dist/plugins.js

@@ -1,21 +1,23 @@
 "use client";
-import { deleteUserPlugin as e } from "./lib/auth/delete-user-plugin.js";
-import { DeleteUser as t } from "./components/auth/delete-user/delete-user.js";
-import { DangerZone as n } from "./components/auth/delete-user/danger-zone.js";
-import { magicLinkPlugin as r } from "./lib/auth/magic-link-plugin.js";
-import { MagicLink as i } from "./components/auth/magic-link/magic-link.js";
-import { ManageAccounts as a } from "./components/auth/multi-session/manage-accounts.js";
-import { SwitchAccountSubmenuItem as o } from "./components/auth/multi-session/switch-account-submenu-item.js";
-import { SwitchAccountSubmenuContent as s } from "./components/auth/multi-session/switch-account-submenu-content.js";
-import { SwitchAccountSubmenu as c } from "./components/auth/multi-session/switch-account-submenu.js";
-import { multiSessionPlugin as l } from "./lib/auth/multi-session-plugin.js";
-import { ManageAccount as u } from "./components/auth/multi-session/manage-account.js";
-import { passkeyPlugin as d } from "./lib/auth/passkey-plugin.js";
-import { Passkeys as f } from "./components/auth/passkey/passkeys.js";
-import { ThemeToggleItem as p } from "./components/auth/theme/theme-toggle-item.js";
-import { themePlugin as m } from "./lib/auth/theme-plugin.js";
-import { Appearance as h } from "./components/auth/theme/appearance.js";
-import { UsernameField as g } from "./components/auth/username/username-field.js";
-import { usernamePlugin as _ } from "./lib/auth/username-plugin.js";
-import { SignInUsername as v } from "./components/auth/username/sign-in-username.js";
-export { h as Appearance, n as DangerZone, t as DeleteUser, i as MagicLink, u as ManageAccount, a as ManageAccounts, f as Passkeys, v as SignInUsername, c as SwitchAccountSubmenu, s as SwitchAccountSubmenuContent, o as SwitchAccountSubmenuItem, p as ThemeToggleItem, g as UsernameField, e as deleteUserPlugin, r as magicLinkPlugin, l as multiSessionPlugin, d as passkeyPlugin, m as themePlugin, _ as usernamePlugin };
+import { apiKeyPlugin as e } from "./lib/auth/api-key-plugin.js";
+import { ApiKeys as t } from "./components/auth/api-key/api-keys.js";
+import { deleteUserPlugin as n } from "./lib/auth/delete-user-plugin.js";
+import { DeleteUser as r } from "./components/auth/delete-user/delete-user.js";
+import { DangerZone as i } from "./components/auth/delete-user/danger-zone.js";
+import { magicLinkPlugin as a } from "./lib/auth/magic-link-plugin.js";
+import { MagicLink as o } from "./components/auth/magic-link/magic-link.js";
+import { ManageAccounts as s } from "./components/auth/multi-session/manage-accounts.js";
+import { SwitchAccountSubmenuItem as c } from "./components/auth/multi-session/switch-account-submenu-item.js";
+import { SwitchAccountSubmenuContent as l } from "./components/auth/multi-session/switch-account-submenu-content.js";
+import { SwitchAccountSubmenu as u } from "./components/auth/multi-session/switch-account-submenu.js";
+import { multiSessionPlugin as d } from "./lib/auth/multi-session-plugin.js";
+import { ManageAccount as f } from "./components/auth/multi-session/manage-account.js";
+import { passkeyPlugin as p } from "./lib/auth/passkey-plugin.js";
+import { Passkeys as m } from "./components/auth/passkey/passkeys.js";
+import { ThemeToggleItem as h } from "./components/auth/theme/theme-toggle-item.js";
+import { themePlugin as g } from "./lib/auth/theme-plugin.js";
+import { Appearance as _ } from "./components/auth/theme/appearance.js";
+import { UsernameField as v } from "./components/auth/username/username-field.js";
+import { usernamePlugin as y } from "./lib/auth/username-plugin.js";
+import { SignInUsername as b } from "./components/auth/username/sign-in-username.js";
+export { t as ApiKeys, _ as Appearance, i as DangerZone, r as DeleteUser, o as MagicLink, f as ManageAccount, s as ManageAccounts, m as Passkeys, b as SignInUsername, u as SwitchAccountSubmenu, l as SwitchAccountSubmenuContent, c as SwitchAccountSubmenuItem, h as ThemeToggleItem, v as UsernameField, e as apiKeyPlugin, n as deleteUserPlugin, a as magicLinkPlugin, d as multiSessionPlugin, p as passkeyPlugin, g as themePlugin, y as usernamePlugin };

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@better-auth-ui/heroui",
-  "version": "1.6.5",
+  "version": "1.6.7",
   "type": "module",
   "scripts": {
     "build": "vite build",
-    "dev": "vite build --watch",
+    "dev": "tsc --watch",
     "test": "vitest"
   },
   "files": [
@@ -28,35 +28,35 @@
   },
   "devDependencies": {
     "@gravity-ui/icons": "^2.18.0",
-    "@heroui/react": "^3.0.2",
-    "@heroui/styles": "^3.0.2",
+    "@heroui/react": "^3.0.4",
+    "@heroui/styles": "^3.0.4",
     "@internationalized/date": "^3.12.1",
     "@tanstack/react-pacer": "^0.22.0",
-    "@tanstack/react-query": "^5.100.8",
+    "@tanstack/react-query": "^5.100.9",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.5.2",
     "@types/react": "^19.2.14",
     "@vitejs/plugin-react": "^6.0.1",
     "@vitest/browser-playwright": "^4.1.5",
-    "better-auth": "^1.6.9",
+    "better-auth": "^1.6.10",
     "bowser": "^2.11.0",
     "playwright": "^1.59.1",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "vitest": "^4.1.5"
   },
   "peerDependencies": {
     "@better-auth-ui/core": "*",
     "@better-auth-ui/react": "*",
     "@gravity-ui/icons": ">=2.18.0",
-    "@heroui/react": ">=3.0.2",
-    "@heroui/styles": ">=3.0.2",
+    "@heroui/react": ">=3.0.4",
+    "@heroui/styles": ">=3.0.4",
     "@internationalized/date": ">=3.12.1",
     "@tanstack/react-pacer": ">=0.22.0",
-    "@tanstack/react-query": ">=5.100.8",
-    "better-auth": ">=1.6.9",
-    "react": ">=19.2.5",
-    "react-dom": ">=19.2.5",
+    "@tanstack/react-query": ">=5.100.9",
+    "better-auth": ">=1.6.10",
+    "react": ">=19.2.6",
+    "react-dom": ">=19.2.6",
     "bowser": ">=2.11.0"
   },
   "repository": {

package/src/components/auth/api-key/api-key-skeleton.tsx

@@ -0,0 +1,17 @@
+import { Skeleton } from "@heroui/react"
+
+export function ApiKeySkeleton() {
+  return (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-3">
+        <Skeleton className="size-10 rounded-xl" />
+
+        <div className="flex flex-col gap-1">
+          <Skeleton className="h-4 w-28 rounded-lg" />
+          <Skeleton className="h-3 w-36 rounded-lg" />
+          <Skeleton className="h-3 w-32 rounded-lg" />
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/auth/api-key/api-key.tsx

@@ -0,0 +1,64 @@
+import {
+  type ListedApiKey,
+  useAuth,
+  useAuthPlugin
+} from "@better-auth-ui/react"
+import { Key, Xmark } from "@gravity-ui/icons"
+import { Button } from "@heroui/react"
+import { useState } from "react"
+
+import { apiKeyPlugin } from "../../../lib/auth/api-key-plugin"
+import { DeleteApiKeyDialog } from "./delete-api-key-dialog"
+
+export type ApiKeyProps = {
+  apiKey: ListedApiKey
+}
+
+export function ApiKey({ apiKey }: ApiKeyProps) {
+  const { localization } = useAuth()
+  const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
+  const [deleteOpen, setDeleteOpen] = useState(false)
+
+  const preview = `${apiKey.start}${"*".repeat(16)}`
+
+  return (
+    <div className="flex items-center gap-3">
+      <div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-surface-secondary">
+        <Key className="size-4.5" />
+      </div>
+
+      <div className="flex flex-col min-w-0">
+        <span className="text-sm font-medium leading-tight truncate">
+          {apiKey.name || apiKeyLocalization.apiKey}
+        </span>
+
+        <span className="text-xs text-muted font-mono truncate">{preview}</span>
+
+        <span className="text-xs text-muted">
+          {new Date(apiKey.createdAt).toLocaleString(undefined, {
+            dateStyle: "medium",
+            timeStyle: "short"
+          })}
+        </span>
+      </div>
+
+      <Button
+        className="ml-auto shrink-0"
+        variant="outline"
+        size="sm"
+        onPress={() => setDeleteOpen(true)}
+        aria-label={apiKeyLocalization.deleteApiKey}
+      >
+        <Xmark />
+
+        {localization.settings.delete}
+      </Button>
+
+      <DeleteApiKeyDialog
+        isOpen={deleteOpen}
+        onOpenChange={setDeleteOpen}
+        apiKey={apiKey}
+      />
+    </div>
+  )
+}

package/src/components/auth/api-key/api-keys-empty.tsx

@@ -0,0 +1,33 @@
+import { useAuthPlugin } from "@better-auth-ui/react"
+import { Key } from "@gravity-ui/icons"
+import { Button } from "@heroui/react"
+
+import { apiKeyPlugin } from "../../../lib/auth/api-key-plugin"
+
+export type ApiKeysEmptyProps = {
+  onCreatePress: () => void
+}
+
+export function ApiKeysEmpty({ onCreatePress }: ApiKeysEmptyProps) {
+  const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-4">
+      <div className="flex size-10 items-center justify-center rounded-xl bg-surface-secondary">
+        <Key className="size-4.5" />
+      </div>
+
+      <div className="flex flex-col items-center justify-center gap-1 text-center">
+        <p className="text-sm font-semibold">{apiKeyLocalization.noApiKeys}</p>
+
+        <p className="text-muted text-xs">
+          {apiKeyLocalization.apiKeysDescription}
+        </p>
+      </div>
+
+      <Button size="sm" onPress={onCreatePress}>
+        {apiKeyLocalization.createApiKey}
+      </Button>
+    </div>
+  )
+}

package/src/components/auth/api-key/api-keys.tsx

@@ -0,0 +1,71 @@
+import {
+  type ApiKeyAuthClient,
+  useAuth,
+  useAuthPlugin,
+  useListApiKeys
+} from "@better-auth-ui/react"
+import { Button, Card, type CardProps, cn } from "@heroui/react"
+import { useState } from "react"
+
+import { apiKeyPlugin } from "../../../lib/auth/api-key-plugin"
+import { ApiKey } from "./api-key"
+import { ApiKeySkeleton } from "./api-key-skeleton"
+import { ApiKeysEmpty } from "./api-keys-empty"
+import { CreateApiKeyDialog } from "./create-api-key-dialog"
+
+export type ApiKeysProps = {
+  className?: string
+  variant?: CardProps["variant"]
+}
+
+export function ApiKeys({ className, variant }: ApiKeysProps) {
+  const { authClient } = useAuth()
+  const { localization: apiKeyLocalization } = useAuthPlugin(apiKeyPlugin)
+
+  const { data: listData, isPending } = useListApiKeys(
+    authClient as ApiKeyAuthClient
+  )
+
+  const [createOpen, setCreateOpen] = useState(false)
+
+  return (
+    <div className={cn("flex flex-col gap-3", className)}>
+      <div className="flex items-end justify-between gap-3">
+        <h2 className="text-sm font-semibold truncate">
+          {apiKeyLocalization.apiKeys}
+        </h2>
+
+        <Button
+          className="shrink-0"
+          size="sm"
+          isDisabled={isPending}
+          onPress={() => setCreateOpen(true)}
+        >
+          {apiKeyLocalization.createApiKey}
+        </Button>
+      </div>
+
+      <Card variant={variant}>
+        <Card.Content>
+          {isPending ? (
+            <ApiKeySkeleton />
+          ) : !listData?.apiKeys.length ? (
+            <ApiKeysEmpty onCreatePress={() => setCreateOpen(true)} />
+          ) : (
+            listData?.apiKeys.map((key, index) => (
+              <div key={key.id}>
+                {index > 0 && (
+                  <div className="border-b border-dashed -mx-4 my-4" />
+                )}
+
+                <ApiKey apiKey={key} />
+              </div>
+            ))
+          )}
+        </Card.Content>
+      </Card>
+
+      <CreateApiKeyDialog isOpen={createOpen} onOpenChange={setCreateOpen} />
+    </div>
+  )
+}