docs: upgrade to tailwind v4, react 19, fuma docs 15 (#1735)

2025-12-06 12:27:44 +00:00 · 2025-03-08 19:33:31 +03:00
parent 3ae3c830a0
commit b5f638ca45
93 changed files with 14887 additions and 20735 deletions
--- a/demo/nextjs/app/globals.css
+++ b/demo/nextjs/app/globals.css
@@ -2,8 +2,6 @@
@tailwind components;
@tailwind utilities;

-
-
@layer base {
 	:root {
 		--background: 0 0% 100%;
@@ -70,7 +68,6 @@
 	}
 }

-
 .no-visible-scrollbar {
 	scrollbar-width: none;
 	-ms-overflow-style: none;
--- a/docs/.gitignore
+++ b/docs/.gitignore
@@ -2,9 +2,9 @@
 /node_modules

 # generated content
-.map.ts
 .contentlayer
 .content-collections
+.source

 # test & build
 /coverage
@@ -26,6 +26,3 @@ yarn-error.log*
 .env*.local
 .vercel
 next-env.d.ts
-certificates
-
-.source
--- a/docs/app/api/search/route.ts
+++ b/docs/app/api/search/route.ts
@@ -1,11 +1,4 @@
-import { source } from "@/app/source";
-import { createSearchAPI } from "fumadocs-core/search/server";
+import { source } from "@/lib/source";
+import { createFromSource } from "fumadocs-core/search/server";

-export const { GET } = createSearchAPI("advanced", {
-	indexes: source.getPages().map((page) => ({
-		title: page.data.title,
-		structuredData: page.data.structuredData,
-		id: page.url,
-		url: page.url,
-	})),
-});
+export const { GET } = createFromSource(source);
--- a/docs/app/changelogs/[[...slug]]/page.tsx
+++ b/docs/app/changelogs/[[...slug]]/page.tsx
@@ -1,4 +1,4 @@
-import { changelogs } from "@/app/source";
+import { changelogs } from "@/lib/source";
 import { notFound } from "next/navigation";
 import { absoluteUrl, formatDate } from "@/lib/utils";
 import DatabaseTable from "@/components/mdx/database-tables";
--- a/docs/app/docs/[[...slug]]/page.tsx
+++ b/docs/app/docs/[[...slug]]/page.tsx
@@ -1,4 +1,4 @@
-import { source } from "@/app/source";
+import { source } from "@/lib/source";
 import { DocsPage, DocsBody, DocsTitle } from "fumadocs-ui/page";
 import { notFound } from "next/navigation";
 import { absoluteUrl } from "@/lib/utils";
--- a/docs/app/docs/layout.tsx
+++ b/docs/app/docs/layout.tsx
@@ -3,14 +3,18 @@ import type { ReactNode } from "react";
 import { docsOptions } from "../layout.config";
 import ArticleLayout from "@/components/side-bar";
 import { DocsNavBarMobile } from "@/components/nav-mobile";
-
+import { cn } from "@/lib/utils";
 export default function Layout({ children }: { children: ReactNode }) {
 	return (
 		<DocsLayout
 			{...docsOptions}
 			sidebar={{
 				component: (
-					<div className="mr-[--fd-sidebar-width]">
+					<div
+						className={cn(
+							"[--fd-tocnav-height:36px] md:mr-[268px] lg:mr-[286px] xl:[--fd-toc-width:286px] xl:[--fd-tocnav-height:0px]",
+						)}
+					>
 						<ArticleLayout />
 					</div>
 				),
--- a/docs/app/global.css
+++ b/docs/app/global.css
@@ -1,74 +1,242 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-html {
-  scroll-behavior: smooth;
-}
-
-.hljs {
-  background: none !important;
-}
-
-@layer base {
+@import "tailwindcss";
+@config "../tailwind.config.js";
+@plugin 'tailwindcss-animate';
+@custom-variant dark (&:is(.dark *));
+@import "fumadocs-ui/css/neutral.css";
+@import "fumadocs-ui/css/preset.css";
+@source '../../node_modules/fumadocs-ui/dist/**/*.js';
+@source '../node_modules/fumadocs-ui/dist/**/*.js';
 :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 4.9% 83.9%;
-    --radius: 0.5rem;
-    --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%;
+	--background: oklch(1 0 0);
+
+	--foreground: oklch(0.147 0.004 49.25);
+
+	--card: oklch(1 0 0);
+
+	--card-foreground: oklch(0.147 0.004 49.25);
+
+	--popover: oklch(1 0 0);
+
+	--popover-foreground: oklch(0.147 0.004 49.25);
+
+	--primary: oklch(0.216 0.006 56.043);
+
+	--primary-foreground: oklch(0.985 0.001 106.423);
+
+	--secondary: oklch(0.97 0.001 106.424);
+
+	--secondary-foreground: oklch(0.216 0.006 56.043);
+
+	--muted: oklch(0.97 0.001 106.424);
+
+	--muted-foreground: oklch(0.553 0.013 58.071);
+
+	--accent: oklch(0.97 0.001 106.424);
+
+	--accent-foreground: oklch(0.216 0.006 56.043);
+
+	--destructive: oklch(0.577 0.245 27.325);
+
+	--destructive-foreground: oklch(0.577 0.245 27.325);
+
+	--border: oklch(0.923 0.003 48.717);
+
+	--input: oklch(0.923 0.003 48.717);
+
+	--ring: oklch(0.709 0.01 56.259);
+
+	--chart-1: oklch(0.646 0.222 41.116);
+
+	--chart-2: oklch(0.6 0.118 184.704);
+
+	--chart-3: oklch(0.398 0.07 227.392);
+
+	--chart-4: oklch(0.828 0.189 84.429);
+
+	--chart-5: oklch(0.769 0.188 70.08);
+
+	--radius: 0.625rem;
+
+	--sidebar: oklch(0.985 0.001 106.423);
+
+	--sidebar-foreground: oklch(0.147 0.004 49.25);
+
+	--sidebar-primary: oklch(0.216 0.006 56.043);
+
+	--sidebar-primary-foreground: oklch(0.985 0.001 106.423);
+
+	--sidebar-accent: oklch(0.97 0.001 106.424);
+
+	--sidebar-accent-foreground: oklch(0.216 0.006 56.043);
+
+	--sidebar-border: oklch(0.923 0.003 48.717);
+
+	--sidebar-ring: oklch(0.709 0.01 56.259);
 }
+
 .dark {
-    --background: 0 0% 2%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 0%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.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%;
+	--background: oklch(0.147 0.004 49.25);
+
+	--foreground: oklch(0.985 0.001 106.423);
+
+	--card: oklch(0.147 0.004 49.25);
+
+	--card-foreground: oklch(0.985 0.001 106.423);
+
+	--popover: oklch(0.147 0.004 49.25);
+
+	--popover-foreground: oklch(0.985 0.001 106.423);
+
+	--primary: oklch(0.985 0.001 106.423);
+
+	--primary-foreground: oklch(0.216 0.006 56.043);
+
+	--secondary: oklch(0.268 0.007 34.298);
+
+	--secondary-foreground: oklch(0.985 0.001 106.423);
+
+	--muted: oklch(0.268 0.007 34.298);
+
+	--muted-foreground: oklch(0.709 0.01 56.259);
+
+	--accent: oklch(0.268 0.007 34.298);
+
+	--accent-foreground: oklch(0.985 0.001 106.423);
+
+	--destructive: oklch(0.396 0.141 25.723);
+
+	--destructive-foreground: oklch(0.637 0.237 25.331);
+
+	--border: oklch(0.268 0.007 34.298);
+
+	--input: oklch(0.268 0.007 34.298);
+
+	--ring: oklch(0.553 0.013 58.071);
+
+	--chart-1: oklch(0.488 0.243 264.376);
+
+	--chart-2: oklch(0.696 0.17 162.48);
+
+	--chart-3: oklch(0.769 0.188 70.08);
+
+	--chart-4: oklch(0.627 0.265 303.9);
+
+	--chart-5: oklch(0.645 0.246 16.439);
+
+	--sidebar: oklch(0.216 0.006 56.043);
+
+	--sidebar-foreground: oklch(0.985 0.001 106.423);
+
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+
+	--sidebar-primary-foreground: oklch(0.985 0.001 106.423);
+
+	--sidebar-accent: oklch(0.268 0.007 34.298);
+
+	--sidebar-accent-foreground: oklch(0.985 0.001 106.423);
+
+	--sidebar-border: oklch(0.268 0.007 34.298);
+
+	--sidebar-ring: oklch(0.553 0.013 58.071);
+}
+
+@theme inline {
+	--color-background: var(--background);
+
+	--color-foreground: var(--foreground);
+
+	--color-card: var(--card);
+
+	--color-card-foreground: var(--card-foreground);
+
+	--color-popover: var(--popover);
+
+	--color-popover-foreground: var(--popover-foreground);
+
+	--color-primary: var(--primary);
+
+	--color-primary-foreground: var(--primary-foreground);
+
+	--color-secondary: var(--secondary);
+
+	--color-secondary-foreground: var(--secondary-foreground);
+
+	--color-muted: var(--muted);
+
+	--color-muted-foreground: var(--muted-foreground);
+
+	--color-accent: var(--accent);
+
+	--color-accent-foreground: var(--accent-foreground);
+
+	--color-destructive: var(--destructive);
+
+	--color-destructive-foreground: var(--destructive-foreground);
+
+	--color-border: var(--border);
+
+	--color-input: var(--input);
+
+	--color-ring: var(--ring);
+
+	--color-chart-1: var(--chart-1);
+
+	--color-chart-2: var(--chart-2);
+
+	--color-chart-3: var(--chart-3);
+
+	--color-chart-4: var(--chart-4);
+
+	--color-chart-5: var(--chart-5);
+
+	--radius-sm: calc(var(--radius) - 4px);
+
+	--radius-md: calc(var(--radius) - 2px);
+
+	--radius-lg: var(--radius);
+
+	--radius-xl: calc(var(--radius) + 4px);
+
+	--color-sidebar: var(--sidebar);
+
+	--color-sidebar-foreground: var(--sidebar-foreground);
+
+	--color-sidebar-primary: var(--sidebar-primary);
+
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+
+	--color-sidebar-accent: var(--sidebar-accent);
+
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+
+	--color-sidebar-border: var(--sidebar-border);
+
+	--color-sidebar-ring: var(--sidebar-ring);
+	--animate-accordion-down: accordion-down 0.2s ease-out;
+	--animate-accordion-up: accordion-up 0.2s ease-out;
+
+	@keyframes accordion-down {
+		from {
+			height: 0;
+		}
+		to {
+			height: var(--radix-accordion-content-height);
+		}
+	}
+
+	@keyframes accordion-up {
+		from {
+			height: var(--radix-accordion-content-height);
+		}
+		to {
+			height: 0;
+		}
 	}
 }

@layer base {
 	* {
-    @apply border-border;
+		@apply border-border outline-ring/50;
 	}
 	body {
 		@apply bg-background text-foreground;
--- a/docs/app/layout.config.tsx
+++ b/docs/app/layout.config.tsx
@@ -1,8 +1,8 @@
-import { source, changelogs } from "@/app/source";
 import {
 	DocsNavbarMobileBtn,
 	DocsNavbarMobileTitle,
 } from "@/components/nav-mobile";
+import { changelogs, source } from "@/lib/source";
 import { BaseLayoutProps } from "fumadocs-ui/layouts/shared";

 export const baseOptions: BaseLayoutProps = {
--- a/docs/app/layout.tsx
+++ b/docs/app/layout.tsx
@@ -6,8 +6,8 @@ import { NavbarProvider } from "@/components/nav-mobile";
 import { GeistMono } from "geist/font/mono";
 import { GeistSans } from "geist/font/sans";
 import { baseUrl, createMetadata } from "@/lib/metadata";
-import Loglib from "@loglib/tracker/react";
 import { Analytics } from "@vercel/analytics/react";
+import { ThemeProvider } from "@/components/theme-provider";

 export const metadata = createMetadata({
 	title: {
@@ -23,9 +23,26 @@ export default function Layout({ children }: { children: ReactNode }) {
 		<html lang="en" suppressHydrationWarning>
 			<head>
 				<link rel="icon" href="/favicon/favicon.ico" sizes="any" />
+				<script
+					dangerouslySetInnerHTML={{
+						__html: `
+                    try {
+                      if (localStorage.theme === 'dark' || ((!('theme' in localStorage) || localStorage.theme === 'system') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+                        document.querySelector('meta[name="theme-color"]').setAttribute('content')
+                      }
+                    } catch (_) {}
+                  `,
+					}}
+				/>
 			</head>
 			<body
-				className={`${GeistSans.variable} ${GeistMono.variable} font-sans relative`}
+				className={`${GeistSans.variable} ${GeistMono.variable} bg-background font-sans relative `}
+			>
+				<ThemeProvider
+					attribute="class"
+					defaultTheme="dark"
+					enableSystem
+					disableTransitionOnChange
 				>
 					<RootProvider
 						theme={{
@@ -38,13 +55,8 @@ export default function Layout({ children }: { children: ReactNode }) {
 							{children}
 						</NavbarProvider>
 					</RootProvider>
-				<Loglib
-					config={{
-						id: "better-auth",
-						consent: "granted",
-					}}
-				/>
 					<Analytics />
+				</ThemeProvider>
 			</body>
 		</html>
 	);
--- a/docs/app/page.tsx
+++ b/docs/app/page.tsx
@@ -28,7 +28,7 @@ export default async function HomePage() {
 	return (
 		<main className="h-min mx-auto overflow-x-hidden">
 			<Section
-				className="-z-1 mb-1 overflow-y-clip"
+				className="-z-1 dark:bg-black/[0.95] mb-1 overflow-y-clip"
 				crosses
 				crossesOffset="lg:translate-y-[5.25rem]"
 				customPaddings
--- a/docs/app/robots.ts
+++ b/docs/app/robots.ts
@@ -1,10 +0,0 @@
-import { MetadataRoute } from "next";
-
-export default function robots(): MetadataRoute.Robots {
-	return {
-		rules: {
-			userAgent: "*",
-			allow: "/",
-		},
-	};
-}
--- a/docs/app/sitemap.ts
+++ b/docs/app/sitemap.ts
@@ -1,15 +0,0 @@
-import type { MetadataRoute } from "next";
-import { ENV } from "@/lib/constants";
-import { source } from "./source";
-
-export default function sitemap(): MetadataRoute.Sitemap {
-	const WEBSITE_URL = ENV.NEXT_PUBLIC_WEBSITE_URL;
-	const pages = source.getPages().map((page) => ({
-		slug: page.slugs,
-	}));
-	const docs = pages.map((plugin) => ({
-		url: `${WEBSITE_URL}/docs/${plugin.slug.join("/")}`,
-		lastModified: new Date().toISOString().split("T")[0],
-	}));
-	return [...docs];
-}
--- a/docs/components.json
+++ b/docs/components.json
@@ -4,7 +4,7 @@
 	"rsc": true,
 	"tsx": true,
 	"tailwind": {
-		"config": "tailwind.config.js",
+		"config": "",
 		"css": "app/global.css",
 		"baseColor": "stone",
 		"cssVariables": true,
@@ -16,5 +16,6 @@
 		"ui": "@/components/ui",
 		"lib": "@/lib",
 		"hooks": "@/hooks"
-	}
+	},
+	"iconLibrary": "lucide"
 }
--- a/docs/components/features.tsx
+++ b/docs/components/features.tsx
@@ -71,7 +71,7 @@ const features = [

 export default function Features({ stars }: { stars: string | null }) {
 	return (
-		<div className="md:w-10/12 mt-10 mx-auto font-geist relative md:border-l-0 md:border-b-0 md:border-[1.2px] rounded-none -pr-2">
+		<div className="md:w-10/12 mt-10 mx-auto font-geist relative md:border-l-0 md:border-b-0 md:border-[1.2px] rounded-none -pr-2 dark:bg-black/[0.95]">
 			<div className="w-full md:mx-0">
 				<div className="grid grid-cols-1 relative md:grid-rows-2 md:grid-cols-3 border-b-[1.2px]">
 					<div className="hidden md:grid top-1/2 left-0 -translate-y-1/2 w-full grid-cols-3 z-10 pointer-events-none select-none absolute">
--- a/docs/components/landing/hero.tsx
+++ b/docs/components/landing/hero.tsx
@@ -49,7 +49,7 @@ function TrafficLightsIcon(props: React.ComponentPropsWithoutRef<"svg">) {

 export default function Hero() {
 	return (
-		<section className="max-h-[40rem] w-full flex md:items-center md:justify-center dark:bg-black/[0.96] antialiased bg-grid-white/[0.02] relative overflow-hidden px-8 md:min-h-[40rem]">
+		<section className="max-h-[40rem] relative z-[999] w-full flex md:items-center md:justify-center dark:bg-black/[0.96] antialiased bg-grid-white/[0.02] relative overflow-hidden px-8 md:min-h-[40rem]">
 			<Spotlight />
 			<div className="overflow-hidden bg-transparent md:px-10 dark:-mb-32 dark:mt-[-4.75rem] dark:pb-32 dark:pt-[4.75rem]">
 				<div className="lg:max-w-8xl mx-auto grid max-w-full grid-cols-1 items-center gap-x-8 gap-y-16 px-4 py-2 lg:grid-cols-2 lg:px-8 lg:py-4 xl:gap-x-16 xl:px-12">
--- a/docs/components/landing/section.tsx
+++ b/docs/components/landing/section.tsx
@@ -31,11 +31,6 @@ const Section = ({

 			{crosses && (
 				<>
-					<div
-						className={`hidden absolute top-0 left-7.5 right-7.5 h-0.25 bg-[#26242C] ${
-							crossesOffset && crossesOffset
-						} pointer-events-none lg:block xl:left-16 right-16`}
-					/>
 					<SectionSvg crossesOffset={crossesOffset} />
 				</>
 			)}
--- a/docs/components/nav-bar.tsx
+++ b/docs/components/nav-bar.tsx
@@ -6,11 +6,11 @@ import { Logo } from "./logo";

 export const Navbar = () => {
 	return (
-		<div className="flex flex-col sticky top-0 bg-background backdrop-blur-md z-30">
+		<div className="flex flex-col sticky top-0 bg-background backdrop-blur-md z-30 dark:bg-black/[0.95]">
 			<nav className="md:grid grid-cols-12 md:border-b top-0 flex items-center justify-between ">
 				<Link
 					href="/"
-					className="md:border-r md:px-5 px-2.5 py-4 text-foreground md:col-span-2 shrink-0 transition-colors md:w-[--fd-sidebar-width]"
+					className="md:border-r md:px-5 px-2.5 py-4 text-foreground md:col-span-2 shrink-0 transition-colors md:w-[268px] lg:w-[286px]"
 				>
 					<div className="flex flex-col gap-2 w-full">
 						<div className="flex items-center gap-2">
--- a/docs/components/side-bar.tsx
+++ b/docs/components/side-bar.tsx
@@ -1,7 +1,6 @@
 "use client";

 import { AnimatePresence, motion, MotionConfig } from "framer-motion";
-
 import { AsideLink } from "@/components/ui/aside-link";
 import { Suspense, useEffect, useState } from "react";
 import { useSearchContext } from "fumadocs-ui/provider";
@@ -15,7 +14,6 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "./ui/select";
-import { loglib } from "@loglib/tracker";
 import { cn } from "@/lib/utils";
 import { Badge } from "./ui/badge";

@@ -44,8 +42,13 @@ export default function ArticleLayout() {
 	const cts = group === "docs" ? contents : examples;

 	return (
-		<div className="fixed top-0">
-			<aside className="border-r border-lines md:flex hidden w-[--fd-sidebar-width] overflow-y-auto absolute top-[58px] h-[92dvh] flex-col justify-between">
+		<div className={cn("fixed top-0")}>
+			<aside
+				className={cn(
+					"md:transition-all",
+					"border-r border-lines md:flex hidden  md:w-[268px] lg:w-[286px] overflow-y-auto absolute top-[58px] h-[92dvh] flex-col justify-between w-[var(--fd-sidebar-width)]",
+				)}
+			>
 				<div>
 					<Select
 						defaultValue="docs"
@@ -64,7 +67,10 @@ export default function ArticleLayout() {
 							<SelectValue />
 						</SelectTrigger>
 						<SelectContent>
-							<SelectItem value="docs" className="h-12">
+							<SelectItem
+								value="docs"
+								className="h-12 flex flex-col items-start gap-1"
+							>
 								<div className="flex items-center gap-1">
 									<svg
 										xmlns="http://www.w3.org/2000/svg"
@@ -88,7 +94,10 @@ export default function ArticleLayout() {
 									get started, concepts, and plugins
 								</p>
 							</SelectItem>
-							<SelectItem value="examples">
+							<SelectItem
+								value="examples"
+								className="h-12 flex flex-col items-start gap-1"
+							>
 								<div className="flex items-center gap-1">
 									<svg
 										xmlns="http://www.w3.org/2000/svg"
@@ -125,7 +134,6 @@ 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="w-4 h-4" />
--- a/docs/components/theme-provider.tsx
+++ b/docs/components/theme-provider.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+export function ThemeProvider({
+	children,
+	...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+	return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
--- a/docs/components/ui/accordion.tsx
+++ b/docs/components/ui/accordion.tsx
@@ -2,56 +2,65 @@

 import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { ChevronDownIcon } from "@radix-ui/react-icons";
+import { ChevronDownIcon } from "lucide-react";

 import { cn } from "@/lib/utils";

-const Accordion = AccordionPrimitive.Root;
+function Accordion({
+	...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+	return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}

-const AccordionItem = React.forwardRef<
-	React.ElementRef<typeof AccordionPrimitive.Item>,
-	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
+function AccordionItem({
+	className,
+	...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+	return (
 		<AccordionPrimitive.Item
-		ref={ref}
-		className={cn("border-b", className)}
+			data-slot="accordion-item"
+			className={cn("border-b last:border-b-0", className)}
 			{...props}
 		/>
-));
-AccordionItem.displayName = "AccordionItem";
+	);
+}

-const AccordionTrigger = React.forwardRef<
-	React.ElementRef<typeof AccordionPrimitive.Trigger>,
-	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
+function AccordionTrigger({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+	return (
 		<AccordionPrimitive.Header className="flex">
 			<AccordionPrimitive.Trigger
-			ref={ref}
+				data-slot="accordion-trigger"
 				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",
+					"focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
 					className,
 				)}
 				{...props}
 			>
 				{children}
-			<ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+				<ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 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) => (
+function AccordionContent({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+	return (
 		<AccordionPrimitive.Content
-		ref={ref}
-		className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+			data-slot="accordion-content"
+			className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
 			{...props}
 		>
-		<div className={cn("pb-4 pt-0", className)}>{children}</div>
+			<div className={cn("pt-0 pb-4", className)}>{children}</div>
 		</AccordionPrimitive.Content>
-));
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+	);
+}

 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
--- a/docs/components/ui/alert-dialog.tsx
+++ b/docs/components/ui/alert-dialog.tsx
@@ -6,125 +6,141 @@ import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import { cn } from "@/lib/utils";
 import { buttonVariants } from "@/components/ui/button";

-const AlertDialog = AlertDialogPrimitive.Root;
+function AlertDialog({
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+	return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}

-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+function AlertDialogTrigger({
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+	return (
+		<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+	);
+}

-const AlertDialogPortal = AlertDialogPrimitive.Portal;
+function AlertDialogPortal({
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+	return (
+		<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+	);
+}

-const AlertDialogOverlay = React.forwardRef<
-	React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
+function AlertDialogOverlay({
+	className,
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+	return (
 		<AlertDialogPrimitive.Overlay
+			data-slot="alert-dialog-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",
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
 				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) => (
+function AlertDialogContent({
+	className,
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+	return (
 		<AlertDialogPortal>
 			<AlertDialogOverlay />
 			<AlertDialogPrimitive.Content
-			ref={ref}
+				data-slot="alert-dialog-content"
 				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",
+					"bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
 					className,
 				)}
 				{...props}
 			/>
 		</AlertDialogPortal>
-));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+	);
+}

-const AlertDialogHeader = ({
+function AlertDialogHeader({
 	className,
 	...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+}: React.ComponentProps<"div">) {
+	return (
 		<div
+			data-slot="alert-dialog-header"
+			className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDialogFooter({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-dialog-footer"
 			className={cn(
-			"flex flex-col space-y-2 text-center sm:text-left",
+				"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
 				className,
 			)}
 			{...props}
 		/>
 	);
-AlertDialogHeader.displayName = "AlertDialogHeader";
+}

-const AlertDialogFooter = ({
+function AlertDialogTitle({
 	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) => (
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+	return (
 		<AlertDialogPrimitive.Title
-		ref={ref}
+			data-slot="alert-dialog-title"
 			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) => (
+function AlertDialogDescription({
+	className,
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+	return (
 		<AlertDialogPrimitive.Description
-		ref={ref}
-		className={cn("text-sm text-muted-foreground", className)}
+			data-slot="alert-dialog-description"
+			className={cn("text-muted-foreground text-sm", className)}
 			{...props}
 		/>
-));
-AlertDialogDescription.displayName =
-	AlertDialogPrimitive.Description.displayName;
+	);
+}

-const AlertDialogAction = React.forwardRef<
-	React.ElementRef<typeof AlertDialogPrimitive.Action>,
-	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
+function AlertDialogAction({
+	className,
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+	return (
 		<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",
+function AlertDialogCancel({
 	className,
-		)}
+	...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+	return (
+		<AlertDialogPrimitive.Cancel
+			className={cn(buttonVariants({ variant: "outline" }), className)}
 			{...props}
 		/>
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+	);
+}

 export {
 	AlertDialog,
--- a/docs/components/ui/alert.tsx
+++ b/docs/components/ui/alert.tsx
@@ -4,13 +4,13 @@ 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",
+	"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
 	{
 		variants: {
 			variant: {
 				default: "bg-background text-foreground",
 				destructive:
-					"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+					"text-destructive-foreground [&>svg]:text-current *:data-[slot=alert-description]:text-destructive-foreground/80",
 			},
 		},
 		defaultVariants: {
@@ -19,41 +19,48 @@ const alertVariants = cva(
 	},
 );

-const Alert = React.forwardRef<
-	HTMLDivElement,
-	React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
+function Alert({
+	className,
+	variant,
+	...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+	return (
 		<div
-		ref={ref}
+			data-slot="alert"
 			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) => (
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+	return (
 		<div
-		ref={ref}
-		className={cn("text-sm [&_p]:leading-relaxed", className)}
+			data-slot="alert-title"
+			className={cn(
+				"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+				className,
+			)}
 			{...props}
 		/>
-));
-AlertDescription.displayName = "AlertDescription";
+	);
+}
+
+function AlertDescription({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-description"
+			className={cn(
+				"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}

 export { Alert, AlertTitle, AlertDescription };
--- a/docs/components/ui/aspect-ratio.tsx
+++ b/docs/components/ui/aspect-ratio.tsx
@@ -2,6 +2,10 @@

 import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";

-const AspectRatio = AspectRatioPrimitive.Root;
+function AspectRatio({
+	...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+	return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
+}

 export { AspectRatio };
--- a/docs/components/ui/avatar.tsx
+++ b/docs/components/ui/avatar.tsx
@@ -5,46 +5,49 @@ 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) => (
+function Avatar({
+	className,
+	...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+	return (
 		<AvatarPrimitive.Root
-		ref={ref}
+			data-slot="avatar"
 			className={cn(
-			"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+				"relative flex size-8 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) => (
+function AvatarImage({
+	className,
+	...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+	return (
 		<AvatarPrimitive.Image
-		ref={ref}
-		className={cn("aspect-square h-full w-full", className)}
+			data-slot="avatar-image"
+			className={cn("aspect-square size-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) => (
+function AvatarFallback({
+	className,
+	...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+	return (
 		<AvatarPrimitive.Fallback
-		ref={ref}
+			data-slot="avatar-fallback"
 			className={cn(
-			"flex h-full w-full items-center justify-center rounded-full bg-muted",
+				"bg-muted flex size-full items-center justify-center rounded-full",
 				className,
 			)}
 			{...props}
 		/>
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+	);
+}

 export { Avatar, AvatarImage, AvatarFallback };
--- a/docs/components/ui/badge.tsx
+++ b/docs/components/ui/badge.tsx
@@ -1,20 +1,22 @@
 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 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",
+	"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
 	{
 		variants: {
 			variant: {
 				default:
-					"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+					"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
 				secondary:
-					"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+					"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
 				destructive:
-					"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-				outline: "text-foreground",
+					"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+				outline:
+					"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
 			},
 		},
 		defaultVariants: {
@@ -23,13 +25,21 @@ const badgeVariants = cva(
 	},
 );

-export interface BadgeProps
-	extends React.HTMLAttributes<HTMLDivElement>,
-		VariantProps<typeof badgeVariants> {}
+function Badge({
+	className,
+	variant,
+	asChild = false,
+	...props
+}: React.ComponentProps<"span"> &
+	VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot : "span";

-function Badge({ className, variant, ...props }: BadgeProps) {
 	return (
-		<div className={cn(badgeVariants({ variant }), className)} {...props} />
+		<Comp
+			data-slot="badge"
+			className={cn(badgeVariants({ variant }), className)}
+			{...props}
+		/>
 	);
 }

--- a/docs/components/ui/breadcrumb.tsx
+++ b/docs/components/ui/breadcrumb.tsx
@@ -1,108 +1,102 @@
 import * as React from "react";
-import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons";
 import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";

 import { cn } from "@/lib/utils";

-const Breadcrumb = React.forwardRef<
-	HTMLElement,
-	React.ComponentPropsWithoutRef<"nav"> & {
-		separator?: React.ReactNode;
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+	return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
 }
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
-Breadcrumb.displayName = "Breadcrumb";

-const BreadcrumbList = React.forwardRef<
-	HTMLOListElement,
-	React.ComponentPropsWithoutRef<"ol">
->(({ className, ...props }, ref) => (
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+	return (
 		<ol
-		ref={ref}
+			data-slot="breadcrumb-list"
 			className={cn(
-			"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+				"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
 				className,
 			)}
 			{...props}
 		/>
-));
-BreadcrumbList.displayName = "BreadcrumbList";
+	);
+}

-const BreadcrumbItem = React.forwardRef<
-	HTMLLIElement,
-	React.ComponentPropsWithoutRef<"li">
->(({ className, ...props }, ref) => (
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+	return (
 		<li
-		ref={ref}
+			data-slot="breadcrumb-item"
 			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) => {
+
+function BreadcrumbLink({
+	asChild,
+	className,
+	...props
+}: React.ComponentProps<"a"> & {
+	asChild?: boolean;
+}) {
 	const Comp = asChild ? Slot : "a";

 	return (
 		<Comp
-			ref={ref}
-			className={cn("transition-colors hover:text-foreground", className)}
+			data-slot="breadcrumb-link"
+			className={cn("hover:text-foreground transition-colors", className)}
 			{...props}
 		/>
 	);
-});
-BreadcrumbLink.displayName = "BreadcrumbLink";
+}

-const BreadcrumbPage = React.forwardRef<
-	HTMLSpanElement,
-	React.ComponentPropsWithoutRef<"span">
->(({ className, ...props }, ref) => (
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+	return (
 		<span
-		ref={ref}
+			data-slot="breadcrumb-page"
 			role="link"
 			aria-disabled="true"
 			aria-current="page"
-		className={cn("font-normal text-foreground", className)}
+			className={cn("text-foreground font-normal", className)}
 			{...props}
 		/>
-));
-BreadcrumbPage.displayName = "BreadcrumbPage";
+	);
+}

-const BreadcrumbSeparator = ({
+function BreadcrumbSeparator({
 	children,
 	className,
 	...props
-}: React.ComponentProps<"li">) => (
+}: React.ComponentProps<"li">) {
+	return (
 		<li
+			data-slot="breadcrumb-separator"
 			role="presentation"
 			aria-hidden="true"
 			className={cn("[&>svg]:size-3.5", className)}
 			{...props}
 		>
-		{children ?? <ChevronRightIcon />}
+			{children ?? <ChevronRight />}
 		</li>
 	);
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+}

-const BreadcrumbEllipsis = ({
+function BreadcrumbEllipsis({
 	className,
 	...props
-}: React.ComponentProps<"span">) => (
+}: React.ComponentProps<"span">) {
+	return (
 		<span
+			data-slot="breadcrumb-ellipsis"
 			role="presentation"
 			aria-hidden="true"
-		className={cn("flex h-9 w-9 items-center justify-center", className)}
+			className={cn("flex size-9 items-center justify-center", className)}
 			{...props}
 		>
-		<DotsHorizontalIcon className="h-4 w-4" />
+			<MoreHorizontal className="size-4" />
 			<span className="sr-only">More</span>
 		</span>
 	);
-BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+}

 export {
 	Breadcrumb,
--- a/docs/components/ui/button.tsx
+++ b/docs/components/ui/button.tsx
@@ -5,26 +5,26 @@ 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-none 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",
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 	{
 		variants: {
 			variant: {
 				default:
-					"bg-primary text-primary-foreground shadow hover:bg-primary/90",
+					"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
 				destructive:
-					"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+					"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
 				outline:
-					"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+					"border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
 				secondary:
-					"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+					"bg-secondary text-secondary-foreground shadow-xs 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",
+				default: "h-9 px-4 py-2 has-[>svg]:px-3",
+				sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+				icon: "size-9",
 			},
 		},
 		defaultVariants: {
@@ -34,24 +34,25 @@ const buttonVariants = cva(
 	},
 );

-export interface ButtonProps
-	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-		VariantProps<typeof buttonVariants> {
+function Button({
+	className,
+	variant,
+	size,
+	asChild = false,
+	...props
+}: React.ComponentProps<"button"> &
+	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
+			data-slot="button"
 			className={cn(buttonVariants({ variant, size, className }))}
-				ref={ref}
 			{...props}
 		/>
 	);
-	},
-);
-Button.displayName = "Button";
+}

 export { Button, buttonVariants };
--- a/docs/components/ui/calendar.tsx
+++ b/docs/components/ui/calendar.tsx
@@ -1,58 +1,58 @@
 "use client";

 import * as React from "react";
-import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 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) {
+}: React.ComponentProps<typeof DayPicker>) {
 	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",
+				months: "flex flex-col sm:flex-row gap-2",
+				month: "flex flex-col gap-4",
+				caption: "flex justify-center pt-1 relative items-center w-full",
 				caption_label: "text-sm font-medium",
-				nav: "space-x-1 flex items-center",
+				nav: "flex items-center gap-1",
 				nav_button: cn(
 					buttonVariants({ variant: "outline" }),
-					"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+					"size-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",
+				table: "w-full border-collapse space-x-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",
+					"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&: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",
+					"size-8 p-0 font-normal aria-selected:opacity-100",
 				),
-				day_range_start: "day-range-start",
-				day_range_end: "day-range-end",
+				day_range_start:
+					"day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
+				day_range_end:
+					"day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
 				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-outside text-muted-foreground aria-selected:text-muted-foreground",
 				day_disabled: "text-muted-foreground opacity-50",
 				day_range_middle:
 					"aria-selected:bg-accent aria-selected:text-accent-foreground",
@@ -60,13 +60,16 @@ function Calendar({
 				...classNames,
 			}}
 			components={{
-				IconLeft: ({ ...props }) => <ChevronLeftIcon className="h-4 w-4" />,
-				IconRight: ({ ...props }) => <ChevronRightIcon className="h-4 w-4" />,
+				IconLeft: ({ className, ...props }) => (
+					<ChevronLeft className={cn("size-4", className)} {...props} />
+				),
+				IconRight: ({ className, ...props }) => (
+					<ChevronRight className={cn("size-4", className)} {...props} />
+				),
 			}}
 			{...props}
 		/>
 	);
 }
-Calendar.displayName = "Calendar";

 export { Calendar };
--- a/docs/components/ui/card.tsx
+++ b/docs/components/ui/card.tsx
@@ -2,76 +2,68 @@ import * as React from "react";

 import { cn } from "@/lib/utils";

-const Card = React.forwardRef<
-	HTMLDivElement,
-	React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+	return (
 		<div
-		ref={ref}
+			data-slot="card"
 			className={cn(
-			"rounded-xl border bg-card text-card-foreground shadow",
+				"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
 				className,
 			)}
 			{...props}
 		/>
-));
-Card.displayName = "Card";
+	);
+}

-const CardHeader = React.forwardRef<
-	HTMLDivElement,
-	React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
 		<div
-		ref={ref}
-		className={cn("flex flex-col space-y-1.5 p-6", className)}
+			data-slot="card-header"
+			className={cn("flex flex-col gap-1.5 px-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) => (
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+	return (
 		<div
-		ref={ref}
-		className={cn("flex items-center p-6 pt-0", className)}
+			data-slot="card-title"
+			className={cn("leading-none font-semibold", className)}
 			{...props}
 		/>
-));
-CardFooter.displayName = "CardFooter";
+	);
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-content"
+			className={cn("px-6", className)}
+			{...props}
+		/>
+	);
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-footer"
+			className={cn("flex items-center px-6", className)}
+			{...props}
+		/>
+	);
+}

 export {
 	Card,
--- a/docs/components/ui/carousel.tsx
+++ b/docs/components/ui/carousel.tsx
@@ -1,10 +1,10 @@
 "use client";

 import * as React from "react";
-import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
 import useEmblaCarousel, {
 	type UseEmblaCarouselType,
 } from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";

 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
@@ -42,12 +42,7 @@ function useCarousel() {
 	return context;
 }

-const Carousel = React.forwardRef<
-	HTMLDivElement,
-	React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(
-	(
-		{
+function Carousel({
 	orientation = "horizontal",
 	opts,
 	setApi,
@@ -55,9 +50,7 @@ const Carousel = React.forwardRef<
 	className,
 	children,
 	...props
-		},
-		ref,
-	) => {
+}: React.ComponentProps<"div"> & CarouselProps) {
 	const [carouselRef, api] = useEmblaCarousel(
 		{
 			...opts,
@@ -69,10 +62,7 @@ const Carousel = React.forwardRef<
 	const [canScrollNext, setCanScrollNext] = React.useState(false);

 	const onSelect = React.useCallback((api: CarouselApi) => {
-			if (!api) {
-				return;
-			}
-
+		if (!api) return;
 		setCanScrollPrev(api.canScrollPrev());
 		setCanScrollNext(api.canScrollNext());
 	}, []);
@@ -99,18 +89,12 @@ const Carousel = React.forwardRef<
 	);

 	React.useEffect(() => {
-			if (!api || !setApi) {
-				return;
-			}
-
+		if (!api || !setApi) return;
 		setApi(api);
 	}, [api, setApi]);

 	React.useEffect(() => {
-			if (!api) {
-				return;
-			}
-
+		if (!api) return;
 		onSelect(api);
 		api.on("reInit", onSelect);
 		api.on("select", onSelect);
@@ -135,31 +119,29 @@ const Carousel = React.forwardRef<
 			}}
 		>
 			<div
-					ref={ref}
 				onKeyDownCapture={handleKeyDown}
 				className={cn("relative", className)}
 				role="region"
 				aria-roledescription="carousel"
+				data-slot="carousel"
 				{...props}
 			>
 				{children}
 			</div>
 		</CarouselContext.Provider>
 	);
-	},
-);
-Carousel.displayName = "Carousel";
+}

-const CarouselContent = React.forwardRef<
-	HTMLDivElement,
-	React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
 	const { carouselRef, orientation } = useCarousel();

 	return (
-		<div ref={carouselRef} className="overflow-hidden">
 		<div
-				ref={ref}
+			ref={carouselRef}
+			className="overflow-hidden"
+			data-slot="carousel-content"
+		>
+			<div
 				className={cn(
 					"flex",
 					orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
@@ -169,20 +151,16 @@ const CarouselContent = React.forwardRef<
 			/>
 		</div>
 	);
-});
-CarouselContent.displayName = "CarouselContent";
+}

-const CarouselItem = React.forwardRef<
-	HTMLDivElement,
-	React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
 	const { orientation } = useCarousel();

 	return (
 		<div
-			ref={ref}
 			role="group"
 			aria-roledescription="slide"
+			data-slot="carousel-item"
 			className={cn(
 				"min-w-0 shrink-0 grow-0 basis-full",
 				orientation === "horizontal" ? "pl-4" : "pt-4",
@@ -191,24 +169,25 @@ const CarouselItem = React.forwardRef<
 			{...props}
 		/>
 	);
-});
-CarouselItem.displayName = "CarouselItem";
+}

-const CarouselPrevious = React.forwardRef<
-	HTMLButtonElement,
-	React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+function CarouselPrevious({
+	className,
+	variant = "outline",
+	size = "icon",
+	...props
+}: React.ComponentProps<typeof Button>) {
 	const { orientation, scrollPrev, canScrollPrev } = useCarousel();

 	return (
 		<Button
-			ref={ref}
+			data-slot="carousel-previous"
 			variant={variant}
 			size={size}
 			className={cn(
-				"absolute  h-8 w-8 rounded-full",
+				"absolute size-8 rounded-full",
 				orientation === "horizontal"
-					? "-left-12 top-1/2 -translate-y-1/2"
+					? "top-1/2 -left-12 -translate-y-1/2"
 					: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
 				className,
 			)}
@@ -216,28 +195,29 @@ const CarouselPrevious = React.forwardRef<
 			onClick={scrollPrev}
 			{...props}
 		>
-			<ArrowLeftIcon className="h-4 w-4" />
+			<ArrowLeft />
 			<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) => {
+function CarouselNext({
+	className,
+	variant = "outline",
+	size = "icon",
+	...props
+}: React.ComponentProps<typeof Button>) {
 	const { orientation, scrollNext, canScrollNext } = useCarousel();

 	return (
 		<Button
-			ref={ref}
+			data-slot="carousel-next"
 			variant={variant}
 			size={size}
 			className={cn(
-				"absolute h-8 w-8 rounded-full",
+				"absolute size-8 rounded-full",
 				orientation === "horizontal"
-					? "-right-12 top-1/2 -translate-y-1/2"
+					? "top-1/2 -right-12 -translate-y-1/2"
 					: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
 				className,
 			)}
@@ -245,12 +225,11 @@ const CarouselNext = React.forwardRef<
 			onClick={scrollNext}
 			{...props}
 		>
-			<ArrowRightIcon className="h-4 w-4" />
+			<ArrowRight />
 			<span className="sr-only">Next slide</span>
 		</Button>
 	);
-});
-CarouselNext.displayName = "CarouselNext";
+}

 export {
 	type CarouselApi,
--- a/docs/components/ui/chart.tsx
+++ b/docs/components/ui/chart.tsx
@@ -34,25 +34,28 @@ function useChart() {
 	return context;
 }

-const ChartContainer = React.forwardRef<
-	HTMLDivElement,
-	React.ComponentProps<"div"> & {
+function ChartContainer({
+	id,
+	className,
+	children,
+	config,
+	...props
+}: 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-slot="chart"
 				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",
+					"[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
 					className,
 				)}
 				{...props}
@@ -64,12 +67,11 @@ const ChartContainer = React.forwardRef<
 			</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,
+		([, config]) => config.theme || config.color,
 	);

 	if (!colorConfig.length) {
@@ -102,19 +104,7 @@ ${colorConfig

 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;
-		}
->(
-	(
-		{
+function ChartTooltipContent({
 	active,
 	payload,
 	className,
@@ -128,9 +118,14 @@ const ChartTooltipContent = React.forwardRef<
 	color,
 	nameKey,
 	labelKey,
-		},
-		ref,
-	) => {
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+	React.ComponentProps<"div"> & {
+		hideLabel?: boolean;
+		hideIndicator?: boolean;
+		indicator?: "line" | "dot" | "dashed";
+		nameKey?: string;
+		labelKey?: string;
+	}) {
 	const { config } = useChart();

 	const tooltipLabel = React.useMemo(() => {
@@ -139,7 +134,7 @@ const ChartTooltipContent = React.forwardRef<
 		}

 		const [item] = payload;
-			const key = `${labelKey || item.dataKey || item.name || "value"}`;
+		const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
 		const itemConfig = getPayloadConfigFromPayload(config, item, key);
 		const value =
 			!labelKey && typeof label === "string"
@@ -177,9 +172,8 @@ const ChartTooltipContent = React.forwardRef<

 	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",
+				"border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
 				className,
 			)}
 		>
@@ -194,7 +188,7 @@ const ChartTooltipContent = React.forwardRef<
 						<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",
+								"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
 								indicator === "dot" && "items-center",
 							)}
 						>
@@ -208,7 +202,7 @@ const ChartTooltipContent = React.forwardRef<
 										!hideIndicator && (
 											<div
 												className={cn(
-														"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+													"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
 													{
 														"h-2.5 w-2.5": indicator === "dot",
 														"w-1": indicator === "line",
@@ -239,7 +233,7 @@ const ChartTooltipContent = React.forwardRef<
 											</span>
 										</div>
 										{item.value && (
-												<span className="font-mono font-medium tabular-nums text-foreground">
+											<span className="text-foreground font-mono font-medium tabular-nums">
 												{item.value.toLocaleString()}
 											</span>
 										)}
@@ -252,24 +246,21 @@ const ChartTooltipContent = React.forwardRef<
 			</div>
 		</div>
 	);
-	},
-);
-ChartTooltipContent.displayName = "ChartTooltip";
+}

 const ChartLegend = RechartsPrimitive.Legend;

-const ChartLegendContent = React.forwardRef<
-	HTMLDivElement,
-	React.ComponentProps<"div"> &
+function ChartLegendContent({
+	className,
+	hideIcon = false,
+	payload,
+	verticalAlign = "bottom",
+	nameKey,
+}: 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) {
@@ -278,7 +269,6 @@ const ChartLegendContent = React.forwardRef<

 	return (
 		<div
-				ref={ref}
 			className={cn(
 				"flex items-center justify-center gap-4",
 				verticalAlign === "top" ? "pb-3" : "pt-3",
@@ -293,7 +283,7 @@ const ChartLegendContent = React.forwardRef<
 					<div
 						key={item.value}
 						className={cn(
-								"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
+							"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
 						)}
 					>
 						{itemConfig?.icon && !hideIcon ? (
@@ -312,9 +302,7 @@ const ChartLegendContent = React.forwardRef<
 			})}
 		</div>
 	);
-	},
-);
-ChartLegendContent.displayName = "ChartLegend";
+}

 // Helper to extract item config from a payload.
 function getPayloadConfigFromPayload(
--- a/docs/components/ui/checkbox.tsx
+++ b/docs/components/ui/checkbox.tsx
@@ -2,29 +2,31 @@

 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { CheckIcon } from "@radix-ui/react-icons";
+import { CheckIcon } from "lucide-react";

 import { cn } from "@/lib/utils";

-const Checkbox = React.forwardRef<
-	React.ElementRef<typeof CheckboxPrimitive.Root>,
-	React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
+function Checkbox({
+	className,
+	...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+	return (
 		<CheckboxPrimitive.Root
-		ref={ref}
+			data-slot="checkbox"
 			className={cn(
-			"peer h-4 w-4 shrink-0 rounded-none 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",
+				"peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
 				className,
 			)}
 			{...props}
 		>
 			<CheckboxPrimitive.Indicator
-			className={cn("flex items-center justify-center text-current")}
+				data-slot="checkbox-indicator"
+				className="flex items-center justify-center text-current transition-none"
 			>
-			<CheckIcon className="h-4 w-4" />
+				<CheckIcon className="size-3.5" />
 			</CheckboxPrimitive.Indicator>
 		</CheckboxPrimitive.Root>
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+	);
+}

 export { Checkbox };
--- a/docs/components/ui/collapsible.tsx
+++ b/docs/components/ui/collapsible.tsx
@@ -2,10 +2,32 @@

 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";

-const Collapsible = CollapsiblePrimitive.Root;
+function Collapsible({
+	...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+	return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}

-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+function CollapsibleTrigger({
+	...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+	return (
+		<CollapsiblePrimitive.CollapsibleTrigger
+			data-slot="collapsible-trigger"
+			{...props}
+		/>
+	);
+}

-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+function CollapsibleContent({
+	...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+	return (
+		<CollapsiblePrimitive.CollapsibleContent
+			data-slot="collapsible-content"
+			{...props}
+		/>
+	);
+}

 export { Collapsible, CollapsibleTrigger, CollapsibleContent };
--- a/docs/components/ui/command.tsx
+++ b/docs/components/ui/command.tsx
@@ -1,146 +1,168 @@
 "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 { SearchIcon } from "lucide-react";

 import { cn } from "@/lib/utils";
-import { Dialog, DialogContent } from "@/components/ui/dialog";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";

-const Command = React.forwardRef<
-	React.ElementRef<typeof CommandPrimitive>,
-	React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
+function Command({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+	return (
 		<CommandPrimitive
-		ref={ref}
+			data-slot="command"
 			className={cn(
-			"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+				"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
 				className,
 			)}
 			{...props}
 		/>
-));
-Command.displayName = CommandPrimitive.displayName;
+	);
+}

-interface CommandDialogProps extends DialogProps {}
-
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+function CommandDialog({
+	title = "Command Palette",
+	description = "Search for a command to run...",
+	children,
+	...props
+}: React.ComponentProps<typeof Dialog> & {
+	title?: string;
+	description?: string;
+}) {
 	return (
 		<Dialog {...props}>
+			<DialogHeader className="sr-only">
+				<DialogTitle>{title}</DialogTitle>
+				<DialogDescription>{description}</DialogDescription>
+			</DialogHeader>
 			<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">
+				<Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[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" />
+function CommandInput({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+	return (
+		<div
+			data-slot="command-input-wrapper"
+			className="flex h-9 items-center gap-2 border-b px-3"
+		>
+			<SearchIcon className="size-4 shrink-0 opacity-50" />
 			<CommandPrimitive.Input
-			ref={ref}
+				data-slot="command-input"
 				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",
+					"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden 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 = ({
+function CommandList({
 	className,
 	...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
 	return (
-		<span
+		<CommandPrimitive.List
+			data-slot="command-list"
 			className={cn(
-				"ml-auto text-xs tracking-widest text-muted-foreground",
+				"max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
 				className,
 			)}
 			{...props}
 		/>
 	);
-};
-CommandShortcut.displayName = "CommandShortcut";
+}
+
+function CommandEmpty({
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+	return (
+		<CommandPrimitive.Empty
+			data-slot="command-empty"
+			className="py-6 text-center text-sm"
+			{...props}
+		/>
+	);
+}
+
+function CommandGroup({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+	return (
+		<CommandPrimitive.Group
+			data-slot="command-group"
+			className={cn(
+				"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+	return (
+		<CommandPrimitive.Separator
+			data-slot="command-separator"
+			className={cn("bg-border -mx-1 h-px", className)}
+			{...props}
+		/>
+	);
+}
+
+function CommandItem({
+	className,
+	...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+	return (
+		<CommandPrimitive.Item
+			data-slot="command-item"
+			className={cn(
+				"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CommandShortcut({
+	className,
+	...props
+}: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="command-shortcut"
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}

 export {
 	Command,
--- a/docs/components/ui/context-menu.tsx
+++ b/docs/components/ui/context-menu.tsx
@@ -2,188 +2,236 @@

 import * as React from "react";
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
-import {
-	CheckIcon,
-	ChevronRightIcon,
-	DotFilledIcon,
-} from "@radix-ui/react-icons";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";

 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;
+function ContextMenu({
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+	return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
 }
->(({ className, inset, children, ...props }, ref) => (
+
+function ContextMenuTrigger({
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+	return (
+		<ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+	);
+}
+
+function ContextMenuGroup({
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+	return (
+		<ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+	);
+}
+
+function ContextMenuPortal({
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+	return (
+		<ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+	);
+}
+
+function ContextMenuSub({
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+	return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
+}
+
+function ContextMenuRadioGroup({
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+	return (
+		<ContextMenuPrimitive.RadioGroup
+			data-slot="context-menu-radio-group"
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuSubTrigger({
+	className,
+	inset,
+	children,
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+	inset?: boolean;
+}) {
+	return (
 		<ContextMenuPrimitive.SubTrigger
-		ref={ref}
+			data-slot="context-menu-sub-trigger"
+			data-inset={inset}
 			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",
+				"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				className,
 			)}
 			{...props}
 		>
 			{children}
-		<ChevronRightIcon className="ml-auto h-4 w-4" />
+			<ChevronRightIcon className="ml-auto" />
 		</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 = ({
+function ContextMenuSubContent({
 	className,
 	...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
 	return (
-		<span
+		<ContextMenuPrimitive.SubContent
+			data-slot="context-menu-sub-content"
 			className={cn(
-				"ml-auto text-xs tracking-widest text-muted-foreground",
+				"bg-popover text-popover-foreground 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 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
 				className,
 			)}
 			{...props}
 		/>
 	);
-};
-ContextMenuShortcut.displayName = "ContextMenuShortcut";
+}
+
+function ContextMenuContent({
+	className,
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+	return (
+		<ContextMenuPrimitive.Portal>
+			<ContextMenuPrimitive.Content
+				data-slot="context-menu-content"
+				className={cn(
+					"bg-popover text-popover-foreground 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 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md",
+					className,
+				)}
+				{...props}
+			/>
+		</ContextMenuPrimitive.Portal>
+	);
+}
+
+function ContextMenuItem({
+	className,
+	inset,
+	variant = "default",
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+	inset?: boolean;
+	variant?: "default" | "destructive";
+}) {
+	return (
+		<ContextMenuPrimitive.Item
+			data-slot="context-menu-item"
+			data-inset={inset}
+			data-variant={variant}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuCheckboxItem({
+	className,
+	children,
+	checked,
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+	return (
+		<ContextMenuPrimitive.CheckboxItem
+			data-slot="context-menu-checkbox-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			checked={checked}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<ContextMenuPrimitive.ItemIndicator>
+					<CheckIcon className="size-4" />
+				</ContextMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</ContextMenuPrimitive.CheckboxItem>
+	);
+}
+
+function ContextMenuRadioItem({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+	return (
+		<ContextMenuPrimitive.RadioItem
+			data-slot="context-menu-radio-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<ContextMenuPrimitive.ItemIndicator>
+					<CircleIcon className="size-2 fill-current" />
+				</ContextMenuPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</ContextMenuPrimitive.RadioItem>
+	);
+}
+
+function ContextMenuLabel({
+	className,
+	inset,
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+	inset?: boolean;
+}) {
+	return (
+		<ContextMenuPrimitive.Label
+			data-slot="context-menu-label"
+			data-inset={inset}
+			className={cn(
+				"text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+	return (
+		<ContextMenuPrimitive.Separator
+			data-slot="context-menu-separator"
+			className={cn("bg-border -mx-1 my-1 h-px", className)}
+			{...props}
+		/>
+	);
+}
+
+function ContextMenuShortcut({
+	className,
+	...props
+}: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="context-menu-shortcut"
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}

 export {
 	ContextMenu,
--- a/docs/components/ui/dialog.tsx
+++ b/docs/components/ui/dialog.tsx
@@ -2,121 +2,134 @@

 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { Cross2Icon } from "@radix-ui/react-icons";
+import { XIcon } from "lucide-react";

 import { cn } from "@/lib/utils";

-const Dialog = DialogPrimitive.Root;
+function Dialog({
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+	return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}

-const DialogTrigger = DialogPrimitive.Trigger;
+function DialogTrigger({
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+	return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}

-const DialogPortal = DialogPrimitive.Portal;
+function DialogPortal({
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+	return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}

-const DialogClose = DialogPrimitive.Close;
+function DialogClose({
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+	return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}

-const DialogOverlay = React.forwardRef<
-	React.ElementRef<typeof DialogPrimitive.Overlay>,
-	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
+function DialogOverlay({
+	className,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+	return (
 		<DialogPrimitive.Overlay
-		ref={ref}
+			data-slot="dialog-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",
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
 				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>
+function DialogContent({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+	return (
+		<DialogPortal data-slot="dialog-portal">
 			<DialogOverlay />
 			<DialogPrimitive.Content
-			ref={ref}
+				data-slot="dialog-content"
 				className={cn(
-				"fixed left-[50%] top-[50%] z-50 grid 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 w-11/12",
+					"bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-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" />
+				<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+					<XIcon />
 					<span className="sr-only">Close</span>
 				</DialogPrimitive.Close>
 			</DialogPrimitive.Content>
 		</DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
+	);
+}

-const DialogHeader = ({
-	className,
-	...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
 		<div
+			data-slot="dialog-header"
+			className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+			{...props}
+		/>
+	);
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="dialog-footer"
 			className={cn(
-			"flex flex-col space-y-1.5 text-center sm:text-left",
+				"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
 				className,
 			)}
 			{...props}
 		/>
 	);
-DialogHeader.displayName = "DialogHeader";
+}

-const DialogFooter = ({
+function DialogTitle({
 	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) => (
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+	return (
 		<DialogPrimitive.Title
-		ref={ref}
-		className={cn(
-			"text-lg font-semibold leading-none tracking-tight",
-			className,
-		)}
+			data-slot="dialog-title"
+			className={cn("text-lg leading-none font-semibold", className)}
 			{...props}
 		/>
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
+	);
+}

-const DialogDescription = React.forwardRef<
-	React.ElementRef<typeof DialogPrimitive.Description>,
-	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
+function DialogDescription({
+	className,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+	return (
 		<DialogPrimitive.Description
-		ref={ref}
-		className={cn("text-sm text-muted-foreground", className)}
+			data-slot="dialog-description"
+			className={cn("text-muted-foreground text-sm", className)}
 			{...props}
 		/>
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
+	);
+}

 export {
 	Dialog,
-	DialogPortal,
-	DialogOverlay,
-	DialogTrigger,
 	DialogClose,
 	DialogContent,
-	DialogHeader,
-	DialogFooter,
-	DialogTitle,
 	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+	DialogTrigger,
 };
--- a/docs/components/ui/drawer.tsx
+++ b/docs/components/ui/drawer.tsx
@@ -5,104 +5,118 @@ import { Drawer as DrawerPrimitive } from "vaul";

 import { cn } from "@/lib/utils";

-const Drawer = ({
-	shouldScaleBackground = true,
+function Drawer({
 	...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-	<DrawerPrimitive.Root
-		shouldScaleBackground={shouldScaleBackground}
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+	return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
+}
+
+function DrawerTrigger({
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+	return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+function DrawerPortal({
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
+	return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+function DrawerClose({
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+	return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+function DrawerOverlay({
+	className,
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+	return (
+		<DrawerPrimitive.Overlay
+			data-slot="drawer-overlay"
+			className={cn(
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
+				className,
+			)}
 			{...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>
+function DrawerContent({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+	return (
+		<DrawerPortal data-slot="drawer-portal">
 			<DrawerOverlay />
 			<DrawerPrimitive.Content
-			ref={ref}
+				data-slot="drawer-content"
 				className={cn(
-				"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+					"group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+					"data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg",
+					"data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg",
+					"data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-sm",
+					"data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-sm",
 					className,
 				)}
 				{...props}
 			>
-			<div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+				<div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
 				{children}
 			</DrawerPrimitive.Content>
 		</DrawerPortal>
-));
-DrawerContent.displayName = "DrawerContent";
+	);
+}

-const DrawerHeader = ({
-	className,
-	...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
 		<div
-		className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+			data-slot="drawer-header"
+			className={cn("flex flex-col gap-1.5 p-4", className)}
 			{...props}
 		/>
 	);
-DrawerHeader.displayName = "DrawerHeader";
+}

-const DrawerFooter = ({
-	className,
-	...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
 		<div
+			data-slot="drawer-footer"
 			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",
+function DrawerTitle({
 	className,
-		)}
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+	return (
+		<DrawerPrimitive.Title
+			data-slot="drawer-title"
+			className={cn("text-foreground font-semibold", className)}
 			{...props}
 		/>
-));
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+	);
+}

-const DrawerDescription = React.forwardRef<
-	React.ElementRef<typeof DrawerPrimitive.Description>,
-	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
->(({ className, ...props }, ref) => (
+function DrawerDescription({
+	className,
+	...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+	return (
 		<DrawerPrimitive.Description
-		ref={ref}
-		className={cn("text-sm text-muted-foreground", className)}
+			data-slot="drawer-description"
+			className={cn("text-muted-foreground text-sm", className)}
 			{...props}
 		/>
-));
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+	);
+}

 export {
 	Drawer,
--- a/docs/components/ui/dropdown-menu.tsx
+++ b/docs/components/ui/dropdown-menu.tsx
@@ -2,204 +2,256 @@

 import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import {
-	CheckIcon,
-	ChevronRightIcon,
-	DotFilledIcon,
-} from "@radix-ui/react-icons";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";

 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;
+function DropdownMenu({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+	return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
 }
->(({ 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,
-		)}
+function DropdownMenuPortal({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+	return (
+		<DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+	);
+}
+
+function DropdownMenuTrigger({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+	return (
+		<DropdownMenuPrimitive.Trigger
+			data-slot="dropdown-menu-trigger"
 			{...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) => (
+function DropdownMenuContent({
+	className,
+	sideOffset = 4,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+	return (
 		<DropdownMenuPrimitive.Portal>
 			<DropdownMenuPrimitive.Content
-			ref={ref}
+				data-slot="dropdown-menu-content"
 				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",
+					"bg-popover text-popover-foreground 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 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
 					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) => (
+
+function DropdownMenuGroup({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+	return (
+		<DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+	);
+}
+
+function DropdownMenuItem({
+	className,
+	inset,
+	variant = "default",
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+	inset?: boolean;
+	variant?: "default" | "destructive";
+}) {
+	return (
 		<DropdownMenuPrimitive.Item
-		ref={ref}
+			data-slot="dropdown-menu-item"
+			data-inset={inset}
+			data-variant={variant}
 			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",
+				"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				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) => (
+function DropdownMenuCheckboxItem({
+	className,
+	children,
+	checked,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+	return (
 		<DropdownMenuPrimitive.CheckboxItem
-		ref={ref}
+			data-slot="dropdown-menu-checkbox-item"
 			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",
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				className,
 			)}
 			checked={checked}
 			{...props}
 		>
-		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
 				<DropdownMenuPrimitive.ItemIndicator>
-				<CheckIcon className="h-4 w-4" />
+					<CheckIcon className="size-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) => (
+function DropdownMenuRadioGroup({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+	return (
+		<DropdownMenuPrimitive.RadioGroup
+			data-slot="dropdown-menu-radio-group"
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuRadioItem({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+	return (
 		<DropdownMenuPrimitive.RadioItem
-		ref={ref}
+			data-slot="dropdown-menu-radio-item"
 			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",
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				className,
 			)}
 			{...props}
 		>
-		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
 				<DropdownMenuPrimitive.ItemIndicator>
-				<DotFilledIcon className="h-4 w-4 fill-current" />
+					<CircleIcon className="size-2 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) => (
+
+function DropdownMenuLabel({
+	className,
+	inset,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+	inset?: boolean;
+}) {
+	return (
 		<DropdownMenuPrimitive.Label
-		ref={ref}
+			data-slot="dropdown-menu-label"
+			data-inset={inset}
 			className={cn(
-			"px-2 py-1.5 text-sm font-semibold",
-			inset && "pl-8",
+				"px-2 py-1.5 text-sm font-medium data-[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 = ({
+function DropdownMenuSeparator({
 	className,
 	...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
 	return (
-		<span
-			className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+		<DropdownMenuPrimitive.Separator
+			data-slot="dropdown-menu-separator"
+			className={cn("bg-border -mx-1 my-1 h-px", className)}
 			{...props}
 		/>
 	);
-};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+}
+
+function DropdownMenuShortcut({
+	className,
+	...props
+}: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="dropdown-menu-shortcut"
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function DropdownMenuSub({
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+	return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+	className,
+	inset,
+	children,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+	inset?: boolean;
+}) {
+	return (
+		<DropdownMenuPrimitive.SubTrigger
+			data-slot="dropdown-menu-sub-trigger"
+			data-inset={inset}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronRightIcon className="ml-auto size-4" />
+		</DropdownMenuPrimitive.SubTrigger>
+	);
+}
+
+function DropdownMenuSubContent({
+	className,
+	...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+	return (
+		<DropdownMenuPrimitive.SubContent
+			data-slot="dropdown-menu-sub-content"
+			className={cn(
+				"bg-popover text-popover-foreground 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 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}

 export {
 	DropdownMenu,
+	DropdownMenuPortal,
 	DropdownMenuTrigger,
 	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuLabel,
 	DropdownMenuItem,
 	DropdownMenuCheckboxItem,
+	DropdownMenuRadioGroup,
 	DropdownMenuRadioItem,
-	DropdownMenuLabel,
 	DropdownMenuSeparator,
 	DropdownMenuShortcut,
-	DropdownMenuGroup,
-	DropdownMenuPortal,
 	DropdownMenuSub,
-	DropdownMenuSubContent,
 	DropdownMenuSubTrigger,
-	DropdownMenuRadioGroup,
+	DropdownMenuSubContent,
 };
--- a/docs/components/ui/form.tsx
+++ b/docs/components/ui/form.tsx
@@ -5,11 +5,12 @@ import * as LabelPrimitive from "@radix-ui/react-label";
 import { Slot } from "@radix-ui/react-slot";
 import {
 	Controller,
-	ControllerProps,
-	FieldPath,
-	FieldValues,
 	FormProvider,
 	useFormContext,
+	useFormState,
+	type ControllerProps,
+	type FieldPath,
+	type FieldValues,
 } from "react-hook-form";

 import { cn } from "@/lib/utils";
@@ -44,8 +45,8 @@ const FormField = <
 const useFormField = () => {
 	const fieldContext = React.useContext(FormFieldContext);
 	const itemContext = React.useContext(FormItemContext);
-	const { getFieldState, formState } = useFormContext();
-
+	const { getFieldState } = useFormContext();
+	const formState = useFormState({ name: fieldContext.name });
 	const fieldState = getFieldState(fieldContext.name, formState);

 	if (!fieldContext) {
@@ -72,47 +73,44 @@ const FormItemContext = React.createContext<FormItemContextValue>(
 	{} as FormItemContextValue,
 );

-const FormItem = React.forwardRef<
-	HTMLDivElement,
-	React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
 	const id = React.useId();

 	return (
 		<FormItemContext.Provider value={{ id }}>
-			<div ref={ref} className={cn("space-y-2", className)} {...props} />
+			<div
+				data-slot="form-item"
+				className={cn("grid gap-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) => {
+function FormLabel({
+	className,
+	...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
 	const { error, formItemId } = useFormField();

 	return (
 		<Label
-			ref={ref}
-			className={cn(error && "text-destructive", className)}
+			data-slot="form-label"
+			data-error={!!error}
+			className={cn("data-[error=true]:text-destructive-foreground", className)}
 			htmlFor={formItemId}
 			{...props}
 		/>
 	);
-});
-FormLabel.displayName = "FormLabel";
+}

-const FormControl = React.forwardRef<
-	React.ElementRef<typeof Slot>,
-	React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
 	const { error, formItemId, formDescriptionId, formMessageId } =
 		useFormField();

 	return (
 		<Slot
-			ref={ref}
+			data-slot="form-control"
 			id={formItemId}
 			aria-describedby={
 				!error
@@ -123,32 +121,24 @@ const FormControl = React.forwardRef<
 			{...props}
 		/>
 	);
-});
-FormControl.displayName = "FormControl";
+}

-const FormDescription = React.forwardRef<
-	HTMLParagraphElement,
-	React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
 	const { formDescriptionId } = useFormField();

 	return (
 		<p
-			ref={ref}
+			data-slot="form-description"
 			id={formDescriptionId}
-			className={cn("text-[0.8rem] text-muted-foreground", className)}
+			className={cn("text-muted-foreground text-sm", className)}
 			{...props}
 		/>
 	);
-});
-FormDescription.displayName = "FormDescription";
+}

-const FormMessage = React.forwardRef<
-	HTMLParagraphElement,
-	React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
 	const { error, formMessageId } = useFormField();
-	const body = error ? String(error?.message) : children;
+	const body = error ? String(error?.message ?? "") : props.children;

 	if (!body) {
 		return null;
@@ -156,16 +146,15 @@ const FormMessage = React.forwardRef<

 	return (
 		<p
-			ref={ref}
+			data-slot="form-message"
 			id={formMessageId}
-			className={cn("text-[0.8rem] font-medium text-destructive", className)}
+			className={cn("text-destructive-foreground text-sm", className)}
 			{...props}
 		>
 			{body}
 		</p>
 	);
-});
-FormMessage.displayName = "FormMessage";
+}

 export {
 	useFormField,
--- a/docs/components/ui/hover-card.tsx
+++ b/docs/components/ui/hover-card.tsx
@@ -5,25 +5,38 @@ import * as HoverCardPrimitive from "@radix-ui/react-hover-card";

 import { cn } from "@/lib/utils";

-const HoverCard = HoverCardPrimitive.Root;
+function HoverCard({
+	...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
+	return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
+}

-const HoverCardTrigger = HoverCardPrimitive.Trigger;
+function HoverCardTrigger({
+	...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
+	return (
+		<HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
+	);
+}

-const HoverCardContent = React.forwardRef<
-	React.ElementRef<typeof HoverCardPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+function HoverCardContent({
+	className,
+	align = "center",
+	sideOffset = 4,
+	...props
+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
+	return (
 		<HoverCardPrimitive.Content
-		ref={ref}
+			data-slot="hover-card-content"
 			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",
+				"bg-popover text-popover-foreground 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 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden",
 				className,
 			)}
 			{...props}
 		/>
-));
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+	);
+}

 export { HoverCard, HoverCardTrigger, HoverCardContent };
--- a/docs/components/ui/input-otp.tsx
+++ b/docs/components/ui/input-otp.tsx
@@ -1,48 +1,57 @@
 "use client";

 import * as React from "react";
-import { DashIcon } from "@radix-ui/react-icons";
 import { OTPInput, OTPInputContext } from "input-otp";
+import { MinusIcon } from "lucide-react";

 import { cn } from "@/lib/utils";

-const InputOTP = React.forwardRef<
-	React.ElementRef<typeof OTPInput>,
-	React.ComponentPropsWithoutRef<typeof OTPInput>
->(({ className, containerClassName, ...props }, ref) => (
+function InputOTP({
+	className,
+	containerClassName,
+	...props
+}: React.ComponentProps<typeof OTPInput> & {
+	containerClassName?: string;
+}) {
+	return (
 		<OTPInput
-		ref={ref}
+			data-slot="input-otp"
 			containerClassName={cn(
-			"flex items-center gap-2 has-[:disabled]:opacity-50",
+				"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";
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="input-otp-group"
+			className={cn("flex items-center", className)}
+			{...props}
+		/>
+	);
+}

-const InputOTPSlot = React.forwardRef<
-	React.ElementRef<"div">,
-	React.ComponentPropsWithoutRef<"div"> & { index: number }
->(({ index, className, ...props }, ref) => {
+function InputOTPSlot({
+	index,
+	className,
+	...props
+}: React.ComponentProps<"div"> & {
+	index: number;
+}) {
 	const inputOTPContext = React.useContext(OTPInputContext);
-	const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+	const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};

 	return (
 		<div
-			ref={ref}
+			data-slot="input-otp-slot"
+			data-active={isActive}
 			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",
+				"border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
 				className,
 			)}
 			{...props}
@@ -50,22 +59,19 @@ const InputOTPSlot = React.forwardRef<
 			{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 className="animate-caret-blink bg-foreground h-4 w-px 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 />
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+	return (
+		<div data-slot="input-otp-separator" role="separator" {...props}>
+			<MinusIcon />
 		</div>
-));
-InputOTPSeparator.displayName = "InputOTPSeparator";
+	);
+}

 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
--- a/docs/components/ui/input.tsx
+++ b/docs/components/ui/input.tsx
@@ -2,24 +2,20 @@ 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) => {
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
 	return (
 		<input
 			type={type}
+			data-slot="input"
 			className={cn(
-					"flex h-9 w-full rounded-none-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",
+				"border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+				"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+				"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
 				className,
 			)}
-				ref={ref}
 			{...props}
 		/>
 	);
-	},
-);
-Input.displayName = "Input";
+}

 export { Input };
--- a/docs/components/ui/label.tsx
+++ b/docs/components/ui/label.tsx
@@ -2,25 +2,23 @@

 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) => (
+function Label({
+	className,
+	...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+	return (
 		<LabelPrimitive.Root
-		ref={ref}
-		className={cn(labelVariants(), className)}
+			data-slot="label"
+			className={cn(
+				"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+				className,
+			)}
 			{...props}
 		/>
-));
-Label.displayName = LabelPrimitive.Root.displayName;
+	);
+}

 export { Label };
--- a/docs/components/ui/menubar.tsx
+++ b/docs/components/ui/menubar.tsx
@@ -1,66 +1,235 @@
 "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 { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";

 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) => (
+function Menubar({
+	className,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+	return (
 		<MenubarPrimitive.Root
-		ref={ref}
+			data-slot="menubar"
 			className={cn(
-			"flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
+				"bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
 				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}
+
+function MenubarMenu({
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+	return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />;
+}
+
+function MenubarGroup({
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+	return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />;
+}
+
+function MenubarPortal({
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+	return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />;
+}
+
+function MenubarRadioGroup({
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+	return (
+		<MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+	);
+}
+
+function MenubarTrigger({
+	className,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
+	return (
+		<MenubarPrimitive.Trigger
+			data-slot="menubar-trigger"
 			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",
+				"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarContent({
+	className,
+	align = "start",
+	alignOffset = -4,
+	sideOffset = 8,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
+	return (
+		<MenubarPortal>
+			<MenubarPrimitive.Content
+				data-slot="menubar-content"
+				align={align}
+				alignOffset={alignOffset}
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-popover text-popover-foreground 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 z-50 min-w-[12rem] overflow-hidden rounded-md border p-1 shadow-md",
+					className,
+				)}
+				{...props}
+			/>
+		</MenubarPortal>
+	);
+}
+
+function MenubarItem({
+	className,
+	inset,
+	variant = "default",
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+	inset?: boolean;
+	variant?: "default" | "destructive";
+}) {
+	return (
+		<MenubarPrimitive.Item
+			data-slot="menubar-item"
+			data-inset={inset}
+			data-variant={variant}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarCheckboxItem({
+	className,
+	children,
+	checked,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
+	return (
+		<MenubarPrimitive.CheckboxItem
+			data-slot="menubar-checkbox-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			checked={checked}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<MenubarPrimitive.ItemIndicator>
+					<CheckIcon className="size-4" />
+				</MenubarPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</MenubarPrimitive.CheckboxItem>
+	);
+}
+
+function MenubarRadioItem({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
+	return (
+		<MenubarPrimitive.RadioItem
+			data-slot="menubar-radio-item"
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		>
+			<span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+				<MenubarPrimitive.ItemIndicator>
+					<CircleIcon className="size-2 fill-current" />
+				</MenubarPrimitive.ItemIndicator>
+			</span>
+			{children}
+		</MenubarPrimitive.RadioItem>
+	);
+}
+
+function MenubarLabel({
+	className,
+	inset,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+	inset?: boolean;
+}) {
+	return (
+		<MenubarPrimitive.Label
+			data-slot="menubar-label"
+			data-inset={inset}
+			className={cn(
+				"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
+	return (
+		<MenubarPrimitive.Separator
+			data-slot="menubar-separator"
+			className={cn("bg-border -mx-1 my-1 h-px", className)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarShortcut({
+	className,
+	...props
+}: React.ComponentProps<"span">) {
+	return (
+		<span
+			data-slot="menubar-shortcut"
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function MenubarSub({
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+	return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
+}
+
+function MenubarSubTrigger({
+	className,
+	inset,
+	children,
+	...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+	inset?: boolean;
+}) {
+	return (
+		<MenubarPrimitive.SubTrigger
+			data-slot="menubar-sub-trigger"
+			data-inset={inset}
+			className={cn(
+				"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
 				className,
 			)}
 			{...props}
@@ -68,173 +237,40 @@ const MenubarSubTrigger = React.forwardRef<
 			{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 = ({
+function MenubarSubContent({
 	className,
 	...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
+}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
 	return (
-		<span
+		<MenubarPrimitive.SubContent
+			data-slot="menubar-sub-content"
 			className={cn(
-				"ml-auto text-xs tracking-widest text-muted-foreground",
+				"bg-popover text-popover-foreground 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 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
 				className,
 			)}
 			{...props}
 		/>
 	);
-};
-MenubarShortcut.displayname = "MenubarShortcut";
+}

 export {
 	Menubar,
+	MenubarPortal,
 	MenubarMenu,
 	MenubarTrigger,
 	MenubarContent,
-	MenubarItem,
+	MenubarGroup,
 	MenubarSeparator,
 	MenubarLabel,
+	MenubarItem,
+	MenubarShortcut,
 	MenubarCheckboxItem,
 	MenubarRadioGroup,
 	MenubarRadioItem,
-	MenubarPortal,
-	MenubarSubContent,
-	MenubarSubTrigger,
-	MenubarGroup,
 	MenubarSub,
-	MenubarShortcut,
+	MenubarSubTrigger,
+	MenubarSubContent,
 };
--- a/docs/components/ui/navigation-menu.tsx
+++ b/docs/components/ui/navigation-menu.tsx
@@ -1,122 +1,163 @@
+"use client";
+
 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 { ChevronDownIcon } from "lucide-react";

 import { cn } from "@/lib/utils";

-const NavigationMenu = React.forwardRef<
-	React.ElementRef<typeof NavigationMenuPrimitive.Root>,
-	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
->(({ className, children, ...props }, ref) => (
+function NavigationMenu({
+	className,
+	children,
+	viewport = true,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+	viewport?: boolean;
+}) {
+	return (
 		<NavigationMenuPrimitive.Root
-		ref={ref}
+			data-slot="navigation-menu"
+			data-viewport={viewport}
 			className={cn(
-			"relative z-10 flex max-w-max flex-1 items-center justify-center",
+				"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
 				className,
 			)}
 			{...props}
 		>
 			{children}
-		<NavigationMenuViewport />
+			{viewport && <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) => (
+function NavigationMenuList({
+	className,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+	return (
 		<NavigationMenuPrimitive.List
-		ref={ref}
+			data-slot="navigation-menu-list"
 			className={cn(
-			"group flex flex-1 list-none items-center justify-center space-x-1",
+				"group flex flex-1 list-none items-center justify-center gap-1",
 				className,
 			)}
 			{...props}
 		/>
-));
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+	);
+}

-const NavigationMenuItem = NavigationMenuPrimitive.Item;
+function NavigationMenuItem({
+	className,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+	return (
+		<NavigationMenuPrimitive.Item
+			data-slot="navigation-menu-item"
+			className={cn("relative", className)}
+			{...props}
+		/>
+	);
+}

 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",
+	"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1",
 );

-const NavigationMenuTrigger = React.forwardRef<
-	React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
-	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
+function NavigationMenuTrigger({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+	return (
 		<NavigationMenuPrimitive.Trigger
-		ref={ref}
+			data-slot="navigation-menu-trigger"
 			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"
+				className="relative top-[1px] ml-1 size-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) => (
+function NavigationMenuContent({
+	className,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+	return (
 		<NavigationMenuPrimitive.Content
-		ref={ref}
+			data-slot="navigation-menu-content"
 			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 ",
+				"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 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
+				"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
 				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
+function NavigationMenuViewport({
+	className,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+	return (
+		<div
 			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)]",
+				"absolute top-full left-0 isolate z-50 flex justify-center",
+			)}
+		>
+			<NavigationMenuPrimitive.Viewport
+				data-slot="navigation-menu-viewport"
+				className={cn(
+					"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow 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}
+function NavigationMenuLink({
+	className,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+	return (
+		<NavigationMenuPrimitive.Link
+			data-slot="navigation-menu-link"
 			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",
+				"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function NavigationMenuIndicator({
+	className,
+	...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+	return (
+		<NavigationMenuPrimitive.Indicator
+			data-slot="navigation-menu-indicator"
+			className={cn(
+				"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
 				className,
 			)}
 			{...props}
 		>
-		<div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+			<div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
 		</NavigationMenuPrimitive.Indicator>
-));
-NavigationMenuIndicator.displayName =
-	NavigationMenuPrimitive.Indicator.displayName;
+	);
+}

 export {
-	navigationMenuTriggerStyle,
 	NavigationMenu,
 	NavigationMenuList,
 	NavigationMenuItem,
@@ -125,4 +166,5 @@ export {
 	NavigationMenuLink,
 	NavigationMenuIndicator,
 	NavigationMenuViewport,
+	navigationMenuTriggerStyle,
 };
--- a/docs/components/ui/pagination.tsx
+++ b/docs/components/ui/pagination.tsx
@@ -2,55 +2,57 @@ import * as React from "react";
 import {
 	ChevronLeftIcon,
 	ChevronRightIcon,
-	DotsHorizontalIcon,
-} from "@radix-ui/react-icons";
+	MoreHorizontalIcon,
+} from "lucide-react";

 import { cn } from "@/lib/utils";
-import { ButtonProps, buttonVariants } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";

-const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+	return (
 		<nav
 			role="navigation"
 			aria-label="pagination"
+			data-slot="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) => (
+function PaginationContent({
+	className,
+	...props
+}: React.ComponentProps<"ul">) {
+	return (
 		<ul
-		ref={ref}
+			data-slot="pagination-content"
 			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";
+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+	return <li data-slot="pagination-item" {...props} />;
+}

 type PaginationLinkProps = {
 	isActive?: boolean;
-} & Pick<ButtonProps, "size"> &
+} & Pick<React.ComponentProps<typeof Button>, "size"> &
 	React.ComponentProps<"a">;

-const PaginationLink = ({
+function PaginationLink({
 	className,
 	isActive,
 	size = "icon",
 	...props
-}: PaginationLinkProps) => (
+}: PaginationLinkProps) {
+	return (
 		<a
 			aria-current={isActive ? "page" : undefined}
+			data-slot="pagination-link"
+			data-active={isActive}
 			className={cn(
 				buttonVariants({
 					variant: isActive ? "outline" : "ghost",
@@ -61,54 +63,58 @@ const PaginationLink = ({
 			{...props}
 		/>
 	);
-PaginationLink.displayName = "PaginationLink";
+}

-const PaginationPrevious = ({
+function PaginationPrevious({
 	className,
 	...props
-}: React.ComponentProps<typeof PaginationLink>) => (
+}: React.ComponentProps<typeof PaginationLink>) {
+	return (
 		<PaginationLink
 			aria-label="Go to previous page"
 			size="default"
-		className={cn("gap-1 pl-2.5", className)}
+			className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
 			{...props}
 		>
-		<ChevronLeftIcon className="h-4 w-4" />
-		<span>Previous</span>
+			<ChevronLeftIcon />
+			<span className="hidden sm:block">Previous</span>
 		</PaginationLink>
 	);
-PaginationPrevious.displayName = "PaginationPrevious";
+}

-const PaginationNext = ({
+function PaginationNext({
 	className,
 	...props
-}: React.ComponentProps<typeof PaginationLink>) => (
+}: React.ComponentProps<typeof PaginationLink>) {
+	return (
 		<PaginationLink
 			aria-label="Go to next page"
 			size="default"
-		className={cn("gap-1 pr-2.5", className)}
+			className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
 			{...props}
 		>
-		<span>Next</span>
-		<ChevronRightIcon className="h-4 w-4" />
+			<span className="hidden sm:block">Next</span>
+			<ChevronRightIcon />
 		</PaginationLink>
 	);
-PaginationNext.displayName = "PaginationNext";
+}

-const PaginationEllipsis = ({
+function PaginationEllipsis({
 	className,
 	...props
-}: React.ComponentProps<"span">) => (
+}: React.ComponentProps<"span">) {
+	return (
 		<span
 			aria-hidden
-		className={cn("flex h-9 w-9 items-center justify-center", className)}
+			data-slot="pagination-ellipsis"
+			className={cn("flex size-9 items-center justify-center", className)}
 			{...props}
 		>
-		<DotsHorizontalIcon className="h-4 w-4" />
+			<MoreHorizontalIcon className="size-4" />
 			<span className="sr-only">More pages</span>
 		</span>
 	);
-PaginationEllipsis.displayName = "PaginationEllipsis";
+}

 export {
 	Pagination,
--- a/docs/components/ui/popover.tsx
+++ b/docs/components/ui/popover.tsx
@@ -5,29 +5,44 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";

 import { cn } from "@/lib/utils";

-const Popover = PopoverPrimitive.Root;
+function Popover({
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+	return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}

-const PopoverTrigger = PopoverPrimitive.Trigger;
+function PopoverTrigger({
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+	return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}

-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) => (
+function PopoverContent({
+	className,
+	align = "center",
+	sideOffset = 4,
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+	return (
 		<PopoverPrimitive.Portal>
 			<PopoverPrimitive.Content
-			ref={ref}
+				data-slot="popover-content"
 				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",
+					"bg-popover text-popover-foreground 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 z-50 w-72 rounded-md border p-4 shadow-md outline-hidden",
 					className,
 				)}
 				{...props}
 			/>
 		</PopoverPrimitive.Portal>
-));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+	);
+}
+
+function PopoverAnchor({
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+	return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}

 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
--- a/docs/components/ui/progress.tsx
+++ b/docs/components/ui/progress.tsx
@@ -5,24 +5,27 @@ 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) => (
+function Progress({
+	className,
+	value,
+	...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+	return (
 		<ProgressPrimitive.Root
-		ref={ref}
+			data-slot="progress"
 			className={cn(
-			"relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+				"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
 				className,
 			)}
 			{...props}
 		>
 			<ProgressPrimitive.Indicator
-			className="h-full w-full flex-1 bg-primary transition-all"
+				data-slot="progress-indicator"
+				className="bg-primary h-full w-full flex-1 transition-all"
 				style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
 			/>
 		</ProgressPrimitive.Root>
-));
-Progress.displayName = ProgressPrimitive.Root.displayName;
+	);
+}

 export { Progress };
--- a/docs/components/ui/radio-group.tsx
+++ b/docs/components/ui/radio-group.tsx
@@ -1,44 +1,45 @@
 "use client";

 import * as React from "react";
-import { CheckIcon } from "@radix-ui/react-icons";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { CircleIcon } from "lucide-react";

 import { cn } from "@/lib/utils";

-const RadioGroup = React.forwardRef<
-	React.ElementRef<typeof RadioGroupPrimitive.Root>,
-	React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
+function RadioGroup({
+	className,
+	...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
 	return (
 		<RadioGroupPrimitive.Root
-			className={cn("grid gap-2", className)}
+			data-slot="radio-group"
+			className={cn("grid gap-3", 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) => {
+function RadioGroupItem({
+	className,
+	...props
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
 	return (
 		<RadioGroupPrimitive.Item
-			ref={ref}
+			data-slot="radio-group-item"
 			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",
+				"border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] 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
+				data-slot="radio-group-indicator"
+				className="relative flex items-center justify-center"
+			>
+				<CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
 			</RadioGroupPrimitive.Indicator>
 		</RadioGroupPrimitive.Item>
 	);
-});
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+}

 export { RadioGroup, RadioGroupItem };
--- a/docs/components/ui/resizable.tsx
+++ b/docs/components/ui/resizable.tsx
@@ -1,15 +1,18 @@
 "use client";

-import { DragHandleDots2Icon } from "@radix-ui/react-icons";
+import * as React from "react";
+import { GripVerticalIcon } from "lucide-react";
 import * as ResizablePrimitive from "react-resizable-panels";

 import { cn } from "@/lib/utils";

-const ResizablePanelGroup = ({
+function ResizablePanelGroup({
 	className,
 	...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+	return (
 		<ResizablePrimitive.PanelGroup
+			data-slot="resizable-panel-group"
 			className={cn(
 				"flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
 				className,
@@ -17,29 +20,37 @@ const ResizablePanelGroup = ({
 			{...props}
 		/>
 	);
+}

-const ResizablePanel = ResizablePrimitive.Panel;
+function ResizablePanel({
+	...props
+}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
+	return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
+}

-const ResizableHandle = ({
+function ResizableHandle({
 	withHandle,
 	className,
 	...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
 	withHandle?: boolean;
-}) => (
+}) {
+	return (
 		<ResizablePrimitive.PanelResizeHandle
+			data-slot="resizable-handle"
 			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",
+				"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden 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 className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+					<GripVerticalIcon className="size-2.5" />
 				</div>
 			)}
 		</ResizablePrimitive.PanelResizeHandle>
 	);
+}

 export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
--- a/docs/components/ui/scroll-area.tsx
+++ b/docs/components/ui/scroll-area.tsx
@@ -5,44 +5,54 @@ 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) => (
+function ScrollArea({
+	className,
+	children,
+	...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+	return (
 		<ScrollAreaPrimitive.Root
-		ref={ref}
-		className={cn("relative overflow-hidden", className)}
+			data-slot="scroll-area"
+			className={cn("relative", className)}
 			{...props}
 		>
-		<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+			<ScrollAreaPrimitive.Viewport
+				data-slot="scroll-area-viewport"
+				className="ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1"
+			>
 				{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) => (
+function ScrollBar({
+	className,
+	orientation = "vertical",
+	...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+	return (
 		<ScrollAreaPrimitive.ScrollAreaScrollbar
-		ref={ref}
+			data-slot="scroll-area-scrollbar"
 			orientation={orientation}
 			className={cn(
-			"flex touch-none select-none transition-colors",
+				"flex touch-none p-px transition-colors select-none",
 				orientation === "vertical" &&
-				"h-full w-2.5 border-l border-l-transparent p-[1px]",
+					"h-full w-2.5 border-l border-l-transparent",
 				orientation === "horizontal" &&
-				"h-2.5 flex-col border-t border-t-transparent p-[1px]",
+					"h-2.5 flex-col border-t border-t-transparent",
 				className,
 			)}
 			{...props}
 		>
-		<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+			<ScrollAreaPrimitive.ScrollAreaThumb
+				data-slot="scroll-area-thumb"
+				className="bg-border relative flex-1 rounded-full"
+			/>
 		</ScrollAreaPrimitive.ScrollAreaScrollbar>
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+	);
+}

 export { ScrollArea, ScrollBar };
--- a/docs/components/ui/select.tsx
+++ b/docs/components/ui/select.tsx
@@ -1,13 +1,8 @@
 "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 { Check, ChevronDown, ChevronUp, ChevronsUpDown } from "lucide-react";

 import { cn } from "@/lib/utils";

@@ -24,14 +19,14 @@ const SelectTrigger = React.forwardRef<
 	<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",
+			"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 data-[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" />
+			<ChevronsUpDown className="h-4 w-4 opacity-50" />
 		</SelectPrimitive.Icon>
 	</SelectPrimitive.Trigger>
 ));
@@ -49,7 +44,7 @@ const SelectScrollUpButton = React.forwardRef<
 		)}
 		{...props}
 	>
-		<ChevronUpIcon />
+		<ChevronUp className="h-4 w-4" />
 	</SelectPrimitive.ScrollUpButton>
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
@@ -66,7 +61,7 @@ const SelectScrollDownButton = React.forwardRef<
 		)}
 		{...props}
 	>
-		<ChevronDownIcon />
+		<ChevronDown className="h-4 w-4" />
 	</SelectPrimitive.ScrollDownButton>
 ));
 SelectScrollDownButton.displayName =
@@ -130,7 +125,7 @@ const SelectItem = React.forwardRef<
 	>
 		<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
 			<SelectPrimitive.ItemIndicator>
-				<CheckIcon className="h-4 w-4" />
+				<Check className="h-4 w-4" />
 			</SelectPrimitive.ItemIndicator>
 		</span>
 		<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
--- a/docs/components/ui/separator.tsx
+++ b/docs/components/ui/separator.tsx
@@ -5,27 +5,24 @@ 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,
-	) => (
+function Separator({
+	className,
+	orientation = "horizontal",
+	decorative = true,
+	...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+	return (
 		<SeparatorPrimitive.Root
-			ref={ref}
+			data-slot="separator-root"
 			decorative={decorative}
 			orientation={orientation}
 			className={cn(
-				"shrink-0 bg-border",
-				orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+				"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
 				className,
 			)}
 			{...props}
 		/>
-	),
 	);
-Separator.displayName = SeparatorPrimitive.Root.displayName;
+}

 export { Separator };
--- a/docs/components/ui/sheet.tsx
+++ b/docs/components/ui/sheet.tsx
@@ -2,134 +2,133 @@

 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 { XIcon } from "lucide-react";

 import { cn } from "@/lib/utils";

-const Sheet = SheetPrimitive.Root;
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+	return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}

-const SheetTrigger = SheetPrimitive.Trigger;
+function SheetTrigger({
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+	return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}

-const SheetClose = SheetPrimitive.Close;
+function SheetClose({
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+	return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}

-const SheetPortal = SheetPrimitive.Portal;
+function SheetPortal({
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+	return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}

-const SheetOverlay = React.forwardRef<
-	React.ElementRef<typeof SheetPrimitive.Overlay>,
-	React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
->(({ className, ...props }, ref) => (
+function SheetOverlay({
+	className,
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+	return (
 		<SheetPrimitive.Overlay
+			data-slot="sheet-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",
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
 				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) => (
+function SheetContent({
+	className,
+	children,
+	side = "right",
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+	side?: "top" | "right" | "bottom" | "left";
+}) {
+	return (
 		<SheetPortal>
 			<SheetOverlay />
 			<SheetPrimitive.Content
-			ref={ref}
-			className={cn(sheetVariants({ side }), className)}
+				data-slot="sheet-content"
+				className={cn(
+					"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+					side === "right" &&
+						"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+					side === "left" &&
+						"data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+					side === "top" &&
+						"data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+					side === "bottom" &&
+						"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+					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" />
+				{children}
+				<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+					<XIcon className="size-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>) => (
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
 		<div
-		className={cn(
-			"flex flex-col space-y-2 text-center sm:text-left",
-			className,
-		)}
+			data-slot="sheet-header"
+			className={cn("flex flex-col gap-1.5 p-4", className)}
 			{...props}
 		/>
 	);
-SheetHeader.displayName = "SheetHeader";
+}

-const SheetFooter = ({
-	className,
-	...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
 		<div
-		className={cn(
-			"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-			className,
-		)}
+			data-slot="sheet-footer"
+			className={cn("mt-auto flex flex-col gap-2 p-4", className)}
 			{...props}
 		/>
 	);
-SheetFooter.displayName = "SheetFooter";
+}

-const SheetTitle = React.forwardRef<
-	React.ElementRef<typeof SheetPrimitive.Title>,
-	React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
->(({ className, ...props }, ref) => (
+function SheetTitle({
+	className,
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+	return (
 		<SheetPrimitive.Title
-		ref={ref}
-		className={cn("text-lg font-semibold text-foreground", className)}
+			data-slot="sheet-title"
+			className={cn("text-foreground font-semibold", className)}
 			{...props}
 		/>
-));
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
+	);
+}

-const SheetDescription = React.forwardRef<
-	React.ElementRef<typeof SheetPrimitive.Description>,
-	React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
->(({ className, ...props }, ref) => (
+function SheetDescription({
+	className,
+	...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+	return (
 		<SheetPrimitive.Description
-		ref={ref}
-		className={cn("text-sm text-muted-foreground", className)}
+			data-slot="sheet-description"
+			className={cn("text-muted-foreground text-sm", className)}
 			{...props}
 		/>
-));
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
+	);
+}

 export {
 	Sheet,
-	SheetPortal,
-	SheetOverlay,
 	SheetTrigger,
 	SheetClose,
 	SheetContent,
--- a/docs/components/ui/sidebar.tsx
+++ b/docs/components/ui/sidebar.tsx
@@ -0,0 +1,723 @@
+"use client";
+
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { VariantProps, cva } from "class-variance-authority";
+import { PanelLeftIcon } from "lucide-react";
+
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import {
+	Sheet,
+	SheetContent,
+	SheetDescription,
+	SheetHeader,
+	SheetTitle,
+} from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContext = {
+	state: "expanded" | "collapsed";
+	open: boolean;
+	setOpen: (open: boolean) => void;
+	openMobile: boolean;
+	setOpenMobile: (open: boolean) => void;
+	isMobile: boolean;
+	toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContext | null>(null);
+
+function useSidebar() {
+	const context = React.useContext(SidebarContext);
+	if (!context) {
+		throw new Error("useSidebar must be used within a SidebarProvider.");
+	}
+
+	return context;
+}
+
+function SidebarProvider({
+	defaultOpen = true,
+	open: openProp,
+	onOpenChange: setOpenProp,
+	className,
+	style,
+	children,
+	...props
+}: React.ComponentProps<"div"> & {
+	defaultOpen?: boolean;
+	open?: boolean;
+	onOpenChange?: (open: boolean) => void;
+}) {
+	const isMobile = useIsMobile();
+	const [openMobile, setOpenMobile] = React.useState(false);
+
+	// This is the internal state of the sidebar.
+	// We use openProp and setOpenProp for control from outside the component.
+	const [_open, _setOpen] = React.useState(defaultOpen);
+	const open = openProp ?? _open;
+	const setOpen = React.useCallback(
+		(value: boolean | ((value: boolean) => boolean)) => {
+			const openState = typeof value === "function" ? value(open) : value;
+			if (setOpenProp) {
+				setOpenProp(openState);
+			} else {
+				_setOpen(openState);
+			}
+
+			// This sets the cookie to keep the sidebar state.
+			document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+		},
+		[setOpenProp, open],
+	);
+
+	// Helper to toggle the sidebar.
+	const toggleSidebar = React.useCallback(() => {
+		return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+	}, [isMobile, setOpen, setOpenMobile]);
+
+	// Adds a keyboard shortcut to toggle the sidebar.
+	React.useEffect(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (
+				event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+				(event.metaKey || event.ctrlKey)
+			) {
+				event.preventDefault();
+				toggleSidebar();
+			}
+		};
+
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [toggleSidebar]);
+
+	// We add a state so that we can do data-state="expanded" or "collapsed".
+	// This makes it easier to style the sidebar with Tailwind classes.
+	const state = open ? "expanded" : "collapsed";
+
+	const contextValue = React.useMemo<SidebarContext>(
+		() => ({
+			state,
+			open,
+			setOpen,
+			isMobile,
+			openMobile,
+			setOpenMobile,
+			toggleSidebar,
+		}),
+		[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+	);
+
+	return (
+		<SidebarContext.Provider value={contextValue}>
+			<TooltipProvider delayDuration={0}>
+				<div
+					data-slot="sidebar-wrapper"
+					style={
+						{
+							"--sidebar-width": SIDEBAR_WIDTH,
+							"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+							...style,
+						} as React.CSSProperties
+					}
+					className={cn(
+						"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+						className,
+					)}
+					{...props}
+				>
+					{children}
+				</div>
+			</TooltipProvider>
+		</SidebarContext.Provider>
+	);
+}
+
+function Sidebar({
+	side = "left",
+	variant = "sidebar",
+	collapsible = "offcanvas",
+	className,
+	children,
+	...props
+}: React.ComponentProps<"div"> & {
+	side?: "left" | "right";
+	variant?: "sidebar" | "floating" | "inset";
+	collapsible?: "offcanvas" | "icon" | "none";
+}) {
+	const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+	if (collapsible === "none") {
+		return (
+			<div
+				data-slot="sidebar"
+				className={cn(
+					"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+			</div>
+		);
+	}
+
+	if (isMobile) {
+		return (
+			<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+				<SheetContent
+					data-sidebar="sidebar"
+					data-slot="sidebar"
+					data-mobile="true"
+					className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+					style={
+						{
+							"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+						} as React.CSSProperties
+					}
+					side={side}
+				>
+					<SheetHeader className="sr-only">
+						<SheetTitle>Sidebar</SheetTitle>
+						<SheetDescription>Displays the mobile sidebar.</SheetDescription>
+					</SheetHeader>
+					<div className="flex h-full w-full flex-col">{children}</div>
+				</SheetContent>
+			</Sheet>
+		);
+	}
+
+	return (
+		<div
+			className="group peer text-sidebar-foreground hidden md:block"
+			data-state={state}
+			data-collapsible={state === "collapsed" ? collapsible : ""}
+			data-variant={variant}
+			data-side={side}
+			data-slot="sidebar"
+		>
+			{/* This is what handles the sidebar gap on desktop */}
+			<div
+				className={cn(
+					"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+					"group-data-[collapsible=offcanvas]:w-0",
+					"group-data-[side=right]:rotate-180",
+					variant === "floating" || variant === "inset"
+						? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+						: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
+				)}
+			/>
+			<div
+				className={cn(
+					"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+					side === "left"
+						? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+						: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+					// Adjust the padding for floating and inset variants.
+					variant === "floating" || variant === "inset"
+						? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+						: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+					className,
+				)}
+				{...props}
+			>
+				<div
+					data-sidebar="sidebar"
+					className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+				>
+					{children}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+function SidebarTrigger({
+	className,
+	onClick,
+	...props
+}: React.ComponentProps<typeof Button>) {
+	const { toggleSidebar } = useSidebar();
+
+	return (
+		<Button
+			data-sidebar="trigger"
+			data-slot="sidebar-trigger"
+			variant="ghost"
+			size="icon"
+			className={cn("h-7 w-7", className)}
+			onClick={(event) => {
+				onClick?.(event);
+				toggleSidebar();
+			}}
+			{...props}
+		>
+			<PanelLeftIcon />
+			<span className="sr-only">Toggle Sidebar</span>
+		</Button>
+	);
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+	const { toggleSidebar } = useSidebar();
+
+	return (
+		<button
+			data-sidebar="rail"
+			data-slot="sidebar-rail"
+			aria-label="Toggle Sidebar"
+			tabIndex={-1}
+			onClick={toggleSidebar}
+			title="Toggle Sidebar"
+			className={cn(
+				"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+				"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+				"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+				"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+				"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+				"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+	return (
+		<main
+			data-slot="sidebar-inset"
+			className={cn(
+				"bg-background relative flex w-full flex-1 flex-col",
+				"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarInput({
+	className,
+	...props
+}: React.ComponentProps<typeof Input>) {
+	return (
+		<Input
+			data-slot="sidebar-input"
+			data-sidebar="input"
+			className={cn("bg-background h-8 w-full shadow-none", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-header"
+			data-sidebar="header"
+			className={cn("flex flex-col gap-2 p-2", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-footer"
+			data-sidebar="footer"
+			className={cn("flex flex-col gap-2 p-2", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof Separator>) {
+	return (
+		<Separator
+			data-slot="sidebar-separator"
+			data-sidebar="separator"
+			className={cn("bg-sidebar-border mx-2 w-auto", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-content"
+			data-sidebar="content"
+			className={cn(
+				"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-group"
+			data-sidebar="group"
+			className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarGroupLabel({
+	className,
+	asChild = false,
+	...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot : "div";
+
+	return (
+		<Comp
+			data-slot="sidebar-group-label"
+			data-sidebar="group-label"
+			className={cn(
+				"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarGroupAction({
+	className,
+	asChild = false,
+	...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot : "button";
+
+	return (
+		<Comp
+			data-slot="sidebar-group-action"
+			data-sidebar="group-action"
+			className={cn(
+				"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				// Increases the hit area of the button on mobile.
+				"after:absolute after:-inset-2 md:after:hidden",
+				"group-data-[collapsible=icon]:hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarGroupContent({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-group-content"
+			data-sidebar="group-content"
+			className={cn("w-full text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+	return (
+		<ul
+			data-slot="sidebar-menu"
+			data-sidebar="menu"
+			className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+	return (
+		<li
+			data-slot="sidebar-menu-item"
+			data-sidebar="menu-item"
+			className={cn("group/menu-item relative", className)}
+			{...props}
+		/>
+	);
+}
+
+const sidebarMenuButtonVariants = cva(
+	"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+				outline:
+					"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+			},
+			size: {
+				default: "h-8 text-sm",
+				sm: "h-7 text-xs",
+				lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+function SidebarMenuButton({
+	asChild = false,
+	isActive = false,
+	variant = "default",
+	size = "default",
+	tooltip,
+	className,
+	...props
+}: React.ComponentProps<"button"> & {
+	asChild?: boolean;
+	isActive?: boolean;
+	tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+	const Comp = asChild ? Slot : "button";
+	const { isMobile, state } = useSidebar();
+
+	const button = (
+		<Comp
+			data-slot="sidebar-menu-button"
+			data-sidebar="menu-button"
+			data-size={size}
+			data-active={isActive}
+			className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+			{...props}
+		/>
+	);
+
+	if (!tooltip) {
+		return button;
+	}
+
+	if (typeof tooltip === "string") {
+		tooltip = {
+			children: tooltip,
+		};
+	}
+
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>{button}</TooltipTrigger>
+			<TooltipContent
+				side="right"
+				align="center"
+				hidden={state !== "collapsed" || isMobile}
+				{...tooltip}
+			/>
+		</Tooltip>
+	);
+}
+
+function SidebarMenuAction({
+	className,
+	asChild = false,
+	showOnHover = false,
+	...props
+}: React.ComponentProps<"button"> & {
+	asChild?: boolean;
+	showOnHover?: boolean;
+}) {
+	const Comp = asChild ? Slot : "button";
+
+	return (
+		<Comp
+			data-slot="sidebar-menu-action"
+			data-sidebar="menu-action"
+			className={cn(
+				"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				// Increases the hit area of the button on mobile.
+				"after:absolute after:-inset-2 md:after:hidden",
+				"peer-data-[size=sm]/menu-button:top-1",
+				"peer-data-[size=default]/menu-button:top-1.5",
+				"peer-data-[size=lg]/menu-button:top-2.5",
+				"group-data-[collapsible=icon]:hidden",
+				showOnHover &&
+					"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenuBadge({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-menu-badge"
+			data-sidebar="menu-badge"
+			className={cn(
+				"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+				"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+				"peer-data-[size=sm]/menu-button:top-1",
+				"peer-data-[size=default]/menu-button:top-1.5",
+				"peer-data-[size=lg]/menu-button:top-2.5",
+				"group-data-[collapsible=icon]:hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenuSkeleton({
+	className,
+	showIcon = false,
+	...props
+}: React.ComponentProps<"div"> & {
+	showIcon?: boolean;
+}) {
+	// Random width between 50 to 90%.
+	const width = React.useMemo(() => {
+		return `${Math.floor(Math.random() * 40) + 50}%`;
+	}, []);
+
+	return (
+		<div
+			data-slot="sidebar-menu-skeleton"
+			data-sidebar="menu-skeleton"
+			className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+			{...props}
+		>
+			{showIcon && (
+				<Skeleton
+					className="size-4 rounded-md"
+					data-sidebar="menu-skeleton-icon"
+				/>
+			)}
+			<Skeleton
+				className="h-4 max-w-(--skeleton-width) flex-1"
+				data-sidebar="menu-skeleton-text"
+				style={
+					{
+						"--skeleton-width": width,
+					} as React.CSSProperties
+				}
+			/>
+		</div>
+	);
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+	return (
+		<ul
+			data-slot="sidebar-menu-sub"
+			data-sidebar="menu-sub"
+			className={cn(
+				"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+				"group-data-[collapsible=icon]:hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenuSubItem({
+	className,
+	...props
+}: React.ComponentProps<"li">) {
+	return (
+		<li
+			data-slot="sidebar-menu-sub-item"
+			data-sidebar="menu-sub-item"
+			className={cn("group/menu-sub-item relative", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenuSubButton({
+	asChild = false,
+	size = "md",
+	isActive = false,
+	className,
+	...props
+}: React.ComponentProps<"a"> & {
+	asChild?: boolean;
+	size?: "sm" | "md";
+	isActive?: boolean;
+}) {
+	const Comp = asChild ? Slot : "a";
+
+	return (
+		<Comp
+			data-slot="sidebar-menu-sub-button"
+			data-sidebar="menu-sub-button"
+			data-size={size}
+			data-active={isActive}
+			className={cn(
+				"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+				"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+				size === "sm" && "text-xs",
+				size === "md" && "text-sm",
+				"group-data-[collapsible=icon]:hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Sidebar,
+	SidebarContent,
+	SidebarFooter,
+	SidebarGroup,
+	SidebarGroupAction,
+	SidebarGroupContent,
+	SidebarGroupLabel,
+	SidebarHeader,
+	SidebarInput,
+	SidebarInset,
+	SidebarMenu,
+	SidebarMenuAction,
+	SidebarMenuBadge,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarMenuSkeleton,
+	SidebarMenuSub,
+	SidebarMenuSubButton,
+	SidebarMenuSubItem,
+	SidebarProvider,
+	SidebarRail,
+	SidebarSeparator,
+	SidebarTrigger,
+	useSidebar,
+};
--- a/docs/components/ui/skeleton.tsx
+++ b/docs/components/ui/skeleton.tsx
@@ -1,12 +1,10 @@
 import { cn } from "@/lib/utils";

-function Skeleton({
-	className,
-	...props
-}: React.HTMLAttributes<HTMLDivElement>) {
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
 	return (
 		<div
-			className={cn("animate-pulse rounded-md bg-primary/10", className)}
+			data-slot="skeleton"
+			className={cn("bg-primary/10 animate-pulse rounded-md", className)}
 			{...props}
 		/>
 	);
--- a/docs/components/ui/slider.tsx
+++ b/docs/components/ui/slider.tsx
@@ -5,24 +5,59 @@ 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) => (
+function Slider({
+	className,
+	defaultValue,
+	value,
+	min = 0,
+	max = 100,
+	...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+	const _values = React.useMemo(
+		() =>
+			Array.isArray(value)
+				? value
+				: Array.isArray(defaultValue)
+					? defaultValue
+					: [min, max],
+		[value, defaultValue, min, max],
+	);
+
+	return (
 		<SliderPrimitive.Root
-		ref={ref}
+			data-slot="slider"
+			defaultValue={defaultValue}
+			value={value}
+			min={min}
+			max={max}
 			className={cn(
-			"relative flex w-full touch-none select-none items-center",
+				"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
 				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
+				data-slot="slider-track"
+				className={cn(
+					"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
+				)}
+			>
+				<SliderPrimitive.Range
+					data-slot="slider-range"
+					className={cn(
+						"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
+					)}
+				/>
 			</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" />
+			{Array.from({ length: _values.length }, (_, index) => (
+				<SliderPrimitive.Thumb
+					data-slot="slider-thumb"
+					key={index}
+					className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+				/>
+			))}
 		</SliderPrimitive.Root>
-));
-Slider.displayName = SliderPrimitive.Root.displayName;
+	);
+}

 export { Slider };
--- a/docs/components/ui/sonner.tsx
+++ b/docs/components/ui/sonner.tsx
@@ -1,9 +1,7 @@
 "use client";

 import { useTheme } from "next-themes";
-import { Toaster as Sonner } from "sonner";
-
-type ToasterProps = React.ComponentProps<typeof Sonner>;
+import { Toaster as Sonner, ToasterProps } from "sonner";

 const Toaster = ({ ...props }: ToasterProps) => {
 	const { theme = "system" } = useTheme();
@@ -18,9 +16,9 @@ const Toaster = ({ ...props }: ToasterProps) => {
 						"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",
+						"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground font-medium",
 					cancelButton:
-						"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+						"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground font-medium",
 				},
 			}}
 			{...props}
--- a/docs/components/ui/stepper.tsx
+++ b/docs/components/ui/stepper.tsx
@@ -1,41 +0,0 @@
-import { cn } from "@/lib/utils";
-import clsx from "clsx";
-import { Children, PropsWithChildren } from "react";
-
-export function Stepper({ children }: PropsWithChildren) {
-	const length = Children.count(children);
-
-	return (
-		<div className="flex flex-col">
-			{Children.map(children, (child, index) => {
-				return (
-					<div
-						className={cn(
-							"border-l pl-9 ml-3 relative",
-							clsx({
-								"pb-5 ": index < length - 1,
-							}),
-						)}
-					>
-						<div className="bg-muted w-8 h-8 text-xs font-medium rounded-md border flex items-center justify-center absolute -left-4 font-code">
-							{index + 1}
-						</div>
-						{child}
-					</div>
-				);
-			})}
-		</div>
-	);
-}
-
-export function StepperItem({
-	children,
-	title,
-}: PropsWithChildren & { title?: string }) {
-	return (
-		<div className="pt-0.5">
-			<h4 className="mt-0">{title}</h4>
-			<div>{children}</div>
-		</div>
-	);
-}
--- a/docs/components/ui/switch.tsx
+++ b/docs/components/ui/switch.tsx
@@ -1,29 +1,31 @@
 "use client";

 import * as React from "react";
-import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as SwitchPrimitive 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
+function Switch({
+	className,
+	...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+	return (
+		<SwitchPrimitive.Root
+			data-slot="switch"
 			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",
+				"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
 				className,
 			)}
 			{...props}
-		ref={ref}
 		>
-		<SwitchPrimitives.Thumb
+			<SwitchPrimitive.Thumb
+				data-slot="switch-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",
+					"bg-background pointer-events-none block size-4 rounded-full ring-0 shadow-lg transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
 				)}
 			/>
-	</SwitchPrimitives.Root>
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
+		</SwitchPrimitive.Root>
+	);
+}

 export { Switch };
--- a/docs/components/ui/table.tsx
+++ b/docs/components/ui/table.tsx
@@ -1,112 +1,108 @@
+"use client";
+
 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">
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+	return (
+		<div
+			data-slot="table-container"
+			className="relative w-full overflow-x-auto"
+		>
 			<table
-			ref={ref}
+				data-slot="table"
 				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";
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+	return (
+		<thead
+			data-slot="table-header"
+			className={cn("[&_tr]:border-b", className)}
+			{...props}
+		/>
+	);
+}

-const TableBody = React.forwardRef<
-	HTMLTableSectionElement,
-	React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+	return (
 		<tbody
-		ref={ref}
+			data-slot="table-body"
 			className={cn("[&_tr:last-child]:border-0", className)}
 			{...props}
 		/>
-));
-TableBody.displayName = "TableBody";
+	);
+}

-const TableFooter = React.forwardRef<
-	HTMLTableSectionElement,
-	React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+	return (
 		<tfoot
-		ref={ref}
+			data-slot="table-footer"
 			className={cn(
-			"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+				"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
 				className,
 			)}
 			{...props}
 		/>
-));
-TableFooter.displayName = "TableFooter";
+	);
+}

-const TableRow = React.forwardRef<
-	HTMLTableRowElement,
-	React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+	return (
 		<tr
-		ref={ref}
+			data-slot="table-row"
 			className={cn(
-			"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+				"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
 				className,
 			)}
 			{...props}
 		/>
-));
-TableRow.displayName = "TableRow";
+	);
+}

-const TableHead = React.forwardRef<
-	HTMLTableCellElement,
-	React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+	return (
 		<th
-		ref={ref}
+			data-slot="table-head"
 			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]",
+				"text-muted-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&: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) => (
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+	return (
 		<td
-		ref={ref}
+			data-slot="table-cell"
 			className={cn(
-			"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+				"p-2 align-middle whitespace-nowrap [&: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) => (
+function TableCaption({
+	className,
+	...props
+}: React.ComponentProps<"caption">) {
+	return (
 		<caption
-		ref={ref}
-		className={cn("mt-4 text-sm text-muted-foreground", className)}
+			data-slot="table-caption"
+			className={cn("text-muted-foreground mt-4 text-sm", className)}
 			{...props}
 		/>
-));
-TableCaption.displayName = "TableCaption";
+	);
+}

 export {
 	Table,
--- a/docs/components/ui/tabs.tsx
+++ b/docs/components/ui/tabs.tsx
@@ -5,51 +5,62 @@ import * as TabsPrimitive from "@radix-ui/react-tabs";

 import { cn } from "@/lib/utils";

-const Tabs = TabsPrimitive.Root;
+function Tabs({
+	className,
+	...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+	return (
+		<TabsPrimitive.Root
+			data-slot="tabs"
+			className={cn("flex flex-col gap-2", className)}
+			{...props}
+		/>
+	);
+}

-const TabsList = React.forwardRef<
-	React.ElementRef<typeof TabsPrimitive.List>,
-	React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
+function TabsList({
+	className,
+	...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+	return (
 		<TabsPrimitive.List
-		ref={ref}
+			data-slot="tabs-list"
 			className={cn(
-			"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+				"bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-1",
 				className,
 			)}
 			{...props}
 		/>
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
+	);
+}

-const TabsTrigger = React.forwardRef<
-	React.ElementRef<typeof TabsPrimitive.Trigger>,
-	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
+function TabsTrigger({
+	className,
+	...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+	return (
 		<TabsPrimitive.Trigger
-		ref={ref}
+			data-slot="tabs-trigger"
 			className={cn(
-			"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 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",
+				"data-[state=active]:bg-background data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring inline-flex flex-1 items-center justify-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 				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",
+function TabsContent({
 	className,
-		)}
+	...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+	return (
+		<TabsPrimitive.Content
+			data-slot="tabs-content"
+			className={cn("flex-1 outline-none", className)}
 			{...props}
 		/>
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
+	);
+}

 export { Tabs, TabsList, TabsTrigger, TabsContent };
--- a/docs/components/ui/textarea.tsx
+++ b/docs/components/ui/textarea.tsx
@@ -2,23 +2,17 @@ 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) => {
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
 	return (
 		<textarea
+			data-slot="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",
+				"border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
 				className,
 			)}
-				ref={ref}
 			{...props}
 		/>
 	);
-	},
-);
-Textarea.displayName = "Textarea";
+}

 export { Textarea };
--- a/docs/components/ui/toast.tsx
+++ b/docs/components/ui/toast.tsx
@@ -1,129 +0,0 @@
-"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,
-};
--- a/docs/components/ui/toaster.tsx
+++ b/docs/components/ui/toaster.tsx
@@ -1,35 +0,0 @@
-"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>
-	);
-}
--- a/docs/components/ui/toggle-group.tsx
+++ b/docs/components/ui/toggle-group.tsx
@@ -14,39 +14,53 @@ const ToggleGroupContext = React.createContext<
 	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) => (
+function ToggleGroup({
+	className,
+	variant,
+	size,
+	children,
+	...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+	VariantProps<typeof toggleVariants>) {
+	return (
 		<ToggleGroupPrimitive.Root
-		ref={ref}
-		className={cn("flex items-center justify-center gap-1", className)}
+			data-slot="toggle-group"
+			data-variant={variant}
+			data-size={size}
+			className={cn(
+				"group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+				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) => {
+function ToggleGroupItem({
+	className,
+	children,
+	variant,
+	size,
+	...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+	VariantProps<typeof toggleVariants>) {
 	const context = React.useContext(ToggleGroupContext);

 	return (
 		<ToggleGroupPrimitive.Item
-			ref={ref}
+			data-slot="toggle-group-item"
+			data-variant={context.variant || variant}
+			data-size={context.size || size}
 			className={cn(
 				toggleVariants({
 					variant: context.variant || variant,
 					size: context.size || size,
 				}),
+				"min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
 				className,
 			)}
 			{...props}
@@ -54,8 +68,6 @@ const ToggleGroupItem = React.forwardRef<
 			{children}
 		</ToggleGroupPrimitive.Item>
 	);
-});
-
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+}

 export { ToggleGroup, ToggleGroupItem };
--- a/docs/components/ui/toggle.tsx
+++ b/docs/components/ui/toggle.tsx
@@ -7,18 +7,18 @@ 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",
+	"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
 	{
 		variants: {
 			variant: {
 				default: "bg-transparent",
 				outline:
-					"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+					"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
 			},
 			size: {
-				default: "h-9 px-3",
-				sm: "h-8 px-2",
-				lg: "h-10 px-3",
+				default: "h-9 px-2 min-w-9",
+				sm: "h-8 px-1.5 min-w-8",
+				lg: "h-10 px-2.5 min-w-10",
 			},
 		},
 		defaultVariants: {
@@ -28,18 +28,20 @@ const toggleVariants = cva(
 	},
 );

-const Toggle = React.forwardRef<
-	React.ElementRef<typeof TogglePrimitive.Root>,
-	React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-		VariantProps<typeof toggleVariants>
->(({ className, variant, size, ...props }, ref) => (
+function Toggle({
+	className,
+	variant,
+	size,
+	...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+	VariantProps<typeof toggleVariants>) {
+	return (
 		<TogglePrimitive.Root
-		ref={ref}
+			data-slot="toggle"
 			className={cn(toggleVariants({ variant, size, className }))}
 			{...props}
 		/>
-));
-
-Toggle.displayName = TogglePrimitive.Root.displayName;
+	);
+}

 export { Toggle, toggleVariants };
--- a/docs/components/ui/tooltip.tsx
+++ b/docs/components/ui/tooltip.tsx
@@ -5,26 +5,57 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip";

 import { cn } from "@/lib/utils";

-const TooltipProvider = TooltipPrimitive.Provider;
+function TooltipProvider({
+	delayDuration = 0,
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+	return (
+		<TooltipPrimitive.Provider
+			data-slot="tooltip-provider"
+			delayDuration={delayDuration}
+			{...props}
+		/>
+	);
+}

-const Tooltip = TooltipPrimitive.Root;
+function Tooltip({
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+	return (
+		<TooltipProvider>
+			<TooltipPrimitive.Root data-slot="tooltip" {...props} />
+		</TooltipProvider>
+	);
+}

-const TooltipTrigger = TooltipPrimitive.Trigger;
+function TooltipTrigger({
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}

-const TooltipContent = React.forwardRef<
-	React.ElementRef<typeof TooltipPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+function TooltipContent({
+	className,
+	sideOffset = 0,
+	children,
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+	return (
+		<TooltipPrimitive.Portal>
 			<TooltipPrimitive.Content
-		ref={ref}
+				data-slot="tooltip-content"
 				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",
+					"bg-primary 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 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance",
 					className,
 				)}
 				{...props}
-	/>
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+			>
+				{children}
+				<TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+			</TooltipPrimitive.Content>
+		</TooltipPrimitive.Portal>
+	);
+}

 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
--- a/docs/content/docs/reference/options.mdx
+++ b/docs/content/docs/reference/options.mdx
@@ -5,5 +5,474 @@ description: Better Auth configuration options reference.

 List of all the available options for configuring Better Auth. See [Better Auth Options](https://github.com/better-auth/better-auth/blob/main/packages/better-auth/src/types/options.ts#L13).

+## `appName`
+
+The name of the application.
+
+```ts
+import { betterAuth } from "better-auth";
+export const auth = betterAuth({
+	appName: "My App",
+})
+```
+
+## `baseURL`
+
+Base URL for Better Auth. This is typically the root URL where your application server is hosted.
+
+```ts
+import { betterAuth } from "better-auth";
+export const auth = betterAuth({
+	baseURL: "https://example.com",
+})
+```
+
+If not explicitly set, the system will check for the environment variable `process.env.BETTER_AUTH_URL`. If not set, it will throw an error.
+
+## `basePath`
+
+Base path for Better Auth. This is typically the path where the Better Auth routes are mounted.
+
+```ts
+import { betterAuth } from "better-auth";
+export const auth = betterAuth({
+	basePath: "/api/auth",
+})
+```
+
+Default: `/api/auth`
+
+## `secret`
+
+The secret used for encryption, signing, and hashing.
+
+```ts
+import { betterAuth } from "better-auth";
+export const auth = betterAuth({
+	secret: "your-secret-key",
+})
+```
+
+By default, Better Auth will look for the following environment variables:
+- `process.env.BETTER_AUTH_SECRET`
+- `process.env.AUTH_SECRET`
+
+If none of these environment variables are set, it will default to `"better-auth-secret-123456789"`. In production, if it's not set, it will throw an error.
+
+You can generate a good secret using the following command:
+
+```bash
+openssl rand -base64 32
+```
+
+## `database`
+
+Database configuration for Better Auth.
+
+```ts
+import { betterAuth } from "better-auth";
+export const auth = betterAuth({
+	database: {
+		dialect: "postgres",
+		type: "postgres",
+		casing: "camel"
+	},
+})
+```
+
+Better Auth supports various database configurations including [PostgreSQL](/docs/adapters/postgresql), [MySQL](/docs/adapters/mysql), and [SQLite](/docs/adapters/sqlite).
+
+Read more about databases [here](/docs/concepts/database).
+
+## `secondaryStorage`
+
+Secondary storage configuration used to store session and rate limit data.
+
+```ts
+import { betterAuth } from "better-auth";
+import { redisStorage } from "better-auth/storage";
+
+export const auth = betterAuth({
+	secondaryStorage: redisStorage({
+		url: "redis://localhost:6379"
+	}),
+})
+```
+
+Read more about secondary storage [here](/docs/concepts/database#secondary-storage).
+
+## `emailVerification`
+
+Email verification configuration.
+
+```ts
+import { betterAuth } from "better-auth";
+export const auth = betterAuth({
+	emailVerification: {
+		sendVerificationEmail: async ({ user, url, token }) => {
+			// Send verification email to user
+		},
+		sendOnSignUp: true,
+		autoSignInAfterVerification: true,
+		expiresIn: 3600 // 1 hour
+	},
+})
+```
+
+- `sendVerificationEmail`: Function to send verification email
+- `sendOnSignUp`: Send verification email automatically after sign up (default: `false`)
+- `autoSignInAfterVerification`: Auto sign in the user after they verify their email
+- `expiresIn`: Number of seconds the verification token is valid for (default: `3600` seconds)
+
+## `emailAndPassword`
+
+Email and password authentication configuration.
+
+```ts
+import { betterAuth } from "better-auth";
+export const auth = betterAuth({
+	emailAndPassword: {
+		enabled: true,
+		disableSignUp: false,
+		requireEmailVerification: true,
+		minPasswordLength: 8,
+		maxPasswordLength: 128,
+		autoSignIn: true,
+		sendResetPassword: async ({ user, url, token }) => {
+			// Send reset password email
+		},
+		resetPasswordTokenExpiresIn: 3600, // 1 hour
+		password: {
+			hash: async (password) => {
+				// Custom password hashing
+				return hashedPassword;
+			},
+			verify: async ({ hash, password }) => {
+				// Custom password verification
+				return isValid;
+			}
+		}
+	},
+})
+```
+
+- `enabled`: Enable email and password authentication (default: `false`)
+- `disableSignUp`: Disable email and password sign up (default: `false`)
+- `requireEmailVerification`: Require email verification before a session can be created
+- `minPasswordLength`: Minimum password length (default: `8`)
+- `maxPasswordLength`: Maximum password length (default: `128`)
+- `autoSignIn`: Automatically sign in the user after sign up
+- `sendResetPassword`: Function to send reset password email
+- `resetPasswordTokenExpiresIn`: Number of seconds the reset password token is valid for (default: `3600` seconds)
+- `password`: Custom password hashing and verification functions
+
+## `socialProviders`
+
+Configure social login providers.
+
+```ts
+import { betterAuth } from "better-auth";
+export const auth = betterAuth({
+	socialProviders: {
+		google: {
+			clientId: "your-client-id",
+			clientSecret: "your-client-secret",
+			redirectUri: "https://example.com/api/auth/callback/google"
+		},
+		github: {
+			clientId: "your-client-id",
+			clientSecret: "your-client-secret",
+			redirectUri: "https://example.com/api/auth/callback/github"
+		}
+	},
+})
+```
+
+## `plugins`
+
+List of Better Auth plugins.
+
+```ts
+import { betterAuth } from "better-auth";
+import { emailOTP } from "better-auth/plugins";
+
+export const auth = betterAuth({
+	plugins: [
+		emailOTP({
+			sendVerificationOTP: async ({ email, otp, type }) => {
+				// Send OTP to user's email
+			}
+		})
+	],
+})
+```
+
+## `user`
+
+User configuration options.
+
+```ts
+import { betterAuth } from "better-auth";
+export const auth = betterAuth({
+	user: {
+		modelName: "users",
+		fields: {
+			email: "emailAddress",
+			name: "fullName"
+		},
+		additionalFields: {
+			customField: {
+				type: "string",
+				nullable: true
+			}
+		},
+		changeEmail: {
+			enabled: true,
+			sendChangeEmailVerification: async ({ user, newEmail, url, token }) => {
+				// Send change email verification
+			}
+		},
+		deleteUser: {
+			enabled: true,
+			sendDeleteAccountVerification: async ({ user, url, token }) => {
+				// Send delete account verification
+			},
+			beforeDelete: async (user) => {
+				// Perform actions before user deletion
+			},
+			afterDelete: async (user) => {
+				// Perform cleanup after user deletion
+			}
+		}
+	},
+})
+```
+
+- `modelName`: The model name for the user (default: `"user"`)
+- `fields`: Map fields to different column names
+- `additionalFields`: Additional fields for the user table
+- `changeEmail`: Configuration for changing email
+- `deleteUser`: Configuration for user deletion
+
+## `session`
+
+Session configuration options.
+
+```ts
+import { betterAuth } from "better-auth";
+export const auth = betterAuth({
+	session: {
+		modelName: "sessions",
+		fields: {
+			userId: "user_id"
+		},
+		expiresIn: 604800, // 7 days
+		updateAge: 86400, // 1 day
+		additionalFields: {
+			customField: {
+				type: "string",
+				nullable: true
+			}
+		},
+		storeSessionInDatabase: true,
+		preserveSessionInDatabase: false,
+		cookieCache: {
+			enabled: true,
+			maxAge: 300 // 5 minutes
+		}
+	},
+})
+```
+
+- `modelName`: The model name for the session (default: `"session"`)
+- `fields`: Map fields to different column names
+- `expiresIn`: Expiration time for the session token in seconds (default: `604800` - 7 days)
+- `updateAge`: How often the session should be refreshed in seconds (default: `86400` - 1 day)
+- `additionalFields`: Additional fields for the session table
+- `storeSessionInDatabase`: Store session in database when secondary storage is provided (default: `false`)
+- `preserveSessionInDatabase`: Preserve session records in database when deleted from secondary storage (default: `false`)
+- `cookieCache`: Enable caching session in cookie
+
+## `account`
+
+Account configuration options.
+
+```ts
+import { betterAuth } from "better-auth";
+export const auth = betterAuth({
+	account: {
+		modelName: "accounts",
+		fields: {
+			userId: "user_id"
+		},
+		accountLinking: {
+			enabled: true,
+			trustedProviders: ["google", "github", "email-password"],
+			allowDifferentEmails: false
+		}
+	},
+})
+```
+
+- `modelName`: The model name for the account
+- `fields`: Map fields to different column names
+- `accountLinking`: Configuration for account linking
+
+## `verification`
+
+Verification configuration options.
+
+```ts
+import { betterAuth } from "better-auth";
+export const auth = betterAuth({
+	verification: {
+		modelName: "verifications",
+		fields: {
+			userId: "user_id"
+		},
+		disableCleanup: false
+	},
+})
+```
+
+- `modelName`: The model name for the verification table
+- `fields`: Map fields to different column names
+- `disableCleanup`: Disable cleaning up expired values when a verification value is fetched
+
+## `advanced`
+
+Advanced configuration options.
+
+```ts
+import { betterAuth } from "better-auth";
+export const auth = betterAuth({
+	advanced: {
+		ipAddress: {
+			ipAddressHeaders: ["x-client-ip", "x-forwarded-for"],
+			disableIpTracking: false
+		},
+		useSecureCookies: true,
+		disableCSRFCheck: false,
+		crossSubDomainCookies: {
+			enabled: true,
+			additionalCookies: ["custom_cookie"],
+			domain: "example.com"
+		},
+		cookies: {
+			session_token: {
+				name: "custom_session_token",
+				attributes: {
+					httpOnly: true,
+					secure: true
+				}
+			}
+		},
+		defaultCookieAttributes: {
+			httpOnly: true,
+			secure: true
+		},
+		cookiePrefix: "myapp"
+	},
+})
+```
+
+- `ipAddress`: IP address configuration for rate limiting and session tracking
+- `useSecureCookies`: Use secure cookies (default: `false`)
+- `disableCSRFCheck`: Disable trusted origins check (⚠️ security risk)
+- `crossSubDomainCookies`: Configure cookies to be shared across subdomains
+- `cookies`: Customize cookie names and attributes
+- `defaultCookieAttributes`: Default attributes for all cookies
+- `cookiePrefix`: Prefix for cookies
+
+## `databaseHooks`
+
+Database lifecycle hooks for core operations.
+
+```ts
+import { betterAuth } from "better-auth";
+export const auth = betterAuth({
+	databaseHooks: {
+		user: {
+			create: {
+				before: async (user) => {
+					// Modify user data before creation
+					return { data: { ...user, customField: "value" } };
+				},
+				after: async (user) => {
+					// Perform actions after user creation
+				}
+			},
+			update: {
+				before: async (userData) => {
+					// Modify user data before update
+					return { data: { ...userData, updatedAt: new Date() } };
+				},
+				after: async (user) => {
+					// Perform actions after user update
+				}
+			}
+		},
+		session: {
+			// Session hooks
+		},
+		account: {
+			// Account hooks
+		},
+		verification: {
+			// Verification hooks
+		}
+	},
+})
+```
+
+## `onAPIError`
+
+API error handling configuration.
+
+```ts
+import { betterAuth } from "better-auth";
+export const auth = betterAuth({
+	onAPIError: {
+		throw: true,
+		onError: (error, ctx) => {
+			// Custom error handling
+			console.error("Auth error:", error);
+		},
+		errorURL: "/auth/error"
+	},
+})
+```
+
+- `throw`: Throw an error on API error (default: `false`)
+- `onError`: Custom error handler
+- `errorURL`: URL to redirect to on error (default: `/api/auth/error`)
+
+## `hooks`
+
+Request lifecycle hooks.
+
+```ts
+import { betterAuth } from "better-auth";
+export const auth = betterAuth({
+	hooks: {
+		before: async (request, ctx) => {
+			// Execute before processing the request
+		},
+		after: async (request, response, ctx) => {
+			// Execute after processing the request
+		}
+	},
+})
+```
+
+## `disabledPaths`
+
+Disable specific auth paths.
+
+```ts
+import { betterAuth } from "better-auth";
+export const auth = betterAuth({
+	disabledPaths: ["/api/auth/signup", "/api/auth/signin/email"],
+})
+```

-<AutoTypeTable path="./lib/auth.ts" name="BetterAuthOptions"  />
--- a/docs/hooks/use-mobile.ts
+++ b/docs/hooks/use-mobile.ts
@@ -0,0 +1,21 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+	const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+		undefined,
+	);
+
+	React.useEffect(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+
+	return !!isMobile;
+}
--- a/docs/hooks/use-toast.ts
+++ b/docs/hooks/use-toast.ts
@@ -1,191 +0,0 @@
-"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 {
-				for (const toast of state.toasts) {
-					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);
-	for (const listener of listeners) {
-		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 };
--- a/docs/lib/auth.ts
+++ b/docs/lib/auth.ts
@@ -1,3 +0,0 @@
-import { BetterAuthOptions } from "better-auth";
-
-export { type BetterAuthOptions };
--- a/docs/lib/source.ts
+++ b/docs/lib/source.ts
@@ -1,15 +1,13 @@
-import { changelogCollection, docs, meta } from "@/.source";
-import { createMDXSource } from "fumadocs-mdx";
+import { changelogCollection, docs } from "@/.source";
 import { loader } from "fumadocs-core/source";
-import { createOpenAPI } from "fumadocs-openapi/server";
+import { createMDXSource } from "fumadocs-mdx";

 export const source = loader({
 	baseUrl: "/docs",
-	source: createMDXSource(docs, meta),
+	source: docs.toFumadocsSource(),
 });
+
 export const changelogs = loader({
 	baseUrl: "/changelogs",
 	source: createMDXSource(changelogCollection),
 });
-
-export const openapi = createOpenAPI({});
--- a/docs/lib/utils.ts
+++ b/docs/lib/utils.ts
@@ -1,8 +1,10 @@
 import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
+
 export function cn(...inputs: ClassValue[]) {
 	return twMerge(clsx(inputs));
 }
+
 export function absoluteUrl(path: string) {
 	return `${process.env.NEXT_PUBLIC_APP_URL}${path}`;
 }
--- a/docs/next.config.mjs
+++ b/docs/next.config.mjs
@@ -1,9 +1,9 @@
 import { createMDX } from "fumadocs-mdx/next";

-export const withMDX = createMDX();
+const withMDX = createMDX();

-export default withMDX({
-	reactStrictMode: true,
+/** @type {import('next').NextConfig} */
+const config = {
 	redirects: async () => {
 		return [
 			{
@@ -43,7 +43,10 @@ export default withMDX({
 			},
 		],
 	},
+	reactStrictMode: true,
 	typescript: {
 		ignoreBuildErrors: true,
 	},
-});
+};
+
+export default withMDX(config);
--- a/docs/open-api.json
+++ b/docs/open-api.json
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,114 +1,82 @@
 {
-  "name": "docs",
+  "name": "docs2",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "build": "next build",
-    "dev": "next dev --turbo",
+    "dev": "next dev",
    "start": "next start",
-    "typecheck": "tsc --noEmit"
+    "postinstall": "fumadocs-mdx"
  },
  "dependencies": {
-    "@better-auth/utils": "0.2.3",
-    "@better-fetch/fetch": "catalog:",
-    "@codesandbox/sandpack-react": "^2.19.10",
    "@hookform/resolvers": "^3.9.1",
-    "@loglib/tracker": "^0.8.0",
-    "@octokit/rest": "^21.0.2",
-    "@radix-ui/react-accordion": "^1.2.1",
-    "@radix-ui/react-alert-dialog": "^1.1.2",
-    "@radix-ui/react-aspect-ratio": "^1.1.0",
-    "@radix-ui/react-avatar": "^1.1.1",
-    "@radix-ui/react-checkbox": "^1.1.2",
-    "@radix-ui/react-collapsible": "^1.1.1",
-    "@radix-ui/react-context-menu": "^2.2.2",
-    "@radix-ui/react-dialog": "^1.1.2",
-    "@radix-ui/react-dropdown-menu": "^2.1.2",
-    "@radix-ui/react-hover-card": "^1.1.2",
-    "@radix-ui/react-icons": "^1.3.2",
-    "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-menubar": "^1.1.2",
-    "@radix-ui/react-navigation-menu": "^1.2.1",
-    "@radix-ui/react-popover": "^1.1.2",
-    "@radix-ui/react-progress": "^1.1.0",
-    "@radix-ui/react-radio-group": "^1.2.1",
-    "@radix-ui/react-scroll-area": "^1.2.1",
-    "@radix-ui/react-select": "^2.1.2",
-    "@radix-ui/react-separator": "^1.1.0",
-    "@radix-ui/react-slider": "^1.2.1",
-    "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-switch": "^1.1.1",
-    "@radix-ui/react-tabs": "^1.1.1",
-    "@radix-ui/react-toast": "^1.2.2",
-    "@radix-ui/react-toggle": "^1.1.0",
-    "@radix-ui/react-toggle-group": "^1.1.0",
-    "@radix-ui/react-tooltip": "^1.1.4",
-    "@scalar/nextjs-api-reference": "^0.4.104",
-    "@shikijs/langs": "^3.1.0",
-    "@tabler/icons-react": "^3.24.0",
-    "@tsparticles/engine": "^3.7.1",
-    "@tsparticles/react": "^3.0.0",
-    "@tsparticles/slim": "^3.7.1",
-    "@types/better-sqlite3": "^7.6.12",
+    "@radix-ui/react-accordion": "^1.2.3",
+    "@radix-ui/react-alert-dialog": "^1.1.6",
+    "@radix-ui/react-aspect-ratio": "^1.1.2",
+    "@radix-ui/react-avatar": "^1.1.3",
+    "@radix-ui/react-checkbox": "^1.1.4",
+    "@radix-ui/react-collapsible": "^1.1.3",
+    "@radix-ui/react-context-menu": "^2.2.6",
+    "@radix-ui/react-dialog": "^1.1.6",
+    "@radix-ui/react-dropdown-menu": "^2.1.6",
+    "@radix-ui/react-hover-card": "^1.1.6",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-menubar": "^1.1.6",
+    "@radix-ui/react-navigation-menu": "^1.2.5",
+    "@radix-ui/react-popover": "^1.1.6",
+    "@radix-ui/react-progress": "^1.1.2",
+    "@radix-ui/react-radio-group": "^1.2.3",
+    "@radix-ui/react-scroll-area": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-separator": "^1.1.2",
+    "@radix-ui/react-slider": "^1.2.3",
+    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-switch": "^1.1.3",
+    "@radix-ui/react-tabs": "^1.1.3",
+    "@radix-ui/react-toggle": "^1.1.2",
+    "@radix-ui/react-toggle-group": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.1.8",
+    "@scalar/nextjs-api-reference": "^0.5.15",
    "@vercel/analytics": "^1.5.0",
-    "@vercel/og": "^0.6.4",
-    "better-auth": "workspace:*",
-    "better-sqlite3": "^11.6.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.0",
-    "cobe": "^0.6.3",
    "date-fns": "^3.6.0",
    "embla-carousel-react": "^8.5.1",
-    "framer-motion": "^11.13.1",
-    "fumadocs-core": "14.0.2",
-    "fumadocs-docgen": "^1.3.2",
+    "fumadocs-core": "15.0.15",
+    "fumadocs-docgen": "^2.0.0",
    "fumadocs-mdx": "11.5.6",
-    "fumadocs-openapi": "^6.2.0",
-    "fumadocs-twoslash": "^3.0.1",
-    "fumadocs-typescript": "^3.0.2",
-    "fumadocs-ui": "14.0.2",
-    "geist": "^1.3.1",
+    "fumadocs-typescript": "^3.1.0",
+    "fumadocs-ui": "15.0.15",
    "input-otp": "^1.4.1",
-    "jotai": "^2.10.3",
-    "js-beautify": "^1.15.1",
-    "lucide-react": "^0.435.0",
-    "mini-svg-data-uri": "^1.4.4",
-    "motion": "^10.18.0",
-    "next": "^15.2.0",
+    "jotai": "^2.12.1",
+    "lucide-react": "^0.477.0",
+    "motion": "^12.4.10",
+    "next": "15.2.0",
    "next-themes": "^0.3.0",
-    "prettier": "^3.4.2",
-    "prism-react-renderer": "^2.4.0",
-    "react": "^18.3.1",
-    "react-codesandboxer": "^3.1.5",
+    "prism-react-renderer": "^2.4.1",
+    "react": "^19.0.0",
    "react-day-picker": "8.10.1",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.0.0",
    "react-hook-form": "^7.54.0",
-    "react-markdown": "^9.0.1",
+    "react-markdown": "^10.1.0",
    "react-resizable-panels": "^2.1.7",
-    "react-use-measure": "^2.1.1",
    "recharts": "^2.14.1",
-    "rehype-highlight": "^7.0.1",
-    "rehype-mermaid": "^2.1.0",
-    "remark-codesandbox": "^0.10.1",
-    "shiki": "^1.24.0",
-    "sonner": "^1.7.0",
-    "tailwind-merge": "^2.5.5",
+    "rehype-highlight": "^7.0.2",
+    "sonner": "^2.0.1",
+    "tailwind-merge": "^3.0.2",
    "tailwindcss-animate": "^1.0.7",
-    "unist-util-visit": "^5.0.0",
-    "vaul": "^0.9.9",
-    "zod": "^3.23.8"
+    "vaul": "^1.1.2",
+    "zod": "^3.24.2"
  },
  "devDependencies": {
-    "@types/js-beautify": "^1.14.3",
+    "@tailwindcss/postcss": "^4.0.9",
    "@types/mdx": "^2.0.13",
-    "@types/node": "22.3.0",
-    "@types/react": "^18.3.14",
-    "@types/react-codesandboxer": "^3.1.4",
-    "@types/react-dom": "^18.3.2",
-    "autoprefixer": "^10.4.20",
-    "postcss": "^8.4.49",
-    "tailwindcss": "^3.4.16",
-    "typescript": "^5.7.2"
+    "@types/node": "22.13.8",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^4.0.12",
+    "typescript": "^5.8.2"
  }
 }
--- a/docs/postcss.config.js
+++ b/docs/postcss.config.js
@@ -1,6 +0,0 @@
-module.exports = {
-	plugins: {
-		tailwindcss: {},
-		autoprefixer: {},
-	},
-};
--- a/docs/postcss.config.mjs
+++ b/docs/postcss.config.mjs
@@ -0,0 +1,5 @@
+export default {
+	plugins: {
+		"@tailwindcss/postcss": {},
+	},
+};
--- a/docs/source.config.ts
+++ b/docs/source.config.ts
@@ -1,7 +1,25 @@
-import { defineCollections, defineDocs } from "fumadocs-mdx/config";
-import { defineConfig } from "fumadocs-mdx/config";
-import { remarkInstall } from "fumadocs-docgen";
+import {
+	defineDocs,
+	defineConfig,
+	defineCollections,
+} from "fumadocs-mdx/config";
 import { z } from "zod";
+import { remarkInstall } from "fumadocs-docgen";
+
+export const docs = defineDocs({
+	dir: "./content/docs",
+});
+
+export const changelogCollection = defineCollections({
+	type: "doc",
+	dir: "./content/changelogs",
+	schema: z.object({
+		title: z.string(),
+		description: z.string(),
+		date: z.date(),
+	}),
+});
+
 export default defineConfig({
 	mdxOptions: {
 		remarkPlugins: [
@@ -16,17 +34,3 @@ export default defineConfig({
 		],
 	},
 });
-
-export const changelogCollection = defineCollections({
-	type: "doc",
-	dir: "./content/changelogs",
-	schema: z.object({
-		title: z.string(),
-		description: z.string(),
-		date: z.date(),
-	}),
-});
-
-export const { docs, meta } = defineDocs({
-	dir: "./content/docs",
-});
--- a/docs/tailwind.config.js
+++ b/docs/tailwind.config.js
@@ -1,26 +1,10 @@
 import defaultTheme from "tailwindcss/defaultTheme";
-import { createPreset } from "fumadocs-ui/tailwind-plugin";
-const colors = require("tailwindcss/colors");
-const {
-	default: flattenColorPalette,
-} = require("tailwindcss/lib/util/flattenColorPalette");
-
-const svgToDataUri = require("mini-svg-data-uri");
+import flattenColorPalette from "tailwindcss/lib/util/flattenColorPalette";
+import svgToDataUri from "mini-svg-data-uri";

 /** @type {import('tailwindcss').Config} */
 export default {
 	darkMode: ["class"],
-	content: [
-		"./components/**/*.{ts,tsx}",
-		"./app/**/*.{ts,tsx}",
-		"./content/**/*.{md,mdx}",
-		"../node_modules/fumadocs-ui/dist/**/*.js",
-	],
-	presets: [
-		createPreset({
-			preset: "dusk",
-		}),
-	],
 	plugins: [
 		require("tailwindcss-animate"),
 		addVariablesForColors,
@@ -62,48 +46,6 @@ export default {
 				md: "calc(var(--radius) - 2px)",
 				sm: "calc(var(--radius) - 4px)",
 			},
-			colors: {
-				background: "hsl(var(--background))",
-				foreground: "hsl(var(--foreground))",
-				card: {
-					DEFAULT: "hsl(var(--card))",
-					foreground: "hsl(var(--card-foreground))",
-				},
-				popover: {
-					DEFAULT: "hsl(var(--popover))",
-					foreground: "hsl(var(--popover-foreground))",
-				},
-				primary: {
-					DEFAULT: "hsl(var(--primary))",
-					foreground: "hsl(var(--primary-foreground))",
-				},
-				secondary: {
-					DEFAULT: "hsl(var(--secondary))",
-					foreground: "hsl(var(--secondary-foreground))",
-				},
-				muted: {
-					DEFAULT: "hsl(var(--muted))",
-					foreground: "hsl(var(--muted-foreground))",
-				},
-				accent: {
-					DEFAULT: "hsl(var(--accent))",
-					foreground: "hsl(var(--accent-foreground))",
-				},
-				destructive: {
-					DEFAULT: "hsl(var(--destructive))",
-					foreground: "hsl(var(--destructive-foreground))",
-				},
-				border: "hsl(var(--border))",
-				input: "hsl(var(--input))",
-				ring: "hsl(var(--ring))",
-				chart: {
-					1: "hsl(var(--chart-1))",
-					2: "hsl(var(--chart-2))",
-					3: "hsl(var(--chart-3))",
-					4: "hsl(var(--chart-4))",
-					5: "hsl(var(--chart-5))",
-				},
-			},
 			keyframes: {
 				marquee: {
 					from: { transform: "translateX(0)" },
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -9,12 +9,14 @@
 		"forceConsistentCasingInFileNames": true,
 		"noEmit": true,
 		"esModuleInterop": true,
-		"module": "Preserve",
+		"module": "esnext",
+		"moduleResolution": "bundler",
 		"resolveJsonModule": true,
 		"isolatedModules": true,
 		"jsx": "preserve",
 		"incremental": true,
 		"paths": {
+			"@/.source": ["./.source/index.ts"],
 			"@/*": ["./*"]
 		},
 		"plugins": [
--- a/examples/expo-example/src/global.css
+++ b/examples/expo-example/src/global.css
@@ -2,8 +2,6 @@
@tailwind components;
@tailwind utilities;

-
-
@layer base {
 	:root {
 		--background: 0 0% 100%;
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
        "simple-git-hooks": "^2.11.1",
        "taze": "^0.18.0",
        "tinyglobby": "^0.2.10",
-        "turbo": "^2.3.3",
+        "turbo": "^2.4.4",
        "typescript": "^5.7.2"
    },
    "pnpm": {
--- a/packages/better-auth/src/client/react/react-store.ts
+++ b/packages/better-auth/src/client/react/react-store.ts
@@ -31,7 +31,7 @@ export function useStore<SomeStore extends Store>(
 	store: SomeStore,
 	{ keys, deps = [store, keys] }: UseStoreOptions<SomeStore> = {},
 ): StoreValue<SomeStore> {
-	let snapshotRef = useRef();
+	let snapshotRef = useRef<StoreValue<SomeStore>>(store.get());
 	snapshotRef.current = store.get();

 	let subscribe = useCallback(
--- a/packages/better-auth/src/plugins/jwt/jwt.test.ts
+++ b/packages/better-auth/src/plugins/jwt/jwt.test.ts
@@ -7,11 +7,7 @@ import { importJWK, jwtVerify } from "jose";

 describe("jwt", async (it) => {
 	const { auth, signInWithTestUser } = await getTestInstance({
-		plugins: [
-			jwt({
-				includeJWTOnHeaders: true,
-			}),
-		],
+		plugins: [jwt()],
 		logger: {
 			level: "error",
 		},
@@ -77,8 +73,10 @@ describe("jwt", async (it) => {

 		const jwks = await client.jwks();

-		const publicWebKey = await importJWK(jwks.data?.keys[0]);
-
+		const publicWebKey = await importJWK({
+			...jwks.data?.keys[0],
+			alg: "EdDSA",
+		});
 		const decoded = await jwtVerify(token.data?.token!, publicWebKey);

 		expect(decoded).toBeDefined();
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml