Revert "Unify workspace dropdowns; Update layouts (#458)"

This reverts commit 4bc8448a1d.

.claude/commands/feature-builder.md

@@ -55,10 +55,7 @@ create policy "projects_write" on public.projects for all
 
 Use `server-action-builder` skill for detailed patterns.
 
-**Rule: Services are decoupled from interfaces.** The service is pure logic that receives dependencies (database client,
+**Rule: Services are decoupled from interfaces.** The service is pure logic that receives dependencies (database client, etc.) as arguments — it never imports framework-specific modules. The server action is a thin adapter that resolves dependencies and calls the service. This means the same service can be called from a server action, an MCP tool, a CLI command, or a unit test with zero changes.
-etc.) as arguments — it never imports framework-specific modules. The server action is a thin adapter that resolves
-dependencies and calls the service. This means the same service can be called from a server action, an MCP tool, a CLI
-command, or a unit test with zero changes.
 
 Create in route's `_lib/server/` directory:
 

.claude/skills/playwright-e2e/makerkit.md

@@ -19,8 +19,8 @@ export class AuthPageObject {
   }
 
   async signOut() {
-    await this.page.click('[data-test="workspace-dropdown-trigger"]');
+    await this.page.click('[data-test="account-dropdown-trigger"]');
-    await this.page.click('[data-test="workspace-sign-out"]');
+    await this.page.click('[data-test="account-dropdown-sign-out"]');
   }
 
   async bootstrapUser(params: { email: string; password: string; name: string }) {
@@ -47,19 +47,9 @@ export class AuthPageObject {
 ## Common Selectors
 
 ```typescript
-// Workspace dropdown (sidebar header - combined account switcher + user menu)
+// Account dropdown
-'[data-test="workspace-dropdown-trigger"]'  // Opens the dropdown
+'[data-test="account-dropdown-trigger"]'
-'[data-test="workspace-switch-submenu"]'    // Sub-trigger for workspace switching
+'[data-test="account-dropdown-sign-out"]'
-'[data-test="workspace-switch-content"]'    // Sub-menu content with workspace list
-'[data-test="workspace-team-item"]'         // Individual team items in switcher
-'[data-test="create-team-trigger"]'         // Create team button in switcher
-'[data-test="workspace-sign-out"]'          // Sign out button
-'[data-test="workspace-settings-link"]'     // Settings link
-'[data-test="account-dropdown-display-name"]' // User display name (inside dropdown panel)
-
-// Opening the workspace switcher (two-step: open dropdown, then submenu)
-await page.click('[data-test="workspace-dropdown-trigger"]');
-await page.click('[data-test="workspace-switch-submenu"]');
 
 // Navigation
 '[data-test="sidebar-menu"]'

.claude/skills/react-form-builder/SKILL.md

@@ -126,7 +126,7 @@ export function CreateEntityForm() {
     reValidateMode: 'onChange',
   });
 
-  const onSubmit = (data: z.output<typeof CreateEntitySchema>) => {
+  const onSubmit = (data: z.infer<typeof CreateEntitySchema>) => {
     setError(false);
 
     startTransition(async () => {
@@ -147,7 +147,7 @@ export function CreateEntityForm() {
         <If condition={error}>
           <Alert variant="destructive">
             <AlertDescription>
-              <Trans i18nKey="common.errors.generic" />
+              <Trans i18nKey="common:errors.generic" />
             </AlertDescription>
           </Alert>
         </If>
@@ -177,9 +177,9 @@ export function CreateEntityForm() {
           data-test="submit-entity-button"
         >
           {pending ? (
-            <Trans i18nKey="common.creating" />
+            <Trans i18nKey="common:creating" />
           ) : (
-            <Trans i18nKey="common.create" />
+            <Trans i18nKey="common:create" />
           )}
         </Button>
       </Form>

.claude/skills/react-form-builder/components.md

@@ -145,7 +145,7 @@ import { toast } from '@kit/ui/sonner';
 <If condition={error}>
   <Alert variant="destructive">
     <AlertDescription>
-      <Trans i18nKey="common.errors.generic" />
+      <Trans i18nKey="common:errors.generic" />
     </AlertDescription>
   </Alert>
 </If>
@@ -160,9 +160,9 @@ import { toast } from '@kit/ui/sonner';
   data-test="submit-button"
 >
   {pending ? (
-    <Trans i18nKey="common.submitting" />
+    <Trans i18nKey="common:submitting" />
   ) : (
-    <Trans i18nKey="common.submit" />
+    <Trans i18nKey="common:submit" />
   )}
 </Button>
 ```
@@ -199,7 +199,7 @@ export function MyForm() {
     mode: 'onChange',
   });
 
-  const onSubmit = (data: z.output<typeof MySchema>) => {
+  const onSubmit = (data: z.infer<typeof MySchema>) => {
     setError(false);
 
     startTransition(async () => {
@@ -220,7 +220,7 @@ export function MyForm() {
         <If condition={error}>
           <Alert variant="destructive">
             <AlertDescription>
-              <Trans i18nKey="common.errors.generic" />
+              <Trans i18nKey="common:errors.generic" />
             </AlertDescription>
           </Alert>
         </If>

.claude/skills/server-action-builder/SKILL.md

@@ -17,21 +17,19 @@ Create validation schema in `_lib/schemas/`:
 
 ```typescript
 // _lib/schemas/feature.schema.ts
-import * as z from 'zod';
+import { z } from 'zod';
 
 export const CreateFeatureSchema = z.object({
   name: z.string().min(1, 'Name is required'),
   accountId: z.string().uuid('Invalid account ID'),
 });
 
-export type CreateFeatureInput = z.output<typeof CreateFeatureSchema>;
+export type CreateFeatureInput = z.infer<typeof CreateFeatureSchema>;
 ```
 
 ### Step 2: Create Service Layer
 
-**North star: services are decoupled from their interface.** The service is pure logic — it receives a database client
+**North star: services are decoupled from their interface.** The service is pure logic — it receives a database client as a dependency, never imports one. This means the same service works whether called from a server action, an MCP tool, a CLI command, or a plain unit test.
-as a dependency, never imports one. This means the same service works whether called from a server action, an MCP tool,
-a CLI command, or a plain unit test.
 
 Create service in `_lib/server/`:
 
@@ -64,13 +62,11 @@ class FeatureService {
 }
 ```
 
-The service never calls `getSupabaseServerClient()` — the caller provides the client. This keeps the service testable (
+The service never calls `getSupabaseServerClient()` — the caller provides the client. This keeps the service testable (pass a mock client) and reusable (any interface can supply its own client).
-pass a mock client) and reusable (any interface can supply its own client).
 
 ### Step 3: Create Server Action (Thin Adapter)
 
-The action is a **thin adapter** — it resolves dependencies (client, logger) and delegates to the service. No business
+The action is a **thin adapter** — it resolves dependencies (client, logger) and delegates to the service. No business logic lives here.
-logic lives here.
 
 Create action in `_lib/server/server-actions.ts`:
 
@@ -111,18 +107,13 @@ export const createFeatureAction = enhanceAction(
 
 ## Key Patterns
 
-1. **Services are pure, interfaces are thin adapters.** The service contains all business logic. The server action (or
+1. **Services are pure, interfaces are thin adapters.** The service contains all business logic. The server action (or MCP tool, or CLI command) is glue code that resolves dependencies and calls the service. If an MCP tool and a server action do the same thing, they call the same service function.
-   MCP tool, or CLI command) is glue code that resolves dependencies and calls the service. If an MCP tool and a server
+2. **Inject dependencies, don't import them in services.** Services receive their database client, logger, or any I/O capability as constructor arguments — never by importing framework-specific modules. This keeps them testable with stubs and reusable across interfaces.
-   action do the same thing, they call the same service function.
-2. **Inject dependencies, don't import them in services.** Services receive their database client, logger, or any I/O
-   capability as constructor arguments — never by importing framework-specific modules. This keeps them testable with
-   stubs and reusable across interfaces.
 3. **Schema in separate file** - Reusable between client and server
 4. **Logging** - Always log before and after operations
 5. **Revalidation** - Use `revalidatePath` after mutations
 6. **Trust RLS** - Don't add manual auth checks (RLS handles it)
-7. **Testable in isolation** - Because services accept their dependencies, you can test them with a mock client and no
+7. **Testable in isolation** - Because services accept their dependencies, you can test them with a mock client and no running infrastructure
-   running infrastructure
 
 ## File Structure
 

.claude/skills/server-action-builder/reference.md

@@ -29,8 +29,8 @@ export const myAction = enhanceAction(
 ### Handler Parameters
 
 | Parameter | Type | Description |
-|-----------|--------------------|------------------------------------|
+|-----------|------|-------------|
-| `data`    | `z.output<Schema>` | Validated input data               |
+| `data` | `z.infer<Schema>` | Validated input data |
 | `user` | `User` | Authenticated user (if auth: true) |
 
 ## enhanceRouteHandler API
@@ -69,7 +69,7 @@ export const GET = enhanceRouteHandler(
 ## Common Zod Patterns
 
 ```typescript
-import * as z from 'zod';
+import { z } from 'zod';
 
 // Basic schema
 export const CreateItemSchema = z.object({

.claude/skills/service-builder/SKILL.md

@@ -9,9 +9,7 @@ You are an expert at building pure, testable services that are decoupled from th
 
 ## North Star
 
-**Every service is decoupled from its interface (I/O).** A service takes plain data in, does work, and returns plain
+**Every service is decoupled from its interface (I/O).** A service takes plain data in, does work, and returns plain data out. It has no knowledge of whether it was called from an MCP tool, a server action, a CLI command, a route handler, or a test. The caller is a thin adapter that resolves dependencies and delegates.
-data out. It has no knowledge of whether it was called from an MCP tool, a server action, a CLI command, a route
-handler, or a test. The caller is a thin adapter that resolves dependencies and delegates.
 
 ## Workflow
 
@@ -23,7 +21,7 @@ Start with the input/output types. These are plain TypeScript — no framework t
 
 ```typescript
 // _lib/schemas/project.schema.ts
-import * as z from 'zod';
+import { z } from 'zod';
 
 export const CreateProjectSchema = z.object({
   name: z.string().min(1),
@@ -42,8 +40,7 @@ export interface Project {
 
 ### Step 2: Build the Service
 
-The service receives all dependencies through its constructor. It never imports framework-specific modules (
+The service receives all dependencies through its constructor. It never imports framework-specific modules (`getSupabaseServerClient`, `getLogger`, `revalidatePath`, etc.).
-`getSupabaseServerClient`, `getLogger`, `revalidatePath`, etc.).
 
 ```typescript
 // _lib/server/project.service.ts
@@ -98,8 +95,7 @@ class ProjectService {
 
 ### Step 3: Write Thin Adapters
 
-Each interface is a thin adapter — it resolves dependencies, calls the service, and handles interface-specific
+Each interface is a thin adapter — it resolves dependencies, calls the service, and handles interface-specific concerns (revalidation, redirects, MCP formatting, CLI output).
-concerns (revalidation, redirects, MCP formatting, CLI output).
 
 **Server Action adapter:**
 
@@ -238,25 +234,20 @@ describe('ProjectService', () => {
 
 ## Rules
 
-1. **Services are pure functions over data.** Plain objects/primitives in, plain objects/primitives out. No `Request`/
+1. **Services are pure functions over data.** Plain objects/primitives in, plain objects/primitives out. No `Request`/`Response`, no MCP context, no `FormData`.
-   `Response`, no MCP context, no `FormData`.
 
-2. **Inject dependencies, never import them.** The service receives its database client, storage client, or any I/O
+2. **Inject dependencies, never import them.** The service receives its database client, storage client, or any I/O capability as a constructor argument. Never call `getSupabaseServerClient()` inside a service.
-   capability as a constructor argument. Never call `getSupabaseServerClient()` inside a service.
 
-3. **Adapters are trivial glue.** A server action resolves the client, calls the service, and handles `revalidatePath`.
+3. **Adapters are trivial glue.** A server action resolves the client, calls the service, and handles `revalidatePath`. An MCP tool resolves the client, calls the service, and formats the response. No business logic in adapters.
-   An MCP tool resolves the client, calls the service, and formats the response. No business logic in adapters.
 
-4. **One service, many callers.** If two interfaces do the same thing, they call the same service function. Duplicating
+4. **One service, many callers.** If two interfaces do the same thing, they call the same service function. Duplicating logic is a violation.
-   logic is a violation.
 
-5. **Testable in isolation.** Pass a mock client, assert the output. If you need a running database to test a service,
+5. **Testable in isolation.** Pass a mock client, assert the output. If you need a running database to test a service, refactor until you don't.
-   refactor until you don't.
 
 ## What Goes Where
 
 | Concern | Location | Example |
-|------------------------|-------------------------------------------|-------------------------------------------|
+|---------|----------|---------|
 | Input validation (Zod) | `_lib/schemas/` | `CreateProjectSchema` |
 | Business logic | `_lib/server/*.service.ts` | `ProjectService.create()` |
 | Auth check | Adapter (`enhanceAction({ auth: true })`) | Server action wrapper |
@@ -314,5 +305,4 @@ const result = await client.from('projects').insert(...).select().single();
 
 ## Reference
 
-See `[Examples](examples.md)` for more patterns including services with multiple dependencies, services that compose
+See `[Examples](examples.md)` for more patterns including services with multiple dependencies, services that compose other services, and testing strategies.
-other services, and testing strategies.

.github/workflows/workflow.yml

@@ -3,7 +3,7 @@ on:
   push:
     branches: [ main ]
   pull_request:
-    branches: [ main, v3 ]
+    branches: [ main ]
 jobs:
   typescript:
     name: ʦ TypeScript

.junie/guidelines.md

@@ -556,8 +556,8 @@ function MyFeaturePage() {
   return (
     <>
       <MyFeatureHeader
-        title={<Trans i18nKey={'common.routes.myFeature'} />}
+        title={<Trans i18nKey={'common:routes.myFeature'} />}
-        description={<Trans i18nKey={'common.myFeatureDescription'} />}
+        description={<Trans i18nKey={'common:myFeatureDescription'} />}
       />
 
       <PageBody>
@@ -830,7 +830,7 @@ import { ProfileAvatar } from '@kit/ui/profile-avatar';
 ## Core Shadcn UI Components
 
 | Component | Description | Import Path |
-|------------------|-------------------------------------------|-------------------------------------------------------------------------------------------------|
+|-----------|-------------|-------------|
 | `Accordion` | Expandable/collapsible content sections | `@kit/ui/accordion` [accordion.tsx](mdc:packages/ui/src/shadcn/accordion.tsx) |
 | `AlertDialog` | Modal dialog for important actions | `@kit/ui/alert-dialog` [alert-dialog.tsx](mdc:packages/ui/src/shadcn/alert-dialog.tsx) |
 | `Alert` | Status/notification messages | `@kit/ui/alert` [alert.tsx](mdc:packages/ui/src/shadcn/alert.tsx) |
@@ -856,7 +856,7 @@ import { ProfileAvatar } from '@kit/ui/profile-avatar';
 | `Select` | Dropdown selection menu | `@kit/ui/select` [select.tsx](mdc:packages/ui/src/shadcn/select.tsx) |
 | `Separator` | Visual divider between content | `@kit/ui/separator` [separator.tsx](mdc:packages/ui/src/shadcn/separator.tsx) |
 | `Sheet` | Sliding panel from screen edge | `@kit/ui/sheet` [sheet.tsx](mdc:packages/ui/src/shadcn/sheet.tsx) |
-| `Sidebar`        | Advanced sidebar navigation               | `@kit/ui/sidebar` [sidebar.tsx](mdc:packages/ui/src/shadcn/sidebar.tsx)                         |
+| `Sidebar` | Advanced sidebar navigation | `@kit/ui/shadcn-sidebar` [sidebar.tsx](mdc:packages/ui/src/shadcn/sidebar.tsx) |
 | `Skeleton` | Loading placeholder | `@kit/ui/skeleton` [skeleton.tsx](mdc:packages/ui/src/shadcn/skeleton.tsx) |
 | `Switch` | Toggle control | `@kit/ui/switch` [switch.tsx](mdc:packages/ui/src/shadcn/switch.tsx) |
 | `Toast` | Toaster | `@kit/ui/sonner` [sonner.tsx](mdc:packages/ui/src/shadcn/sonner.tsx) |
@@ -920,7 +920,7 @@ Zod schemas should be defined in the `schema` folder and exported, so we can reu
 
 ```tsx
 // _lib/schema/create-note.schema.ts
-import * as z from 'zod';
+import { z } from 'zod';
 
 export const CreateNoteSchema = z.object({
   title: z.string().min(1),
@@ -935,7 +935,7 @@ Server Actions [server-actions.mdc](mdc:.cursor/rules/server-actions.mdc) can he
 ```tsx
 'use server';
 
-import * as z from 'zod';
+import { z } from 'zod';
 import { enhanceAction } from '@kit/next/actions';
 import { CreateNoteSchema } from '../schema/create-note.schema';
 
@@ -965,7 +965,7 @@ Then create a client component to handle the form submission:
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
-import * as z from 'zod';
+import { z } from 'zod';
 import { Textarea } from '@kit/ui/textarea';
 import { Input } from '@kit/ui/input';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@kit/ui/form';
@@ -1436,7 +1436,7 @@ You always must use `(security_invoker = true)` for views.
 ```tsx
 'use server';
 
-import * as z from 'zod';
+import { z } from 'zod';
 import { enhanceAction } from '@kit/next/actions';
 import { EntitySchema } from '../entity.schema.ts`;
 
@@ -1463,7 +1463,7 @@ export const myServerAction = enhanceAction(
 - To create API routes (route.ts), always use the `enhanceRouteHandler` function from the "@kit/supabase/routes" package. [index.ts](mdc:packages/next/src/routes/index.ts)
 
 ```tsx
-import * as z from 'zod';
+import { z } from 'zod';
 import { enhanceRouteHandler } from '@kit/next/routes';
 import { NextResponse } from 'next/server';
 

.npmrc

@@ -3,6 +3,7 @@ dedupe-peer-dependents=true
 use-lockfile-v6=true
 resolution-mode=highest
 package-manager-strict=false
+public-hoist-pattern[]=*i18next*
 public-hoist-pattern[]=*eslint*
 public-hoist-pattern[]=*prettier*
 public-hoist-pattern[]=*require-in-the-middle*

AGENTS.md

@@ -40,8 +40,8 @@ pnpm format:fix                   # Format code
 ## Key Patterns (Quick Reference)
 
 | Pattern | Import | Details |
-|----------------|--------------------------------------------------------------|-------------------------------|
+|---------|--------|---------|
-| Server Actions | `authActionClient` from `@kit/next/safe-action`              | `packages/next/AGENTS.md`     |
+| Server Actions | `enhanceAction` from `@kit/next/actions` | `packages/next/AGENTS.md` |
 | Route Handlers | `enhanceRouteHandler` from `@kit/next/routes` | `packages/next/AGENTS.md` |
 | Server Client | `getSupabaseServerClient` from `@kit/supabase/server-client` | `packages/supabase/AGENTS.md` |
 | UI Components | `@kit/ui/{component}` | `packages/ui/AGENTS.md` |

apps/dev-tool/app/components/components/alert-dialog-story.tsx

@@ -120,7 +120,9 @@ export function AlertDialogStory() {
 
   const generateCode = () => {
     let code = `<AlertDialog>\n`;
-    code += `  <AlertDialogTrigger render={<Button variant="${controls.triggerVariant}">${controls.triggerText}</Button>} />\n`;
+    code += `  <AlertDialogTrigger asChild>\n`;
+    code += `    <Button variant="${controls.triggerVariant}">${controls.triggerText}</Button>\n`;
+    code += `  </AlertDialogTrigger>\n`;
     code += `  <AlertDialogContent>\n`;
     code += `    <AlertDialogHeader>\n`;
 
@@ -177,14 +179,11 @@ export function AlertDialogStory() {
   const renderPreview = () => {
     return (
       <AlertDialog>
-        <AlertDialogTrigger
+        <AlertDialogTrigger asChild>
-          render={
           <Button variant={controls.triggerVariant}>
             {controls.triggerText}
           </Button>
-          }
+        </AlertDialogTrigger>
-        />
-
         <AlertDialogContent>
           <AlertDialogHeader>
             {controls.withIcon ? (
@@ -342,11 +341,11 @@ export function AlertDialogStory() {
         <CardContent className="space-y-4">
           <div className="flex flex-wrap gap-3">
             <AlertDialog>
-              <AlertDialogTrigger
+              <AlertDialogTrigger asChild>
-                render={<Button variant="destructive" size="sm" />}
+                <Button variant="destructive" size="sm">
-              >
                   <Trash2 className="mr-2 h-4 w-4" />
                   Delete Item
+                </Button>
               </AlertDialogTrigger>
               <AlertDialogContent>
                 <AlertDialogHeader>
@@ -371,9 +370,11 @@ export function AlertDialogStory() {
             </AlertDialog>
 
             <AlertDialog>
-              <AlertDialogTrigger render={<Button variant="outline" />}>
+              <AlertDialogTrigger asChild>
+                <Button variant="outline">
                   <LogOut className="mr-2 h-4 w-4" />
                   Sign Out
+                </Button>
               </AlertDialogTrigger>
               <AlertDialogContent>
                 <AlertDialogHeader>
@@ -396,9 +397,11 @@ export function AlertDialogStory() {
             </AlertDialog>
 
             <AlertDialog>
-              <AlertDialogTrigger render={<Button variant="outline" />}>
+              <AlertDialogTrigger asChild>
+                <Button variant="outline">
                   <UserX className="mr-2 h-4 w-4" />
                   Remove User
+                </Button>
               </AlertDialogTrigger>
               <AlertDialogContent>
                 <AlertDialogHeader>
@@ -435,9 +438,11 @@ export function AlertDialogStory() {
         <CardContent className="space-y-4">
           <div className="flex flex-wrap gap-3">
             <AlertDialog>
-              <AlertDialogTrigger render={<Button variant="outline" />}>
+              <AlertDialogTrigger asChild>
+                <Button variant="outline">
                   <Archive className="mr-2 h-4 w-4" />
                   Archive Project
+                </Button>
               </AlertDialogTrigger>
               <AlertDialogContent>
                 <AlertDialogHeader>
@@ -460,9 +465,11 @@ export function AlertDialogStory() {
             </AlertDialog>
 
             <AlertDialog>
-              <AlertDialogTrigger render={<Button />}>
+              <AlertDialogTrigger asChild>
+                <Button>
                   <Download className="mr-2 h-4 w-4" />
                   Export Data
+                </Button>
               </AlertDialogTrigger>
               <AlertDialogContent>
                 <AlertDialogHeader>
@@ -486,9 +493,11 @@ export function AlertDialogStory() {
             </AlertDialog>
 
             <AlertDialog>
-              <AlertDialogTrigger render={<Button variant="outline" />}>
+              <AlertDialogTrigger asChild>
+                <Button variant="outline">
                   <RefreshCw className="mr-2 h-4 w-4" />
                   Reset Settings
+                </Button>
               </AlertDialogTrigger>
               <AlertDialogContent>
                 <AlertDialogHeader>
@@ -526,11 +535,11 @@ export function AlertDialogStory() {
             <div className="space-y-3">
               <h4 className="text-sm font-semibold">Error/Destructive</h4>
               <AlertDialog>
-                <AlertDialogTrigger
+                <AlertDialogTrigger asChild>
-                  render={<Button variant="destructive" size="sm" />}
+                  <Button variant="destructive" size="sm">
-                >
                     <Trash2 className="mr-2 h-4 w-4" />
                     Delete Forever
+                  </Button>
                 </AlertDialogTrigger>
                 <AlertDialogContent>
                   <AlertDialogHeader>
@@ -558,11 +567,11 @@ export function AlertDialogStory() {
             <div className="space-y-3">
               <h4 className="text-sm font-semibold">Warning</h4>
               <AlertDialog>
-                <AlertDialogTrigger
+                <AlertDialogTrigger asChild>
-                  render={<Button variant="outline" size="sm" />}
+                  <Button variant="outline" size="sm">
-                >
                     <AlertTriangle className="mr-2 h-4 w-4" />
                     Unsaved Changes
+                  </Button>
                 </AlertDialogTrigger>
                 <AlertDialogContent>
                   <AlertDialogHeader>
@@ -588,11 +597,11 @@ export function AlertDialogStory() {
             <div className="space-y-3">
               <h4 className="text-sm font-semibold">Info</h4>
               <AlertDialog>
-                <AlertDialogTrigger
+                <AlertDialogTrigger asChild>
-                  render={<Button variant="outline" size="sm" />}
+                  <Button variant="outline" size="sm">
-                >
                     <Share className="mr-2 h-4 w-4" />
                     Share Publicly
+                  </Button>
                 </AlertDialogTrigger>
                 <AlertDialogContent>
                   <AlertDialogHeader>
@@ -618,9 +627,11 @@ export function AlertDialogStory() {
             <div className="space-y-3">
               <h4 className="text-sm font-semibold">Success</h4>
               <AlertDialog>
-                <AlertDialogTrigger render={<Button size="sm" />}>
+                <AlertDialogTrigger asChild>
+                  <Button size="sm">
                     <Download className="mr-2 h-4 w-4" />
                     Complete Setup
+                  </Button>
                 </AlertDialogTrigger>
                 <AlertDialogContent>
                   <AlertDialogHeader>

apps/dev-tool/app/components/components/button-story.tsx

@@ -33,6 +33,7 @@ interface ButtonControls {
   loading: boolean;
   withIcon: boolean;
   fullWidth: boolean;
+  asChild: boolean;
 }
 
 const variantOptions = [
@@ -67,6 +68,7 @@ export function ButtonStory() {
     loading: false,
     withIcon: false,
     fullWidth: false,
+    asChild: false,
   });
 
   const generateCode = () => {
@@ -75,12 +77,14 @@ export function ButtonStory() {
         variant: controls.variant,
         size: controls.size,
         disabled: controls.disabled,
+        asChild: controls.asChild,
         className: controls.fullWidth ? 'w-full' : '',
       },
       {
         variant: 'default',
         size: 'default',
         disabled: false,
+        asChild: false,
         className: '',
       },
     );
@@ -190,6 +194,15 @@ export function ButtonStory() {
           onCheckedChange={(checked) => updateControl('fullWidth', checked)}
         />
       </div>
+
+      <div className="flex items-center justify-between">
+        <Label htmlFor="asChild">As Child</Label>
+        <Switch
+          id="asChild"
+          checked={controls.asChild}
+          onCheckedChange={(checked) => updateControl('asChild', checked)}
+        />
+      </div>
     </>
   );
 

apps/dev-tool/app/components/components/calendar-story.tsx

@@ -276,11 +276,11 @@ export default function CalendarStory() {
         <Card>
           <CardContent className="flex justify-center pt-6">
             <Popover>
-              <PopoverTrigger
+              <PopoverTrigger asChild>
-                render={<Button variant="outline" className="justify-start" />}
+                <Button variant="outline" className="justify-start">
-              >
                   <CalendarIcon className="mr-2 h-4 w-4" />
                   Pick a date
+                </Button>
               </PopoverTrigger>
               <PopoverContent className="w-auto p-0" align="start">
                 <Calendar

apps/dev-tool/app/components/components/card-button-story.tsx

@@ -320,12 +320,10 @@ export function CardButtonStory() {
                 </thead>
                 <tbody>
                   <tr className="border-b">
-                    <td className="p-3 font-mono text-sm">render</td>
+                    <td className="p-3 font-mono text-sm">asChild</td>
-                    <td className="p-3 font-mono text-sm">
+                    <td className="p-3 font-mono text-sm">boolean</td>
-                      React.ReactElement
+                    <td className="p-3 font-mono text-sm">false</td>
-                    </td>
+                    <td className="p-3">Render as child element</td>
-                    <td className="p-3 font-mono text-sm">-</td>
-                    <td className="p-3">Compose with a custom element</td>
                   </tr>
                   <tr className="border-b">
                     <td className="p-3 font-mono text-sm">className</td>

apps/dev-tool/app/components/components/dialog-story.tsx

@@ -139,8 +139,8 @@ export function DialogStory() {
     });
 
     let code = `<Dialog>\n`;
-    code += `  <DialogTrigger render={<Button variant="${controls.triggerVariant}" />}>\n`;
+    code += `  <DialogTrigger asChild>\n`;
-    code += `    ${controls.triggerText}\n`;
+    code += `    <Button variant="${controls.triggerVariant}">${controls.triggerText}</Button>\n`;
     code += `  </DialogTrigger>\n`;
     code += `  <DialogContent${contentPropsString}>\n`;
     code += `    <DialogHeader>\n`;
@@ -182,8 +182,8 @@ export function DialogStory() {
 
     if (controls.withFooter) {
       code += `    <DialogFooter>\n`;
-      code += `      <DialogClose render={<Button variant="outline" />}>\n`;
+      code += `      <DialogClose asChild>\n`;
-      code += `        Cancel\n`;
+      code += `        <Button variant="outline">Cancel</Button>\n`;
       code += `      </DialogClose>\n`;
       code += `      <Button>Save Changes</Button>\n`;
       code += `    </DialogFooter>\n`;
@@ -198,8 +198,10 @@ export function DialogStory() {
   const renderPreview = () => {
     return (
       <Dialog>
-        <DialogTrigger render={<Button variant={controls.triggerVariant} />}>
+        <DialogTrigger asChild>
+          <Button variant={controls.triggerVariant}>
             {controls.triggerText}
+          </Button>
         </DialogTrigger>
         <DialogContent
           className={cn(
@@ -269,8 +271,8 @@ export function DialogStory() {
 
           {controls.withFooter && (
             <DialogFooter>
-              <DialogClose render={<Button variant="outline" />}>
+              <DialogClose asChild>
-                Cancel
+                <Button variant="outline">Cancel</Button>
               </DialogClose>
               <Button>Save Changes</Button>
             </DialogFooter>
@@ -389,9 +391,11 @@ export function DialogStory() {
         <CardContent className="space-y-4">
           <div className="flex flex-wrap gap-3">
             <Dialog>
-              <DialogTrigger render={<Button variant="outline" />}>
+              <DialogTrigger asChild>
+                <Button variant="outline">
                   <Info className="mr-2 h-4 w-4" />
                   Info Dialog
+                </Button>
               </DialogTrigger>
               <DialogContent>
                 <DialogHeader>
@@ -408,15 +412,19 @@ export function DialogStory() {
                   </p>
                 </div>
                 <DialogFooter>
-                  <DialogClose render={<Button />}>Got it</DialogClose>
+                  <DialogClose asChild>
+                    <Button>Got it</Button>
+                  </DialogClose>
                 </DialogFooter>
               </DialogContent>
             </Dialog>
 
             <Dialog>
-              <DialogTrigger render={<Button />}>
+              <DialogTrigger asChild>
+                <Button>
                   <Edit className="mr-2 h-4 w-4" />
                   Edit Profile
+                </Button>
               </DialogTrigger>
               <DialogContent>
                 <DialogHeader>
@@ -448,8 +456,8 @@ export function DialogStory() {
                   </div>
                 </div>
                 <DialogFooter>
-                  <DialogClose render={<Button variant="outline" />}>
+                  <DialogClose asChild>
-                    Cancel
+                    <Button variant="outline">Cancel</Button>
                   </DialogClose>
                   <Button>Save Changes</Button>
                 </DialogFooter>
@@ -457,9 +465,11 @@ export function DialogStory() {
             </Dialog>
 
             <Dialog>
-              <DialogTrigger render={<Button variant="secondary" />}>
+              <DialogTrigger asChild>
+                <Button variant="secondary">
                   <Settings className="mr-2 h-4 w-4" />
                   Settings
+                </Button>
               </DialogTrigger>
               <DialogContent>
                 <DialogHeader>
@@ -489,8 +499,8 @@ export function DialogStory() {
                   </div>
                 </div>
                 <DialogFooter>
-                  <DialogClose render={<Button variant="outline" />}>
+                  <DialogClose asChild>
-                    Cancel
+                    <Button variant="outline">Cancel</Button>
                   </DialogClose>
                   <Button>Save</Button>
                 </DialogFooter>
@@ -508,8 +518,10 @@ export function DialogStory() {
         <CardContent className="space-y-4">
           <div className="flex flex-wrap gap-3">
             <Dialog>
-              <DialogTrigger render={<Button variant="outline" size="sm" />}>
+              <DialogTrigger asChild>
+                <Button variant="outline" size="sm">
                   Small Dialog
+                </Button>
               </DialogTrigger>
               <DialogContent className="max-w-md">
                 <DialogHeader>
@@ -524,14 +536,16 @@ export function DialogStory() {
                   </p>
                 </div>
                 <DialogFooter>
-                  <DialogClose render={<Button />}>Close</DialogClose>
+                  <DialogClose asChild>
+                    <Button>Close</Button>
+                  </DialogClose>
                 </DialogFooter>
               </DialogContent>
             </Dialog>
 
             <Dialog>
-              <DialogTrigger render={<Button variant="outline" />}>
+              <DialogTrigger asChild>
-                Large Dialog
+                <Button variant="outline">Large Dialog</Button>
               </DialogTrigger>
               <DialogContent className="max-w-2xl">
                 <DialogHeader>
@@ -557,8 +571,8 @@ export function DialogStory() {
                   </div>
                 </div>
                 <DialogFooter>
-                  <DialogClose render={<Button variant="outline" />}>
+                  <DialogClose asChild>
-                    Cancel
+                    <Button variant="outline">Cancel</Button>
                   </DialogClose>
                   <Button>Save</Button>
                 </DialogFooter>
@@ -576,9 +590,11 @@ export function DialogStory() {
         <CardContent className="space-y-4">
           <div className="flex flex-wrap gap-3">
             <Dialog>
-              <DialogTrigger render={<Button variant="outline" />}>
+              <DialogTrigger asChild>
+                <Button variant="outline">
                   <Image className="mr-2 h-4 w-4" />
                   Image Gallery
+                </Button>
               </DialogTrigger>
               <DialogContent className="max-w-2xl">
                 <DialogHeader>
@@ -611,9 +627,11 @@ export function DialogStory() {
             </Dialog>
 
             <Dialog>
-              <DialogTrigger render={<Button variant="outline" />}>
+              <DialogTrigger asChild>
+                <Button variant="outline">
                   <MessageSquare className="mr-2 h-4 w-4" />
                   Feedback
+                </Button>
               </DialogTrigger>
               <DialogContent>
                 <DialogHeader>
@@ -650,8 +668,8 @@ export function DialogStory() {
                   </div>
                 </div>
                 <DialogFooter>
-                  <DialogClose render={<Button variant="outline" />}>
+                  <DialogClose asChild>
-                    Cancel
+                    <Button variant="outline">Cancel</Button>
                   </DialogClose>
                   <Button>
                     <MessageSquare className="mr-2 h-4 w-4" />
@@ -718,8 +736,8 @@ export function DialogStory() {
           <div>
             <h4 className="mb-3 text-lg font-semibold">DialogTrigger</h4>
             <p className="text-muted-foreground mb-3 text-sm">
-              The element that opens the dialog. Use the render prop to compose
+              The element that opens the dialog. Use asChild prop to render as
-              with a custom element.
+              child element.
             </p>
           </div>
 

apps/dev-tool/app/components/components/docs-sidebar.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useRef, useState } from 'react';
 
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 
 import { Code2, FileText, Search } from 'lucide-react';
 
@@ -35,7 +35,6 @@ export function DocsSidebar({
   selectedCategory,
 }: DocsSidebarProps) {
   const [searchQuery, setSearchQuery] = useState('');
-  const searchParams = useSearchParams();
   const router = useRouter();
 
   const filteredComponents = COMPONENTS_REGISTRY.filter((c) =>
@@ -51,21 +50,21 @@ export function DocsSidebar({
     .sort((a, b) => a.name.localeCompare(b.name));
 
   const onCategorySelect = (category: string | null) => {
-    const sp = new URLSearchParams(searchParams);
+    const searchParams = new URLSearchParams(window.location.search);
-    sp.set('category', category || '');
+    searchParams.set('category', category || '');
-    router.push(`/components?${sp.toString()}`);
+    router.push(`/components?${searchParams.toString()}`);
   };
 
   const onComponentSelect = (component: ComponentInfo) => {
-    const sp = new URLSearchParams(searchParams);
+    const searchParams = new URLSearchParams(window.location.search);
-    sp.set('component', component.name);
+    searchParams.set('component', component.name);
-    router.push(`/components?${sp.toString()}`);
+    router.push(`/components?${searchParams.toString()}`);
   };
 
   return (
     <div className="bg-muted/30 flex h-screen w-80 flex-col overflow-hidden border-r">
       {/* Header */}
-      <div className="shrink-0 border-b p-4">
+      <div className="flex-shrink-0 border-b p-4">
         <div className="mb-2 flex items-center gap-2">
           <Code2 className="text-primary h-6 w-6" />
 
@@ -78,14 +77,13 @@ export function DocsSidebar({
       </div>
 
       {/* Controls */}
-      <div className="shrink-0 space-y-2 border-b p-4">
+      <div className="flex-shrink-0 space-y-2 border-b p-4">
         {/* Category Select */}
         <div className="space-y-2">
           <Select
-            defaultValue={selectedCategory || 'all'}
+            value={selectedCategory || 'all'}
             onValueChange={(value) => {
               const category = value === 'all' ? null : value;
-
               onCategorySelect(category);
 
               // Select first component in the filtered results
@@ -98,12 +96,8 @@ export function DocsSidebar({
               }
             }}
           >
-            <SelectTrigger className="w-full">
+            <SelectTrigger>
-              <SelectValue>
+              <SelectValue placeholder={'Select a category'} />
-                {(category) => {
-                  return category === 'all' ? 'All Categories' : category;
-                }}
-              </SelectValue>
             </SelectTrigger>
 
             <SelectContent>
@@ -160,7 +154,7 @@ export function DocsSidebar({
 
       {/* Components List - Scrollable */}
       <div className="flex flex-1 flex-col overflow-y-auto">
-        <div className="shrink-0 p-4 pb-2">
+        <div className="flex-shrink-0 p-4 pb-2">
           <h3 className="flex items-center gap-2 text-sm font-semibold">
             <FileText className="h-4 w-4" />
             Components

apps/dev-tool/app/components/components/dropdown-menu-story.tsx

@@ -101,18 +101,13 @@ const examples = [
       return (
         <div className="flex min-h-32 items-center justify-center">
           <DropdownMenu>
-            <DropdownMenuTrigger
+            <DropdownMenuTrigger asChild>
-              render={
+              <Button variant="ghost" className="relative h-8 w-8 rounded-full">
-                <Button
-                  variant="ghost"
-                  className="relative h-8 w-8 rounded-full"
-                />
-              }
-            >
                 <Avatar className="h-8 w-8">
                   <AvatarImage src="/avatars/01.png" alt="@username" />
                   <AvatarFallback>JD</AvatarFallback>
                 </Avatar>
+              </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-56" align="end" forceMount>
               <DropdownMenuLabel className="font-normal">
@@ -190,11 +185,11 @@ const examples = [
               </div>
 
               <DropdownMenu>
-                <DropdownMenuTrigger
+                <DropdownMenuTrigger asChild>
-                  render={<Button variant="ghost" className="h-8 w-8 p-0" />}
+                  <Button variant="ghost" className="h-8 w-8 p-0">
-                >
                     <span className="sr-only">Open menu</span>
                     <MoreHorizontal className="h-4 w-4" />
+                  </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent align="end" className="w-48">
                   <DropdownMenuItem onClick={() => setSelectedAction('open')}>
@@ -280,9 +275,11 @@ const examples = [
       return (
         <div className="flex min-h-48 items-center justify-center">
           <DropdownMenu>
-            <DropdownMenuTrigger render={<Button variant="outline" />}>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline">
                 <Plus className="mr-2 h-4 w-4" />
                 Create New
+              </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-56">
               <DropdownMenuLabel>Create Content</DropdownMenuLabel>
@@ -396,11 +393,11 @@ const examples = [
               <span className="text-sm">Appearance & Layout</span>
 
               <DropdownMenu>
-                <DropdownMenuTrigger
+                <DropdownMenuTrigger asChild>
-                  render={<Button variant="outline" size="sm" />}
+                  <Button variant="outline" size="sm">
-                >
                     <Settings className="mr-2 h-4 w-4" />
                     Configure
+                  </Button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent className="w-64" align="end">
                   <DropdownMenuLabel>View Options</DropdownMenuLabel>
@@ -550,10 +547,10 @@ const examples = [
                 </div>
 
                 <DropdownMenu>
-                  <DropdownMenuTrigger
+                  <DropdownMenuTrigger asChild>
-                    render={<Button variant="ghost" className="h-8 w-8 p-0" />}
+                    <Button variant="ghost" className="h-8 w-8 p-0">
-                  >
                       <MoreHorizontal className="h-4 w-4" />
+                    </Button>
                   </DropdownMenuTrigger>
                   <DropdownMenuContent align="end" className="w-48">
                     <DropdownMenuItem
@@ -866,7 +863,7 @@ export default function DropdownMenuStory() {
       modal: controls.modal ? true : undefined,
     });
 
-    const dropdownStructure = `<DropdownMenu${rootProps}>\n  <DropdownMenuTrigger render={<Button variant="outline" />}>\n    Open Menu\n  </DropdownMenuTrigger>\n  <DropdownMenuContent${contentProps}>\n    <DropdownMenuItem>\n      <User className="mr-2 h-4 w-4" />\n      <span>Profile</span>\n    </DropdownMenuItem>\n    <DropdownMenuItem>\n      <Settings className="mr-2 h-4 w-4" />\n      <span>Settings</span>\n    </DropdownMenuItem>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem>\n      <LogOut className="mr-2 h-4 w-4" />\n      <span>Log out</span>\n    </DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>`;
+    const dropdownStructure = `<DropdownMenu${rootProps}>\n  <DropdownMenuTrigger asChild>\n    <Button variant="outline">Open Menu</Button>\n  </DropdownMenuTrigger>\n  <DropdownMenuContent${contentProps}>\n    <DropdownMenuItem>\n      <User className="mr-2 h-4 w-4" />\n      <span>Profile</span>\n    </DropdownMenuItem>\n    <DropdownMenuItem>\n      <Settings className="mr-2 h-4 w-4" />\n      <span>Settings</span>\n    </DropdownMenuItem>\n    <DropdownMenuSeparator />\n    <DropdownMenuItem>\n      <LogOut className="mr-2 h-4 w-4" />\n      <span>Log out</span>\n    </DropdownMenuItem>\n  </DropdownMenuContent>\n</DropdownMenu>`;
 
     return `${importStatement}\n${buttonImport}\n${iconImport}\n\n${dropdownStructure}`;
   };
@@ -974,8 +971,8 @@ export default function DropdownMenuStory() {
   const previewContent = (
     <div className="flex justify-center p-6">
       <DropdownMenu modal={controls.modal}>
-        <DropdownMenuTrigger render={<Button variant="outline" />}>
+        <DropdownMenuTrigger asChild>
-          Open Menu
+          <Button variant="outline">Open Menu</Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent
           side={controls.side}

apps/dev-tool/app/components/components/form-story.tsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
-import * as z from 'zod';
+import { z } from 'zod';
 
 import { Badge } from '@kit/ui/badge';
 import { Button } from '@kit/ui/button';
@@ -119,7 +119,7 @@ export default function FormStory() {
     const formImport = generateImportStatement(formComponents, '@kit/ui/form');
     const inputImport = generateImportStatement(['Input'], '@kit/ui/input');
     const buttonImport = generateImportStatement(['Button'], '@kit/ui/button');
-    const hookFormImports = `import { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport * as z from 'zod';`;
+    const hookFormImports = `import { useForm } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { z } from 'zod';`;
 
     let schemaCode = '';
     let formFieldsCode = '';
@@ -130,19 +130,19 @@ export default function FormStory() {
 
       formFieldsCode = `        <FormField\n          control={form.control}\n          name="username"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input ${controls.disabled ? 'disabled ' : ''}placeholder="Enter username" {...field} />\n              </FormControl>${controls.showDescriptions ? '\n              <FormDescription>\n                Your public display name.\n              </FormDescription>' : ''}${controls.showValidation ? '\n              <FormMessage />' : ''}\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name="email"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Email</FormLabel>\n              <FormControl>\n                <Input ${controls.disabled ? 'disabled ' : ''}type="email" placeholder="Enter email" {...field} />\n              </FormControl>${controls.showDescriptions ? "\n              <FormDescription>\n                We'll never share your email.\n              </FormDescription>" : ''}${controls.showValidation ? '\n              <FormMessage />' : ''}\n            </FormItem>\n          )}\n        />`;
 
-      onSubmitCode = `  function onSubmit(values: z.output<typeof formSchema>) {\n    console.log('Form submitted:', values);\n  }`;
+      onSubmitCode = `  function onSubmit(values: z.infer<typeof formSchema>) {\n    console.log('Form submitted:', values);\n  }`;
     } else if (controls.formType === 'advanced') {
       schemaCode = `const formSchema = z.object({\n  firstName: z.string().min(1, 'First name is required.'),\n  lastName: z.string().min(1, 'Last name is required.'),\n  email: z.string().email('Please enter a valid email address.'),\n});`;
 
       formFieldsCode = `        <FormField\n          control={form.control}\n          name="firstName"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>First Name</FormLabel>\n              <FormControl>\n                <Input ${controls.disabled ? 'disabled ' : ''}placeholder="John" {...field} />\n              </FormControl>${controls.showValidation ? '\n              <FormMessage />' : ''}\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name="lastName"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Last Name</FormLabel>\n              <FormControl>\n                <Input ${controls.disabled ? 'disabled ' : ''}placeholder="Doe" {...field} />\n              </FormControl>${controls.showValidation ? '\n              <FormMessage />' : ''}\n            </FormItem>\n          )}\n        />`;
 
-      onSubmitCode = `  function onSubmit(values: z.output<typeof formSchema>) {\n    console.log('Advanced form submitted:', values);\n  }`;
+      onSubmitCode = `  function onSubmit(values: z.infer<typeof formSchema>) {\n    console.log('Advanced form submitted:', values);\n  }`;
     } else {
       schemaCode = `const formSchema = z.object({\n  password: z.string().min(8, 'Password must be at least 8 characters.'),\n  confirmPassword: z.string(),\n}).refine((data) => data.password === data.confirmPassword, {\n  message: 'Passwords do not match.',\n  path: ['confirmPassword'],\n});`;
 
       formFieldsCode = `        <FormField\n          control={form.control}\n          name="password"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Password</FormLabel>\n              <FormControl>\n                <Input ${controls.disabled ? 'disabled ' : ''}type="password" {...field} />\n              </FormControl>${controls.showValidation ? '\n              <FormMessage />' : ''}\n            </FormItem>\n          )}\n        />\n        <FormField\n          control={form.control}\n          name="confirmPassword"\n          render={({ field }) => (\n            <FormItem>\n              <FormLabel>Confirm Password</FormLabel>\n              <FormControl>\n                <Input ${controls.disabled ? 'disabled ' : ''}type="password" {...field} />\n              </FormControl>${controls.showValidation ? '\n              <FormMessage />' : ''}\n            </FormItem>\n          )}\n        />`;
 
-      onSubmitCode = `  function onSubmit(values: z.output<typeof formSchema>) {\n    console.log('Validation form submitted:', values);\n  }`;
+      onSubmitCode = `  function onSubmit(values: z.infer<typeof formSchema>) {\n    console.log('Validation form submitted:', values);\n  }`;
     }
 
     const defaultValuesCode =
@@ -152,13 +152,13 @@ export default function FormStory() {
           ? `    defaultValues: {\n      firstName: '',\n      lastName: '',\n      email: '',\n    },`
           : `    defaultValues: {\n      password: '',\n      confirmPassword: '',\n    },`;
 
-    const fullFormCode = `${hookFormImports}\n${formImport}\n${inputImport}\n${buttonImport}\n\n${schemaCode}\n\nfunction MyForm() {\n  const form = useForm<z.output<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n${defaultValuesCode}\n  });\n\n${onSubmitCode}\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">\n${formFieldsCode}\n        <Button type="submit"${controls.disabled ? ' disabled' : ''}>Submit</Button>\n      </form>\n    </Form>\n  );\n}`;
+    const fullFormCode = `${hookFormImports}\n${formImport}\n${inputImport}\n${buttonImport}\n\n${schemaCode}\n\nfunction MyForm() {\n  const form = useForm<z.infer<typeof formSchema>>({\n    resolver: zodResolver(formSchema),\n${defaultValuesCode}\n  });\n\n${onSubmitCode}\n\n  return (\n    <Form {...form}>\n      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">\n${formFieldsCode}\n        <Button type="submit"${controls.disabled ? ' disabled' : ''}>Submit</Button>\n      </form>\n    </Form>\n  );\n}`;
 
     return fullFormCode;
   };
 
   // Basic form
-  const basicForm = useForm<z.output<typeof basicFormSchema>>({
+  const basicForm = useForm<z.infer<typeof basicFormSchema>>({
     resolver: zodResolver(basicFormSchema),
     defaultValues: {
       username: '',
@@ -169,7 +169,7 @@ export default function FormStory() {
   });
 
   // Advanced form
-  const advancedForm = useForm<z.output<typeof advancedFormSchema>>({
+  const advancedForm = useForm<z.infer<typeof advancedFormSchema>>({
     resolver: zodResolver(advancedFormSchema),
     defaultValues: {
       firstName: '',
@@ -183,7 +183,7 @@ export default function FormStory() {
   });
 
   // Validation form
-  const validationForm = useForm<z.output<typeof validationFormSchema>>({
+  const validationForm = useForm<z.infer<typeof validationFormSchema>>({
     resolver: zodResolver(validationFormSchema),
     defaultValues: {
       password: '',
@@ -1056,7 +1056,7 @@ export default function FormStory() {
               <pre className="overflow-x-auto text-sm">
                 {`import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import * as z from 'zod';
+import { z } from 'zod';
 import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from '@kit/ui/form';
 
 const formSchema = z.object({
@@ -1065,7 +1065,7 @@ const formSchema = z.object({
 });
 
 function MyForm() {
-  const form = useForm<z.output<typeof formSchema>>({
+  const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
       username: '',
@@ -1073,7 +1073,7 @@ function MyForm() {
     },
   });
 
-  function onSubmit(values: z.output<typeof formSchema>) {
+  function onSubmit(values: z.infer<typeof formSchema>) {
     console.log(values);
   }
 

apps/dev-tool/app/components/components/kbd-story.tsx

@@ -99,7 +99,7 @@ export function KbdStory() {
     let snippet = groupLines.join('\n');
 
     if (controls.showTooltip) {
-      snippet = `<TooltipProvider>\n  <Tooltip>\n    <TooltipTrigger render={<Button variant="outline" />}>\n      Command palette\n    </TooltipTrigger>\n    <TooltipContent className="flex items-center gap-2">\n      <span>Press</span>\n      ${groupLines.join('\n      ')}\n    </TooltipContent>\n  </Tooltip>\n</TooltipProvider>`;
+      snippet = `<TooltipProvider>\n  <Tooltip>\n    <TooltipTrigger asChild>\n      <Button variant="outline">Command palette</Button>\n    </TooltipTrigger>\n    <TooltipContent className="flex items-center gap-2">\n      <span>Press</span>\n      ${groupLines.join('\n      ')}\n    </TooltipContent>\n  </Tooltip>\n</TooltipProvider>`;
     }
 
     return formatCodeBlock(snippet, [
@@ -115,11 +115,11 @@ export function KbdStory() {
         {controls.showTooltip ? (
           <TooltipProvider delayDuration={200}>
             <Tooltip>
-              <TooltipTrigger
+              <TooltipTrigger asChild>
-                render={<Button variant="outline" className="gap-2" />}
+                <Button variant="outline" className="gap-2">
-              >
                   <Command className="h-4 w-4" />
                   Command palette
+                </Button>
               </TooltipTrigger>
               <TooltipContent className="flex items-center gap-2">
                 <span>Press</span>

apps/dev-tool/app/components/components/simple-data-table-story.tsx

@@ -136,13 +136,11 @@ export function SimpleDataTableStory() {
                 {controls.showActions && (
                   <TableCell>
                     <DropdownMenu>
-                      <DropdownMenuTrigger
+                      <DropdownMenuTrigger asChild>
-                        render={
+                        <Button variant="ghost" className="h-8 w-8 p-0">
-                          <Button variant="ghost" className="h-8 w-8 p-0" />
-                        }
-                      >
                           <span className="sr-only">Open menu</span>
                           <MoreHorizontal className="h-4 w-4" />
+                        </Button>
                       </DropdownMenuTrigger>
                       <DropdownMenuContent align="end">
                         <DropdownMenuItem

apps/dev-tool/app/components/components/switch-story.tsx

@@ -100,7 +100,7 @@ export function SwitchStory() {
       className: cn(
         controls.size === 'sm' && 'h-4 w-7',
         controls.size === 'lg' && 'h-6 w-11',
-        controls.error && 'data-checked:bg-destructive',
+        controls.error && 'data-[state=checked]:bg-destructive',
       ),
     };
 
@@ -200,7 +200,7 @@ export function SwitchStory() {
         className={cn(
           controls.size === 'sm' && 'h-4 w-7',
           controls.size === 'lg' && 'h-6 w-11',
-          controls.error && 'data-checked:bg-destructive',
+          controls.error && 'data-[state=checked]:bg-destructive',
         )}
       />
     );
@@ -616,7 +616,7 @@ export function SwitchStory() {
                 </Label>
                 <Switch
                   id="error-switch"
-                  className="data-checked:bg-destructive"
+                  className="data-[state=checked]:bg-destructive"
                 />
               </div>
               <p className="text-destructive text-sm">
@@ -642,7 +642,7 @@ export function SwitchStory() {
           <div>
             <h4 className="mb-3 text-lg font-semibold">Switch</h4>
             <p className="text-muted-foreground mb-3 text-sm">
-              A toggle switch component for boolean states. Built on Base UI
+              A toggle switch component for boolean states. Built on Radix UI
               Switch primitive.
             </p>
             <div className="overflow-x-auto">

apps/dev-tool/app/components/components/tabs-story.tsx

@@ -62,9 +62,9 @@ interface TabsControlsProps {
 const variantClasses = {
   default: '',
   pills:
-    '[&>div]:bg-background [&>div]:border [&>div]:rounded-lg [&>div]:p-1 [&_button]:rounded-md [&_button[data-active]]:bg-primary [&_button[data-active]]:text-primary-foreground',
+    '[&>div]:bg-background [&>div]:border [&>div]:rounded-lg [&>div]:p-1 [&_button]:rounded-md [&_button[data-state=active]]:bg-primary [&_button[data-state=active]]:text-primary-foreground',
   underline:
-    '[&>div]:bg-transparent [&>div]:border-b [&>div]:rounded-none [&_button]:rounded-none [&_button]:border-b-2 [&_button]:border-transparent [&_button[data-active]]:border-primary [&_button[data-active]]:bg-transparent',
+    '[&>div]:bg-transparent [&>div]:border-b [&>div]:rounded-none [&_button]:rounded-none [&_button]:border-b-2 [&_button]:border-transparent [&_button[data-state=active]]:border-primary [&_button[data-state=active]]:bg-transparent',
 };
 
 const sizeClasses = {
@@ -683,28 +683,28 @@ function App() {
               <TabsList className="h-auto rounded-none border-b bg-transparent p-0">
                 <TabsTrigger
                   value="overview"
-                  className="data-active:border-primary rounded-none border-b-2 border-transparent data-active:bg-transparent"
+                  className="data-[state=active]:border-primary rounded-none border-b-2 border-transparent data-[state=active]:bg-transparent"
                 >
                   <BarChart3 className="mr-2 h-4 w-4" />
                   Overview
                 </TabsTrigger>
                 <TabsTrigger
                   value="users"
-                  className="data-active:border-primary rounded-none border-b-2 border-transparent data-active:bg-transparent"
+                  className="data-[state=active]:border-primary rounded-none border-b-2 border-transparent data-[state=active]:bg-transparent"
                 >
                   <User className="mr-2 h-4 w-4" />
                   Users
                 </TabsTrigger>
                 <TabsTrigger
                   value="revenue"
-                  className="data-active:border-primary rounded-none border-b-2 border-transparent data-active:bg-transparent"
+                  className="data-[state=active]:border-primary rounded-none border-b-2 border-transparent data-[state=active]:bg-transparent"
                 >
                   <CreditCard className="mr-2 h-4 w-4" />
                   Revenue
                 </TabsTrigger>
                 <TabsTrigger
                   value="reports"
-                  className="data-active:border-primary rounded-none border-b-2 border-transparent data-active:bg-transparent"
+                  className="data-[state=active]:border-primary rounded-none border-b-2 border-transparent data-[state=active]:bg-transparent"
                 >
                   <FileText className="mr-2 h-4 w-4" />
                   Reports
@@ -905,7 +905,8 @@ const apiReference = {
     {
       name: '...props',
       type: 'React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>',
-      description: 'All additional props from Base UI Tabs.Root component.',
+      description:
+        'All props from Radix UI Tabs.Root component including asChild, id, etc.',
     },
   ],
   examples: [

apps/dev-tool/app/components/components/tooltip-story.tsx

@@ -144,23 +144,22 @@ function TooltipStory() {
 
     let code = `<TooltipProvider${providerPropsString}>\n`;
     code += `  <Tooltip>\n`;
+    code += `    <TooltipTrigger asChild>\n`;
+
     if (controls.triggerType === 'button') {
-      code += `    <TooltipTrigger render={<Button variant="${controls.triggerVariant}" />}>\n`;
+      code += `      <Button variant="${controls.triggerVariant}">Hover me</Button>\n`;
-      code += `      Hover me\n`;
     } else if (controls.triggerType === 'icon') {
+      code += `      <Button variant="${controls.triggerVariant}" size="icon">\n`;
       const iconName = selectedIconData?.icon.name || 'Info';
-      code += `    <TooltipTrigger render={<Button variant="${controls.triggerVariant}" size="icon" />}>\n`;
       code += `        <${iconName} className="h-4 w-4" />\n`;
+      code += `      </Button>\n`;
     } else if (controls.triggerType === 'text') {
-      code += `    <TooltipTrigger render={<span className="cursor-help underline decoration-dotted" />}>\n`;
+      code += `      <span className="cursor-help underline decoration-dotted">Hover me</span>\n`;
-      code += `      Hover me\n`;
     } else if (controls.triggerType === 'input') {
-      code += `    <TooltipTrigger render={<Input placeholder="Hover over this input" />} />\n`;
+      code += `      <Input placeholder="Hover over this input" />\n`;
     }
 
-    if (controls.triggerType !== 'input') {
     code += `    </TooltipTrigger>\n`;
-    }
     code += `    <TooltipContent${contentPropsString}>\n`;
     code += `      <p>${controls.content}</p>\n`;
     code += `    </TooltipContent>\n`;
@@ -171,50 +170,28 @@ function TooltipStory() {
   };
 
   const renderPreview = () => {
-    const renderTrigger = () => {
+    const trigger = (() => {
       switch (controls.triggerType) {
         case 'button':
-          return (
+          return <Button variant={controls.triggerVariant}>Hover me</Button>;
-            <TooltipTrigger
-              render={<Button variant={controls.triggerVariant} />}
-            >
-              Hover me
-            </TooltipTrigger>
-          );
         case 'icon':
           return (
-            <TooltipTrigger
+            <Button variant={controls.triggerVariant} size="icon">
-              render={<Button variant={controls.triggerVariant} size="icon" />}
-            >
               <IconComponent className="h-4 w-4" />
-            </TooltipTrigger>
+            </Button>
           );
         case 'text':
           return (
-            <TooltipTrigger
+            <span className="cursor-help underline decoration-dotted">
-              render={
-                <span className="cursor-help underline decoration-dotted" />
-              }
-            >
               Hover me
-            </TooltipTrigger>
+            </span>
           );
         case 'input':
-          return (
+          return <Input placeholder="Hover over this input" />;
-            <TooltipTrigger
-              render={<Input placeholder="Hover over this input" />}
-            />
-          );
         default:
-          return (
+          return <Button variant={controls.triggerVariant}>Hover me</Button>;
-            <TooltipTrigger
-              render={<Button variant={controls.triggerVariant} />}
-            >
-              Hover me
-            </TooltipTrigger>
-          );
       }
-    };
+    })();
 
     return (
       <div className="flex min-h-[200px] items-center justify-center">
@@ -224,7 +201,7 @@ function TooltipStory() {
           disableHoverableContent={controls.disableHoverableContent}
         >
           <Tooltip>
-            {renderTrigger()}
+            <TooltipTrigger asChild>{trigger}</TooltipTrigger>
             <TooltipContent
               side={controls.side}
               align={controls.align}
@@ -399,9 +376,11 @@ function TooltipStory() {
           <TooltipProvider>
             <div className="flex flex-wrap gap-4">
               <Tooltip>
-                <TooltipTrigger render={<Button variant="outline" />}>
+                <TooltipTrigger asChild>
+                  <Button variant="outline">
                     <Info className="mr-2 h-4 w-4" />
                     Info Button
+                  </Button>
                 </TooltipTrigger>
                 <TooltipContent>
                   <p>This provides additional information</p>
@@ -409,8 +388,10 @@ function TooltipStory() {
               </Tooltip>
 
               <Tooltip>
-                <TooltipTrigger render={<Button variant="ghost" size="icon" />}>
+                <TooltipTrigger asChild>
+                  <Button variant="ghost" size="icon">
                     <HelpCircle className="h-4 w-4" />
+                  </Button>
                 </TooltipTrigger>
                 <TooltipContent>
                   <p>Click for help documentation</p>
@@ -418,12 +399,10 @@ function TooltipStory() {
               </Tooltip>
 
               <Tooltip>
-                <TooltipTrigger
+                <TooltipTrigger asChild>
-                  render={
+                  <span className="cursor-help underline decoration-dotted">
-                    <span className="cursor-help underline decoration-dotted" />
-                  }
-                >
                     Hover for explanation
+                  </span>
                 </TooltipTrigger>
                 <TooltipContent>
                   <p>This term needs clarification for better understanding</p>
@@ -431,9 +410,9 @@ function TooltipStory() {
               </Tooltip>
 
               <Tooltip>
-                <TooltipTrigger
+                <TooltipTrigger asChild>
-                  render={<Input placeholder="Hover me" className="w-48" />}
+                  <Input placeholder="Hover me" className="w-48" />
-                />
+                </TooltipTrigger>
                 <TooltipContent>
                   <p>Enter your email address here</p>
                 </TooltipContent>
@@ -455,10 +434,10 @@ function TooltipStory() {
                 {/* Top Row */}
                 <div></div>
                 <Tooltip>
-                  <TooltipTrigger
+                  <TooltipTrigger asChild>
-                    render={<Button variant="outline" size="sm" />}
+                    <Button variant="outline" size="sm">
-                  >
                       Top
+                    </Button>
                   </TooltipTrigger>
                   <TooltipContent side="top">
                     <p>Tooltip on top</p>
@@ -468,10 +447,10 @@ function TooltipStory() {
 
                 {/* Middle Row */}
                 <Tooltip>
-                  <TooltipTrigger
+                  <TooltipTrigger asChild>
-                    render={<Button variant="outline" size="sm" />}
+                    <Button variant="outline" size="sm">
-                  >
                       Left
+                    </Button>
                   </TooltipTrigger>
                   <TooltipContent side="left">
                     <p>Tooltip on left</p>
@@ -481,10 +460,10 @@ function TooltipStory() {
                   <span className="text-muted-foreground text-sm">Center</span>
                 </div>
                 <Tooltip>
-                  <TooltipTrigger
+                  <TooltipTrigger asChild>
-                    render={<Button variant="outline" size="sm" />}
+                    <Button variant="outline" size="sm">
-                  >
                       Right
+                    </Button>
                   </TooltipTrigger>
                   <TooltipContent side="right">
                     <p>Tooltip on right</p>
@@ -494,10 +473,10 @@ function TooltipStory() {
                 {/* Bottom Row */}
                 <div></div>
                 <Tooltip>
-                  <TooltipTrigger
+                  <TooltipTrigger asChild>
-                    render={<Button variant="outline" size="sm" />}
+                    <Button variant="outline" size="sm">
-                  >
                       Bottom
+                    </Button>
                   </TooltipTrigger>
                   <TooltipContent side="bottom">
                     <p>Tooltip on bottom</p>
@@ -519,9 +498,11 @@ function TooltipStory() {
           <TooltipProvider>
             <div className="flex flex-wrap gap-4">
               <Tooltip>
-                <TooltipTrigger render={<Button variant="outline" />}>
+                <TooltipTrigger asChild>
+                  <Button variant="outline">
                     <Star className="mr-2 h-4 w-4" />
                     Premium Feature
+                  </Button>
                 </TooltipTrigger>
                 <TooltipContent className="max-w-xs">
                   <div className="space-y-1">
@@ -535,9 +516,11 @@ function TooltipStory() {
               </Tooltip>
 
               <Tooltip>
-                <TooltipTrigger render={<Button variant="outline" />}>
+                <TooltipTrigger asChild>
+                  <Button variant="outline">
                     <Settings className="mr-2 h-4 w-4" />
                     Advanced Settings
+                  </Button>
                 </TooltipTrigger>
                 <TooltipContent>
                   <div className="space-y-1">
@@ -554,9 +537,11 @@ function TooltipStory() {
               </Tooltip>
 
               <Tooltip>
-                <TooltipTrigger render={<Button variant="destructive" />}>
+                <TooltipTrigger asChild>
+                  <Button variant="destructive">
                     <AlertCircle className="mr-2 h-4 w-4" />
                     Delete Account
+                  </Button>
                 </TooltipTrigger>
                 <TooltipContent className="border-destructive bg-destructive text-destructive-foreground max-w-xs">
                   <div className="space-y-1">
@@ -583,10 +568,10 @@ function TooltipStory() {
             <div className="space-y-4">
               <div className="flex items-center gap-4">
                 <Tooltip>
-                  <TooltipTrigger
+                  <TooltipTrigger asChild>
-                    render={<Button size="icon" variant="ghost" />}
+                    <Button size="icon" variant="ghost">
-                  >
                       <Copy className="h-4 w-4" />
+                    </Button>
                   </TooltipTrigger>
                   <TooltipContent>
                     <p>Copy to clipboard</p>
@@ -594,10 +579,10 @@ function TooltipStory() {
                 </Tooltip>
 
                 <Tooltip>
-                  <TooltipTrigger
+                  <TooltipTrigger asChild>
-                    render={<Button size="icon" variant="ghost" />}
+                    <Button size="icon" variant="ghost">
-                  >
                       <Download className="h-4 w-4" />
+                    </Button>
                   </TooltipTrigger>
                   <TooltipContent>
                     <p>Download file</p>
@@ -605,10 +590,10 @@ function TooltipStory() {
                 </Tooltip>
 
                 <Tooltip>
-                  <TooltipTrigger
+                  <TooltipTrigger asChild>
-                    render={<Button size="icon" variant="ghost" />}
+                    <Button size="icon" variant="ghost">
-                  >
                       <Share className="h-4 w-4" />
+                    </Button>
                   </TooltipTrigger>
                   <TooltipContent>
                     <p>Share with others</p>
@@ -620,11 +605,9 @@ function TooltipStory() {
                 <div className="space-y-2">
                   <Label htmlFor="username">Username</Label>
                   <Tooltip>
-                    <TooltipTrigger
+                    <TooltipTrigger asChild>
-                      render={
                       <Input id="username" placeholder="Enter username" />
-                      }
+                    </TooltipTrigger>
-                    />
                     <TooltipContent>
                       <p>Must be 3-20 characters, letters and numbers only</p>
                     </TooltipContent>
@@ -633,7 +616,9 @@ function TooltipStory() {
 
                 <div className="flex items-center space-x-2">
                   <Tooltip>
-                    <TooltipTrigger render={<Checkbox id="terms" />} />
+                    <TooltipTrigger asChild>
+                      <Checkbox id="terms" />
+                    </TooltipTrigger>
                     <TooltipContent className="max-w-xs">
                       <p>
                         By checking this, you agree to our Terms of Service and
@@ -766,7 +751,7 @@ function TooltipStory() {
               </li>
               <li>
                 <strong>TooltipTrigger:</strong> Element that triggers the
-                tooltip (use render prop)
+                tooltip (use asChild prop)
               </li>
             </ul>
           </div>

apps/dev-tool/app/components/lib/components-data.tsx

@@ -492,7 +492,7 @@ export const COMPONENTS_REGISTRY: ComponentInfo[] = [
     status: 'stable',
     component: CardButtonStory,
     sourceFile: '@kit/ui/card-button',
-    props: ['className', 'children', 'onClick', 'disabled'],
+    props: ['asChild', 'className', 'children', 'onClick', 'disabled'],
     icon: MousePointer,
   },
 
@@ -950,7 +950,7 @@ export const COMPONENTS_REGISTRY: ComponentInfo[] = [
     status: 'stable',
     component: ItemStory,
     sourceFile: '@kit/ui/item',
-    props: ['variant', 'size', 'className'],
+    props: ['variant', 'size', 'asChild', 'className'],
     icon: Layers,
   },
 
@@ -1004,7 +1004,7 @@ export const COMPONENTS_REGISTRY: ComponentInfo[] = [
     status: 'stable',
     component: BreadcrumbStory,
     sourceFile: '@kit/ui/breadcrumb',
-    props: ['separator', 'href', 'className'],
+    props: ['separator', 'asChild', 'href', 'className'],
     icon: ChevronRight,
   },
 

apps/dev-tool/app/components/page.tsx

@@ -1,3 +1,4 @@
+import { withI18n } from '../../lib/i18n/with-i18n';
 import { DocsContent } from './components/docs-content';
 import { DocsHeader } from './components/docs-header';
 import { DocsSidebar } from './components/docs-sidebar';
@@ -28,4 +29,4 @@ async function ComponentDocsPage(props: ComponentDocsPageProps) {
   );
 }
 
-export default ComponentDocsPage;
+export default withI18n(ComponentDocsPage);

apps/dev-tool/app/emails/[id]/page.tsx

@@ -67,10 +67,10 @@ export default async function EmailPage(props: EmailPageProps) {
           Remember that the below is an approximation of the email. Always test
           it in your inbox.{' '}
           <Dialog>
-            <DialogTrigger
+            <DialogTrigger asChild>
-              render={<Button variant={'link'} className="p-0 underline" />}
+              <Button variant={'link'} className="p-0 underline">
-            >
                 Test Email
+              </Button>
             </DialogTrigger>
 
             <DialogContent>

apps/dev-tool/app/emails/lib/email-tester-form-schema.ts

@@ -1,4 +1,4 @@
-import * as z from 'zod';
+import { z } from 'zod';
 
 export const EmailTesterFormSchema = z.object({
   username: z.string().min(1),

apps/dev-tool/app/emails/page.tsx

@@ -49,16 +49,13 @@ export default async function EmailsPage() {
 
               <div className={'grid grid-cols-1 gap-4 md:grid-cols-4'}>
                 {categoryTemplates.map((template) => (
-                  <CardButton
+                  <CardButton key={template.id} asChild>
-                    key={template.id}
-                    render={
                     <Link href={`/emails/${template.id}`}>
                       <CardButtonHeader>
                         <CardButtonTitle>{template.name}</CardButtonTitle>
                       </CardButtonHeader>
                     </Link>
-                    }
+                  </CardButton>
-                  />
                 ))}
               </div>
             </div>

apps/dev-tool/app/layout.tsx

@@ -2,7 +2,6 @@ import type { Metadata } from 'next';
 
 import { DevToolLayout } from '@/components/app-layout';
 import { RootProviders } from '@/components/root-providers';
-import { getMessages } from 'next-intl/server';
 
 import '../styles/globals.css';
 
@@ -11,17 +10,15 @@ export const metadata: Metadata = {
   description: 'The dev tool for Makerkit',
 };
 
-export default async function RootLayout({
+export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const messages = await getMessages();
-
   return (
     <html lang="en">
       <body>
-        <RootProviders messages={messages}>
+        <RootProviders>
           <DevToolLayout>{children}</DevToolLayout>
         </RootProviders>
       </body>

apps/dev-tool/app/page.tsx

@@ -37,6 +37,7 @@ export default async function DashboardPage() {
   return (
     <Page style={'custom'}>
       <PageHeader
+        displaySidebarTrigger={false}
         title={'Dev Tool'}
         description={'Kit MCP status for this workspace'}
       />

apps/dev-tool/app/prds/_lib/schemas/create-prd.schema.ts

@@ -1,4 +1,4 @@
-import * as z from 'zod';
+import { z } from 'zod';
 
 export const CreatePRDSchema = z.object({
   title: z
@@ -32,4 +32,4 @@ export const CreatePRDSchema = z.object({
     .min(1, 'At least one success metric is required'),
 });
 
-export type CreatePRDData = z.output<typeof CreatePRDSchema>;
+export type CreatePRDData = z.infer<typeof CreatePRDSchema>;

apps/dev-tool/app/translations/components/translations-comparison.tsx

@@ -131,14 +131,12 @@ export function TranslationsComparison({
 
             <If condition={locales.length > 1}>
               <DropdownMenu>
-                <DropdownMenuTrigger
+                <DropdownMenuTrigger asChild>
-                  render={
                   <Button variant="outline" className="ml-auto">
                     Select Languages
                     <ChevronDownIcon className="ml-2 h-4 w-4" />
                   </Button>
-                  }
+                </DropdownMenuTrigger>
-                />
 
                 <DropdownMenuContent align="end" className="w-[200px]">
                   {locales.map((locale) => (

apps/dev-tool/app/translations/lib/server-actions.ts

@@ -2,7 +2,7 @@
 
 import { revalidatePath } from 'next/cache';
 
-import * as z from 'zod';
+import { z } from 'zod';
 
 import { findWorkspaceRoot } from '@kit/mcp-server/env';
 import {

apps/dev-tool/app/variables/components/app-environment-variables-manager.tsx

@@ -731,15 +731,13 @@ function FilterSwitcher(props: {
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger
+      <DropdownMenuTrigger asChild>
-        render={
         <Button variant="outline" className="font-normal">
           {buttonLabel()}
 
           <ChevronsUpDownIcon className="text-muted-foreground ml-1 h-3 w-3" />
         </Button>
-        }
+      </DropdownMenuTrigger>
-      />
 
       <DropdownMenuContent>
         <DropdownMenuCheckboxItem
@@ -888,8 +886,7 @@ function Summary({ appState }: { appState: AppEnvState }) {
 
         <TooltipProvider>
           <Tooltip>
-            <TooltipTrigger
+            <TooltipTrigger asChild>
-              render={
               <Button
                 variant="outline"
                 size={'sm'}
@@ -913,16 +910,14 @@ function Summary({ appState }: { appState: AppEnvState }) {
                   toast.promise(promise, {
                     loading: 'Copying environment variables...',
                     success: 'Environment variables copied to clipboard.',
-                      error:
+                    error: 'Failed to copy environment variables to clipboard',
-                        'Failed to copy environment variables to clipboard',
                   });
                 }}
               >
                 <CopyIcon className={'mr-2 h-4 w-4'} />
                 <span>Copy env file to clipboard</span>
               </Button>
-              }
+            </TooltipTrigger>
-            />
 
             <TooltipContent>
               Copy environment variables to clipboard. You can place it in your

apps/dev-tool/app/variables/lib/server-actions.ts

@@ -2,7 +2,7 @@
 
 import { revalidatePath } from 'next/cache';
 
-import * as z from 'zod';
+import { z } from 'zod';
 
 import {
   createKitEnvDeps,

apps/dev-tool/components/app-layout.tsx

@@ -1,6 +1,6 @@
 import { DevToolSidebar } from '@/components/app-sidebar';
 
-import { SidebarInset, SidebarProvider } from '@kit/ui/sidebar';
+import { SidebarInset, SidebarProvider } from '@kit/ui/shadcn-sidebar';
 
 export function DevToolLayout(props: React.PropsWithChildren) {
   return (

apps/dev-tool/components/app-sidebar.tsx

@@ -24,7 +24,7 @@ import {
   SidebarMenuSub,
   SidebarMenuSubButton,
   SidebarMenuSubItem,
-} from '@kit/ui/sidebar';
+} from '@kit/ui/shadcn-sidebar';
 import { isRouteActive } from '@kit/ui/utils';
 
 const routes = [
@@ -92,14 +92,14 @@ export function DevToolSidebar({
                     {route.children.map((child) => (
                       <SidebarMenuSubItem key={child.path}>
                         <SidebarMenuSubButton
-                          render={
+                          asChild
+                          isActive={isRouteActive(child.path, pathname, false)}
+                        >
                           <Link href={child.path}>
                             <child.Icon className="h-4 w-4" />
                             <span>{child.label}</span>
                           </Link>
-                          }
+                        </SidebarMenuSubButton>
-                          isActive={isRouteActive(child.path, pathname, false)}
-                        />
                       </SidebarMenuSubItem>
                     ))}
                   </SidebarMenuSub>
@@ -107,13 +107,13 @@ export function DevToolSidebar({
               ) : (
                 <SidebarMenuButton
                   isActive={isRouteActive(route.path, pathname, false)}
-                  render={
+                  asChild
+                >
                   <Link href={route.path}>
                     <route.Icon className="h-4 w-4" />
                     <span>{route.label}</span>
                   </Link>
-                  }
+                </SidebarMenuButton>
-                />
               )}
             </SidebarMenuItem>
           ))}

apps/dev-tool/components/root-providers.tsx

@@ -3,18 +3,18 @@
 import { useState } from 'react';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import type { AbstractIntlMessages } from 'next-intl';
 
-import { I18nClientProvider } from '@kit/i18n/provider';
+import { I18nProvider } from '@kit/i18n/provider';
 import { Toaster } from '@kit/ui/sonner';
 
-export function RootProviders(
+import { i18nResolver } from '../lib/i18n/i18n.resolver';
-  props: React.PropsWithChildren<{ messages: AbstractIntlMessages }>,
+import { getI18nSettings } from '../lib/i18n/i18n.settings';
-) {
+
+export function RootProviders(props: React.PropsWithChildren) {
   return (
-    <I18nClientProvider locale="en" messages={props.messages}>
+    <I18nProvider settings={getI18nSettings('en')} resolver={i18nResolver}>
       <ReactQueryProvider>{props.children}</ReactQueryProvider>
-    </I18nClientProvider>
+    </I18nProvider>
   );
 }
 

apps/dev-tool/components/status-tile.tsx

@@ -33,7 +33,7 @@ interface ServiceCardProps {
 export const ServiceCard = ({ name, status }: ServiceCardProps) => {
   return (
     <Card className="w-full max-w-2xl">
-      <CardContent>
+      <CardContent className="p-4">
         <div className="space-y-4">
           <div className="flex items-center justify-between">
             <div className="flex items-center space-x-4">

apps/dev-tool/i18n/request.ts

@@ -1,26 +0,0 @@
-import { getRequestConfig } from 'next-intl/server';
-
-import account from '../../web/i18n/messages/en/account.json';
-import auth from '../../web/i18n/messages/en/auth.json';
-import billing from '../../web/i18n/messages/en/billing.json';
-import common from '../../web/i18n/messages/en/common.json';
-import marketing from '../../web/i18n/messages/en/marketing.json';
-import teams from '../../web/i18n/messages/en/teams.json';
-
-export default getRequestConfig(async () => {
-  return {
-    locale: 'en',
-    messages: {
-      common,
-      auth,
-      account,
-      teams,
-      billing,
-      marketing,
-    },
-    timeZone: 'UTC',
-    getMessageFallback(info) {
-      return info.key;
-    },
-  };
-});

apps/dev-tool/lib/i18n/with-i18n.tsx

@@ -0,0 +1,13 @@
+import { createI18nServerInstance } from './i18n.server';
+
+type LayoutOrPageComponent<Params> = React.ComponentType<Params>;
+
+export function withI18n<Params extends object>(
+  Component: LayoutOrPageComponent<Params>,
+) {
+  return async function I18nServerComponentWrapper(params: Params) {
+    await createI18nServerInstance();
+
+    return <Component {...params} />;
+  };
+}

apps/dev-tool/next.config.ts

@@ -1,12 +1,8 @@
 import type { NextConfig } from 'next';
 
-import createNextIntlPlugin from 'next-intl/plugin';
-
-const withNextIntl = createNextIntlPlugin('./i18n/request.ts');
-
 const nextConfig: NextConfig = {
   reactStrictMode: true,
-  transpilePackages: ['@kit/ui', '@kit/shared', '@kit/i18n'],
+  transpilePackages: ['@kit/ui', '@kit/shared'],
   reactCompiler: true,
   devIndicators: {
     position: 'bottom-right',
@@ -18,4 +14,4 @@ const nextConfig: NextConfig = {
   },
 };
 
-export default withNextIntl(nextConfig);
+export default nextConfig;

apps/dev-tool/package.json

@@ -13,7 +13,6 @@
     "@tanstack/react-query": "catalog:",
     "lucide-react": "catalog:",
     "next": "catalog:",
-    "next-intl": "catalog:",
     "nodemailer": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
@@ -36,7 +35,7 @@
     "babel-plugin-react-compiler": "1.0.0",
     "pino-pretty": "13.0.0",
     "react-hook-form": "catalog:",
-    "recharts": "3.7.0",
+    "recharts": "2.15.3",
     "tailwindcss": "catalog:",
     "tw-animate-css": "catalog:",
     "typescript": "^5.9.3",

apps/dev-tool/styles/theme.css

@@ -66,6 +66,26 @@
   --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;
+    }
+  }
+
   @keyframes fade-up {
     0% {
       opacity: 0;

apps/e2e/package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "scripts": {
     "report": "playwright show-report",
-    "test": "playwright test --max-failures=1 --workers=4",
+    "test": "playwright test --max-failures=1",
     "test:fast": "playwright test --max-failures=1 --workers=16",
     "test:setup": "playwright test tests/auth.setup.ts",
     "test:ui": "playwright test --ui"

apps/e2e/tests/account/account.spec.ts

@@ -38,8 +38,6 @@ test.describe('Account Settings', () => {
 
     await Promise.all([request, response]);
 
-    await page.locator('[data-test="workspace-dropdown-trigger"]').click();
-
     await expect(account.getProfileName()).toHaveText(name);
   });
 

apps/e2e/tests/admin/admin.spec.ts

@@ -34,17 +34,17 @@ test.describe('Admin', () => {
       await page.goto('/admin');
 
       // Check all stat cards are present
-      await expect(page.getByText('Users', { exact: true })).toBeVisible();
+      await expect(page.getByRole('heading', { name: 'Users' })).toBeVisible();
 
       await expect(
-        page.getByText('Team Accounts', { exact: true }),
+        page.getByRole('heading', { name: 'Team Accounts' }),
       ).toBeVisible();
 
       await expect(
-        page.getByText('Paying Customers', { exact: true }),
+        page.getByRole('heading', { name: 'Paying Customers' }),
       ).toBeVisible();
 
-      await expect(page.getByText('Trials', { exact: true })).toBeVisible();
+      await expect(page.getByRole('heading', { name: 'Trials' })).toBeVisible();
 
       // Verify stat values are numbers
       const stats = await page.$$('.text-3xl.font-bold');

apps/e2e/tests/authentication/auth.po.ts

@@ -31,17 +31,8 @@ export class AuthPageObject {
   }
 
   async signOut() {
-    const trigger = this.page.locator(
+    await this.page.click('[data-test="account-dropdown-trigger"]');
-      '[data-test="workspace-dropdown-trigger"], [data-test="account-dropdown-trigger"]',
+    await this.page.click('[data-test="account-dropdown-sign-out"]');
-    );
-
-    await trigger.click();
-
-    const signOutButton = this.page.locator(
-      '[data-test="workspace-sign-out"], [data-test="account-dropdown-sign-out"]',
-    );
-
-    await signOutButton.click();
   }
 
   async signIn(params: { email: string; password: string }) {

apps/e2e/tests/healthcheck.spec.ts

@@ -4,7 +4,7 @@ import { expect, test } from '@playwright/test';
 
 test.describe('Healthcheck endpoint', () => {
   test('returns healthy status', async ({ request }) => {
-    const response = await request.get('/api/healthcheck');
+    const response = await request.get('/healthcheck');
 
     expect(response.status()).toBe(200);
 

apps/e2e/tests/invitations/invitations.po.ts

@@ -46,7 +46,7 @@ export class InvitationsPageObject {
         `[data-test="invite-member-form-item"]:nth-child(${nth}) [data-test="role-selector-trigger"]`,
       );
 
-      await this.page.getByRole('option', { name: invite.role }).click();
+      await this.page.click(`[data-test="role-option-${invite.role}"]`);
 
       if (index < invites.length - 1) {
         await form.locator('[data-test="add-new-invite-button"]').click();

apps/e2e/tests/team-accounts/team-accounts.po.ts

@@ -36,13 +36,13 @@ export class TeamAccountsPageObject {
   }
 
   getTeamFromSelector(teamName: string) {
-    return this.page.locator('[data-test="workspace-team-item"]', {
+    return this.page.locator(`[data-test="account-selector-team"]`, {
       hasText: teamName,
     });
   }
 
   getTeams() {
-    return this.page.locator('[data-test="workspace-team-item"]');
+    return this.page.locator('[data-test="account-selector-team"]');
   }
 
   goToSettings() {
@@ -83,11 +83,10 @@ export class TeamAccountsPageObject {
 
   openAccountsSelector() {
     return expect(async () => {
-      await this.page.click('[data-test="workspace-dropdown-trigger"]');
+      await this.page.click('[data-test="account-selector-trigger"]');
-      await this.page.click('[data-test="workspace-switch-submenu"]');
 
       return expect(
-        this.page.locator('[data-test="workspace-switch-content"]'),
+        this.page.locator('[data-test="account-selector-content"]'),
       ).toBeVisible();
     }).toPass();
   }
@@ -116,7 +115,7 @@ export class TeamAccountsPageObject {
   async createTeam({ teamName, slug } = this.createTeamName()) {
     await this.openAccountsSelector();
 
-    await this.page.click('[data-test="create-team-trigger"]');
+    await this.page.click('[data-test="create-team-account-trigger"]');
 
     await this.page.fill(
       '[data-test="create-team-form"] [data-test="team-name-input"]',
@@ -141,15 +140,14 @@ export class TeamAccountsPageObject {
     await this.openAccountsSelector();
     await expect(this.getTeamFromSelector(teamName)).toBeVisible();
 
-    // Close the selector (Escape closes submenu, then parent dropdown)
+    // Close the selector
-    await this.page.keyboard.press('Escape');
     await this.page.keyboard.press('Escape');
   }
 
   async createTeamWithNonLatinName(teamName: string, slug: string) {
     await this.openAccountsSelector();
 
-    await this.page.click('[data-test="create-team-trigger"]');
+    await this.page.click('[data-test="create-team-account-trigger"]');
 
     await this.page.fill(
       '[data-test="create-team-form"] [data-test="team-name-input"]',
@@ -179,8 +177,7 @@ export class TeamAccountsPageObject {
     await this.openAccountsSelector();
     await expect(this.getTeamFromSelector(teamName)).toBeVisible();
 
-    // Close the selector (Escape closes submenu, then parent dropdown)
+    // Close the selector
-    await this.page.keyboard.press('Escape');
     await this.page.keyboard.press('Escape');
   }
 
@@ -210,10 +207,11 @@ export class TeamAccountsPageObject {
   }
 
   async deleteAccount(email: string) {
+    await expect(async () => {
       await this.page.click('[data-test="delete-team-trigger"]');
+
       await this.otp.completeOtpVerification(email);
 
-    await expect(async () => {
       const click = this.page.click(
         '[data-test="delete-team-form-confirm-button"]',
       );

apps/e2e/tests/team-accounts/team-accounts.spec.ts

@@ -88,7 +88,7 @@ test.describe('Team Accounts', () => {
     await teamAccounts.createTeam();
 
     await teamAccounts.openAccountsSelector();
-    await page.click('[data-test="create-team-trigger"]');
+    await page.click('[data-test="create-team-account-trigger"]');
 
     await teamAccounts.tryCreateTeam('billing');
 
@@ -202,7 +202,7 @@ test.describe('Team Accounts', () => {
 
     // Use non-Latin name to trigger the slug field visibility
     await teamAccounts.openAccountsSelector();
-    await page.click('[data-test="create-team-trigger"]');
+    await page.click('[data-test="create-team-account-trigger"]');
 
     await page.fill(
       '[data-test="create-team-form"] [data-test="team-name-input"]',

apps/web/.env

@@ -38,7 +38,6 @@ NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_DELETION=true
 NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_BILLING=true
 NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS=true
 NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_CREATION=true
-NEXT_PUBLIC_ENABLE_TEAMS_ACCOUNTS_ONLY=false
 NEXT_PUBLIC_LANGUAGE_PRIORITY=application
 
 # NEXTJS

apps/web/app/(marketing)/(legal)/cookie-policy/page.tsx

@@ -0,0 +1,30 @@
+import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+export async function generateMetadata() {
+  const { t } = await createI18nServerInstance();
+
+  return {
+    title: t('marketing:cookiePolicy'),
+  };
+}
+
+async function CookiePolicyPage() {
+  const { t } = await createI18nServerInstance();
+
+  return (
+    <div>
+      <SitePageHeader
+        title={t(`marketing:cookiePolicy`)}
+        subtitle={t(`marketing:cookiePolicyDescription`)}
+      />
+
+      <div className={'container mx-auto py-8'}>
+        <div>Your terms of service content here</div>
+      </div>
+    </div>
+  );
+}
+
+export default withI18n(CookiePolicyPage);

apps/web/app/(marketing)/(legal)/privacy-policy/page.tsx

@@ -0,0 +1,30 @@
+import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+export async function generateMetadata() {
+  const { t } = await createI18nServerInstance();
+
+  return {
+    title: t('marketing:privacyPolicy'),
+  };
+}
+
+async function PrivacyPolicyPage() {
+  const { t } = await createI18nServerInstance();
+
+  return (
+    <div>
+      <SitePageHeader
+        title={t('marketing:privacyPolicy')}
+        subtitle={t('marketing:privacyPolicyDescription')}
+      />
+
+      <div className={'container mx-auto py-8'}>
+        <div>Your terms of service content here</div>
+      </div>
+    </div>
+  );
+}
+
+export default withI18n(PrivacyPolicyPage);

apps/web/app/(marketing)/(legal)/terms-of-service/page.tsx

@@ -0,0 +1,30 @@
+import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+export async function generateMetadata() {
+  const { t } = await createI18nServerInstance();
+
+  return {
+    title: t('marketing:termsOfService'),
+  };
+}
+
+async function TermsOfServicePage() {
+  const { t } = await createI18nServerInstance();
+
+  return (
+    <div>
+      <SitePageHeader
+        title={t(`marketing:termsOfService`)}
+        subtitle={t(`marketing:termsOfServiceDescription`)}
+      />
+
+      <div className={'container mx-auto py-8'}>
+        <div>Your terms of service content here</div>
+      </div>
+    </div>
+  );
+}
+
+export default withI18n(TermsOfServicePage);

apps/web/app/(marketing)/_components/site-footer.tsx

@@ -8,10 +8,10 @@ export function SiteFooter() {
   return (
     <Footer
       logo={<AppLogo className="w-[85px] md:w-[95px]" />}
-      description={<Trans i18nKey="marketing.footerDescription" />}
+      description={<Trans i18nKey="marketing:footerDescription" />}
       copyright={
         <Trans
-          i18nKey="marketing.copyright"
+          i18nKey="marketing:copyright"
           values={{
             product: appConfig.name,
             year: new Date().getFullYear(),
@@ -20,35 +20,35 @@ export function SiteFooter() {
       }
       sections={[
         {
-          heading: <Trans i18nKey="marketing.about" />,
+          heading: <Trans i18nKey="marketing:about" />,
           links: [
-            { href: '/blog', label: <Trans i18nKey="marketing.blog" /> },
+            { href: '/blog', label: <Trans i18nKey="marketing:blog" /> },
-            { href: '/contact', label: <Trans i18nKey="marketing.contact" /> },
+            { href: '/contact', label: <Trans i18nKey="marketing:contact" /> },
           ],
         },
         {
-          heading: <Trans i18nKey="marketing.product" />,
+          heading: <Trans i18nKey="marketing:product" />,
           links: [
             {
               href: '/docs',
-              label: <Trans i18nKey="marketing.documentation" />,
+              label: <Trans i18nKey="marketing:documentation" />,
             },
           ],
         },
         {
-          heading: <Trans i18nKey="marketing.legal" />,
+          heading: <Trans i18nKey="marketing:legal" />,
           links: [
             {
               href: '/terms-of-service',
-              label: <Trans i18nKey="marketing.termsOfService" />,
+              label: <Trans i18nKey="marketing:termsOfService" />,
             },
             {
               href: '/privacy-policy',
-              label: <Trans i18nKey="marketing.privacyPolicy" />,
+              label: <Trans i18nKey="marketing:privacyPolicy" />,
             },
             {
               href: '/cookie-policy',
-              label: <Trans i18nKey="marketing.cookiePolicy" />,
+              label: <Trans i18nKey="marketing:cookiePolicy" />,
             },
           ],
         },

apps/web/app/(marketing)/_components/site-header-account-section.tsx

@@ -31,7 +31,6 @@ const MobileModeToggle = dynamic(
 
 const paths = {
   home: pathsConfig.app.home,
-  profileSettings: pathsConfig.app.personalAccountSettings,
 };
 
 const features = {
@@ -79,28 +78,26 @@ function AuthButtons() {
 
       <div className={'flex items-center gap-x-2'}>
         <Button
-          nativeButton={false}
           className={'hidden md:flex md:text-sm'}
-          render={
+          asChild
-            <Link href={pathsConfig.auth.signIn}>
-              <Trans i18nKey={'auth.signIn'} />
-            </Link>
-          }
           variant={'outline'}
           size={'sm'}
-        />
+        >
+          <Link href={pathsConfig.auth.signIn}>
+            <Trans i18nKey={'auth:signIn'} />
+          </Link>
+        </Button>
 
         <Button
-          nativeButton={false}
+          asChild
-          render={
-            <Link href={pathsConfig.auth.signUp}>
-              <Trans i18nKey={'auth.signUp'} />
-            </Link>
-          }
           className="text-xs md:text-sm"
           variant={'default'}
           size={'sm'}
-        />
+        >
+          <Link href={pathsConfig.auth.signUp}>
+            <Trans i18nKey={'auth:signUp'} />
+          </Link>
+        </Button>
       </div>
     </div>
   );

apps/web/app/(marketing)/_components/site-header.tsx

@@ -9,7 +9,7 @@ import { SiteNavigation } from './site-navigation';
 export function SiteHeader(props: { user?: JWTUserData | null }) {
   return (
     <Header
-      logo={<AppLogo className="mx-auto sm:mx-0" href="/" />}
+      logo={<AppLogo />}
       navigation={<SiteNavigation />}
       actions={<SiteHeaderAccountSection user={props.user ?? null} />}
     />

apps/web/app/(marketing)/_components/site-navigation.tsx

@@ -15,23 +15,23 @@ import { SiteNavigationItem } from './site-navigation-item';
 
 const links = {
   Blog: {
-    label: 'marketing.blog',
+    label: 'marketing:blog',
     path: '/blog',
   },
   Changelog: {
-    label: 'marketing.changelog',
+    label: 'marketing:changelog',
     path: '/changelog',
   },
   Docs: {
-    label: 'marketing.documentation',
+    label: 'marketing:documentation',
     path: '/docs',
   },
   Pricing: {
-    label: 'marketing.pricing',
+    label: 'marketing:pricing',
     path: '/pricing',
   },
   FAQ: {
-    label: 'marketing.faq',
+    label: 'marketing:faq',
     path: '/faq',
   },
 };
@@ -74,14 +74,11 @@ function MobileDropdown() {
           const className = 'flex w-full h-full items-center';
 
           return (
-            <DropdownMenuItem
+            <DropdownMenuItem key={item.path} asChild>
-              key={item.path}
-              render={
               <Link className={className} href={item.path}>
                 <Trans i18nKey={item.label} />
               </Link>
-              }
+            </DropdownMenuItem>
-            />
           );
         })}
       </DropdownMenuContent>

apps/web/app/(marketing)/blog/[slug]/page.tsx

@@ -6,6 +6,8 @@ import { notFound } from 'next/navigation';
 
 import { createCmsClient } from '@kit/cms';
 
+import { withI18n } from '~/lib/i18n/with-i18n';
+
 import { Post } from '../../blog/_components/post';
 
 interface BlogPageProps {
@@ -73,4 +75,4 @@ async function BlogPost({ params }: BlogPageProps) {
   );
 }
 
-export default BlogPost;
+export default withI18n(BlogPost);

apps/web/app/(marketing)/blog/_components/blog-pagination.tsx

@@ -25,7 +25,7 @@ export function BlogPagination(props: {
           }}
         >
           <ArrowLeft className={'mr-2 h-4'} />
-          <Trans i18nKey={'marketing.blogPaginationPrevious'} />
+          <Trans i18nKey={'marketing:blogPaginationPrevious'} />
         </Button>
       </If>
 
@@ -36,7 +36,7 @@ export function BlogPagination(props: {
             navigate(props.currentPage + 1);
           }}
         >
-          <Trans i18nKey={'marketing.blogPaginationNext'} />
+          <Trans i18nKey={'marketing:blogPaginationNext'} />
           <ArrowRight className={'ml-2 h-4'} />
         </Button>
       </If>

apps/web/app/(marketing)/blog/page.tsx

@@ -2,13 +2,14 @@ import { cache } from 'react';
 
 import type { Metadata } from 'next';
 
-import { getLocale, getTranslations } from 'next-intl/server';
-
 import { createCmsClient } from '@kit/cms';
 import { getLogger } from '@kit/shared/logger';
 import { If } from '@kit/ui/if';
 import { Trans } from '@kit/ui/trans';
 
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
 // local imports
 import { SitePageHeader } from '../_components/site-page-header';
 import { BlogPagination } from './_components/blog-pagination';
@@ -23,8 +24,7 @@ const BLOG_POSTS_PER_PAGE = 10;
 export const generateMetadata = async (
   props: BlogPageProps,
 ): Promise<Metadata> => {
-  const t = await getTranslations('marketing');
+  const { t, resolvedLanguage } = await createI18nServerInstance();
-  const resolvedLanguage = await getLocale();
   const searchParams = await props.searchParams;
   const limit = BLOG_POSTS_PER_PAGE;
 
@@ -34,8 +34,8 @@ export const generateMetadata = async (
   const { total } = await getContentItems(resolvedLanguage, limit, offset);
 
   return {
-    title: t('blog'),
+    title: t('marketing:blog'),
-    description: t('blogSubtitle'),
+    description: t('marketing:blogSubtitle'),
     pagination: {
       previous: page > 0 ? `/blog?page=${page - 1}` : undefined,
       next: offset + limit < total ? `/blog?page=${page + 1}` : undefined,
@@ -67,8 +67,7 @@ const getContentItems = cache(
 );
 
 async function BlogPage(props: BlogPageProps) {
-  const t = await getTranslations('marketing');
+  const { t, resolvedLanguage: language } = await createI18nServerInstance();
-  const language = await getLocale();
   const searchParams = await props.searchParams;
 
   const limit = BLOG_POSTS_PER_PAGE;
@@ -83,12 +82,15 @@ async function BlogPage(props: BlogPageProps) {
 
   return (
     <>
-      <SitePageHeader title={t('blog')} subtitle={t('blogSubtitle')} />
+      <SitePageHeader
+        title={t('marketing:blog')}
+        subtitle={t('marketing:blogSubtitle')}
+      />
 
       <div className={'container flex flex-col space-y-6 py-8'}>
         <If
           condition={posts.length > 0}
-          fallback={<Trans i18nKey="marketing.noPosts" />}
+          fallback={<Trans i18nKey="marketing:noPosts" />}
         >
           <PostsGridList>
             {posts.map((post, idx) => {
@@ -109,7 +111,7 @@ async function BlogPage(props: BlogPageProps) {
   );
 }
 
-export default BlogPage;
+export default withI18n(BlogPage);
 
 function PostsGridList({ children }: React.PropsWithChildren) {
   return (

apps/web/app/(marketing)/changelog/[slug]/page.tsx

@@ -6,6 +6,8 @@ import { notFound } from 'next/navigation';
 
 import { createCmsClient } from '@kit/cms';
 
+import { withI18n } from '~/lib/i18n/with-i18n';
+
 import { ChangelogDetail } from '../_components/changelog-detail';
 
 interface ChangelogEntryPageProps {
@@ -105,4 +107,4 @@ async function ChangelogEntryPage({ params }: ChangelogEntryPageProps) {
   );
 }
 
-export default ChangelogEntryPage;
+export default withI18n(ChangelogEntryPage);

apps/web/app/(marketing)/changelog/_components/changelog-header.tsx

@@ -22,7 +22,7 @@ export function ChangelogHeader({ entry }: { entry: Cms.ContentItem }) {
             className="text-muted-foreground hover:text-primary flex items-center gap-1.5 text-sm font-medium transition-colors"
           >
             <ChevronLeft className="h-4 w-4" />
-            <Trans i18nKey="marketing.changelog" />
+            <Trans i18nKey="marketing:changelog" />
           </Link>
         </div>
       </div>

apps/web/app/(marketing)/changelog/_components/changelog-navigation.tsx

@@ -24,8 +24,8 @@ function NavLink({ entry, direction }: NavLinkProps) {
 
   const Icon = isPrevious ? ChevronLeft : ChevronRight;
   const i18nKey = isPrevious
-    ? 'marketing.changelogNavigationPrevious'
+    ? 'marketing:changelogNavigationPrevious'
-    : 'marketing.changelogNavigationNext';
+    : 'marketing:changelogNavigationNext';
 
   return (
     <Link

apps/web/app/(marketing)/changelog/_components/changelog-pagination.tsx

@@ -22,29 +22,24 @@ export function ChangelogPagination({
   return (
     <div className="flex justify-end gap-2">
       {canGoToPreviousPage && (
-        <Button
+        <Button asChild variant="outline" size="sm">
-          render={<Link href={`/changelog?page=${previousPage}`} />}
+          <Link href={`/changelog?page=${previousPage}`}>
-          variant="outline"
-          size="sm"
-        >
             <ArrowLeft className="mr-2 h-3 w-3" />
-
             <span>
-            <Trans i18nKey="marketing.changelogPaginationPrevious" />
+              <Trans i18nKey="marketing:changelogPaginationPrevious" />
             </span>
+          </Link>
         </Button>
       )}
 
       {canGoToNextPage && (
-        <Button
+        <Button asChild variant="outline" size="sm">
-          render={<Link href={`/changelog?page=${nextPage}`} />}
+          <Link href={`/changelog?page=${nextPage}`}>
-          variant="outline"
-          size="sm"
-        >
             <span>
-            <Trans i18nKey="marketing.changelogPaginationNext" />
+              <Trans i18nKey="marketing:changelogPaginationNext" />
             </span>
             <ArrowRight className="ml-2 h-3 w-3" />
+          </Link>
         </Button>
       )}
     </div>

apps/web/app/(marketing)/changelog/page.tsx

@@ -2,13 +2,14 @@ import { cache } from 'react';
 
 import type { Metadata } from 'next';
 
-import { getLocale, getTranslations } from 'next-intl/server';
-
 import { createCmsClient } from '@kit/cms';
 import { getLogger } from '@kit/shared/logger';
 import { If } from '@kit/ui/if';
 import { Trans } from '@kit/ui/trans';
 
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
 import { SitePageHeader } from '../_components/site-page-header';
 import { ChangelogEntry } from './_components/changelog-entry';
 import { ChangelogPagination } from './_components/changelog-pagination';
@@ -22,8 +23,7 @@ const CHANGELOG_ENTRIES_PER_PAGE = 50;
 export const generateMetadata = async (
   props: ChangelogPageProps,
 ): Promise<Metadata> => {
-  const t = await getTranslations('marketing');
+  const { t, resolvedLanguage } = await createI18nServerInstance();
-  const resolvedLanguage = await getLocale();
   const searchParams = await props.searchParams;
   const limit = CHANGELOG_ENTRIES_PER_PAGE;
 
@@ -33,8 +33,8 @@ export const generateMetadata = async (
   const { total } = await getContentItems(resolvedLanguage, limit, offset);
 
   return {
-    title: t('changelog'),
+    title: t('marketing:changelog'),
-    description: t('changelogSubtitle'),
+    description: t('marketing:changelogSubtitle'),
     pagination: {
       previous: page > 0 ? `/changelog?page=${page - 1}` : undefined,
       next: offset + limit < total ? `/changelog?page=${page + 1}` : undefined,
@@ -66,8 +66,7 @@ const getContentItems = cache(
 );
 
 async function ChangelogPage(props: ChangelogPageProps) {
-  const t = await getTranslations('marketing');
+  const { t, resolvedLanguage: language } = await createI18nServerInstance();
-  const language = await getLocale();
   const searchParams = await props.searchParams;
 
   const limit = CHANGELOG_ENTRIES_PER_PAGE;
@@ -83,14 +82,14 @@ async function ChangelogPage(props: ChangelogPageProps) {
   return (
     <>
       <SitePageHeader
-        title={t('changelog')}
+        title={t('marketing:changelog')}
-        subtitle={t('changelogSubtitle')}
+        subtitle={t('marketing:changelogSubtitle')}
       />
 
       <div className="container flex max-w-4xl flex-col space-y-12 py-12">
         <If
           condition={entries.length > 0}
-          fallback={<Trans i18nKey="marketing.noChangelogEntries" />}
+          fallback={<Trans i18nKey="marketing:noChangelogEntries" />}
         >
           <div className="space-y-0">
             {entries.map((entry, index) => {
@@ -115,4 +114,4 @@ async function ChangelogPage(props: ChangelogPageProps) {
   );
 }
 
-export default ChangelogPage;
+export default withI18n(ChangelogPage);

apps/web/app/(marketing)/contact/_components/contact-form.tsx

@@ -1,9 +1,8 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useTransition } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useAction } from 'next-safe-action/hooks';
 import { useForm } from 'react-hook-form';
 
 import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
@@ -24,20 +23,13 @@ import { ContactEmailSchema } from '~/(marketing)/contact/_lib/contact-email.sch
 import { sendContactEmail } from '~/(marketing)/contact/_lib/server/server-actions';
 
 export function ContactForm() {
+  const [pending, startTransition] = useTransition();
+
   const [state, setState] = useState({
     success: false,
     error: false,
   });
 
-  const { execute, isPending } = useAction(sendContactEmail, {
-    onSuccess: () => {
-      setState({ success: true, error: false });
-    },
-    onError: () => {
-      setState({ error: true, success: false });
-    },
-  });
-
   const form = useForm({
     resolver: zodResolver(ContactEmailSchema),
     defaultValues: {
@@ -60,7 +52,15 @@ export function ContactForm() {
       <form
         className={'flex flex-col space-y-4'}
         onSubmit={form.handleSubmit((data) => {
-          execute(data);
+          startTransition(async () => {
+            try {
+              await sendContactEmail(data);
+
+              setState({ success: true, error: false });
+            } catch {
+              setState({ error: true, success: false });
+            }
+          });
         })}
       >
         <FormField
@@ -69,7 +69,7 @@ export function ContactForm() {
             return (
               <FormItem>
                 <FormLabel>
-                  <Trans i18nKey={'marketing.contactName'} />
+                  <Trans i18nKey={'marketing:contactName'} />
                 </FormLabel>
 
                 <FormControl>
@@ -88,7 +88,7 @@ export function ContactForm() {
             return (
               <FormItem>
                 <FormLabel>
-                  <Trans i18nKey={'marketing.contactEmail'} />
+                  <Trans i18nKey={'marketing:contactEmail'} />
                 </FormLabel>
 
                 <FormControl>
@@ -107,7 +107,7 @@ export function ContactForm() {
             return (
               <FormItem>
                 <FormLabel>
-                  <Trans i18nKey={'marketing.contactMessage'} />
+                  <Trans i18nKey={'marketing:contactMessage'} />
                 </FormLabel>
 
                 <FormControl>
@@ -124,8 +124,8 @@ export function ContactForm() {
           }}
         />
 
-        <Button disabled={isPending} type={'submit'}>
+        <Button disabled={pending} type={'submit'}>
-          <Trans i18nKey={'marketing.sendMessage'} />
+          <Trans i18nKey={'marketing:sendMessage'} />
         </Button>
       </form>
     </Form>
@@ -136,11 +136,11 @@ function SuccessAlert() {
   return (
     <Alert variant={'success'}>
       <AlertTitle>
-        <Trans i18nKey={'marketing.contactSuccess'} />
+        <Trans i18nKey={'marketing:contactSuccess'} />
       </AlertTitle>
 
       <AlertDescription>
-        <Trans i18nKey={'marketing.contactSuccessDescription'} />
+        <Trans i18nKey={'marketing:contactSuccessDescription'} />
       </AlertDescription>
     </Alert>
   );
@@ -150,11 +150,11 @@ function ErrorAlert() {
   return (
     <Alert variant={'destructive'}>
       <AlertTitle>
-        <Trans i18nKey={'marketing.contactError'} />
+        <Trans i18nKey={'marketing:contactError'} />
       </AlertTitle>
 
       <AlertDescription>
-        <Trans i18nKey={'marketing.contactErrorDescription'} />
+        <Trans i18nKey={'marketing:contactErrorDescription'} />
       </AlertDescription>
     </Alert>
   );

apps/web/app/(marketing)/contact/_lib/contact-email.schema.ts

@@ -1,4 +1,4 @@
-import * as z from 'zod';
+import { z } from 'zod';
 
 export const ContactEmailSchema = z.object({
   name: z.string().min(1).max(200),

apps/web/app/(marketing)/contact/_lib/server/server-actions.ts

@@ -1,29 +1,30 @@
 'use server';
 
-import * as z from 'zod';
+import { z } from 'zod';
 
 import { getMailer } from '@kit/mailers';
-import { publicActionClient } from '@kit/next/safe-action';
+import { enhanceAction } from '@kit/next/actions';
 
 import { ContactEmailSchema } from '../contact-email.schema';
 
 const contactEmail = z
   .string({
-    error:
+    description: `The email where you want to receive the contact form submissions.`,
+    required_error:
       'Contact email is required. Please use the environment variable CONTACT_EMAIL.',
   })
   .parse(process.env.CONTACT_EMAIL);
 
 const emailFrom = z
   .string({
-    error:
+    description: `The email sending address.`,
+    required_error:
       'Sender email is required. Please use the environment variable EMAIL_SENDER.',
   })
   .parse(process.env.EMAIL_SENDER);
 
-export const sendContactEmail = publicActionClient
+export const sendContactEmail = enhanceAction(
-  .schema(ContactEmailSchema)
+  async (data) => {
-  .action(async ({ parsedInput: data }) => {
     const mailer = await getMailer();
 
     await mailer.sendEmail({
@@ -42,4 +43,9 @@ export const sendContactEmail = publicActionClient
     });
 
     return {};
-  });
+  },
+  {
+    schema: ContactEmailSchema,
+    auth: false,
+  },
+);

apps/web/app/(marketing)/contact/page.tsx

@@ -1,25 +1,28 @@
-import { getTranslations } from 'next-intl/server';
-
 import { Heading } from '@kit/ui/heading';
 import { Trans } from '@kit/ui/trans';
 
 import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
 import { ContactForm } from '~/(marketing)/contact/_components/contact-form';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
 
 export async function generateMetadata() {
-  const t = await getTranslations('marketing');
+  const { t } = await createI18nServerInstance();
 
   return {
-    title: t('contact'),
+    title: t('marketing:contact'),
   };
 }
 
 async function ContactPage() {
-  const t = await getTranslations('marketing');
+  const { t } = await createI18nServerInstance();
 
   return (
     <div>
-      <SitePageHeader title={t(`contact`)} subtitle={t(`contactDescription`)} />
+      <SitePageHeader
+        title={t(`marketing:contact`)}
+        subtitle={t(`marketing:contactDescription`)}
+      />
 
       <div className={'container mx-auto'}>
         <div
@@ -32,11 +35,11 @@ async function ContactPage() {
           >
             <div>
               <Heading level={3}>
-                <Trans i18nKey={'marketing.contactHeading'} />
+                <Trans i18nKey={'marketing:contactHeading'} />
               </Heading>
 
               <p className={'text-muted-foreground'}>
-                <Trans i18nKey={'marketing.contactSubheading'} />
+                <Trans i18nKey={'marketing:contactSubheading'} />
               </p>
             </div>
 
@@ -48,4 +51,4 @@ async function ContactPage() {
   );
 }
 
-export default ContactPage;
+export default withI18n(ContactPage);

apps/web/app/(marketing)/docs/[...slug]/page.tsx

@@ -7,6 +7,8 @@ import { If } from '@kit/ui/if';
 import { Separator } from '@kit/ui/separator';
 import { cn } from '@kit/ui/utils';
 
+import { withI18n } from '~/lib/i18n/with-i18n';
+
 // local imports
 import { DocsCards } from '../_components/docs-cards';
 
@@ -89,4 +91,4 @@ async function DocumentationPage({ params }: DocumentationPageProps) {
   );
 }
 
-export default DocumentationPage;
+export default withI18n(DocumentationPage);

apps/web/app/(marketing)/docs/_components/docs-nav-link.tsx

@@ -3,7 +3,7 @@
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 
-import { SidebarMenuButton, SidebarMenuItem } from '@kit/ui/sidebar';
+import { SidebarMenuButton, SidebarMenuItem } from '@kit/ui/shadcn-sidebar';
 import { cn, isRouteActive } from '@kit/ui/utils';
 
 export function DocsNavLink({
@@ -12,18 +12,20 @@ export function DocsNavLink({
   children,
 }: React.PropsWithChildren<{ label: string; url: string }>) {
   const currentPath = usePathname();
-  const isCurrent = isRouteActive(url, currentPath);
+  const isCurrent = isRouteActive(url, currentPath, true);
 
   return (
     <SidebarMenuItem>
       <SidebarMenuButton
-        render={<Link href={url} />}
+        asChild
         isActive={isCurrent}
         className={cn('text-secondary-foreground transition-all')}
       >
+        <Link href={url}>
           <span className="block max-w-full truncate">{label}</span>
 
           {children}
+        </Link>
       </SidebarMenuButton>
     </SidebarMenuItem>
   );

apps/web/app/(marketing)/docs/_components/docs-navigation-collapsible.tsx

@@ -16,7 +16,7 @@ export function DocsNavigationCollapsible(
   const prefix = props.prefix;
 
   const isChildActive = props.node.children.some((child) =>
-    isRouteActive(prefix + '/' + child.url, currentPath),
+    isRouteActive(prefix + '/' + child.url, currentPath, false),
   );
 
   return (

apps/web/app/(marketing)/docs/_components/docs-navigation.tsx

@@ -10,12 +10,12 @@ import {
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarMenuSub,
-} from '@kit/ui/sidebar';
+} from '@kit/ui/shadcn-sidebar';
 
 import { DocsNavLink } from '~/(marketing)/docs/_components/docs-nav-link';
 import { DocsNavigationCollapsible } from '~/(marketing)/docs/_components/docs-navigation-collapsible';
 
-import { FloatingDocumentationNavigationButton } from './floating-docs-navigation-button';
+import { FloatingDocumentationNavigation } from './floating-docs-navigation';
 
 function Node({
   node,
@@ -85,11 +85,13 @@ function NodeTrigger({
 }) {
   if (node.collapsible) {
     return (
-      <CollapsibleTrigger render={<SidebarMenuItem />}>
+      <CollapsibleTrigger asChild>
+        <SidebarMenuItem>
           <SidebarMenuButton>
             {label}
             <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
           </SidebarMenuButton>
+        </SidebarMenuItem>
       </CollapsibleTrigger>
     );
   }
@@ -135,10 +137,12 @@ export function DocsNavigation({
   return (
     <>
       <Sidebar
-        variant={'sidebar'}
+        variant={'ghost'}
-        className={'sticky z-1 mt-4 max-h-full overflow-y-auto pr-4'}
+        className={
+          'border-border/50 sticky z-1 mt-4 max-h-full overflow-y-auto pr-4'
+        }
       >
-        <SidebarGroup>
+        <SidebarGroup className="p-0">
           <SidebarGroupContent>
             <SidebarMenu className={'pb-48'}>
               <Tree pages={pages} level={0} prefix={prefix} />
@@ -147,7 +151,17 @@ export function DocsNavigation({
         </SidebarGroup>
       </Sidebar>
 
-      <FloatingDocumentationNavigationButton />
+      <div className={'lg:hidden'}>
+        <FloatingDocumentationNavigation>
+          <SidebarGroup>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <Tree pages={pages} level={0} prefix={prefix} />
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </FloatingDocumentationNavigation>
+      </div>
     </>
   );
 }

apps/web/app/(marketing)/docs/_components/floating-docs-navigation.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { useEffect, useEffectEvent, useMemo, useState } from 'react';
+
+import { usePathname } from 'next/navigation';
+
+import { Menu } from 'lucide-react';
+
+import { isBrowser } from '@kit/shared/utils';
+import { Button } from '@kit/ui/button';
+import { If } from '@kit/ui/if';
+
+export function FloatingDocumentationNavigation(
+  props: React.PropsWithChildren,
+) {
+  const activePath = usePathname();
+
+  const body = useMemo(() => {
+    return isBrowser() ? document.body : null;
+  }, []);
+
+  const [isVisible, setIsVisible] = useState(false);
+
+  const enableScrolling = useEffectEvent(
+    () => body && (body.style.overflowY = ''),
+  );
+
+  const disableScrolling = useEffectEvent(
+    () => body && (body.style.overflowY = 'hidden'),
+  );
+
+  // enable/disable body scrolling when the docs are toggled
+  useEffect(() => {
+    if (isVisible) {
+      disableScrolling();
+    } else {
+      enableScrolling();
+    }
+  }, [isVisible]);
+
+  // hide docs when navigating to another page
+  useEffect(() => {
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setIsVisible(false);
+  }, [activePath]);
+
+  const onClick = () => {
+    setIsVisible(!isVisible);
+  };
+
+  return (
+    <>
+      <If condition={isVisible}>
+        <div
+          className={
+            'fixed top-0 left-0 z-10 h-screen w-full p-4' +
+            ' dark:bg-background flex flex-col space-y-4 overflow-auto bg-white'
+          }
+        >
+          {props.children}
+        </div>
+      </If>
+
+      <Button
+        className={'fixed right-5 bottom-5 z-10 h-16 w-16 rounded-full'}
+        onClick={onClick}
+      >
+        <Menu className={'h-8'} />
+      </Button>
+    </>
+  );
+}

apps/web/app/(marketing)/docs/layout.tsx

@@ -1,6 +1,6 @@
-import { getLocale } from 'next-intl/server';
+import { SidebarProvider } from '@kit/ui/shadcn-sidebar';
 
-import { SidebarProvider } from '@kit/ui/sidebar';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 
 // local imports
 import { DocsNavigation } from './_components/docs-navigation';
@@ -8,8 +8,8 @@ import { getDocs } from './_lib/server/docs.loader';
 import { buildDocumentationTree } from './_lib/utils';
 
 async function DocsLayout({ children }: React.PropsWithChildren) {
-  const locale = await getLocale();
+  const { resolvedLanguage } = await createI18nServerInstance();
-  const docs = await getDocs(locale);
+  const docs = await getDocs(resolvedLanguage);
   const tree = buildDocumentationTree(docs);
 
   return (

apps/web/app/(marketing)/docs/page.tsx

@@ -1,21 +1,21 @@
-import { getLocale, getTranslations } from 'next-intl/server';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
 
 import { SitePageHeader } from '../_components/site-page-header';
 import { DocsCards } from './_components/docs-cards';
 import { getDocs } from './_lib/server/docs.loader';
 
 export const generateMetadata = async () => {
-  const t = await getTranslations('marketing');
+  const { t } = await createI18nServerInstance();
 
   return {
-    title: t('documentation'),
+    title: t('marketing:documentation'),
   };
 };
 
 async function DocsPage() {
-  const t = await getTranslations('marketing');
+  const { t, resolvedLanguage } = await createI18nServerInstance();
-  const locale = await getLocale();
+  const items = await getDocs(resolvedLanguage);
-  const items = await getDocs(locale);
 
   // Filter out any docs that have a parentId, as these are children of other docs
   const cards = items.filter((item) => !item.parentId);
@@ -23,8 +23,8 @@ async function DocsPage() {
   return (
     <div className={'flex w-full flex-1 flex-col gap-y-6 xl:gap-y-8'}>
       <SitePageHeader
-        title={t('documentation')}
+        title={t('marketing:documentation')}
-        subtitle={t('documentationSubtitle')}
+        subtitle={t('marketing:documentationSubtitle')}
       />
 
       <div className={'relative flex size-full justify-center overflow-y-auto'}>
@@ -34,4 +34,4 @@ async function DocsPage() {
   );
 }
 
-export default DocsPage;
+export default withI18n(DocsPage);

apps/web/app/(marketing)/faq/page.tsx

@@ -1,30 +1,31 @@
 import Link from 'next/link';
 
 import { ArrowRight, ChevronDown } from 'lucide-react';
-import { getTranslations } from 'next-intl/server';
 
 import { Button } from '@kit/ui/button';
 import { Trans } from '@kit/ui/trans';
 
 import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
 
 export const generateMetadata = async () => {
-  const t = await getTranslations('marketing');
+  const { t } = await createI18nServerInstance();
 
   return {
-    title: t('faq'),
+    title: t('marketing:faq'),
   };
 };
 
 async function FAQPage() {
-  const t = await getTranslations('marketing');
+  const { t } = await createI18nServerInstance();
 
   // replace this content with translations
   const faqItems = [
     {
-      // or: t('faq.question1')
+      // or: t('marketing:faq.question1')
       question: `Do you offer a free trial?`,
-      // or: t('faq.answer1')
+      // or: t('marketing:faq.answer1')
       answer: `Yes, we offer a 14-day free trial. You can cancel at any time during the trial period and you won't be charged.`,
     },
     {
@@ -73,7 +74,10 @@ async function FAQPage() {
       />
 
       <div className={'flex flex-col space-y-4 xl:space-y-8'}>
-        <SitePageHeader title={t('faq')} subtitle={t('faqSubtitle')} />
+        <SitePageHeader
+          title={t('marketing:faq')}
+          subtitle={t('marketing:faqSubtitle')}
+        />
 
         <div className={'container flex flex-col items-center space-y-8 pb-16'}>
           <div className="divide-border flex w-full max-w-xl flex-col divide-y divide-dashed rounded-md border">
@@ -83,16 +87,14 @@ async function FAQPage() {
           </div>
 
           <div>
-            <Button
+            <Button asChild variant={'outline'}>
-              nativeButton={false}
+              <Link href={'/contact'}>
-              render={<Link href={'/contact'} />}
-              variant={'link'}
-            >
                 <span>
-                <Trans i18nKey={'marketing.contactFaq'} />
+                  <Trans i18nKey={'marketing:contactFaq'} />
                 </span>
 
                 <ArrowRight className={'ml-2 w-4'} />
+              </Link>
             </Button>
           </div>
         </div>
@@ -101,7 +103,7 @@ async function FAQPage() {
   );
 }
 
-export default FAQPage;
+export default withI18n(FAQPage);
 
 function FaqItem({
   item,

apps/web/app/(marketing)/layout.tsx

@@ -3,6 +3,7 @@ import { getSupabaseServerClient } from '@kit/supabase/server-client';
 
 import { SiteFooter } from '~/(marketing)/_components/site-footer';
 import { SiteHeader } from '~/(marketing)/_components/site-header';
+import { withI18n } from '~/lib/i18n/with-i18n';
 
 async function SiteLayout(props: React.PropsWithChildren) {
   const client = getSupabaseServerClient();
@@ -19,4 +20,4 @@ async function SiteLayout(props: React.PropsWithChildren) {
   );
 }
 
-export default SiteLayout;
+export default withI18n(SiteLayout);

apps/web/app/(marketing)/page.tsx

@@ -20,6 +20,7 @@ import { Trans } from '@kit/ui/trans';
 
 import billingConfig from '~/config/billing.config';
 import pathsConfig from '~/config/paths.config';
+import { withI18n } from '~/lib/i18n/with-i18n';
 
 function Home() {
   return (
@@ -29,13 +30,11 @@ function Home() {
           pill={
             <Pill label={'New'}>
               <span>The SaaS Starter Kit for ambitious developers</span>
-              <PillActionButton
+              <PillActionButton asChild>
-                render={
                 <Link href={'/auth/sign-up'}>
                   <ArrowRightIcon className={'h-4 w-4'} />
                 </Link>
-                }
+              </PillActionButton>
-              />
             </Pill>
           }
           title={
@@ -171,7 +170,7 @@ function Home() {
   );
 }
 
-export default Home;
+export default withI18n(Home);
 
 function MainCallToActionButton() {
   return (
@@ -180,7 +179,7 @@ function MainCallToActionButton() {
         <Link href={'/auth/sign-up'}>
           <span className={'flex items-center space-x-0.5'}>
             <span>
-              <Trans i18nKey={'common.getStarted'} />
+              <Trans i18nKey={'common:getStarted'} />
             </span>
 
             <ArrowRightIcon
@@ -195,7 +194,7 @@ function MainCallToActionButton() {
 
       <CtaButton variant={'link'} className="h-10 text-sm">
         <Link href={'/pricing'}>
-          <Trans i18nKey={'common.pricing'} />
+          <Trans i18nKey={'common:pricing'} />
         </Link>
       </CtaButton>
     </div>

apps/web/app/(marketing)/pricing/page.tsx

@@ -1,16 +1,16 @@
-import { getTranslations } from 'next-intl/server';
-
 import { PricingTable } from '@kit/billing-gateway/marketing';
 
 import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
 import billingConfig from '~/config/billing.config';
 import pathsConfig from '~/config/paths.config';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
 
 export const generateMetadata = async () => {
-  const t = await getTranslations('marketing');
+  const { t } = await createI18nServerInstance();
 
   return {
-    title: t('pricing'),
+    title: t('marketing:pricing'),
   };
 };
 
@@ -20,11 +20,14 @@ const paths = {
 };
 
 async function PricingPage() {
-  const t = await getTranslations('marketing');
+  const { t } = await createI18nServerInstance();
 
   return (
     <div className={'flex flex-col space-y-8'}>
-      <SitePageHeader title={t('pricing')} subtitle={t('pricingSubtitle')} />
+      <SitePageHeader
+        title={t('marketing:pricing')}
+        subtitle={t('marketing:pricingSubtitle')}
+      />
 
       <div className={'container mx-auto pb-8 xl:pb-16'}>
         <PricingTable paths={paths} config={billingConfig} />
@@ -33,4 +36,4 @@ async function PricingPage() {
   );
 }
 
-export default PricingPage;
+export default withI18n(PricingPage);

apps/web/app/[locale]/(marketing)/(legal)/cookie-policy/page.tsx

@@ -1,30 +0,0 @@
-import { getTranslations } from 'next-intl/server';
-
-import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
-
-export async function generateMetadata() {
-  const t = await getTranslations('marketing');
-
-  return {
-    title: t('cookiePolicy'),
-  };
-}
-
-async function CookiePolicyPage() {
-  const t = await getTranslations('marketing');
-
-  return (
-    <div>
-      <SitePageHeader
-        title={t(`marketing.cookiePolicy`)}
-        subtitle={t(`marketing.cookiePolicyDescription`)}
-      />
-
-      <div className={'container mx-auto py-8'}>
-        <div>Your terms of service content here</div>
-      </div>
-    </div>
-  );
-}
-
-export default CookiePolicyPage;