fix

2026-06-30 08:04:18 +00:00 · 2026-01-14 12:59:48 +04:00
parent aee10914fe
commit b5c7a014c8
186 changed files with 1225 additions and 1834 deletions
--- a/apps/v4/app/(app)/docs/[[...slug]]/page.tsx
+++ b/apps/v4/app/(app)/docs/[[...slug]]/page.tsx
@@ -1,24 +1,16 @@
 import Link from "next/link"
 import { notFound } from "next/navigation"
 import { mdxComponents } from "@/mdx-components"
-import {
-  IconArrowLeft,
-  IconArrowRight,
-  IconArrowUpRight,
-} from "@tabler/icons-react"
-import fm from "front-matter"
+import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react"
 import { findNeighbour } from "fumadocs-core/page-tree"
-import z from "zod"

 import { source } from "@/lib/source"
 import { absoluteUrl } from "@/lib/utils"
 import { DocsBaseSwitcher } from "@/components/docs-base-switcher"
-import { DocsPageLinks } from "@/components/docs-page-links"
+import { DocsCopyPage } from "@/components/docs-copy-page"
 import { DocsTableOfContents } from "@/components/docs-toc"
 import { OpenInV0Cta } from "@/components/open-in-v0-cta"
-import { Badge } from "@/registry/new-york-v4/ui/badge"
 import { Button } from "@/registry/new-york-v4/ui/button"
-import { Separator } from "@/registry/new-york-v4/ui/separator"

 export const revalidate = false
 export const dynamic = "force-static"
@@ -88,19 +80,7 @@ export default async function Page(props: {
  const doc = page.data
  const MDX = doc.body
  const neighbours = findNeighbour(source.pageTree, page.url)
-
  const raw = await page.data.getText("raw")
-  const { attributes } = fm(raw)
-  const { links } = z
-    .object({
-      links: z
-        .object({
-          doc: z.string().optional(),
-          api: z.string().optional(),
-        })
-        .optional(),
-    })
-    .parse(attributes)

  return (
    <div
@@ -108,8 +88,8 @@ export default async function Page(props: {
      className="flex scroll-mt-24 items-stretch pb-8 text-[1.05rem] sm:text-[15px] xl:w-full"
    >
      <div className="flex min-w-0 flex-1 flex-col">
-        <div className="h-(--top-spacing) shrink-0"></div>
-        <div className="mx-auto flex w-full max-w-2xl min-w-0 flex-1 flex-col gap-8 px-4 py-6 text-neutral-800 md:px-0 lg:py-8 dark:text-neutral-300">
+        <div className="h-(--top-spacing) shrink-0" />
+        <div className="mx-auto flex w-full max-w-[40rem] min-w-0 flex-1 flex-col gap-6 px-4 py-6 text-neutral-800 md:px-0 lg:py-8 dark:text-neutral-300">
          <div className="flex flex-col gap-2">
            <div className="flex flex-col gap-2">
              <div className="flex items-start justify-between">
@@ -117,97 +97,82 @@ export default async function Page(props: {
                  {doc.title}
                </h1>
                <div className="docs-nav bg-background/80 border-border/50 fixed inset-x-0 bottom-0 isolate z-50 flex items-center gap-2 border-t px-6 py-4 backdrop-blur-sm sm:static sm:z-0 sm:border-t-0 sm:bg-transparent sm:px-0 sm:py-1.5 sm:backdrop-blur-none">
-                  {params.slug &&
-                    params.slug[0] === "components" &&
-                    params.slug[1] &&
-                    params.slug[2] && (
-                      <DocsBaseSwitcher
-                        base={params.slug[1]}
-                        component={params.slug[2]}
-                      />
+                  <DocsCopyPage page={raw} url={absoluteUrl(page.url)} />
+                  <div className="ml-auto flex gap-2">
+                    {neighbours.previous && (
+                      <Button
+                        variant="secondary"
+                        size="icon"
+                        className="extend-touch-target size-8 shadow-none md:size-7"
+                        asChild
+                      >
+                        <Link href={neighbours.previous.url}>
+                          <IconArrowLeft />
+                          <span className="sr-only">Previous</span>
+                        </Link>
+                      </Button>
                    )}
-                  {neighbours.previous && (
-                    <Button
-                      variant="secondary"
-                      size="icon"
-                      className="extend-touch-target ml-auto size-8 shadow-none md:size-7"
-                      asChild
-                    >
-                      <Link href={neighbours.previous.url}>
-                        <IconArrowLeft />
-                        <span className="sr-only">Previous</span>
-                      </Link>
-                    </Button>
-                  )}
-                  {neighbours.next && (
-                    <Button
-                      variant="secondary"
-                      size="icon"
-                      className="extend-touch-target size-8 shadow-none md:size-7"
-                      asChild
-                    >
-                      <Link href={neighbours.next.url}>
-                        <span className="sr-only">Next</span>
-                        <IconArrowRight />
-                      </Link>
-                    </Button>
-                  )}
+                    {neighbours.next && (
+                      <Button
+                        variant="secondary"
+                        size="icon"
+                        className="extend-touch-target size-8 shadow-none md:size-7"
+                        asChild
+                      >
+                        <Link href={neighbours.next.url}>
+                          <span className="sr-only">Next</span>
+                          <IconArrowRight />
+                        </Link>
+                      </Button>
+                    )}
+                  </div>
                </div>
              </div>
              {doc.description && (
-                <p className="text-muted-foreground text-[1.05rem] text-balance sm:text-base">
+                <p className="text-muted-foreground text-[1.05rem] sm:text-base sm:text-balance md:max-w-[80%]">
                  {doc.description}
                </p>
              )}
            </div>
-            {links ? (
-              <div className="flex items-center gap-2 pt-4">
-                {links?.doc && (
-                  <Badge asChild variant="secondary" className="rounded-full">
-                    <a href={links.doc} target="_blank" rel="noreferrer">
-                      Docs <IconArrowUpRight />
-                    </a>
-                  </Badge>
-                )}
-                {links?.api && (
-                  <Badge asChild variant="secondary" className="rounded-full">
-                    <a href={links.api} target="_blank" rel="noreferrer">
-                      API Reference <IconArrowUpRight />
-                    </a>
-                  </Badge>
-                )}
-              </div>
-            ) : null}
          </div>
-          <div className="w-full flex-1 *:data-[slot=alert]:first:mt-0">
+          <div className="w-full flex-1 pb-16 *:data-[slot=alert]:first:mt-0 sm:pb-0">
+            {params.slug &&
+              params.slug[0] === "components" &&
+              params.slug[1] &&
+              params.slug[2] && (
+                <DocsBaseSwitcher
+                  base={params.slug[1]}
+                  component={params.slug[2]}
+                />
+              )}
            <MDX components={mdxComponents} />
          </div>
-        </div>
-        <div className="mx-auto hidden h-16 w-full max-w-2xl items-center gap-2 px-4 sm:flex md:px-0">
-          {neighbours.previous && (
-            <Button
-              variant="secondary"
-              size="sm"
-              asChild
-              className="shadow-none"
-            >
-              <Link href={neighbours.previous.url}>
-                <IconArrowLeft /> {neighbours.previous.name}
-              </Link>
-            </Button>
-          )}
-          {neighbours.next && (
-            <Button
-              variant="secondary"
-              size="sm"
-              className="ml-auto shadow-none"
-              asChild
-            >
-              <Link href={neighbours.next.url}>
-                {neighbours.next.name} <IconArrowRight />
-              </Link>
-            </Button>
-          )}
+          <div className="hidden h-16 w-full items-center gap-2 px-4 sm:flex sm:px-0">
+            {neighbours.previous && (
+              <Button
+                variant="secondary"
+                size="sm"
+                asChild
+                className="shadow-none"
+              >
+                <Link href={neighbours.previous.url}>
+                  <IconArrowLeft /> {neighbours.previous.name}
+                </Link>
+              </Button>
+            )}
+            {neighbours.next && (
+              <Button
+                variant="secondary"
+                size="sm"
+                className="ml-auto shadow-none"
+                asChild
+              >
+                <Link href={neighbours.next.url}>
+                  {neighbours.next.name} <IconArrowRight />
+                </Link>
+              </Button>
+            )}
+          </div>
        </div>
      </div>
      <div className="sticky top-[calc(var(--header-height)+1px)] z-30 ml-auto hidden h-[90svh] w-72 flex-col gap-4 overflow-hidden overscroll-none pb-8 xl:flex">
@@ -218,7 +183,6 @@ export default async function Page(props: {
          </div>
        ) : null}
        <div className="flex flex-1 flex-col gap-6 px-6">
-          <DocsPageLinks page={raw} url={absoluteUrl(page.url)} />
          <OpenInV0Cta />
        </div>
      </div>
--- a/apps/v4/app/(app)/docs/layout.tsx
+++ b/apps/v4/app/(app)/docs/layout.tsx
@@ -9,7 +9,10 @@ export default function DocsLayout({
 }) {
  return (
    <div className="container-wrapper flex flex-1 flex-col px-2">
-      <SidebarProvider className="3xl:fixed:container 3xl:fixed:px-3 min-h-min flex-1 items-start px-0 [--sidebar-width:220px] [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--sidebar-width:240px] lg:[--top-spacing:calc(var(--spacing)*4)]">
+      <SidebarProvider
+        className="3xl:fixed:container 3xl:fixed:px-3 min-h-min flex-1 items-start px-0 [--top-spacing:0] lg:grid lg:grid-cols-[var(--sidebar-width)_minmax(0,1fr)] lg:[--top-spacing:calc(var(--spacing)*4)]"
+        style={{ "--sidebar-width": "220px" } as React.CSSProperties}
+      >
        <DocsSidebar tree={source.pageTree} />
        <div className="h-full w-full">{children}</div>
      </SidebarProvider>
--- a/apps/v4/app/(app)/llm/[[...slug]]/route.ts
+++ b/apps/v4/app/(app)/llm/[[...slug]]/route.ts
@@ -7,6 +7,19 @@ import { getActiveStyle } from "@/registry/_legacy-styles"

 export const revalidate = false

+function getStyleFromSlug(slug: string[] | undefined, fallbackStyle: string) {
+  // Detect base from URL: /docs/components/base/... or /docs/components/radix/...
+  if (slug && slug[0] === "components" && slug[1]) {
+    if (slug[1] === "base") {
+      return "base-nova"
+    }
+    if (slug[1] === "radix") {
+      return "new-york-v4"
+    }
+  }
+  return fallbackStyle
+}
+
 export async function GET(
  _req: NextRequest,
  { params }: { params: Promise<{ slug?: string[] }> }
@@ -19,9 +32,11 @@ export async function GET(
    notFound()
  }

+  const effectiveStyle = getStyleFromSlug(slug, activeStyle.name)
+
  const processedContent = processMdxForLLMs(
    await page.data.getText("raw"),
-    activeStyle.name
+    effectiveStyle
  )

  return new NextResponse(processedContent, {
--- a/apps/v4/components/code-tabs.tsx
+++ b/apps/v4/components/code-tabs.tsx
@@ -18,7 +18,7 @@ export function CodeTabs({ children }: React.ComponentProps<typeof Tabs>) {
      onValueChange={(value) =>
        setConfig({ ...config, installationType: value as "cli" | "manual" })
      }
-      className="relative mt-6 w-full"
+      className="relative mt-6 w-full *:data-[slot=tabs-list]:gap-6"
    >
      {children}
    </Tabs>
--- a/apps/v4/components/component-preview-tabs.tsx
+++ b/apps/v4/components/component-preview-tabs.tsx
@@ -6,6 +6,7 @@ import { cn } from "@/lib/utils"

 export function ComponentPreviewTabs({
  className,
+  previewClassName,
  align = "center",
  hideCode = false,
  chromeLessOnMobile = false,
@@ -13,6 +14,7 @@ export function ComponentPreviewTabs({
  source,
  ...props
 }: React.ComponentProps<"div"> & {
+  previewClassName?: string
  align?: "center" | "start" | "end"
  hideCode?: boolean
  chromeLessOnMobile?: boolean
@@ -22,7 +24,7 @@ export function ComponentPreviewTabs({
  return (
    <div
      className={cn(
-        "group relative mt-4 mb-12 flex flex-col gap-2 overflow-hidden rounded-xl border",
+        "group relative mt-4 mb-12 flex flex-col gap-2 overflow-hidden rounded-lg border",
        className
      )}
      {...props}
@@ -30,9 +32,10 @@ export function ComponentPreviewTabs({
      <div data-slot="preview">
        <div
          data-align={align}
+          data-chromeless={chromeLessOnMobile}
          className={cn(
-            "preview flex w-full justify-center data-[align=center]:items-center data-[align=end]:items-end data-[align=start]:items-start",
-            chromeLessOnMobile ? "sm:p-10" : "h-[450px] p-10"
+            "preview flex h-[450px] w-full justify-center p-10 data-[align=center]:items-center data-[align=end]:items-end data-[align=start]:items-start data-[chromeless=true]:h-auto data-[chromeless=true]:p-0",
+            previewClassName
          )}
        >
          {component}
--- a/apps/v4/components/component-preview.tsx
+++ b/apps/v4/components/component-preview.tsx
@@ -5,33 +5,15 @@ import { getRegistryComponent } from "@/lib/registry"
 import { ComponentPreviewTabs } from "@/components/component-preview-tabs"
 import { ComponentSource } from "@/components/component-source"

-function DynamicComponent({
-  name,
-  styleName,
-}: {
-  name: string
-  styleName: string
-}) {
-  const Component = React.useMemo(
-    () => getRegistryComponent(name, styleName),
-    [name, styleName]
-  )
-
-  if (!Component) {
-    return null
-  }
-
-  return React.createElement(Component)
-}
-
 export function ComponentPreview({
  name,
-  styleName = "new-york-v4",
  type,
  className,
+  previewClassName,
  align = "center",
  hideCode = false,
  chromeLessOnMobile = false,
+  styleName = "base-nova",
  ...props
 }: React.ComponentProps<"div"> & {
  name: string
@@ -41,6 +23,7 @@ export function ComponentPreview({
  hideCode?: boolean
  type?: "block" | "component" | "example"
  chromeLessOnMobile?: boolean
+  previewClassName?: string
 }) {
  const Component = getRegistryComponent(name, styleName)

@@ -83,6 +66,7 @@ export function ComponentPreview({
  return (
    <ComponentPreviewTabs
      className={className}
+      previewClassName={previewClassName}
      align={align}
      hideCode={hideCode}
      component={<DynamicComponent name={name} styleName={styleName} />}
@@ -98,3 +82,22 @@ export function ComponentPreview({
    />
  )
 }
+
+function DynamicComponent({
+  name,
+  styleName,
+}: {
+  name: string
+  styleName: string
+}) {
+  const Component = React.useMemo(
+    () => getRegistryComponent(name, styleName),
+    [name, styleName]
+  )
+
+  if (!Component) {
+    return null
+  }
+
+  return React.createElement(Component)
+}
--- a/apps/v4/components/docs-base-switcher.tsx
+++ b/apps/v4/components/docs-base-switcher.tsx
@@ -10,20 +10,14 @@ export function DocsBaseSwitcher({
  component: string
 }) {
  return (
-    <div className="bg-muted inline-flex h-7 items-center gap-0.5 rounded-md p-0.5">
+    <div className="inline-flex items-center gap-6">
      {BASES.map((baseItem) => (
        <Link
          key={baseItem.name}
          href={`/docs/components/${baseItem.name}/${component}`}
          data-active={base === baseItem.name}
-          className="text-muted-foreground hover:text-foreground data-[active=true]:bg-background data-[active=true]:text-foreground inline-flex h-[--spacing(6.25)] items-center justify-center gap-1 rounded-sm pr-2.5 pl-2 text-sm font-medium data-[active=true]:shadow-sm"
+          className="text-muted-foreground hover:text-foreground data-[active=true]:text-foreground after:bg-foreground relative inline-flex items-center justify-center gap-1 pt-1 pb-0.5 text-base font-medium transition-colors after:absolute after:inset-x-0 after:bottom-[-4px] after:h-0.5 after:opacity-0 after:transition-opacity data-[active=true]:after:opacity-100"
        >
-          {baseItem.meta?.logo && (
-            <span
-              className="size-3.5 shrink-0 [&>svg]:size-full"
-              dangerouslySetInnerHTML={{ __html: baseItem.meta.logo }}
-            />
-          )}
          {baseItem.title}
        </Link>
      ))}
--- a/apps/v4/components/docs-copy-page.tsx
+++ b/apps/v4/components/docs-copy-page.tsx
@@ -168,7 +168,7 @@ export function DocsCopyPage({ page, url }: { page: string; url: string }) {

  return (
    <Popover>
-      <div className="bg-secondary group/buttons relative flex hidden rounded-lg *:[[data-slot=button]]:focus-visible:relative *:[[data-slot=button]]:focus-visible:z-10">
+      <div className="bg-secondary group/buttons relative flex rounded-lg *:[[data-slot=button]]:focus-visible:relative *:[[data-slot=button]]:focus-visible:z-10">
        <PopoverAnchor />
        <Button
          variant="secondary"
@@ -183,7 +183,7 @@ export function DocsCopyPage({ page, url }: { page: string; url: string }) {
          <DropdownMenuTrigger asChild className="hidden sm:flex">
            {trigger}
          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="shadow-none">
+          <DropdownMenuContent align="end" className="rounded-lg shadow-none">
            {Object.entries(menuItems).map(([key, value]) => (
              <DropdownMenuItem key={key} asChild>
                {value(url)}
@@ -193,13 +193,13 @@ export function DocsCopyPage({ page, url }: { page: string; url: string }) {
        </DropdownMenu>
        <Separator
          orientation="vertical"
-          className="!bg-foreground/10 absolute top-0 right-8 z-0 !h-8 peer-focus-visible:opacity-0 sm:right-7 sm:!h-7"
+          className="!bg-foreground/5 absolute top-1 right-8 z-0 !h-6 peer-focus-visible:opacity-0 sm:right-7 sm:!h-5"
        />
        <PopoverTrigger asChild className="flex sm:hidden">
          {trigger}
        </PopoverTrigger>
        <PopoverContent
-          className="bg-background/70 dark:bg-background/60 w-52 !origin-center rounded-lg p-1 shadow-sm backdrop-blur-sm"
+          className="bg-background/70 dark:bg-background/60 w-52 !origin-center rounded-lg p-1 shadow-none backdrop-blur-sm"
          align="start"
        >
          {Object.entries(menuItems).map(([key, value]) => (
--- a/apps/v4/components/docs-sidebar.tsx
+++ b/apps/v4/components/docs-sidebar.tsx
@@ -19,11 +19,15 @@ import {
 } from "@/registry/new-york-v4/ui/sidebar"

 const TOP_LEVEL_SECTIONS = [
-  { name: "Get Started", href: "/docs" },
+  { name: "Introduction", href: "/docs" },
  {
    name: "Components",
    href: "/docs/components",
  },
+  {
+    name: "Installation",
+    href: "/docs/installation",
+  },
  {
    name: "Directory",
    href: "/docs/directory",
@@ -32,6 +36,10 @@ const TOP_LEVEL_SECTIONS = [
    name: "MCP Server",
    href: "/docs/mcp",
  },
+  {
+    name: "Registry",
+    href: "/docs/registry",
+  },
  {
    name: "Forms",
    href: "/docs/forms",
--- a/apps/v4/components/docs-toc.tsx
+++ b/apps/v4/components/docs-toc.tsx
@@ -107,7 +107,7 @@ export function DocsTableOfContents({

  return (
    <div className={cn("flex flex-col gap-2 p-4 pt-0 text-sm", className)}>
-      <p className="text-muted-foreground bg-background sticky top-0 h-6 text-xs">
+      <p className="text-muted-foreground bg-background sticky top-0 h-6 text-xs font-medium">
        On This Page
      </p>
      {toc.map((item) => (
--- a/apps/v4/components/mobile-nav.tsx
+++ b/apps/v4/components/mobile-nav.tsx
@@ -17,11 +17,15 @@ import {
 } from "@/registry/new-york-v4/ui/popover"

 const TOP_LEVEL_SECTIONS = [
-  { name: "Get Started", href: "/docs" },
+  { name: "Introduction", href: "/docs" },
  {
    name: "Components",
    href: "/docs/components/radix",
  },
+  {
+    name: "Installation",
+    href: "/docs/installation",
+  },
  {
    name: "Directory",
    href: "/docs/directory",
@@ -30,6 +34,10 @@ const TOP_LEVEL_SECTIONS = [
    name: "MCP Server",
    href: "/docs/mcp",
  },
+  {
+    name: "Registry",
+    href: "/docs/registry",
+  },
  {
    name: "Forms",
    href: "/docs/forms",
--- a/apps/v4/content/docs/components/base/accordion.mdx
+++ b/apps/v4/content/docs/components/base/accordion.mdx
@@ -4,16 +4,14 @@ description: A vertically stacked set of interactive headings that each reveal a
 base: base
 component: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/accordion
-  api: https://www.radix-ui.com/docs/primitives/components/accordion#api-reference
+  doc: https://base-ui.com/react/components/accordion
+  api: https://base-ui.com/react/components/accordion#api-reference
 ---

 <ComponentPreview
-  styleName="base-nova"
  name="accordion-demo"
-  className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[80%] **:[.preview]:min-h-[400px]"
-  description="An accordion with three items"
  align="start"
+  previewClassName="*:data-[slot=accordion]:max-w-sm h-[300px]"
 />

 ## Installation
@@ -21,7 +19,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>

@@ -35,7 +33,7 @@ npx shadcn@latest add accordion

 <TabsContent value="manual">

-<Steps>
+<Steps className="mb-0 pt-2">

 <Step>Install the following dependencies:</Step>

@@ -71,7 +69,7 @@ import {
 ```

 ```tsx showLineNumbers
-<Accordion type="single" collapsible>
+<Accordion defaultValue={["item-1"]}>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
@@ -83,14 +81,24 @@ import {

 ## Examples

+### Basic
+
+A basic accordion that shows one item at a time. The first item is open by default.
+
+<ComponentPreview
+  name="accordion-basic"
+  align="start"
+  previewClassName="*:data-[slot=accordion]:max-w-sm h-[300px]"
+/>
+
 ### Multiple

 Use the `multiple` prop to allow multiple items to be open at the same time.

 <ComponentPreview
-  styleName="base-nova"
  name="accordion-multiple"
-  description="An accordion that allows multiple items to be open"
+  align="start"
+  previewClassName="*:data-[slot=accordion]:max-w-sm h-[450px]"
 />

 ### Disabled
@@ -98,27 +106,31 @@ Use the `multiple` prop to allow multiple items to be open at the same time.
 Use the `disabled` prop on `AccordionItem` to disable individual items.

 <ComponentPreview
-  styleName="base-nova"
  name="accordion-disabled"
-  description="An accordion with a disabled item"
+  align="start"
+  previewClassName="*:data-[slot=accordion]:max-w-sm h-[300px]"
 />

-### With Borders
+### Borders

-An accordion with bordered items.
+Add `border` to the `Accordion` and `border-b last:border-b-0` to the `AccordionItem` to add borders to the items.

 <ComponentPreview
-  styleName="base-nova"
  name="accordion-borders"
-  description="An accordion with bordered items"
+  align="start"
+  previewClassName="*:data-[slot=accordion]:max-w-sm h-[300px]"
 />

-### In Card
+### Card

-An accordion inside a card component.
+Wrap the `Accordion` in a `Card` component.

 <ComponentPreview
-  styleName="base-nova"
  name="accordion-card"
-  description="An accordion inside a card"
+  align="start"
+  previewClassName="*:data-[slot=accordion]:max-w-sm h-[435px]"
 />
+
+## API Reference
+
+See the [Base UI](https://base-ui.com/react/components/accordion#api-reference) documentation for more information.
--- a/apps/v4/content/docs/components/base/alert-dialog.mdx
+++ b/apps/v4/content/docs/components/base/alert-dialog.mdx
@@ -5,23 +5,18 @@ featured: true
 base: base
 component: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/alert-dialog
-  api: https://www.radix-ui.com/docs/primitives/components/alert-dialog#api-reference
+  doc: https://base-ui.com/react/components/alert-dialog
+  api: https://base-ui.com/react/components/alert-dialog#api-reference
 ---

-<ComponentPreview
-  styleName="base-nova"
-  name="alert-dialog-demo"
-  title="An alert dialog with cancel and continue buttons."
-  description="An alert dialog with cancel and continue buttons."
-/>
+<ComponentPreview name="alert-dialog-demo" previewClassName="h-56" />

 ## Installation

 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
@@ -34,7 +29,7 @@ npx shadcn@latest add alert-dialog

 <TabsContent value="manual">

-<Steps>
+<Steps className="mb-0 pt-2">

 <Step>Install the following dependencies:</Step>

@@ -76,13 +71,15 @@ import {

 ```tsx showLineNumbers
 <AlertDialog>
-  <AlertDialogTrigger>Open</AlertDialogTrigger>
+  <AlertDialogTrigger render={<Button variant="outline" />}>
+    Show Dialog
+  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your account
-        and remove your data from our servers.
+        from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
@@ -92,3 +89,47 @@ import {
  </AlertDialogContent>
 </AlertDialog>
 ```
+
+## Examples
+
+### Basic
+
+A basic alert dialog with a title, description, and cancel and continue buttons.
+
+<ComponentPreview name="alert-dialog-basic" previewClassName="h-56" />
+
+### Small
+
+Use the `size="sm"` prop to make the alert dialog smaller.
+
+<ComponentPreview name="alert-dialog-small" previewClassName="h-56" />
+
+### Media
+
+Use the `AlertDialogMedia` component to add a media element such as an icon or image to the alert dialog.
+
+<ComponentPreview name="alert-dialog-media" previewClassName="h-56" />
+
+### Small with Media
+
+Use the `size="sm"` prop to make the alert dialog smaller and the `AlertDialogMedia` component to add a media element such as an icon or image to the alert dialog.
+
+<ComponentPreview name="alert-dialog-small-media" previewClassName="h-56" />
+
+### Destructive
+
+Use the `AlertDialogAction` component to add a destructive action button to the alert dialog.
+
+<ComponentPreview name="alert-dialog-destructive" previewClassName="h-56" />
+
+## API Reference
+
+### size
+
+Use the `size` props on the `AlertDialogContent` component to control the size of the alert dialog. It accepts the following values:
+
+| Prop   | Type                | Default     |
+| ------ | ------------------- | ----------- |
+| `size` | `"default" \| "sm"` | `"default"` |
+
+For more information about the other components and their props, see the [Base UI documentation](https://base-ui.com/react/components/alert-dialog#api-reference).
--- a/apps/v4/content/docs/components/base/alert.mdx
+++ b/apps/v4/content/docs/components/base/alert.mdx
@@ -5,19 +5,14 @@ base: base
 component: true
 ---

-<ComponentPreview
-  styleName="base-nova"
-  name="alert-demo"
-  title="An alert with an icon, title and description."
-  description="An alert with an icon, title and description. The title says 'Heads up!' and the description is 'You can add components to your app using the cli.'."
-/>
+<ComponentPreview name="alert-demo" previewClassName="h-auto sm:h-72 p-6" />

 ## Installation

 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
@@ -30,15 +25,11 @@ npx shadcn@latest add alert

 <TabsContent value="manual">

-<Steps>
+<Steps className="mb-0 pt-2">

 <Step>Copy and paste the following code into your project.</Step>

-<ComponentSource
-  name="alert"
-  title="components/ui/alert.tsx"
-  styleName="base-nova"
-/>
+<ComponentSource name="alert" title="components/ui/alert.tsx" />

 <Step>Update the import paths to match your project setup.</Step>

@@ -51,15 +42,86 @@ npx shadcn@latest add alert
 ## Usage

 ```tsx showLineNumbers
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import {
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertTitle,
+} from "@/components/ui/alert"
 ```

 ```tsx showLineNumbers
-<Alert variant="default | destructive">
-  <Terminal />
+<Alert>
+  <InfoIcon />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
+  <AlertAction>
+    <Button variant="outline">Enable</Button>
+  </AlertAction>
 </Alert>
 ```
+
+## Examples
+
+### Basic
+
+A basic alert with an icon, title and description.
+
+<ComponentPreview name="alert-basic" previewClassName="h-auto sm:h-72 p-6" />
+
+### Destructive
+
+Use `variant="destructive"` to create a destructive alert.
+
+<ComponentPreview
+  name="alert-destructive"
+  previewClassName="h-auto sm:h-72 p-6"
+/>
+
+### Action
+
+Use `AlertAction` to add a button or other action element to the alert.
+
+<ComponentPreview name="alert-action" previewClassName="h-auto sm:h-72 p-6" />
+
+### Custom Colors
+
+You can customize the alert colors by adding custom classes such as `bg-amber-50 dark:bg-amber-950` to the `Alert` component.
+
+<ComponentPreview name="alert-colors" previewClassName="h-auto sm:h-72 p-6" />
+
+## API Reference
+
+### Alert
+
+The `Alert` component displays a callout for user attention.
+
+| Prop      | Type                         | Default     |
+| --------- | ---------------------------- | ----------- |
+| `variant` | `"default" \| "destructive"` | `"default"` |
+
+### AlertTitle
+
+The `AlertTitle` component displays the title of the alert.
+
+| Prop        | Type     | Default |
+| ----------- | -------- | ------- |
+| `className` | `string` | -       |
+
+### AlertDescription
+
+The `AlertDescription` component displays the description or content of the alert.
+
+| Prop        | Type     | Default |
+| ----------- | -------- | ------- |
+| `className` | `string` | -       |
+
+### AlertAction
+
+The `AlertAction` component displays an action element (like a button) positioned absolutely in the top-right corner of the alert.
+
+| Prop        | Type     | Default |
+| ----------- | -------- | ------- |
+| `className` | `string` | -       |
--- a/apps/v4/content/docs/components/base/aspect-ratio.mdx
+++ b/apps/v4/content/docs/components/base/aspect-ratio.mdx
@@ -4,8 +4,8 @@ description: Displays content within a desired ratio.
 base: base
 component: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/aspect-ratio
-  api: https://www.radix-ui.com/docs/primitives/components/aspect-ratio#api-reference
+  doc: https://base-ui.com/react/components/aspect-ratio
+  api: https://base-ui.com/react/components/aspect-ratio#api-reference
 ---

 <ComponentPreview
@@ -20,7 +20,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/avatar.mdx
+++ b/apps/v4/content/docs/components/base/avatar.mdx
@@ -4,8 +4,8 @@ description: An image element with a fallback for representing the user.
 base: base
 component: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/avatar
-  api: https://www.radix-ui.com/docs/primitives/components/avatar#api-reference
+  doc: https://base-ui.com/react/components/avatar
+  api: https://base-ui.com/react/components/avatar#api-reference
 ---

 <ComponentPreview
@@ -20,7 +20,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/badge.mdx
+++ b/apps/v4/content/docs/components/base/badge.mdx
@@ -17,7 +17,7 @@ component: true
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/breadcrumb.mdx
+++ b/apps/v4/content/docs/components/base/breadcrumb.mdx
@@ -17,7 +17,7 @@ component: true
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/button-group.mdx
+++ b/apps/v4/content/docs/components/base/button-group.mdx
@@ -12,7 +12,7 @@ component: true
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/button.mdx
+++ b/apps/v4/content/docs/components/base/button.mdx
@@ -34,7 +34,7 @@ instructions to update your project.
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/calendar.mdx
+++ b/apps/v4/content/docs/components/base/calendar.mdx
@@ -25,7 +25,7 @@ See all calendar blocks in the [Blocks Library](/blocks/calendar) page.
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/card.mdx
+++ b/apps/v4/content/docs/components/base/card.mdx
@@ -16,7 +16,7 @@ component: true
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/carousel.mdx
+++ b/apps/v4/content/docs/components/base/carousel.mdx
@@ -24,7 +24,7 @@ The carousel component is built using the [Embla Carousel](https://www.embla-car
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>

--- a/apps/v4/content/docs/components/base/chart.mdx
+++ b/apps/v4/content/docs/components/base/chart.mdx
@@ -62,7 +62,7 @@ We do not wrap Recharts. This means you're not locked into an abstraction. When
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/checkbox.mdx
+++ b/apps/v4/content/docs/components/base/checkbox.mdx
@@ -4,8 +4,8 @@ description: A control that allows the user to toggle between checked and not ch
 base: base
 component: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/checkbox
-  api: https://www.radix-ui.com/docs/primitives/components/checkbox#api-reference
+  doc: https://base-ui.com/react/components/checkbox
+  api: https://base-ui.com/react/components/checkbox#api-reference
 ---

 <ComponentPreview
@@ -19,7 +19,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/collapsible.mdx
+++ b/apps/v4/content/docs/components/base/collapsible.mdx
@@ -5,8 +5,8 @@ base: base
 component: true
 featured: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/collapsible
-  api: https://www.radix-ui.com/docs/primitives/components/collapsible#api-reference
+  doc: https://base-ui.com/react/components/collapsible
+  api: https://base-ui.com/react/components/collapsible#api-reference
 ---

 <ComponentPreview
@@ -20,7 +20,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/command.mdx
+++ b/apps/v4/content/docs/components/base/command.mdx
@@ -24,7 +24,7 @@ The `<Command />` component uses the [`cmdk`](https://cmdk.paco.me) component by
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/context-menu.mdx
+++ b/apps/v4/content/docs/components/base/context-menu.mdx
@@ -4,8 +4,8 @@ description: Displays a menu to the user — such as a set of actions or functio
 base: base
 component: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/context-menu
-  api: https://www.radix-ui.com/docs/primitives/components/context-menu#api-reference
+  doc: https://base-ui.com/react/components/context-menu
+  api: https://base-ui.com/react/components/context-menu#api-reference
 ---

 <ComponentPreview
@@ -19,7 +19,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/dialog.mdx
+++ b/apps/v4/content/docs/components/base/dialog.mdx
@@ -5,8 +5,8 @@ featured: true
 base: base
 component: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/dialog
-  api: https://www.radix-ui.com/docs/primitives/components/dialog#api-reference
+  doc: https://base-ui.com/react/components/dialog
+  api: https://base-ui.com/react/components/dialog#api-reference
 ---

 <ComponentPreview
@@ -20,7 +20,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/drawer.mdx
+++ b/apps/v4/content/docs/components/base/drawer.mdx
@@ -22,7 +22,7 @@ Drawer is built on top of [Vaul](https://github.com/emilkowalski/vaul) by [emilk
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/dropdown-menu.mdx
+++ b/apps/v4/content/docs/components/base/dropdown-menu.mdx
@@ -5,8 +5,8 @@ featured: true
 base: base
 component: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/dropdown-menu
-  api: https://www.radix-ui.com/docs/primitives/components/dropdown-menu#api-reference
+  doc: https://base-ui.com/react/components/dropdown-menu
+  api: https://base-ui.com/react/components/dropdown-menu#api-reference
 ---

 <ComponentPreview
@@ -20,7 +20,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/empty.mdx
+++ b/apps/v4/content/docs/components/base/empty.mdx
@@ -16,7 +16,7 @@ component: true
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/field.mdx
+++ b/apps/v4/content/docs/components/base/field.mdx
@@ -16,7 +16,7 @@ component: true
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/hover-card.mdx
+++ b/apps/v4/content/docs/components/base/hover-card.mdx
@@ -4,8 +4,8 @@ description: For sighted users to preview content available behind a link.
 base: base
 component: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/hover-card
-  api: https://www.radix-ui.com/docs/primitives/components/hover-card#api-reference
+  doc: https://base-ui.com/react/components/hover-card
+  api: https://base-ui.com/react/components/hover-card#api-reference
 ---

 <ComponentPreview
@@ -19,7 +19,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/input-group.mdx
+++ b/apps/v4/content/docs/components/base/input-group.mdx
@@ -18,7 +18,7 @@ import { IconInfoCircle } from "@tabler/icons-react"
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/input-otp.mdx
+++ b/apps/v4/content/docs/components/base/input-otp.mdx
@@ -22,7 +22,7 @@ Input OTP is built on top of [input-otp](https://github.com/guilhermerodz/input-
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/input.mdx
+++ b/apps/v4/content/docs/components/base/input.mdx
@@ -17,7 +17,7 @@ component: true
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/item.mdx
+++ b/apps/v4/content/docs/components/base/item.mdx
@@ -20,7 +20,7 @@ You can pretty much achieve the same result with the `div` element and some clas
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/kbd.mdx
+++ b/apps/v4/content/docs/components/base/kbd.mdx
@@ -12,7 +12,7 @@ component: true
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/label.mdx
+++ b/apps/v4/content/docs/components/base/label.mdx
@@ -4,8 +4,8 @@ description: Renders an accessible label associated with controls.
 base: base
 component: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/label
-  api: https://www.radix-ui.com/docs/primitives/components/label#api-reference
+  doc: https://base-ui.com/react/components/label
+  api: https://base-ui.com/react/components/label#api-reference
 ---

 <ComponentPreview
@@ -19,7 +19,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/menubar.mdx
+++ b/apps/v4/content/docs/components/base/menubar.mdx
@@ -4,8 +4,8 @@ description: A visually persistent menu common in desktop applications that prov
 base: base
 component: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/menubar
-  api: https://www.radix-ui.com/docs/primitives/components/menubar#api-reference
+  doc: https://base-ui.com/react/components/menubar
+  api: https://base-ui.com/react/components/menubar#api-reference
 ---

 <ComponentPreview
@@ -19,7 +19,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/native-select.mdx
+++ b/apps/v4/content/docs/components/base/native-select.mdx
@@ -19,7 +19,7 @@ import { InfoIcon } from "lucide-react"
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/navigation-menu.mdx
+++ b/apps/v4/content/docs/components/base/navigation-menu.mdx
@@ -4,8 +4,8 @@ description: A collection of links for navigating websites.
 base: base
 component: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/navigation-menu
-  api: https://www.radix-ui.com/docs/primitives/components/navigation-menu#api-reference
+  doc: https://base-ui.com/react/components/navigation-menu
+  api: https://base-ui.com/react/components/navigation-menu#api-reference
 ---

 <ComponentPreview
@@ -19,7 +19,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/pagination.mdx
+++ b/apps/v4/content/docs/components/base/pagination.mdx
@@ -16,7 +16,7 @@ component: true
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/popover.mdx
+++ b/apps/v4/content/docs/components/base/popover.mdx
@@ -4,8 +4,8 @@ description: Displays rich content in a portal, triggered by a button.
 base: base
 component: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/popover
-  api: https://www.radix-ui.com/docs/primitives/components/popover#api-reference
+  doc: https://base-ui.com/react/components/popover
+  api: https://base-ui.com/react/components/popover#api-reference
 ---

 <ComponentPreview
@@ -19,7 +19,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/progress.mdx
+++ b/apps/v4/content/docs/components/base/progress.mdx
@@ -4,8 +4,8 @@ description: Displays an indicator showing the completion progress of a task, ty
 base: base
 component: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/progress
-  api: https://www.radix-ui.com/docs/primitives/components/progress#api-reference
+  doc: https://base-ui.com/react/components/progress
+  api: https://base-ui.com/react/components/progress#api-reference
 ---

 <ComponentPreview
@@ -19,7 +19,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/radio-group.mdx
+++ b/apps/v4/content/docs/components/base/radio-group.mdx
@@ -4,8 +4,8 @@ description: A set of checkable buttons—known as radio buttons—where no more
 base: base
 component: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/radio-group
-  api: https://www.radix-ui.com/docs/primitives/components/radio-group#api-reference
+  doc: https://base-ui.com/react/components/radio-group
+  api: https://base-ui.com/react/components/radio-group#api-reference
 ---

 <ComponentPreview
@@ -19,7 +19,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/resizable.mdx
+++ b/apps/v4/content/docs/components/base/resizable.mdx
@@ -23,7 +23,7 @@ The `Resizable` component is built on top of [react-resizable-panels](https://gi
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/scroll-area.mdx
+++ b/apps/v4/content/docs/components/base/scroll-area.mdx
@@ -4,8 +4,8 @@ description: Augments native scroll functionality for custom, cross-browser styl
 base: base
 component: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/scroll-area
-  api: https://www.radix-ui.com/docs/primitives/components/scroll-area#api-reference
+  doc: https://base-ui.com/react/components/scroll-area
+  api: https://base-ui.com/react/components/scroll-area#api-reference
 ---

 <ComponentPreview
@@ -19,7 +19,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/select.mdx
+++ b/apps/v4/content/docs/components/base/select.mdx
@@ -5,8 +5,8 @@ base: base
 component: true
 featured: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/select
-  api: https://www.radix-ui.com/docs/primitives/components/select#api-reference
+  doc: https://base-ui.com/react/components/select
+  api: https://base-ui.com/react/components/select#api-reference
 ---

 <ComponentPreview
@@ -20,7 +20,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/separator.mdx
+++ b/apps/v4/content/docs/components/base/separator.mdx
@@ -4,8 +4,8 @@ description: Visually or semantically separates content.
 base: base
 component: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/separator
-  api: https://www.radix-ui.com/docs/primitives/components/separator#api-reference
+  doc: https://base-ui.com/react/components/separator
+  api: https://base-ui.com/react/components/separator#api-reference
 ---

 <ComponentPreview
@@ -19,7 +19,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/sheet.mdx
+++ b/apps/v4/content/docs/components/base/sheet.mdx
@@ -4,8 +4,8 @@ description: Extends the Dialog component to display content that complements th
 base: base
 component: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/dialog
-  api: https://www.radix-ui.com/docs/primitives/components/dialog#api-reference
+  doc: https://base-ui.com/react/components/sheet
+  api: https://base-ui.com/react/components/sheet#api-reference
 ---

 <ComponentPreview
@@ -19,7 +19,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/sidebar.mdx
+++ b/apps/v4/content/docs/components/base/sidebar.mdx
@@ -35,7 +35,7 @@ Customizable.
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/skeleton.mdx
+++ b/apps/v4/content/docs/components/base/skeleton.mdx
@@ -16,7 +16,7 @@ component: true
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/slider.mdx
+++ b/apps/v4/content/docs/components/base/slider.mdx
@@ -4,8 +4,8 @@ description: An input where the user selects a value from within a given range.
 base: base
 component: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/slider
-  api: https://www.radix-ui.com/docs/primitives/components/slider#api-reference
+  doc: https://base-ui.com/react/components/slider
+  api: https://base-ui.com/react/components/slider#api-reference
 ---

 <ComponentPreview
@@ -19,7 +19,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/sonner.mdx
+++ b/apps/v4/content/docs/components/base/sonner.mdx
@@ -18,7 +18,7 @@ Sonner is built and maintained by [emilkowalski](https://twitter.com/emilkowalsk
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/spinner.mdx
+++ b/apps/v4/content/docs/components/base/spinner.mdx
@@ -16,7 +16,7 @@ component: true
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/switch.mdx
+++ b/apps/v4/content/docs/components/base/switch.mdx
@@ -4,8 +4,8 @@ description: A control that allows the user to toggle between checked and not ch
 base: base
 component: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/switch
-  api: https://www.radix-ui.com/docs/primitives/components/switch#api-reference
+  doc: https://base-ui.com/react/components/switch
+  api: https://base-ui.com/react/components/switch#api-reference
 ---

 <ComponentPreview
@@ -19,7 +19,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/table.mdx
+++ b/apps/v4/content/docs/components/base/table.mdx
@@ -16,7 +16,7 @@ component: true
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/tabs.mdx
+++ b/apps/v4/content/docs/components/base/tabs.mdx
@@ -4,8 +4,8 @@ description: A set of layered sections of content—known as tab panels—that a
 base: base
 component: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/tabs
-  api: https://www.radix-ui.com/docs/primitives/components/tabs#api-reference
+  doc: https://base-ui.com/react/components/tabs
+  api: https://base-ui.com/react/components/tabs#api-reference
 ---

 <ComponentPreview
@@ -19,7 +19,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/textarea.mdx
+++ b/apps/v4/content/docs/components/base/textarea.mdx
@@ -16,7 +16,7 @@ component: true
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/toast.mdx
+++ b/apps/v4/content/docs/components/base/toast.mdx
@@ -4,8 +4,8 @@ description: A succinct message that is displayed temporarily.
 base: base
 component: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/toast
-  api: https://www.radix-ui.com/docs/primitives/components/toast#api-reference
+  doc: https://base-ui.com/react/components/toast
+  api: https://base-ui.com/react/components/toast#api-reference
 ---

 <Callout title="The toast component has been deprecated." className="mt-0">
--- a/apps/v4/content/docs/components/base/toggle-group.mdx
+++ b/apps/v4/content/docs/components/base/toggle-group.mdx
@@ -4,8 +4,8 @@ description: A set of two-state buttons that can be toggled on or off.
 base: base
 component: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/toggle-group
-  api: https://www.radix-ui.com/docs/primitives/components/toggle-group#api-reference
+  doc: https://base-ui.com/react/components/toggle-group
+  api: https://base-ui.com/react/components/toggle-group#api-reference
 ---

 <ComponentPreview styleName="base-nova" name="toggle-group-spacing" />
@@ -15,7 +15,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/toggle.mdx
+++ b/apps/v4/content/docs/components/base/toggle.mdx
@@ -4,8 +4,8 @@ description: A two-state button that can be either on or off.
 base: base
 component: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/toggle
-  api: https://www.radix-ui.com/docs/primitives/components/toggle#api-reference
+  doc: https://base-ui.com/react/components/toggle
+  api: https://base-ui.com/react/components/toggle#api-reference
 ---

 <ComponentPreview
@@ -19,7 +19,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/base/tooltip.mdx
+++ b/apps/v4/content/docs/components/base/tooltip.mdx
@@ -4,8 +4,8 @@ description: A popup that displays information related to an element when the el
 base: base
 component: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/tooltip
-  api: https://www.radix-ui.com/docs/primitives/components/tooltip#api-reference
+  doc: https://base-ui.com/react/components/tooltip
+  api: https://base-ui.com/react/components/tooltip#api-reference
 ---

 <ComponentPreview
@@ -19,7 +19,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/accordion.mdx
+++ b/apps/v4/content/docs/components/radix/accordion.mdx
@@ -4,16 +4,15 @@ description: A vertically stacked set of interactive headings that each reveal a
 base: radix
 component: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/accordion
-  api: https://www.radix-ui.com/docs/primitives/components/accordion#api-reference
+  doc: https://www.radix-ui.com/primitives/docs/components/accordion
+  api: https://www.radix-ui.com/primitives/docs/components/accordion#api-reference
 ---

 <ComponentPreview
-  styleName="radix-nova"
  name="accordion-demo"
-  className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[80%] **:[.preview]:min-h-[400px]"
-  description="An accordion with three items"
+  styleName="radix-nova"
  align="start"
+  previewClassName="*:data-[slot=accordion]:max-w-sm h-[300px]"
 />

 ## Installation
@@ -21,7 +20,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>

@@ -35,7 +34,7 @@ npx shadcn@latest add accordion

 <TabsContent value="manual">

-<Steps>
+<Steps className="mb-0 pt-2">

 <Step>Install the following dependencies:</Step>

@@ -71,7 +70,7 @@ import {
 ```

 ```tsx showLineNumbers
-<Accordion type="single" collapsible>
+<Accordion type="single" collapsible defaultValue="item-1">
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
@@ -83,14 +82,26 @@ import {

 ## Examples

+### Basic
+
+A basic accordion that shows one item at a time. The first item is open by default.
+
+<ComponentPreview
+  name="accordion-basic"
+  styleName="radix-nova"
+  align="start"
+  previewClassName="*:data-[slot=accordion]:max-w-sm h-[300px]"
+/>
+
 ### Multiple

 Use `type="multiple"` to allow multiple items to be open at the same time.

 <ComponentPreview
-  styleName="radix-nova"
  name="accordion-multiple"
-  description="An accordion that allows multiple items to be open"
+  styleName="radix-nova"
+  align="start"
+  previewClassName="*:data-[slot=accordion]:max-w-sm h-[450px]"
 />

 ### Disabled
@@ -98,27 +109,34 @@ Use `type="multiple"` to allow multiple items to be open at the same time.
 Use the `disabled` prop on `AccordionItem` to disable individual items.

 <ComponentPreview
-  styleName="radix-nova"
  name="accordion-disabled"
-  description="An accordion with a disabled item"
+  styleName="radix-nova"
+  align="start"
+  previewClassName="*:data-[slot=accordion]:max-w-sm h-[300px]"
 />

-### With Borders
+### Borders

-An accordion with bordered items.
+Add `border` to the `Accordion` and `border-b last:border-b-0` to the `AccordionItem` to add borders to the items.

 <ComponentPreview
-  styleName="radix-nova"
  name="accordion-borders"
-  description="An accordion with bordered items"
+  styleName="radix-nova"
+  align="start"
+  previewClassName="*:data-[slot=accordion]:max-w-sm h-[300px]"
 />

-### In Card
+### Card

-An accordion inside a card component.
+Wrap the `Accordion` in a `Card` component.

 <ComponentPreview
-  styleName="radix-nova"
  name="accordion-card"
-  description="An accordion inside a card"
+  styleName="radix-nova"
+  align="start"
+  previewClassName="*:data-[slot=accordion]:max-w-sm h-[435px]"
 />
+
+## API Reference
+
+See the [Radix UI](https://www.radix-ui.com/primitives/docs/components/accordion#api-reference) documentation for more information.
--- a/apps/v4/content/docs/components/radix/alert-dialog.mdx
+++ b/apps/v4/content/docs/components/radix/alert-dialog.mdx
@@ -5,15 +5,14 @@ featured: true
 base: radix
 component: true
 links:
-  doc: https://www.radix-ui.com/docs/primitives/components/alert-dialog
-  api: https://www.radix-ui.com/docs/primitives/components/alert-dialog#api-reference
+  doc: https://www.radix-ui.com/primitives/docs/components/alert-dialog
+  api: https://www.radix-ui.com/primitives/docs/components/alert-dialog#api-reference
 ---

 <ComponentPreview
-  styleName="radix-nova"
  name="alert-dialog-demo"
-  title="An alert dialog with cancel and continue buttons."
-  description="An alert dialog with cancel and continue buttons."
+  styleName="radix-nova"
+  previewClassName="h-56"
 />

 ## Installation
@@ -21,7 +20,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
@@ -34,7 +33,7 @@ npx shadcn@latest add alert-dialog

 <TabsContent value="manual">

-<Steps>
+<Steps className="mb-0 pt-2">

 <Step>Install the following dependencies:</Step>

@@ -76,13 +75,15 @@ import {

 ```tsx showLineNumbers
 <AlertDialog>
-  <AlertDialogTrigger>Open</AlertDialogTrigger>
+  <AlertDialogTrigger asChild>
+    <Button variant="outline">Show Dialog</Button>
+  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your account
-        and remove your data from our servers.
+        from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
@@ -92,3 +93,67 @@ import {
  </AlertDialogContent>
 </AlertDialog>
 ```
+
+## Examples
+
+### Basic
+
+A basic alert dialog with a title, description, and cancel and continue buttons.
+
+<ComponentPreview
+  name="alert-dialog-basic"
+  styleName="radix-nova"
+  previewClassName="h-56"
+/>
+
+### Small
+
+Use the `size="sm"` prop to make the alert dialog smaller.
+
+<ComponentPreview
+  name="alert-dialog-small"
+  styleName="radix-nova"
+  previewClassName="h-56"
+/>
+
+### Media
+
+Use the `AlertDialogMedia` component to add a media element such as an icon or image to the alert dialog.
+
+<ComponentPreview
+  name="alert-dialog-media"
+  styleName="radix-nova"
+  previewClassName="h-56"
+/>
+
+### Small with Media
+
+Use the `size="sm"` prop to make the alert dialog smaller and the `AlertDialogMedia` component to add a media element such as an icon or image to the alert dialog.
+
+<ComponentPreview
+  name="alert-dialog-small-media"
+  styleName="radix-nova"
+  previewClassName="h-56"
+/>
+
+### Destructive
+
+Use the `AlertDialogAction` component to add a destructive action button to the alert dialog.
+
+<ComponentPreview
+  name="alert-dialog-destructive"
+  styleName="radix-nova"
+  previewClassName="h-56"
+/>
+
+## API Reference
+
+### size
+
+Use the `size` props on the `AlertDialogContent` component to control the size of the alert dialog. It accepts the following values:
+
+| Prop   | Type                | Default     |
+| ------ | ------------------- | ----------- |
+| `size` | `"default" \| "sm"` | `"default"` |
+
+For more information about the other components and their props, see the [Radix UI documentation](https://www.radix-ui.com/primitives/docs/components/alert-dialog#api-reference).
--- a/apps/v4/content/docs/components/radix/alert.mdx
+++ b/apps/v4/content/docs/components/radix/alert.mdx
@@ -6,10 +6,9 @@ component: true
 ---

 <ComponentPreview
-  styleName="radix-nova"
  name="alert-demo"
-  title="An alert with an icon, title and description."
-  description="An alert with an icon, title and description. The title says 'Heads up!' and the description is 'You can add components to your app using the cli.'."
+  styleName="radix-nova"
+  previewClassName="h-auto sm:h-72 p-6"
 />

 ## Installation
@@ -17,7 +16,7 @@ component: true
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
@@ -30,7 +29,7 @@ npx shadcn@latest add alert

 <TabsContent value="manual">

-<Steps>
+<Steps className="mb-0 pt-2">

 <Step>Copy and paste the following code into your project.</Step>

@@ -51,15 +50,99 @@ npx shadcn@latest add alert
 ## Usage

 ```tsx showLineNumbers
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import {
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertTitle,
+} from "@/components/ui/alert"
 ```

 ```tsx showLineNumbers
-<Alert variant="default | destructive">
-  <Terminal />
+<Alert>
+  <InfoIcon />
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components and dependencies to your app using the cli.
  </AlertDescription>
+  <AlertAction>
+    <Button variant="outline">Enable</Button>
+  </AlertAction>
 </Alert>
 ```
+
+## Examples
+
+### Basic
+
+A basic alert with an icon, title and description.
+
+<ComponentPreview
+  name="alert-basic"
+  styleName="radix-nova"
+  previewClassName="h-auto sm:h-72 p-6"
+/>
+
+### Destructive
+
+Use `variant="destructive"` to create a destructive alert.
+
+<ComponentPreview
+  name="alert-destructive"
+  styleName="radix-nova"
+  previewClassName="h-auto sm:h-72 p-6"
+/>
+
+### Action
+
+Use `AlertAction` to add a button or other action element to the alert.
+
+<ComponentPreview
+  name="alert-action"
+  styleName="radix-nova"
+  previewClassName="h-auto sm:h-72 p-6"
+/>
+
+### Custom Colors
+
+You can customize the alert colors by adding custom classes such as `bg-amber-50 dark:bg-amber-950` to the `Alert` component.
+
+<ComponentPreview
+  name="alert-colors"
+  styleName="radix-nova"
+  previewClassName="h-auto sm:h-72 p-6"
+/>
+
+## API Reference
+
+### Alert
+
+The `Alert` component displays a callout for user attention.
+
+| Prop      | Type                         | Default     |
+| --------- | ---------------------------- | ----------- |
+| `variant` | `"default" \| "destructive"` | `"default"` |
+
+### AlertTitle
+
+The `AlertTitle` component displays the title of the alert.
+
+| Prop        | Type     | Default |
+| ----------- | -------- | ------- |
+| `className` | `string` | -       |
+
+### AlertDescription
+
+The `AlertDescription` component displays the description or content of the alert.
+
+| Prop        | Type     | Default |
+| ----------- | -------- | ------- |
+| `className` | `string` | -       |
+
+### AlertAction
+
+The `AlertAction` component displays an action element (like a button) positioned absolutely in the top-right corner of the alert.
+
+| Prop        | Type     | Default |
+| ----------- | -------- | ------- |
+| `className` | `string` | -       |
--- a/apps/v4/content/docs/components/radix/aspect-ratio.mdx
+++ b/apps/v4/content/docs/components/radix/aspect-ratio.mdx
@@ -20,7 +20,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/avatar.mdx
+++ b/apps/v4/content/docs/components/radix/avatar.mdx
@@ -20,7 +20,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/badge.mdx
+++ b/apps/v4/content/docs/components/radix/badge.mdx
@@ -17,7 +17,7 @@ component: true
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/breadcrumb.mdx
+++ b/apps/v4/content/docs/components/radix/breadcrumb.mdx
@@ -17,7 +17,7 @@ component: true
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/button-group.mdx
+++ b/apps/v4/content/docs/components/radix/button-group.mdx
@@ -12,7 +12,7 @@ component: true
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/button.mdx
+++ b/apps/v4/content/docs/components/radix/button.mdx
@@ -34,7 +34,7 @@ instructions to update your project.
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/calendar.mdx
+++ b/apps/v4/content/docs/components/radix/calendar.mdx
@@ -25,7 +25,7 @@ See all calendar blocks in the [Blocks Library](/blocks/calendar) page.
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/card.mdx
+++ b/apps/v4/content/docs/components/radix/card.mdx
@@ -16,7 +16,7 @@ component: true
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/carousel.mdx
+++ b/apps/v4/content/docs/components/radix/carousel.mdx
@@ -24,7 +24,7 @@ The carousel component is built using the [Embla Carousel](https://www.embla-car
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>

--- a/apps/v4/content/docs/components/radix/chart.mdx
+++ b/apps/v4/content/docs/components/radix/chart.mdx
@@ -62,7 +62,7 @@ We do not wrap Recharts. This means you're not locked into an abstraction. When
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/checkbox.mdx
+++ b/apps/v4/content/docs/components/radix/checkbox.mdx
@@ -19,7 +19,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/collapsible.mdx
+++ b/apps/v4/content/docs/components/radix/collapsible.mdx
@@ -20,7 +20,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/command.mdx
+++ b/apps/v4/content/docs/components/radix/command.mdx
@@ -24,7 +24,7 @@ The `<Command />` component uses the [`cmdk`](https://cmdk.paco.me) component by
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/context-menu.mdx
+++ b/apps/v4/content/docs/components/radix/context-menu.mdx
@@ -19,7 +19,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/dialog.mdx
+++ b/apps/v4/content/docs/components/radix/dialog.mdx
@@ -20,7 +20,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/drawer.mdx
+++ b/apps/v4/content/docs/components/radix/drawer.mdx
@@ -22,7 +22,7 @@ Drawer is built on top of [Vaul](https://github.com/emilkowalski/vaul) by [emilk
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/dropdown-menu.mdx
+++ b/apps/v4/content/docs/components/radix/dropdown-menu.mdx
@@ -20,7 +20,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/empty.mdx
+++ b/apps/v4/content/docs/components/radix/empty.mdx
@@ -16,7 +16,7 @@ component: true
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/field.mdx
+++ b/apps/v4/content/docs/components/radix/field.mdx
@@ -16,7 +16,7 @@ component: true
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/hover-card.mdx
+++ b/apps/v4/content/docs/components/radix/hover-card.mdx
@@ -19,7 +19,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/input-group.mdx
+++ b/apps/v4/content/docs/components/radix/input-group.mdx
@@ -18,7 +18,7 @@ import { IconInfoCircle } from "@tabler/icons-react"
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/input-otp.mdx
+++ b/apps/v4/content/docs/components/radix/input-otp.mdx
@@ -22,7 +22,7 @@ Input OTP is built on top of [input-otp](https://github.com/guilhermerodz/input-
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/input.mdx
+++ b/apps/v4/content/docs/components/radix/input.mdx
@@ -17,7 +17,7 @@ component: true
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/item.mdx
+++ b/apps/v4/content/docs/components/radix/item.mdx
@@ -20,7 +20,7 @@ You can pretty much achieve the same result with the `div` element and some clas
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/kbd.mdx
+++ b/apps/v4/content/docs/components/radix/kbd.mdx
@@ -12,7 +12,7 @@ component: true
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/label.mdx
+++ b/apps/v4/content/docs/components/radix/label.mdx
@@ -19,7 +19,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/menubar.mdx
+++ b/apps/v4/content/docs/components/radix/menubar.mdx
@@ -19,7 +19,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/native-select.mdx
+++ b/apps/v4/content/docs/components/radix/native-select.mdx
@@ -19,7 +19,7 @@ import { InfoIcon } from "lucide-react"
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/navigation-menu.mdx
+++ b/apps/v4/content/docs/components/radix/navigation-menu.mdx
@@ -19,7 +19,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/pagination.mdx
+++ b/apps/v4/content/docs/components/radix/pagination.mdx
@@ -16,7 +16,7 @@ component: true
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/popover.mdx
+++ b/apps/v4/content/docs/components/radix/popover.mdx
@@ -19,7 +19,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/apps/v4/content/docs/components/radix/progress.mdx
+++ b/apps/v4/content/docs/components/radix/progress.mdx
@@ -19,7 +19,7 @@ links:
 <CodeTabs>

 <TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
 </TabsList>
 <TabsContent value="cli">
--- a/Show More
+++ b/Show More