diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 525c155e22..ca8815224f 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -1,6 +1,5 @@
/**/package.json @calcom/Foundation
/apps/api/**/* @calcom/API
-/apps/ui-playground/**/* @calcom/Consumer @calcom/Foundation
/apps/web/**/layout.tsx @calcom/Consumer @calcom/Foundation
/apps/web/lib/csp.ts @calcom/Foundation
/apps/web/lib/buildNonce.ts @calcom/Foundation
diff --git a/apps/ui-playground/.gitignore b/apps/ui-playground/.gitignore
deleted file mode 100644
index b4ae1e735b..0000000000
--- a/apps/ui-playground/.gitignore
+++ /dev/null
@@ -1,44 +0,0 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/versions
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
-
-# misc
-.DS_Store
-*.pem
-
-# debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-.pnpm-debug.log*
-
-# env files (can opt-in for committing if needed)
-.env*
-
-# vercel
-.vercel
-
-# typescript
-*.tsbuildinfo
-next-env.d.ts
-
-# Source maps
-*.source/*
diff --git a/apps/ui-playground/README.md b/apps/ui-playground/README.md
deleted file mode 100644
index e215bc4ccf..0000000000
--- a/apps/ui-playground/README.md
+++ /dev/null
@@ -1,36 +0,0 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/apps/ui-playground/app/(home)/layout.tsx b/apps/ui-playground/app/(home)/layout.tsx
deleted file mode 100644
index a44af49c2a..0000000000
--- a/apps/ui-playground/app/(home)/layout.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { HomeLayout } from "fumadocs-ui/layouts/home";
-import type { ReactNode } from "react";
-
-import { baseOptions } from "../layout.config";
-
-export default function Layout({ children }: { children: ReactNode }) {
- // @ts-expect-error weird type check
- return {children};
-}
diff --git a/apps/ui-playground/app/(home)/page.tsx b/apps/ui-playground/app/(home)/page.tsx
deleted file mode 100644
index b7f52d73a3..0000000000
--- a/apps/ui-playground/app/(home)/page.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-export default function Page() {
- return (
-
-
-);
diff --git a/apps/ui-playground/content/design/components/avatar.mdx b/apps/ui-playground/content/design/components/avatar.mdx
deleted file mode 100644
index fa843d6c80..0000000000
--- a/apps/ui-playground/content/design/components/avatar.mdx
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: Avatar
-airtableId: reciflFrJo5cVgGrS
----
-import { Avatar } from "@calcom/ui/components/avatar"
-import { RenderComponentWithSnippet } from "@/app/components/render"
-import { Row } from "@/app/components/row"
-import { SizesExample } from "./avatar.sizes"
-import { ImageExample } from "./avatar.image"
-import { TooltipExample } from "./avatar.tooltip"
-import { LinkExample } from "./avatar.link"
-import { IndicatorExample } from "./avatar.indicator"
-import { ShapeExample } from "./avatar.shape"
-
-## Size Variations
-
-Avatars come in different sizes to suit various use cases.
-
-
-
-## Shape Variations
-
-Avatars can be displayed in either circular or square shapes.
-
-
-
-## With and Without Image
-
-Avatars can display either an image or a fallback placeholder.
-
-
-
-## With Tooltip
-
-Avatars can show additional information on hover using tooltips.
-
-
-
-## With Link
-
-Avatars can be made clickable by providing an href.
-
-
-
-## With Indicator
-
-Avatars can include status indicators or badges.
-
-
-
-## Usage Example
-
-Here's a complete example showing how to use the Avatar component with all its props:
-
-```tsx
-import { Avatar } from "@calcom/ui/components/avatar";
-
-function Example() {
- return (
-
- {/* Basic Avatar */}
-
-
- {/* Avatar with Link */}
-
-
- {/* Avatar with Tooltip and Indicator */}
- }
- />
-
- {/* Avatar with Fallback */}
- UN}
- />
-
-
- );
-};
diff --git a/apps/ui-playground/content/design/components/button.mdx b/apps/ui-playground/content/design/components/button.mdx
deleted file mode 100644
index cf7a55bb7a..0000000000
--- a/apps/ui-playground/content/design/components/button.mdx
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: Button
-airtableId: recEJyzUeMMXCjyTB
----
-import { Button } from "@calcom/ui/components/button"
-import { RenderComponentWithSnippet } from "@/app/components/render"
-import { Row } from "@/app/components/row"
-import { OnClickExample } from "./button.onClick"
-import { VariantExample } from "./button.variant"
-import { IconsExample } from "./button.icons"
-import { LoadingExample } from "./button.loading"
-import { DisabledExample } from "./button.disabled"
-import { ButtonGroupExample,ButtonGroupSizes,ButtonGroupSizesCombined} from "./button.buttongroup"
-
-## Variants and Colors
-
-Buttons come in different variants and colors to suit different purposes. Each variant can be combined with any color and size.
-
-
-
-## Icons
-
-Buttons can include icons at the start or end. The icon color and size are automatically handled by the button component.
-
-
-
-## Loading State
-
-Buttons can show a loading state to indicate an ongoing action. The loading spinner replaces the button text while maintaining the button's width.
-
-
-
-## Disabled State
-
-Buttons can be disabled to indicate that they are not interactive. The disabled state is visually distinct and prevents any click events.
-
-
-
-## onClick Events
-
-Buttons handle click events like any other button component. You can provide an onClick handler to respond to user interactions.
-
-
-
-Providing a loading state will add a spinner on the left side of the button.
-
-
-
-## Disabled
-
-
-
-## Button Groups
-
-Buttons can be grouped together using the ButtonGroup component. The ButtonGroup component can be used to create a group of related buttons with consistent spacing and optional combined borders.
-
-
-
-### Button Group Sizes
-
-#### Separated
-
-
-
-#### Combined
-
-
-
-## Usage
-
-```tsx
-// Primary button (default)
-
-
-// Secondary button
-
-
-// Minimal button
-
-
-// Destructive button
-
-
-// With start icon
-
-
-// With end icon
-
-
-// With link
-
-
-// Different sizes
-
-
-
-
-```
diff --git a/apps/ui-playground/content/design/components/button.onClick.tsx b/apps/ui-playground/content/design/components/button.onClick.tsx
deleted file mode 100644
index 35f1418cd9..0000000000
--- a/apps/ui-playground/content/design/components/button.onClick.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-"use client";
-
-import { RenderComponentWithSnippet } from "@/app/components/render";
-import { Row } from "@/app/components/row";
-
-import { Button } from "@calcom/ui/components/button";
-
-export const OnClickExample: React.FC = () => (
-
-
-
-
-
-);
diff --git a/apps/ui-playground/content/design/components/button.variant.tsx b/apps/ui-playground/content/design/components/button.variant.tsx
deleted file mode 100644
index 0a8d72ebfe..0000000000
--- a/apps/ui-playground/content/design/components/button.variant.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-"use client";
-
-import { RenderComponentWithSnippet } from "@/app/components/render";
-import { Row } from "@/app/components/row";
-
-import { Button } from "@calcom/ui/components/button";
-
-const variants = ["button", "icon"] as const;
-const colors = ["primary", "secondary", "minimal", "destructive"] as const;
-const sizes = ["xs", "sm", "base", "lg"] as const;
-
-export const VariantExample: React.FC = () => (
-
-
-
- fieldArrayName="customLabel"
- optionPlaceholders={["Social media link"]}
- defaultNumberOfOptions={1}
- addOptionLabel="Add another social media link"
- />
-
- This section demonstrates how to include an icon in the header and uses FormKit auto-animate for
- smooth transitions when toggling content visibility.
-
- This section demonstrates how to include an icon in the header and uses FormKit auto-animate for
- smooth transitions when toggling content visibility.
-
-
-);
diff --git a/apps/ui-playground/content/design/components/select.mdx b/apps/ui-playground/content/design/components/select.mdx
deleted file mode 100644
index fc4bab58ae..0000000000
--- a/apps/ui-playground/content/design/components/select.mdx
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: Select
-airtableId: reccfLvVzECvskVmu
----
-import { RenderComponentWithSnippet } from "@/app/components/render"
-import { Row } from "@/app/components/row"
-import { BasicExample } from "./select.basic"
-import { MultiExample } from "./select.multi"
-import { GroupedExample } from "./select.grouped"
-import { FieldExample } from "./select.field"
-import { DisabledExample } from "./select.disabled"
-import { LoadingExample } from "./select.loading"
-import { AsyncExample } from "./select.async"
-
-## Basic
-
-Basic select component with single selection and clearable option.
-
-
-
-## Multi Select
-
-Select component that allows multiple selections.
-
-
-
-
-## Grouped Options
-
-Select with options grouped into categories.
-
-
-
-## Async Select with Search
-
-Select with asynchronous loading and search functionality.
-
-
-
-{/* ## Select Field
-
-Select component with label and validation support.
-
- */}
-
-## Disabled State
-
-Select component in disabled state.
-
-
-
-## Loading State
-
-Select component in loading state.
-
-
-
diff --git a/apps/ui-playground/content/design/components/select.multi.tsx b/apps/ui-playground/content/design/components/select.multi.tsx
deleted file mode 100644
index 497d5e62dc..0000000000
--- a/apps/ui-playground/content/design/components/select.multi.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-"use client";
-
-import { RenderComponentWithSnippet } from "@/app/components/render";
-import { useState } from "react";
-
-import { Select } from "@calcom/ui/components/form";
-
-const options = [
- { value: "chocolate", label: "Chocolate" },
- { value: "strawberry", label: "Strawberry" },
- { value: "vanilla", label: "Vanilla" },
- { value: "mint", label: "Mint" },
- { value: "coffee", label: "Coffee" },
-];
-
-export const MultiExample: React.FC = () => {
- const [multiValue, setMultiValue] = useState<{ value: string; label: string }[]>([]);
-
- return (
-
-
-
-
- );
-};
diff --git a/apps/ui-playground/content/design/components/switch.mdx b/apps/ui-playground/content/design/components/switch.mdx
deleted file mode 100644
index 9c3fa3db36..0000000000
--- a/apps/ui-playground/content/design/components/switch.mdx
+++ /dev/null
@@ -1,53 +0,0 @@
----
-title: Switch
-airtableId: reccfLvVzECvskVmu
----
-import { BasicExample, ControlledExample, LabelPositionExample, StatesExample,WithPadding,SwitchSizes } from "./switch";
-
-The Switch component is a toggle that allows users to turn a setting on or off. It's built on top of Radix UI's Switch primitive and includes support for labels, tooltips, and various size options.
-
-## Installation
-
-```ts
-import { Switch } from "@calcom/ui";
-```
-
-## Examples
-
-### Basic Switch
-
-A simple switch with and without a label.
-
-
-
-### Switch sizes
-
-A switch can be sized either small or 'base'.
-
-
-
-
-### Label Position
-
-The label can be positioned either before or after the switch.
-
-
-
-### States
-
-Switches can be enabled, disabled, or disabled in a checked state.
-
-
-
-
-### Controlled Switch
-
-Use state to control the switch's checked state.
-
-
-
-### With Padding
-
-Use the padding prop to add padding to the switch.
-
-
\ No newline at end of file
diff --git a/apps/ui-playground/content/design/components/switch.tsx b/apps/ui-playground/content/design/components/switch.tsx
deleted file mode 100644
index e4ce1d769b..0000000000
--- a/apps/ui-playground/content/design/components/switch.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-"use client";
-
-import { RenderComponentWithSnippet } from "@/app/components/render";
-import { useState } from "react";
-
-import { Switch } from "@calcom/ui/components/form";
-
-export const BasicExample = () => {
- const [checked, setChecked] = useState(false);
-
- return (
-
-
-
-);
diff --git a/apps/ui-playground/content/design/components/toggleGroup.mdx b/apps/ui-playground/content/design/components/toggleGroup.mdx
deleted file mode 100644
index dc83cb8923..0000000000
--- a/apps/ui-playground/content/design/components/toggleGroup.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: Toggle Group
----
-import { BasicExample, WithIconsExample, DisabledExample, FullWidthExample, VerticalExample, IconOnlyExample } from "./toggleGroup.basic.tsx"
-
-## Basic
-
-A basic toggle group with simple text labels.
-
-
-
-## With Icons
-
-Toggle group with icons.
-
-
-
-## Disabled Items
-
-Toggle group with a disabled option.
-
-
-
-## Full Width
-
-A full-width toggle group that spans the container width.
-
-
-
-## Vertical Orientation
-
-A vertical toggle group with icons, perfect for navigation menus or filters.
-
-
-
-## Icon Only
-
-Toggle groups with only icons and tooltips, in both horizontal and vertical orientations.
-
-
diff --git a/apps/ui-playground/content/design/icons.mdx b/apps/ui-playground/content/design/icons.mdx
deleted file mode 100644
index cf840f2edc..0000000000
--- a/apps/ui-playground/content/design/icons.mdx
+++ /dev/null
@@ -1,31 +0,0 @@
----
-title: Icons
-description: Cal.com's icon system using Lucide icons
----
-
-import { IconGrid } from '@/components/ui/IconGrid';
-
-# Icon System
-
-Our icon system is built using [Lucide](https://lucide.dev/) icons, providing a consistent and scalable set of icons across the application. All icons are available through the `Icon` component from `@calcom/ui`.
-
-## Usage
-
-```tsx
-import { Icon } from "@calcom/ui";
-
-// Basic usage
-
-
-// With different size
-
-
-// With different color
-
-```
-
-## Available Icons
-
-Search and browse all available icons. Hover over an icon to copy its component code or name.
-
-
diff --git a/apps/ui-playground/content/design/index.mdx b/apps/ui-playground/content/design/index.mdx
deleted file mode 100644
index 463b548daf..0000000000
--- a/apps/ui-playground/content/design/index.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Design System
----
-
-
-
-Component and general design documentation.
diff --git a/apps/ui-playground/content/design/meta.json b/apps/ui-playground/content/design/meta.json
deleted file mode 100644
index a55c67ffde..0000000000
--- a/apps/ui-playground/content/design/meta.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
- "title": "Design",
- "description": "Our components",
- "icon": "Frame",
- "root": true
-}
diff --git a/apps/ui-playground/content/design/shadows.mdx b/apps/ui-playground/content/design/shadows.mdx
deleted file mode 100644
index 996c29cb9f..0000000000
--- a/apps/ui-playground/content/design/shadows.mdx
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: Shadows
-description: Cal.com's shadow system for depth and elevation
----
-
-import { ShadowTable } from '@/components/ui/ShadowTable';
-
-# Shadows
-
-Our shadow system is designed to create visual hierarchy and depth in the interface. We provide specific shadows for different components and states, ensuring consistent interaction patterns across the application.
-
-## Shadow Categories
-
-### Component-Specific Shadows
-- **Dropdown**: Used for dropdown menus and popovers
-- **Button States**: Different shadows for default, hover, and active states
-- **Brand Buttons**: Special shadows for brand-colored buttons
-
-### State-Based Shadows
-- **Rested State**: Default appearance
-- **Hover State**: Enhanced depth when hovering
-- **Active State**: Pressed appearance
-
-## Usage Examples
-
-### Dropdowns and Popovers
-```tsx
-