{links?.doc && (
diff --git a/apps/v4/components/component-preview.tsx b/apps/v4/components/component-preview.tsx
index a207dcb80f..5dbcf413c3 100644
--- a/apps/v4/components/component-preview.tsx
+++ b/apps/v4/components/component-preview.tsx
@@ -1,9 +1,8 @@
import Image from "next/image"
+import { getRegistryComponent } from "@/lib/registry"
import { ComponentPreviewTabs } from "@/components/component-preview-tabs"
import { ComponentSource } from "@/components/component-source"
-import { Index } from "@/registry/__index__"
-import { type Style } from "@/registry/_legacy-styles"
export function ComponentPreview({
name,
@@ -16,14 +15,14 @@ export function ComponentPreview({
...props
}: React.ComponentProps<"div"> & {
name: string
- styleName?: Style["name"]
+ styleName?: string
align?: "center" | "start" | "end"
description?: string
hideCode?: boolean
type?: "block" | "component" | "example"
chromeLessOnMobile?: boolean
}) {
- const Component = Index[styleName]?.[name]?.component
+ const Component = getRegistryComponent(name, styleName)
if (!Component) {
return (
diff --git a/apps/v4/components/component-source.tsx b/apps/v4/components/component-source.tsx
index 55bf3acca3..b108b3f22f 100644
--- a/apps/v4/components/component-source.tsx
+++ b/apps/v4/components/component-source.tsx
@@ -8,7 +8,6 @@ import { cn } from "@/lib/utils"
import { CodeCollapsibleWrapper } from "@/components/code-collapsible-wrapper"
import { CopyButton } from "@/components/copy-button"
import { getIconForLanguageExtension } from "@/components/icons"
-import { type Style } from "@/registry/_legacy-styles"
export async function ComponentSource({
name,
@@ -24,7 +23,7 @@ export async function ComponentSource({
title?: string
language?: string
collapsible?: boolean
- styleName?: Style["name"]
+ styleName?: string
}) {
if (!name && !src) {
return null
diff --git a/apps/v4/components/docs-base-switcher.tsx b/apps/v4/components/docs-base-switcher.tsx
new file mode 100644
index 0000000000..b3e5d3ee71
--- /dev/null
+++ b/apps/v4/components/docs-base-switcher.tsx
@@ -0,0 +1,40 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+
+import { cn } from "@/lib/utils"
+
+const BASES = [
+ { name: "radix", label: "Radix UI" },
+ { name: "base", label: "Base UI" },
+]
+
+export function DocsBaseSwitcher() {
+ const pathname = usePathname()
+
+ // Extract base and component from /docs/components/{base}/{component}.
+ const match = pathname.match(/\/docs\/components\/(radix|base)\/(.+)/)
+ if (!match) return null
+
+ const [, currentBase, component] = match
+
+ return (
+
+ {BASES.map((base) => (
+
+ )
+}
diff --git a/apps/v4/components/docs-sidebar.tsx b/apps/v4/components/docs-sidebar.tsx
index 79dce7005d..458180dfe3 100644
--- a/apps/v4/components/docs-sidebar.tsx
+++ b/apps/v4/components/docs-sidebar.tsx
@@ -17,6 +17,10 @@ import {
SidebarMenuItem,
} from "@/registry/new-york-v4/ui/sidebar"
+type PageTreeNode = (typeof source.pageTree)["children"][number]
+type PageTreeFolder = Extract
+type PageTreePage = Extract
+
const TOP_LEVEL_SECTIONS = [
{ name: "Get Started", href: "/docs" },
{
@@ -43,12 +47,67 @@ const TOP_LEVEL_SECTIONS = [
const EXCLUDED_SECTIONS = ["installation", "dark-mode"]
const EXCLUDED_PAGES = ["/docs", "/docs/changelog"]
+// Recursively find all pages in a folder tree.
+function getAllPagesFromFolder(folder: PageTreeFolder): PageTreePage[] {
+ const pages: PageTreePage[] = []
+
+ for (const child of folder.children) {
+ if (child.type === "page") {
+ pages.push(child)
+ } else if (child.type === "folder") {
+ pages.push(...getAllPagesFromFolder(child))
+ }
+ }
+
+ return pages
+}
+
+// Get the pages from a folder, handling nested base folders (radix/base).
+function getPagesFromFolder(
+ folder: PageTreeFolder,
+ currentBase: string
+): PageTreePage[] {
+ // For the components folder, find the base subfolder.
+ if (folder.$id === "components" || folder.name === "Components") {
+ for (const child of folder.children) {
+ if (child.type === "folder") {
+ // Match by $id or by name.
+ const isRadix = child.$id === "radix" || child.name === "Radix UI"
+ const isBase = child.$id === "base" || child.name === "Base UI"
+
+ if (
+ (currentBase === "radix" && isRadix) ||
+ (currentBase === "base" && isBase)
+ ) {
+ return child.children.filter(
+ (c): c is PageTreePage => c.type === "page"
+ )
+ }
+ }
+ }
+
+ // Fallback: return all pages from nested folders.
+ return getAllPagesFromFolder(folder).filter(
+ (page) => !page.url.endsWith("/components")
+ )
+ }
+
+ // For other folders, return direct page children.
+ return folder.children.filter(
+ (child): child is PageTreePage => child.type === "page"
+ )
+}
+
export function DocsSidebar({
tree,
...props
}: React.ComponentProps & { tree: typeof source.pageTree }) {
const pathname = usePathname()
+ // Detect current base from URL (radix or base).
+ const baseMatch = pathname.match(/\/docs\/components\/(radix|base)\//)
+ const currentBase = baseMatch ? baseMatch[1] : "radix" // Default to radix.
+
return (
{item.type === "folder" && (
- {item.children.map((item) => {
- if (
- !showMcpDocs &&
- item.type === "page" &&
- item.url?.includes("/mcp")
- ) {
+ {getPagesFromFolder(item, currentBase).map((page) => {
+ if (!showMcpDocs && page.url.includes("/mcp")) {
+ return null
+ }
+
+ if (EXCLUDED_PAGES.includes(page.url)) {
return null
}
return (
- item.type === "page" &&
- !EXCLUDED_PAGES.includes(item.url) && (
-
-
-
-
- )
+
+
+
+
)
})}
diff --git a/apps/v4/content/docs/components/accordion.mdx b/apps/v4/content/docs/components/base/accordion.mdx
similarity index 91%
rename from apps/v4/content/docs/components/accordion.mdx
rename to apps/v4/content/docs/components/base/accordion.mdx
index fb5cd44281..dba2d460c9 100644
--- a/apps/v4/content/docs/components/accordion.mdx
+++ b/apps/v4/content/docs/components/base/accordion.mdx
@@ -1,6 +1,7 @@
---
title: Accordion
description: A vertically stacked set of interactive headings that each reveal a section of content.
+base: base
component: true
links:
doc: https://www.radix-ui.com/docs/primitives/components/accordion
@@ -8,6 +9,7 @@ links:
---
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
diff --git a/apps/v4/content/docs/components/alert-dialog.mdx b/apps/v4/content/docs/components/base/alert-dialog.mdx
similarity index 93%
rename from apps/v4/content/docs/components/alert-dialog.mdx
rename to apps/v4/content/docs/components/base/alert-dialog.mdx
index d85d30f057..56ef5541a5 100644
--- a/apps/v4/content/docs/components/alert-dialog.mdx
+++ b/apps/v4/content/docs/components/base/alert-dialog.mdx
@@ -2,6 +2,7 @@
title: Alert Dialog
description: A modal dialog that interrupts the user with important content and expects a response.
featured: true
+base: base
component: true
links:
doc: https://www.radix-ui.com/docs/primitives/components/alert-dialog
@@ -9,6 +10,7 @@ links:
---
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
diff --git a/apps/v4/content/docs/components/alert.mdx b/apps/v4/content/docs/components/base/alert.mdx
similarity index 90%
rename from apps/v4/content/docs/components/alert.mdx
rename to apps/v4/content/docs/components/base/alert.mdx
index ec3d6f2d42..98df719adb 100644
--- a/apps/v4/content/docs/components/alert.mdx
+++ b/apps/v4/content/docs/components/base/alert.mdx
@@ -1,10 +1,12 @@
---
title: Alert
description: Displays a callout for user attention.
+base: base
component: true
---
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
diff --git a/apps/v4/content/docs/components/aspect-ratio.mdx b/apps/v4/content/docs/components/base/aspect-ratio.mdx
similarity index 89%
rename from apps/v4/content/docs/components/aspect-ratio.mdx
rename to apps/v4/content/docs/components/base/aspect-ratio.mdx
index 958f6d054a..cb5ffd7399 100644
--- a/apps/v4/content/docs/components/aspect-ratio.mdx
+++ b/apps/v4/content/docs/components/base/aspect-ratio.mdx
@@ -1,6 +1,7 @@
---
title: Aspect Ratio
description: Displays content within a desired ratio.
+base: base
component: true
links:
doc: https://www.radix-ui.com/docs/primitives/components/aspect-ratio
@@ -8,6 +9,7 @@ links:
---
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
diff --git a/apps/v4/content/docs/components/avatar.mdx b/apps/v4/content/docs/components/base/avatar.mdx
similarity index 90%
rename from apps/v4/content/docs/components/avatar.mdx
rename to apps/v4/content/docs/components/base/avatar.mdx
index a20c1259a9..88d9cc100f 100644
--- a/apps/v4/content/docs/components/avatar.mdx
+++ b/apps/v4/content/docs/components/base/avatar.mdx
@@ -1,6 +1,7 @@
---
title: Avatar
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
@@ -8,6 +9,7 @@ links:
---
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
diff --git a/apps/v4/content/docs/components/badge.mdx b/apps/v4/content/docs/components/base/badge.mdx
similarity index 90%
rename from apps/v4/content/docs/components/badge.mdx
rename to apps/v4/content/docs/components/base/badge.mdx
index 6f4abdb0cb..810115edd8 100644
--- a/apps/v4/content/docs/components/badge.mdx
+++ b/apps/v4/content/docs/components/base/badge.mdx
@@ -1,10 +1,12 @@
---
title: Badge
description: Displays a badge or a component that looks like a badge.
+base: base
component: true
---
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
diff --git a/apps/v4/content/docs/components/breadcrumb.mdx b/apps/v4/content/docs/components/base/breadcrumb.mdx
similarity index 94%
rename from apps/v4/content/docs/components/breadcrumb.mdx
rename to apps/v4/content/docs/components/base/breadcrumb.mdx
index 91c0ccbe1c..656a4d669e 100644
--- a/apps/v4/content/docs/components/breadcrumb.mdx
+++ b/apps/v4/content/docs/components/base/breadcrumb.mdx
@@ -1,10 +1,12 @@
---
title: Breadcrumb
description: Displays the path to the current resource using a hierarchy of links.
+base: base
component: true
---
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
@@ -80,6 +86,7 @@ import {
Use a custom component as `children` for `Copy and paste the following code into your project.
-Update the import paths to match your project setup.
@@ -85,19 +90,19 @@ import {
Set the `orientation` prop to change the button group layout.
-` components to create button groups with spacing.
-Button
+
+
+```
+
+## Installation
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add button
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-slot
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx
+import { Button } from "@/components/ui/button"
+```
+
+```tsx
+Button
+```
+
+## Cursor
+
+Tailwind v4 [switched](https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor) from `cursor: pointer` to `cursor: default` for the button component.
+
+If you want to keep the `cursor: pointer` behavior, add the following code to your CSS file:
+
+```css showLineNumbers title="globals.css"
+@layer base {
+ button:not(:disabled),
+ [role="button"]:not(:disabled) {
+ cursor: pointer;
+ }
+}
+```
+
+## Examples
+
+### Size
+
+Small
+
+
+
+// Medium
+Default
+
+
+
+// Large
+Large
+
+
+```
+
+### Default
+
+Button
+```
+
+### Outline
+
+Outline
+```
+
+### Secondary
+
+Secondary
+```
+
+### Ghost
+
+Ghost
+```
+
+### Destructive
+
+Destructive
+```
+
+### Link
+
+Link
+```
+
+### Icon
+
+
+
+```
+
+### With Icon
+
+The spacing between the icon and the text is automatically adjusted
+based on the size of the button. You do not need any margin on the icon.
+
+
+
+```
+
+### Rounded
+
+Use the `rounded-full` class to make the button rounded.
+
+
+
+```
+
+### Spinner
+
+
+
+```
+
+### Button Group
+
+To create a button group, use the `ButtonGroup` component. See the [Button Group](/docs/components/button-group) documentation for more details.
+
+
+
+
+
+
+
+ Archive
+ Report
+
+
+ Snooze
+
+
+
+
+
+
+
+
+```
+
+### Link
+
+You can use the `asChild` prop to make another component look like a button. Here's an example of a link that looks like a button.
+
+```tsx showLineNumbers
+import Link from "next/link"
+
+import { Button } from "@/components/ui/button"
+
+export function LinkAsButton() {
+ return (
+
+
+ )
+}
+```
+
+## API Reference
+
+### Button
+
+The `Button` component is a wrapper around the `button` element that adds a variety of styles and functionality.
+
+| Prop | Type | Default |
+| --------- | ----------------------------------------------------------------------------- | ----------- |
+| `variant` | `"default" \| "outline" \| "ghost" \| "destructive" \| "secondary" \| "link"` | `"default"` |
+| `size` | `"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg"` | `"default"` |
+| `asChild` | `boolean` | `false` |
+
+## Changelog
+
+### 2025-09-24 New sizes
+
+We have added two new sizes to the button component: `icon-sm` and `icon-lg`. These sizes are used to create icon buttons. To add them, edit `button.tsx` and add the following code under `size` in `buttonVariants`:
+
+```tsx showLineNumbers title="components/ui/button.tsx"
+const buttonVariants = cva("...", {
+ variants: {
+ size: {
+ // ...
+ "icon-sm": "size-8",
+ "icon-lg": "size-10",
+ // ...
+ },
+ },
+})
+```
diff --git a/apps/v4/content/docs/components/calendar.mdx b/apps/v4/content/docs/components/base/calendar.mdx
similarity index 96%
rename from apps/v4/content/docs/components/calendar.mdx
rename to apps/v4/content/docs/components/base/calendar.mdx
index 5ecf2dfcc5..4400811163 100644
--- a/apps/v4/content/docs/components/calendar.mdx
+++ b/apps/v4/content/docs/components/base/calendar.mdx
@@ -1,12 +1,14 @@
---
title: Calendar
description: A date field component that allows users to enter and edit date.
+base: base
component: true
links:
doc: https://react-day-picker.js.org
---
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
@@ -103,6 +109,7 @@ To use the Persian calendar, edit `components/ui/calendar.tsx` and replace `reac
```
span]:text-xs [&>span]:opacity-70",
+ "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md [&>span]:text-xs [&>span]:opacity-70",
defaultClassNames.day,
className
)}
diff --git a/apps/v4/content/docs/components/card.mdx b/apps/v4/content/docs/components/base/card.mdx
similarity index 83%
rename from apps/v4/content/docs/components/card.mdx
rename to apps/v4/content/docs/components/base/card.mdx
index c5b2633b34..58530977d3 100644
--- a/apps/v4/content/docs/components/card.mdx
+++ b/apps/v4/content/docs/components/base/card.mdx
@@ -1,10 +1,15 @@
---
title: Card
description: Displays a card with header, content, and footer.
+base: base
component: true
---
-Copy and paste the following code into your project.
-Update the import paths to match your project setup.
diff --git a/apps/v4/content/docs/components/carousel.mdx b/apps/v4/content/docs/components/base/carousel.mdx
similarity index 96%
rename from apps/v4/content/docs/components/carousel.mdx
rename to apps/v4/content/docs/components/base/carousel.mdx
index 73461ccc8c..02e51d9fe3 100644
--- a/apps/v4/content/docs/components/carousel.mdx
+++ b/apps/v4/content/docs/components/base/carousel.mdx
@@ -1,6 +1,7 @@
---
title: Carousel
description: A carousel with motion and swipe built using Embla.
+base: base
component: true
links:
doc: https://www.embla-carousel.com/get-started/react
@@ -8,6 +9,7 @@ links:
---
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
@@ -87,6 +93,7 @@ import {
To set the size of the items, you can use the `basis` utility class on the `
Copy and paste the following code into `components/ui/chart.tsx`.
-Add the following colors to your CSS file
@@ -197,9 +203,14 @@ You can now build your chart using Recharts components.
-Copy and paste the following code into your project.
-Update the import paths to match your project setup.
diff --git a/apps/v4/content/docs/components/collapsible.mdx b/apps/v4/content/docs/components/base/collapsible.mdx
similarity index 90%
rename from apps/v4/content/docs/components/collapsible.mdx
rename to apps/v4/content/docs/components/base/collapsible.mdx
index d3b18f7bcd..aa5daa519e 100644
--- a/apps/v4/content/docs/components/collapsible.mdx
+++ b/apps/v4/content/docs/components/base/collapsible.mdx
@@ -1,6 +1,7 @@
---
title: Collapsible
description: An interactive component which expands/collapses a panel.
+base: base
component: true
featured: true
links:
@@ -9,6 +10,7 @@ links:
---
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
diff --git a/apps/v4/content/docs/components/combobox.mdx b/apps/v4/content/docs/components/base/combobox.mdx
similarity index 93%
rename from apps/v4/content/docs/components/combobox.mdx
rename to apps/v4/content/docs/components/base/combobox.mdx
index a8788f7f24..61c5b18d72 100644
--- a/apps/v4/content/docs/components/combobox.mdx
+++ b/apps/v4/content/docs/components/base/combobox.mdx
@@ -1,10 +1,12 @@
---
title: Combobox
description: Autocomplete input and command palette with a list of suggestions.
+base: base
component: true
---
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
@@ -96,6 +102,7 @@ import {
### Dialog
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
diff --git a/apps/v4/content/docs/components/data-table.mdx b/apps/v4/content/docs/components/base/data-table.mdx
similarity index 98%
rename from apps/v4/content/docs/components/data-table.mdx
rename to apps/v4/content/docs/components/base/data-table.mdx
index b66f08572a..738ed06234 100644
--- a/apps/v4/content/docs/components/data-table.mdx
+++ b/apps/v4/content/docs/components/base/data-table.mdx
@@ -1,12 +1,17 @@
---
title: Data Table
description: Powerful table and datagrids built using TanStack Table.
+base: base
component: true
links:
doc: https://tanstack.com/table/v8/docs/introduction
---
-Copy and paste the following code into your project.
-Update the import paths to match your project setup.
@@ -83,7 +89,7 @@ import {
### Custom close button
-Copy and paste the following code into your project.
-Update the import paths to match your project setup.
@@ -89,4 +98,4 @@ import {
You can combine the `Dialog` and `Drawer` components to create a responsive dialog. This renders a `Dialog` component on desktop and a `Drawer` on mobile.
-Copy and paste the following code into your project.
-Update the import paths to match your project setup.
@@ -83,6 +89,7 @@ import {
### Checkboxes
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
@@ -73,6 +82,7 @@ import {
Use the `border` utility class to create an outline empty state.
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
@@ -106,47 +112,87 @@ See the [Form](/docs/forms) documentation for building forms with the `Field` co
### Input
-Copy and paste the following code into your project.
-Update the import paths to match your project setup.
diff --git a/apps/v4/content/docs/components/hover-card.mdx b/apps/v4/content/docs/components/base/hover-card.mdx
similarity index 84%
rename from apps/v4/content/docs/components/hover-card.mdx
rename to apps/v4/content/docs/components/base/hover-card.mdx
index 8dacd7e557..448c49e760 100644
--- a/apps/v4/content/docs/components/hover-card.mdx
+++ b/apps/v4/content/docs/components/base/hover-card.mdx
@@ -1,13 +1,18 @@
---
title: Hover Card
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
---
-Copy and paste the following code into your project.
-Update the import paths to match your project setup.
diff --git a/apps/v4/content/docs/components/input-group.mdx b/apps/v4/content/docs/components/base/input-group.mdx
similarity index 85%
rename from apps/v4/content/docs/components/input-group.mdx
rename to apps/v4/content/docs/components/base/input-group.mdx
index e46960e8a0..28e2eba954 100644
--- a/apps/v4/content/docs/components/input-group.mdx
+++ b/apps/v4/content/docs/components/base/input-group.mdx
@@ -1,12 +1,17 @@
---
title: Input Group
description: Display additional information or actions to an input or textarea.
+base: base
component: true
---
import { IconInfoCircle } from "@tabler/icons-react"
-Copy and paste the following code into your project.
-Update the import paths to match your project setup.
@@ -69,55 +78,88 @@ import {
### Icon
-Copy and paste the following code into your project.
-Update the import paths to match your project setup.
@@ -90,6 +99,7 @@ import {
Use the `pattern` prop to define a custom pattern for the OTP input.
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
@@ -57,6 +63,7 @@ import { Input } from "@/components/ui/input"
### Default
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
@@ -80,39 +89,71 @@ If you only need to display content such as a title, description, and actions, u
### Variants
--
@@ -129,7 +170,11 @@ To render an item as a link, use the `asChild` prop. The hover and focus states
### Dropdown
-
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
@@ -54,25 +59,25 @@ import { Kbd } from "@/components/ui/kbd"
Use the `KbdGroup` component to group keyboard keys together.
-Copy and paste the following code into your project.
-Update the import paths to match your project setup.
diff --git a/apps/v4/content/docs/components/menubar.mdx b/apps/v4/content/docs/components/base/menubar.mdx
similarity index 87%
rename from apps/v4/content/docs/components/menubar.mdx
rename to apps/v4/content/docs/components/base/menubar.mdx
index a96439dad8..aab7a7fb18 100644
--- a/apps/v4/content/docs/components/menubar.mdx
+++ b/apps/v4/content/docs/components/base/menubar.mdx
@@ -1,13 +1,18 @@
---
title: Menubar
description: A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
+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
---
-Copy and paste the following code into your project.
-Update the import paths to match your project setup.
diff --git a/apps/v4/content/docs/components/base/meta.json b/apps/v4/content/docs/components/base/meta.json
new file mode 100644
index 0000000000..876c74b3f0
--- /dev/null
+++ b/apps/v4/content/docs/components/base/meta.json
@@ -0,0 +1,64 @@
+{
+ "title": "Base UI",
+ "pages": [
+ "accordion",
+ "alert",
+ "alert-dialog",
+ "aspect-ratio",
+ "avatar",
+ "badge",
+ "breadcrumb",
+ "button",
+ "button-group",
+ "calendar",
+ "card",
+ "carousel",
+ "chart",
+ "checkbox",
+ "collapsible",
+ "combobox",
+ "command",
+ "context-menu",
+ "data-table",
+ "date-picker",
+ "dialog",
+ "drawer",
+ "dropdown-menu",
+ "empty",
+ "field",
+ "form",
+ "hover-card",
+ "input",
+ "input-group",
+ "input-otp",
+ "item",
+ "kbd",
+ "label",
+ "menubar",
+ "native-select",
+ "navigation-menu",
+ "pagination",
+ "popover",
+ "progress",
+ "radio-group",
+ "resizable",
+ "scroll-area",
+ "select",
+ "separator",
+ "sheet",
+ "sidebar",
+ "skeleton",
+ "slider",
+ "sonner",
+ "spinner",
+ "switch",
+ "table",
+ "tabs",
+ "textarea",
+ "toast",
+ "toggle",
+ "toggle-group",
+ "tooltip",
+ "typography"
+ ]
+}
diff --git a/apps/v4/content/docs/components/native-select.mdx b/apps/v4/content/docs/components/base/native-select.mdx
similarity index 90%
rename from apps/v4/content/docs/components/native-select.mdx
rename to apps/v4/content/docs/components/base/native-select.mdx
index 77e4d11b1c..2a4204cf97 100644
--- a/apps/v4/content/docs/components/native-select.mdx
+++ b/apps/v4/content/docs/components/base/native-select.mdx
@@ -1,6 +1,7 @@
---
title: Native Select
description: A styled native HTML select element with consistent design system integration.
+base: base
component: true
---
@@ -11,7 +12,7 @@ import { InfoIcon } from "lucide-react"
component.
-Copy and paste the following code into your project.
-Update the import paths to match your project setup.
@@ -74,7 +79,7 @@ import {
Organize options using `NativeSelectOptGroup` for better categorization.
-
@@ -96,13 +101,13 @@ Organize options using `NativeSelectOptGroup` for better categorization.
Disable individual options or the entire select component.
-
@@ -117,13 +122,13 @@ Show validation errors with the `aria-invalid` attribute and error styling.
Use with form libraries like React Hook Form for controlled components.
-Copy and paste the following code into your project.
-Update the import paths to match your project setup.
diff --git a/apps/v4/content/docs/components/popover.mdx b/apps/v4/content/docs/components/base/popover.mdx
similarity index 90%
rename from apps/v4/content/docs/components/popover.mdx
rename to apps/v4/content/docs/components/base/popover.mdx
index 53e1e933bf..67ad1b1da1 100644
--- a/apps/v4/content/docs/components/popover.mdx
+++ b/apps/v4/content/docs/components/base/popover.mdx
@@ -1,6 +1,7 @@
---
title: Popover
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
@@ -8,6 +9,7 @@ links:
---
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
diff --git a/apps/v4/content/docs/components/progress.mdx b/apps/v4/content/docs/components/base/progress.mdx
similarity index 89%
rename from apps/v4/content/docs/components/progress.mdx
rename to apps/v4/content/docs/components/base/progress.mdx
index fba7eb68e7..df3ede6f93 100644
--- a/apps/v4/content/docs/components/progress.mdx
+++ b/apps/v4/content/docs/components/base/progress.mdx
@@ -1,6 +1,7 @@
---
title: Progress
description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
+base: base
component: true
links:
doc: https://www.radix-ui.com/docs/primitives/components/progress
@@ -8,6 +9,7 @@ links:
---
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
diff --git a/apps/v4/content/docs/components/radio-group.mdx b/apps/v4/content/docs/components/base/radio-group.mdx
similarity index 91%
rename from apps/v4/content/docs/components/radio-group.mdx
rename to apps/v4/content/docs/components/base/radio-group.mdx
index 0b571c8354..3043cbe58f 100644
--- a/apps/v4/content/docs/components/radio-group.mdx
+++ b/apps/v4/content/docs/components/base/radio-group.mdx
@@ -1,6 +1,7 @@
---
title: Radio Group
description: A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
+base: base
component: true
links:
doc: https://www.radix-ui.com/docs/primitives/components/radio-group
@@ -8,6 +9,7 @@ links:
---
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
diff --git a/apps/v4/content/docs/components/resizable.mdx b/apps/v4/content/docs/components/base/resizable.mdx
similarity index 93%
rename from apps/v4/content/docs/components/resizable.mdx
rename to apps/v4/content/docs/components/base/resizable.mdx
index bda70158a6..f180db53d3 100644
--- a/apps/v4/content/docs/components/resizable.mdx
+++ b/apps/v4/content/docs/components/base/resizable.mdx
@@ -1,6 +1,7 @@
---
title: Resizable
description: Accessible resizable panel groups and layouts with keyboard support.
+base: base
component: true
links:
doc: https://github.com/bvaughn/react-resizable-panels
@@ -8,6 +9,7 @@ links:
---
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
@@ -79,6 +85,7 @@ import {
Use the `direction` prop to set the direction of the resizable panels.
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
@@ -71,4 +77,4 @@ import { ScrollArea } from "@/components/ui/scroll-area"
### Horizontal Scrolling
-Copy and paste the following code into your project.
-Update the import paths to match your project setup.
@@ -81,6 +87,7 @@ import {
### Scrollable
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
diff --git a/apps/v4/content/docs/components/sheet.mdx b/apps/v4/content/docs/components/base/sheet.mdx
similarity index 91%
rename from apps/v4/content/docs/components/sheet.mdx
rename to apps/v4/content/docs/components/base/sheet.mdx
index a3c5a88d18..27eef4199b 100644
--- a/apps/v4/content/docs/components/sheet.mdx
+++ b/apps/v4/content/docs/components/base/sheet.mdx
@@ -1,13 +1,18 @@
---
title: Sheet
description: Extends the Dialog component to display content that complements the main content of the screen.
+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
---
-Copy and paste the following code into your project.
-Update the import paths to match your project setup.
diff --git a/apps/v4/content/docs/components/sidebar.mdx b/apps/v4/content/docs/components/base/sidebar.mdx
similarity index 98%
rename from apps/v4/content/docs/components/sidebar.mdx
rename to apps/v4/content/docs/components/base/sidebar.mdx
index ca0e8da886..c96de9c47b 100644
--- a/apps/v4/content/docs/components/sidebar.mdx
+++ b/apps/v4/content/docs/components/base/sidebar.mdx
@@ -1,11 +1,13 @@
---
title: Sidebar
description: A composable, themeable and customizable sidebar component.
+base: base
component: true
---
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
@@ -317,6 +323,7 @@ You should see something like this:
` to the `SidebarHeader`.
` to the `SidebarFooter`.
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
@@ -53,6 +62,7 @@ import { Skeleton } from "@/components/ui/skeleton"
### Card
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
diff --git a/apps/v4/content/docs/components/sonner.mdx b/apps/v4/content/docs/components/base/sonner.mdx
similarity index 92%
rename from apps/v4/content/docs/components/sonner.mdx
rename to apps/v4/content/docs/components/base/sonner.mdx
index 2b87452e14..71239fb04d 100644
--- a/apps/v4/content/docs/components/sonner.mdx
+++ b/apps/v4/content/docs/components/base/sonner.mdx
@@ -1,12 +1,13 @@
---
title: Sonner
description: An opinionated toast component for React.
+base: base
component: true
links:
doc: https://sonner.emilkowal.ski
---
-Copy and paste the following code into your project.
-Add the Toaster component
@@ -102,7 +107,7 @@ toast("Event has been created.")
## Examples
-Copy and paste the following code into your project.
-Update the import paths to match your project setup.
@@ -52,7 +61,7 @@ import { Spinner } from "@/components/ui/spinner"
You can replace the default spinner icon with any other icon by editing the `Spinner` component.
-`.
-` to indicate a loading state.
-Copy and paste the following code into your project.
-Update the import paths to match your project setup.
diff --git a/apps/v4/content/docs/components/table.mdx b/apps/v4/content/docs/components/base/table.mdx
similarity index 89%
rename from apps/v4/content/docs/components/table.mdx
rename to apps/v4/content/docs/components/base/table.mdx
index 9ded734a91..8be9ebd62c 100644
--- a/apps/v4/content/docs/components/table.mdx
+++ b/apps/v4/content/docs/components/base/table.mdx
@@ -1,10 +1,15 @@
---
title: Table
description: A responsive table component.
+base: base
component: true
---
-Copy and paste the following code into your project.
-Update the import paths to match your project setup.
diff --git a/apps/v4/content/docs/components/tabs.mdx b/apps/v4/content/docs/components/base/tabs.mdx
similarity index 91%
rename from apps/v4/content/docs/components/tabs.mdx
rename to apps/v4/content/docs/components/base/tabs.mdx
index 90a0323293..d3d95f6e52 100644
--- a/apps/v4/content/docs/components/tabs.mdx
+++ b/apps/v4/content/docs/components/base/tabs.mdx
@@ -1,6 +1,7 @@
---
title: Tabs
description: A set of layered sections of content—known as tab panels—that are displayed one at a time.
+base: base
component: true
links:
doc: https://www.radix-ui.com/docs/primitives/components/tabs
@@ -8,6 +9,7 @@ links:
---
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
diff --git a/apps/v4/content/docs/components/textarea.mdx b/apps/v4/content/docs/components/base/textarea.mdx
similarity index 69%
rename from apps/v4/content/docs/components/textarea.mdx
rename to apps/v4/content/docs/components/base/textarea.mdx
index c8175f73e9..c80d19ab01 100644
--- a/apps/v4/content/docs/components/textarea.mdx
+++ b/apps/v4/content/docs/components/base/textarea.mdx
@@ -1,10 +1,15 @@
---
title: Textarea
description: Displays a form textarea or a component that looks like a textarea.
+base: base
component: true
---
-Copy and paste the following code into your project.
-Update the import paths to match your project setup.
@@ -52,15 +61,24 @@ import { Textarea } from "@/components/ui/textarea"
### Default
-Copy and paste the following code into your project.
-Update the import paths to match your project setup.
@@ -66,6 +71,7 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
### Outline
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
@@ -61,11 +70,16 @@ import { Toggle } from "@/components/ui/toggle"
### Default
-Copy and paste the following code into your project.
-Update the import paths to match your project setup.
diff --git a/apps/v4/content/docs/components/base/typography.mdx b/apps/v4/content/docs/components/base/typography.mdx
new file mode 100644
index 0000000000..8efacfde15
--- /dev/null
+++ b/apps/v4/content/docs/components/base/typography.mdx
@@ -0,0 +1,68 @@
+---
+title: Typography
+description: Styles for headings, paragraphs, lists...etc
+base: base
+component: true
+---
+
+We do not ship any typography styles by default. This page is an example of how you can use utility classes to style your text.
+
+
+
+
+ CLI
+ Manual
+
+
+
+
+```bash
+npx shadcn@latest add accordion
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-accordion
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import {
+ Accordion,
+ AccordionContent,
+ AccordionItem,
+ AccordionTrigger,
+} from "@/components/ui/accordion"
+```
+
+```tsx showLineNumbers
+
+
+ Is it accessible?
+
+ Yes. It adheres to the WAI-ARIA design pattern.
+
+
+
+```
diff --git a/apps/v4/content/docs/components/radix/alert-dialog.mdx b/apps/v4/content/docs/components/radix/alert-dialog.mdx
new file mode 100644
index 0000000000..5b8aec504c
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/alert-dialog.mdx
@@ -0,0 +1,94 @@
+---
+title: Alert Dialog
+description: A modal dialog that interrupts the user with important content and expects a response.
+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
+---
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add alert-dialog
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-alert-dialog
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+ AlertDialogTrigger,
+} from "@/components/ui/alert-dialog"
+```
+
+```tsx showLineNumbers
+
+ Open
+
+
+ Are you absolutely sure?
+
+ This action cannot be undone. This will permanently delete your account
+ and remove your data from our servers.
+
+
+
+ Cancel
+ Continue
+
+
+
+```
diff --git a/apps/v4/content/docs/components/radix/alert.mdx b/apps/v4/content/docs/components/radix/alert.mdx
new file mode 100644
index 0000000000..d8f7e4e1d8
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/alert.mdx
@@ -0,0 +1,65 @@
+---
+title: Alert
+description: Displays a callout for user attention.
+base: radix
+component: true
+---
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add alert
+```
+
+
+
+
+
+
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+```
+
+```tsx showLineNumbers
+
+ Heads up!
+
+ You can add components and dependencies to your app using the cli.
+
+
+```
diff --git a/apps/v4/content/docs/components/radix/aspect-ratio.mdx b/apps/v4/content/docs/components/radix/aspect-ratio.mdx
new file mode 100644
index 0000000000..a246d3a9f2
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/aspect-ratio.mdx
@@ -0,0 +1,70 @@
+---
+title: Aspect Ratio
+description: Displays content within a desired ratio.
+base: radix
+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
+---
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add aspect-ratio
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-aspect-ratio
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import { AspectRatio } from "@/components/ui/aspect-ratio"
+```
+
+```tsx showLineNumbers
+
+
+```
diff --git a/apps/v4/content/docs/components/radix/avatar.mdx b/apps/v4/content/docs/components/radix/avatar.mdx
new file mode 100644
index 0000000000..10e3f25be6
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/avatar.mdx
@@ -0,0 +1,71 @@
+---
+title: Avatar
+description: An image element with a fallback for representing the user.
+base: radix
+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
+---
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add avatar
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-avatar
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+```
+
+```tsx showLineNumbers
+
+ CN
+
+```
diff --git a/apps/v4/content/docs/components/radix/badge.mdx b/apps/v4/content/docs/components/radix/badge.mdx
new file mode 100644
index 0000000000..3ec855bec1
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/badge.mdx
@@ -0,0 +1,77 @@
+---
+title: Badge
+description: Displays a badge or a component that looks like a badge.
+base: radix
+component: true
+---
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add badge
+```
+
+
+
+
+
+
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx
+import { Badge } from "@/components/ui/badge"
+```
+
+```tsx
+Badge
+```
+
+### Link
+
+You can use the `asChild` prop to make another component look like a badge. Here's an example of a link that looks like a badge.
+
+```tsx showLineNumbers
+import Link from "next/link"
+
+import { Badge } from "@/components/ui/badge"
+
+export function LinkAsBadge() {
+ return (
+
+
+ )
+}
+```
diff --git a/apps/v4/content/docs/components/radix/breadcrumb.mdx b/apps/v4/content/docs/components/radix/breadcrumb.mdx
new file mode 100644
index 0000000000..92303a19ae
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/breadcrumb.mdx
@@ -0,0 +1,222 @@
+---
+title: Breadcrumb
+description: Displays the path to the current resource using a hierarchy of links.
+base: radix
+component: true
+---
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add breadcrumb
+```
+
+
+
+
+
+
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import {
+ Breadcrumb,
+ BreadcrumbItem,
+ BreadcrumbLink,
+ BreadcrumbList,
+ BreadcrumbPage,
+ BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb"
+```
+
+```tsx showLineNumbers
+
+
+
+ Home
+
+
+ Components
+
+
+ Breadcrumb
+
+
+
+```
+
+## Examples
+
+### Custom separator
+
+Use a custom component as `children` for `
+
+
+ Home
+
+
+
+
+ Components
+
+
+
+```
+
+---
+
+### Dropdown
+
+You can compose `
+
+
+ Components
+
+
+ Documentation
+ Themes
+ GitHub
+
+
+
+```
+
+---
+
+### Collapsed
+
+We provide a `
+
+ {/* ... */}
+
+
+ {/* ... */}
+
+
+```
+
+---
+
+### Link component
+
+To use a custom link component from your routing library, you can use the `asChild` prop on `
+
+
+
+
+
+ {/* ... */}
+
+
+```
+
+---
+
+### Responsive
+
+Here's an example of a responsive breadcrumb that composes `
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add button-group
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-slot
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx
+import {
+ ButtonGroup,
+ ButtonGroupSeparator,
+ ButtonGroupText,
+} from "@/components/ui/button-group"
+```
+
+```tsx
+
+ Button 1
+ Button 2
+
+```
+
+## Accessibility
+
+- The `ButtonGroup` component has the `role` attribute set to `group`.
+- Use Tab to navigate between the buttons in the group.
+- Use `aria-label` or `aria-labelledby` to label the button group.
+
+```tsx showLineNumbers
+
+ Button 1
+ Button 2
+
+```
+
+## ButtonGroup vs ToggleGroup
+
+- Use the `ButtonGroup` component when you want to group buttons that perform an action.
+- Use the `ToggleGroup` component when you want to group buttons that toggle a state.
+
+## Examples
+
+### Orientation
+
+Set the `orientation` prop to change the button group layout.
+
+` components to create button groups with spacing.
+
+
+ Button 1
+ Button 2
+
+```
+
+Nest multiple button groups to create complex layouts with spacing. See the [nested](#nested) example for more details.
+
+```tsx
+
+
+```
+
+### ButtonGroupSeparator
+
+The `ButtonGroupSeparator` component visually divides buttons within a group.
+
+| Prop | Type | Default |
+| ------------- | ---------------------------- | ------------ |
+| `orientation` | `"horizontal" \| "vertical"` | `"vertical"` |
+
+```tsx
+
+ Button 1
+ Button 2
+
+```
+
+### ButtonGroupText
+
+Use this component to display text within a button group.
+
+| Prop | Type | Default |
+| --------- | --------- | ------- |
+| `asChild` | `boolean` | `false` |
+
+```tsx
+
+ Text
+ Button
+
+```
+
+Use the `asChild` prop to render a custom component as the text, for example a label.
+
+```tsx showLineNumbers
+import { ButtonGroupText } from "@/components/ui/button-group"
+import { Label } from "@/components/ui/label"
+
+export function ButtonGroupTextDemo() {
+ return (
+
+
+ Text
+
+
+ )
+}
+```
diff --git a/apps/v4/content/docs/components/button.mdx b/apps/v4/content/docs/components/radix/button.mdx
similarity index 90%
rename from apps/v4/content/docs/components/button.mdx
rename to apps/v4/content/docs/components/radix/button.mdx
index 73bb53644c..191a826abc 100644
--- a/apps/v4/content/docs/components/button.mdx
+++ b/apps/v4/content/docs/components/radix/button.mdx
@@ -2,6 +2,7 @@
title: Button
description: Displays a button or a component that looks like a button.
featured: true
+base: radix
component: true
---
@@ -14,7 +15,12 @@ instructions to update your project.
-Button
@@ -51,7 +57,11 @@ npm install @radix-ui/react-slot
Copy and paste the following code into your project.
-Update the import paths to match your project setup.
@@ -90,7 +100,7 @@ If you want to keep the `cursor: pointer` behavior, add the following code to yo
### Size
-
@@ -230,6 +252,7 @@ Use the `rounded-full` class to make the button rounded.
### Spinner
diff --git a/apps/v4/content/docs/components/radix/calendar.mdx b/apps/v4/content/docs/components/radix/calendar.mdx
new file mode 100644
index 0000000000..781b01d3eb
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/calendar.mdx
@@ -0,0 +1,512 @@
+---
+title: Calendar
+description: A date field component that allows users to enter and edit date.
+base: radix
+component: true
+links:
+ doc: https://react-day-picker.js.org
+---
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add calendar
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install react-day-picker date-fns
+```
+
+Add the `Button` component to your project.
+
+The `Calendar` component uses the `Button` component. Make sure you have it installed in your project.
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import { Calendar } from "@/components/ui/calendar"
+```
+
+```tsx showLineNumbers
+const [date, setDate] = React.useState(new Date())
+
+return (
+ ` component to build a date picker. See the [Date Picker](/docs/components/date-picker) page for more information.
+
+## Persian / Hijri / Jalali Calendar
+
+To use the Persian calendar, edit `components/ui/calendar.tsx` and replace `react-day-picker` with `react-day-picker/persian`.
+
+```diff
+- import { DayPicker } from "react-day-picker"
++ import { DayPicker } from "react-day-picker/persian"
+```
+
+(undefined)
+ const [timeZone, setTimeZone] = React.useState(undefined)
+
+ React.useEffect(() => {
+ setTimeZone(Intl.DateTimeFormat().resolvedOptions().timeZone)
+ }, [])
+
+ return (
+
+
+```tsx showLineNumbers title="components/ui/calendar.tsx"
+"use client"
+
+import * as React from "react"
+import {
+ ChevronDownIcon,
+ ChevronLeftIcon,
+ ChevronRightIcon,
+} from "lucide-react"
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { Button, buttonVariants } from "@/components/ui/button"
+
+function Calendar({
+ className,
+ classNames,
+ showOutsideDays = true,
+ captionLayout = "label",
+ buttonVariant = "ghost",
+ formatters,
+ components,
+ ...props
+}: React.ComponentProps & {
+ buttonVariant?: React.ComponentProps["variant"]
+}) {
+ const defaultClassNames = getDefaultClassNames()
+
+ return (
+ svg]:rotate-180`,
+ String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+ className
+ )}
+ captionLayout={captionLayout}
+ formatters={{
+ formatMonthDropdown: (date) =>
+ date.toLocaleString("default", { month: "short" }),
+ ...formatters,
+ }}
+ classNames={{
+ root: cn("w-fit", defaultClassNames.root),
+ months: cn(
+ "relative flex flex-col gap-4 md:flex-row",
+ defaultClassNames.months
+ ),
+ month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+ nav: cn(
+ "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+ defaultClassNames.nav
+ ),
+ button_previous: cn(
+ buttonVariants({ variant: buttonVariant }),
+ "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+ defaultClassNames.button_previous
+ ),
+ button_next: cn(
+ buttonVariants({ variant: buttonVariant }),
+ "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+ defaultClassNames.button_next
+ ),
+ month_caption: cn(
+ "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
+ defaultClassNames.month_caption
+ ),
+ dropdowns: cn(
+ "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
+ defaultClassNames.dropdowns
+ ),
+ dropdown_root: cn(
+ "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
+ defaultClassNames.dropdown_root
+ ),
+ dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
+ caption_label: cn(
+ "select-none font-medium",
+ captionLayout === "label"
+ ? "text-sm"
+ : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
+ defaultClassNames.caption_label
+ ),
+ table: "w-full border-collapse",
+ weekdays: cn("flex", defaultClassNames.weekdays),
+ weekday: cn(
+ "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
+ defaultClassNames.weekday
+ ),
+ week: cn("mt-2 flex w-full", defaultClassNames.week),
+ week_number_header: cn(
+ "w-[--cell-size] select-none",
+ defaultClassNames.week_number_header
+ ),
+ week_number: cn(
+ "text-muted-foreground select-none text-[0.8rem]",
+ defaultClassNames.week_number
+ ),
+ day: cn(
+ "relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+ props.showWeekNumber
+ ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
+ : "[&:first-child[data-selected=true]_button]:rounded-l-md",
+ defaultClassNames.day
+ ),
+ range_start: cn(
+ "bg-accent rounded-l-md",
+ defaultClassNames.range_start
+ ),
+ range_middle: cn("rounded-none", defaultClassNames.range_middle),
+ range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
+ today: cn(
+ "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+ defaultClassNames.today
+ ),
+ outside: cn(
+ "text-muted-foreground aria-selected:text-muted-foreground",
+ defaultClassNames.outside
+ ),
+ disabled: cn(
+ "text-muted-foreground opacity-50",
+ defaultClassNames.disabled
+ ),
+ hidden: cn("invisible", defaultClassNames.hidden),
+ ...classNames,
+ }}
+ components={{
+ Root: ({ className, rootRef, ...props }) => {
+ return (
+
+ )
+ },
+ Chevron: ({ className, orientation, ...props }) => {
+ if (orientation === "left") {
+ return (
+
+
+ {children}
+
+
+ )
+ },
+ ...components,
+ }}
+ {...props}
+ />
+ )
+}
+
+function CalendarDayButton({
+ className,
+ day,
+ modifiers,
+ ...props
+}: React.ComponentProps) {
+ const defaultClassNames = getDefaultClassNames()
+
+ const ref = React.useRef(null)
+ React.useEffect(() => {
+ if (modifiers.focused) ref.current?.focus()
+ }, [modifiers.focused])
+
+ return (
+ span]:text-xs [&>span]:opacity-70",
+ defaultClassNames.day,
+ className
+ )}
+ {...props}
+ />
+ )
+}
+
+export { Calendar, CalendarDayButton }
+```
+
+
+
+**If you have made any changes to the `Calendar` component, you will need to merge your changes with the new version.**
+
+Then follow the [React DayPicker](https://daypicker.dev/upgrading) upgrade guide to upgrade your dependencies and existing components to the latest version.
+
+#### Installing Blocks
+
+After upgrading the `Calendar` component, you can install the new blocks by running the `shadcn@latest add` command.
+
+```bash
+npx shadcn@latest add calendar-02
+```
+
+This will install the latest version of the calendar blocks.
+
+## Changelog
+
+### 2025-10-26 Fixed day radius with week numbers
+
+We have fixed an issue where the selected day's left border radius was not applied correctly when week numbers were displayed. The fix ensures that when `showWeekNumber` is enabled, the first day (which is the second child due to the week number column) correctly receives the rounded left border.
+
+To apply this fix, edit `components/ui/calendar.tsx` and update the `day` class in `classNames`:
+
+```tsx showLineNumbers title="components/ui/calendar.tsx" {5-7}
+classNames={{
+ // ... other classNames
+ day: cn(
+ "relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+ props.showWeekNumber
+ ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
+ : "[&:first-child[data-selected=true]_button]:rounded-l-md",
+ defaultClassNames.day
+ ),
+ // ... other classNames
+}}
+```
diff --git a/apps/v4/content/docs/components/radix/card.mdx b/apps/v4/content/docs/components/radix/card.mdx
new file mode 100644
index 0000000000..295f7beca2
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/card.mdx
@@ -0,0 +1,78 @@
+---
+title: Card
+description: Displays a card with header, content, and footer.
+base: radix
+component: true
+---
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add card
+```
+
+
+
+
+
+
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import {
+ Card,
+ CardAction,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from "@/components/ui/card"
+```
+
+```tsx showLineNumbers
+
+
+ Card Title
+ Card Description
+ Card Action
+
+
+ Card Content
+
+
+ Card Footer
+
+
+```
diff --git a/apps/v4/content/docs/components/radix/carousel.mdx b/apps/v4/content/docs/components/radix/carousel.mdx
new file mode 100644
index 0000000000..f82a9a632b
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/carousel.mdx
@@ -0,0 +1,312 @@
+---
+title: Carousel
+description: A carousel with motion and swipe built using Embla.
+base: radix
+component: true
+links:
+ doc: https://www.embla-carousel.com/get-started/react
+ api: https://www.embla-carousel.com/api
+---
+
+
+
+
+ CLI
+ Manual
+
+
+
+
+```bash
+npx shadcn@latest add carousel
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install embla-carousel-react
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import {
+ Carousel,
+ CarouselContent,
+ CarouselItem,
+ CarouselNext,
+ CarouselPrevious,
+} from "@/components/ui/carousel"
+```
+
+```tsx showLineNumbers
+
+
+ ...
+ ...
+ ...
+
+
+```
+
+## Examples
+
+### Sizes
+
+To set the size of the items, you can use the `basis` utility class on the `
+
+ ...
+ ...
+ ...
+
+
+```
+
+```tsx showLineNumbers {4-6}
+// 50% on small screens and 33% on larger screens.
+
+
+ ...
+ ...
+ ...
+
+
+```
+
+### Spacing
+
+To set the spacing between the items, we use a `pl-[VALUE]` utility on the `
+ **Why:** I tried to use the `gap` property or a `grid` layout on the `
+
+
+
+
+ ...
+ ...
+ ...
+
+
+```
+
+```tsx showLineNumbers /-ml-2/ /pl-2/ /md:-ml-4/ /md:pl-4/
+
+
+ ...
+ ...
+ ...
+
+
+```
+
+### Orientation
+
+Use the `orientation` prop to set the orientation of the carousel.
+
+
+
+ ...
+ ...
+ ...
+
+
+```
+
+## Options
+
+You can pass options to the carousel using the `opts` prop. See the [Embla Carousel docs](https://www.embla-carousel.com/api/options/) for more information.
+
+```tsx showLineNumbers {2-5}
+
+
+ ...
+ ...
+ ...
+
+
+```
+
+## API
+
+Use a state and the `setApi` props to get an instance of the carousel API.
+
+()
+ const [current, setCurrent] = React.useState(0)
+ const [count, setCount] = React.useState(0)
+
+ React.useEffect(() => {
+ if (!api) {
+ return
+ }
+
+ setCount(api.scrollSnapList().length)
+ setCurrent(api.selectedScrollSnap() + 1)
+
+ api.on("select", () => {
+ setCurrent(api.selectedScrollSnap() + 1)
+ })
+ }, [api])
+
+ return (
+
+
+ ...
+ ...
+ ...
+
+
+ )
+}
+```
+
+## Events
+
+You can listen to events using the api instance from `setApi`.
+
+```tsx showLineNumbers {1,4-14,16}
+import { type CarouselApi } from "@/components/ui/carousel"
+
+export function Example() {
+ const [api, setApi] = React.useState()
+
+ React.useEffect(() => {
+ if (!api) {
+ return
+ }
+
+ api.on("select", () => {
+ // Do something on select.
+ })
+ }, [api])
+
+ return (
+
+
+ ...
+ ...
+ ...
+
+
+ )
+}
+```
+
+See the [Embla Carousel docs](https://www.embla-carousel.com/api/events/) for more information on using events.
+
+## Plugins
+
+You can use the `plugins` prop to add plugins to the carousel.
+
+```ts showLineNumbers {1,6-10}
+import Autoplay from "embla-carousel-autoplay"
+
+export function Example() {
+ return (
+
+ // ...
+
+ )
+}
+```
+
+
+
+**Note:** We're working on upgrading to Recharts v3. In the meantime, if you'd like to start testing v3, see the code in the comment [here](https://github.com/shadcn-ui/ui/issues/7669#issuecomment-2998299159). We'll have an official release soon.
+
+
+
+
+
+
+
+ )
+}
+```
+
+We do not wrap Recharts. This means you're not locked into an abstraction. When a new Recharts version is released, you can follow the official upgrade path to upgrade your charts.
+
+**The components are yours**.
+
+## Installation
+
+
+
+**Note:** If you are using charts with **React 19** or the **Next.js 15**, see the note [here](/docs/react-19#recharts).
+
+
+
+
+
+
+ CLI
+ Manual
+
+
+
+
+
+Run the following command to install `chart.tsx`
+
+```bash
+npx shadcn@latest add chart
+```
+
+Add the following colors to your CSS file
+
+```css title="app/globals.css" showLineNumbers
+@layer base {
+ :root {
+ --chart-1: oklch(0.646 0.222 41.116);
+ --chart-2: oklch(0.6 0.118 184.704);
+ --chart-3: oklch(0.398 0.07 227.392);
+ --chart-4: oklch(0.828 0.189 84.429);
+ --chart-5: oklch(0.769 0.188 70.08);
+ }
+
+ .dark {
+ --chart-1: oklch(0.488 0.243 264.376);
+ --chart-2: oklch(0.696 0.17 162.48);
+ --chart-3: oklch(0.769 0.188 70.08);
+ --chart-4: oklch(0.627 0.265 303.9);
+ --chart-5: oklch(0.645 0.246 16.439);
+ }
+}
+```
+
+
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install recharts
+```
+
+Copy and paste the following code into `components/ui/chart.tsx`.
+
+Add the following colors to your CSS file
+
+```css title="app/globals.css" showLineNumbers
+@layer base {
+ :root {
+ --chart-1: oklch(0.646 0.222 41.116);
+ --chart-2: oklch(0.6 0.118 184.704);
+ --chart-3: oklch(0.398 0.07 227.392);
+ --chart-4: oklch(0.828 0.189 84.429);
+ --chart-5: oklch(0.769 0.188 70.08);
+ }
+
+ .dark {
+ --chart-1: oklch(0.488 0.243 264.376);
+ --chart-2: oklch(0.696 0.17 162.48);
+ --chart-3: oklch(0.769 0.188 70.08);
+ --chart-4: oklch(0.627 0.265 303.9);
+ --chart-5: oklch(0.645 0.246 16.439);
+ }
+}
+```
+
+
+
+
+
+
+
+## Your First Chart
+
+Let's build your first chart. We'll build a bar chart, add a grid, axis, tooltip and legend.
+
+
+
+Start by defining your data
+
+The following data represents the number of desktop and mobile users for each month.
+
+
+
+**Note:** Your data can be in any shape. You are not limited to the shape of the data below. Use the `dataKey` prop to map your data to the chart.
+
+
+
+```tsx title="components/example-chart.tsx" showLineNumbers
+const chartData = [
+ { month: "January", desktop: 186, mobile: 80 },
+ { month: "February", desktop: 305, mobile: 200 },
+ { month: "March", desktop: 237, mobile: 120 },
+ { month: "April", desktop: 73, mobile: 190 },
+ { month: "May", desktop: 209, mobile: 130 },
+ { month: "June", desktop: 214, mobile: 140 },
+]
+```
+
+Define your chart config
+
+The chart config holds configuration for the chart. This is where you place human-readable strings, such as labels, icons and color tokens for theming.
+
+```tsx title="components/example-chart.tsx" showLineNumbers
+import { type ChartConfig } from "@/components/ui/chart"
+
+const chartConfig = {
+ desktop: {
+ label: "Desktop",
+ color: "#2563eb",
+ },
+ mobile: {
+ label: "Mobile",
+ color: "#60a5fa",
+ },
+} satisfies ChartConfig
+```
+
+Build your chart
+
+You can now build your chart using Recharts components.
+
+
+
+**Important:** Remember to set a `min-h-[VALUE]` on the `ChartContainer` component. This is required for the chart to be responsive.
+
+
+
+
+
+### Add a Grid
+
+Let's add a grid to the chart.
+
+
+
+Import the `CartesianGrid` component.
+
+```tsx /CartesianGrid/
+import { Bar, BarChart, CartesianGrid } from "recharts"
+```
+
+Add the `CartesianGrid` component to your chart.
+
+```tsx showLineNumbers {3}
+
+
+
+
+```
+
+
+
+### Add an Axis
+
+To add an x-axis to the chart, we'll use the `XAxis` component.
+
+
+
+Import the `XAxis` component.
+
+```tsx /XAxis/
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+```
+
+Add the `XAxis` component to your chart.
+
+```tsx showLineNumbers {4-10}
+
+
+ value.slice(0, 3)}
+ />
+
+
+```
+
+
+
+### Add Tooltip
+
+So far we've only used components from Recharts. They look great out of the box thanks to some customization in the `chart` component.
+
+To add a tooltip, we'll use the custom `ChartTooltip` and `ChartTooltipContent` components from `chart`.
+
+
+
+Import the `ChartTooltip` and `ChartTooltipContent` components.
+
+```tsx
+import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
+```
+
+Add the components to your chart.
+
+```tsx showLineNumbers {11}
+
+
+ value.slice(0, 3)}
+ />
+
+
+```
+
+
+
+### Add Legend
+
+We'll do the same for the legend. We'll use the `ChartLegend` and `ChartLegendContent` components from `chart`.
+
+
+
+Import the `ChartLegend` and `ChartLegendContent` components.
+
+```tsx
+import { ChartLegend, ChartLegendContent } from "@/components/ui/chart"
+```
+
+Add the components to your chart.
+
+```tsx showLineNumbers {12}
+
+
+ value.slice(0, 3)}
+ />
+
+
+```
+
+
+
+Done. You've built your first chart! What's next?
+
+- [Themes and Colors](/docs/components/chart#theming)
+- [Tooltip](/docs/components/chart#tooltip)
+- [Legend](/docs/components/chart#legend)
+
+## Chart Config
+
+The chart config is where you define the labels, icons and colors for a chart.
+
+It is intentionally decoupled from chart data.
+
+This allows you to share config and color tokens between charts. It can also work independently for cases where your data or color tokens live remotely or in a different format.
+
+```tsx showLineNumbers /ChartConfig/
+import { Monitor } from "lucide-react"
+
+import { type ChartConfig } from "@/components/ui/chart"
+
+const chartConfig = {
+ desktop: {
+ label: "Desktop",
+ icon: Monitor,
+ // A color like 'hsl(220, 98%, 61%)' or 'var(--color-name)'
+ color: "#2563eb",
+ // OR a theme object with 'light' and 'dark' keys
+ theme: {
+ light: "#2563eb",
+ dark: "#dc2626",
+ },
+ },
+} satisfies ChartConfig
+```
+
+## Theming
+
+Charts have built-in support for theming. You can use css variables (recommended) or color values in any color format, such as hex, hsl or oklch.
+
+### CSS Variables
+
+
+
+Define your colors in your css file
+
+```css {6-7,14-15} title="app/globals.css" showLineNumbers
+@layer base {
+ :root {
+ --chart-1: oklch(0.646 0.222 41.116);
+ --chart-2: oklch(0.6 0.118 184.704);
+ }
+
+ .dark: {
+ --chart-1: oklch(0.488 0.243 264.376);
+ --chart-2: oklch(0.696 0.17 162.48);
+ }
+}
+```
+
+Add the color to your `chartConfig`
+
+```tsx {4,8} showLineNumbers
+const chartConfig = {
+ desktop: {
+ label: "Desktop",
+ color: "var(--chart-1)",
+ },
+ mobile: {
+ label: "Mobile",
+ color: "var(--chart-2)",
+ },
+} satisfies ChartConfig
+```
+
+
+
+### hex, hsl or oklch
+
+You can also define your colors directly in the chart config. Use the color format you prefer.
+
+```tsx showLineNumbers
+const chartConfig = {
+ desktop: {
+ label: "Desktop",
+ color: "#2563eb",
+ },
+} satisfies ChartConfig
+```
+
+### Using Colors
+
+To use the theme colors in your chart, reference the colors using the format `var(--color-KEY)`.
+
+#### Components
+
+```tsx
+` and `` components. You can use these two components to add custom tooltips to your chart.
+
+```tsx
+import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
+```
+
+```tsx
+` and `` components to add a legend to your chart.
+
+```tsx
+import { ChartLegend, ChartLegendContent } from "@/components/ui/chart"
+```
+
+```tsx
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add checkbox
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-checkbox
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx
+import { Checkbox } from "@/components/ui/checkbox"
+```
+
+```tsx
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add collapsible
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-collapsible
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import {
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+```
+
+```tsx showLineNumbers
+
+ Can I use this in my project?
+
+ Yes. Free to use for personal and commercial projects. No attribution
+ required.
+
+
+```
diff --git a/apps/v4/content/docs/components/radix/combobox.mdx b/apps/v4/content/docs/components/radix/combobox.mdx
new file mode 100644
index 0000000000..828ad21de2
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/combobox.mdx
@@ -0,0 +1,149 @@
+---
+title: Combobox
+description: Autocomplete input and command palette with a list of suggestions.
+base: radix
+component: true
+---
+
+
+
+```tsx showLineNumbers title="components/example-combobox.tsx"
+"use client"
+
+import * as React from "react"
+import { CheckIcon, ChevronsUpDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+} from "@/components/ui/command"
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover"
+
+const frameworks = [
+ {
+ value: "next.js",
+ label: "Next.js",
+ },
+ {
+ value: "sveltekit",
+ label: "SvelteKit",
+ },
+ {
+ value: "nuxt.js",
+ label: "Nuxt.js",
+ },
+ {
+ value: "remix",
+ label: "Remix",
+ },
+ {
+ value: "astro",
+ label: "Astro",
+ },
+]
+
+export function ExampleCombobox() {
+ const [open, setOpen] = React.useState(false)
+ const [value, setValue] = React.useState("")
+
+ return (
+
+
+
+ {value
+ ? frameworks.find((framework) => framework.value === value)?.label
+ : "Select framework..."}
+
+
+
+
+
+ No framework found.
+
+ {frameworks.map((framework) => (
+ {
+ setValue(currentValue === value ? "" : currentValue)
+ setOpen(false)
+ }}
+ >
+
+ ))}
+
+
+
+
+
+ )
+}
+```
+
+
+
+## Examples
+
+### Combobox
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add command
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install cmdk
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import {
+ Command,
+ CommandDialog,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+ CommandSeparator,
+ CommandShortcut,
+} from "@/components/ui/command"
+```
+
+```tsx showLineNumbers
+
+
+ No results found.
+
+ Calendar
+ Search Emoji
+ Calculator
+
+
+ Profile
+ Billing
+ Settings
+
+
+
+```
+
+## Examples
+
+### Dialog
+
+
+
+ No results found.
+
+ Calendar
+ Search Emoji
+ Calculator
+
+
+
+ )
+}
+```
+
+### Combobox
+
+You can use the `
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add context-menu
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-context-menu
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import {
+ ContextMenu,
+ ContextMenuContent,
+ ContextMenuItem,
+ ContextMenuTrigger,
+} from "@/components/ui/context-menu"
+```
+
+```tsx showLineNumbers
+
+ Right click
+
+ Profile
+ Billing
+ Team
+ Subscription
+
+
+```
diff --git a/apps/v4/content/docs/components/radix/data-table.mdx b/apps/v4/content/docs/components/radix/data-table.mdx
new file mode 100644
index 0000000000..2d5a5698bd
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/data-table.mdx
@@ -0,0 +1,884 @@
+---
+title: Data Table
+description: Powerful table and datagrids built using TanStack Table.
+base: radix
+component: true
+links:
+ doc: https://tanstack.com/table/v8/docs/introduction
+---
+
+
+
+**Tip:** If you find yourself using the same table in multiple places in your app, you can always extract it into a reusable component.
+
+
+
+## Table of Contents
+
+This guide will show you how to use [TanStack Table](https://tanstack.com/table) and the `` component to build your own custom data table. We'll cover the following topics:
+
+- [Basic Table](#basic-table)
+- [Row Actions](#row-actions)
+- [Pagination](#pagination)
+- [Sorting](#sorting)
+- [Filtering](#filtering)
+- [Visibility](#visibility)
+- [Row Selection](#row-selection)
+- [Reusable Components](#reusable-components)
+
+## Installation
+
+1. Add the `` component to your project:
+
+```bash
+npx shadcn@latest add table
+```
+
+2. Add `tanstack/react-table` dependency:
+
+```bash
+npm install @tanstack/react-table
+```
+
+## Prerequisites
+
+We are going to build a table to show recent payments. Here's what our data looks like:
+
+```tsx showLineNumbers
+type Payment = {
+ id: string
+ amount: number
+ status: "pending" | "processing" | "success" | "failed"
+ email: string
+}
+
+export const payments: Payment[] = [
+ {
+ id: "728ed52f",
+ amount: 100,
+ status: "pending",
+ email: "m@example.com",
+ },
+ {
+ id: "489e1d42",
+ amount: 125,
+ status: "processing",
+ email: "example@gmail.com",
+ },
+ // ...
+]
+```
+
+## Project Structure
+
+Start by creating the following file structure:
+
+```txt
+app
+└── payments
+ ├── columns.tsx
+ ├── data-table.tsx
+ └── page.tsx
+```
+
+I'm using a Next.js example here but this works for any other React framework.
+
+- `columns.tsx` (client component) will contain our column definitions.
+- `data-table.tsx` (client component) will contain our `
+
+### Column Definitions
+
+First, we'll define our columns.
+
+```tsx showLineNumbers title="app/payments/columns.tsx" {3,14-27}
+"use client"
+
+import { ColumnDef } from "@tanstack/react-table"
+
+// This type is used to define the shape of our data.
+// You can use a Zod schema here if you want.
+export type Payment = {
+ id: string
+ amount: number
+ status: "pending" | "processing" | "success" | "failed"
+ email: string
+}
+
+export const columns: ColumnDef[] = [
+ {
+ accessorKey: "status",
+ header: "Status",
+ },
+ {
+ accessorKey: "email",
+ header: "Email",
+ },
+ {
+ accessorKey: "amount",
+ header: "Amount",
+ },
+]
+```
+
+
+
+**Note:** Columns are where you define the core of what your table
+will look like. They define the data that will be displayed, how it will be
+formatted, sorted and filtered.
+
+
+
+### ` {
+ columns: ColumnDef[]
+ data: TData[]
+}
+
+export function DataTable({
+ columns,
+ data,
+}: DataTableProps) {
+ const table = useReactTable({
+ data,
+ columns,
+ getCoreRowModel: getCoreRowModel(),
+ })
+
+ return (
+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+ {headerGroup.headers.map((header) => {
+ return (
+
+ {header.isPlaceholder
+ ? null
+ : flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+
+ )
+ })}
+
+ ))}
+
+
+ {table.getRowModel().rows?.length ? (
+ table.getRowModel().rows.map((row) => (
+
+ {row.getVisibleCells().map((cell) => (
+
+ {flexRender(cell.column.columnDef.cell, cell.getContext())}
+
+ ))}
+
+ ))
+ ) : (
+
+
+ No results.
+
+
+ )}
+
+
+
+
+**Tip**: If you find yourself using `
+
+### Render the table
+
+Finally, we'll render our table in our page component.
+
+```tsx showLineNumbers title="app/payments/page.tsx" {22}
+import { columns, Payment } from "./columns"
+import { DataTable } from "./data-table"
+
+async function getData(): Promise {
+ // Fetch data from your API here.
+ return [
+ {
+ id: "728ed52f",
+ amount: 100,
+ status: "pending",
+ email: "m@example.com",
+ },
+ // ...
+ ]
+}
+
+export default async function DemoPage() {
+ const data = await getData()
+
+ return (
+
+
+ )
+}
+```
+
+
+
+## Cell Formatting
+
+Let's format the amount cell to display the dollar amount. We'll also align the cell to the right.
+
+
+
+### Update columns definition
+
+Update the `header` and `cell` definitions for amount as follows:
+
+```tsx showLineNumbers title="app/payments/columns.tsx" {4-15}
+export const columns: ColumnDef[] = [
+ {
+ accessorKey: "amount",
+ header: () => Amount
,
+ cell: ({ row }) => {
+ const amount = parseFloat(row.getValue("amount"))
+ const formatted = new Intl.NumberFormat("en-US", {
+ style: "currency",
+ currency: "USD",
+ }).format(amount)
+
+ return {formatted}
+ },
+ },
+]
+```
+
+You can use the same approach to format other cells and headers.
+
+
+
+## Row Actions
+
+Let's add row actions to our table. We'll use a `
+
+### Update columns definition
+
+Update our columns definition to add a new `actions` column. The `actions` cell returns a `[] = [
+ // ...
+ {
+ id: "actions",
+ cell: ({ row }) => {
+ const payment = row.original
+
+ return (
+
+
+
+ Open menu
+
+
+
+ Actions
+ navigator.clipboard.writeText(payment.id)}
+ >
+ Copy payment ID
+
+ View customer
+ View payment details
+
+
+ )
+ },
+ },
+ // ...
+]
+```
+
+You can access the row data using `row.original` in the `cell` function. Use this to handle actions for your row eg. use the `id` to make a DELETE call to your API.
+
+
+
+## Pagination
+
+Next, we'll add pagination to our table.
+
+
+
+### Update ``
+
+```tsx showLineNumbers title="app/payments/data-table.tsx" {5,17}
+import {
+ ColumnDef,
+ flexRender,
+ getCoreRowModel,
+ getPaginationRowModel,
+ useReactTable,
+} from "@tanstack/react-table"
+
+export function DataTable({
+ columns,
+ data,
+}: DataTableProps) {
+ const table = useReactTable({
+ data,
+ columns,
+ getCoreRowModel: getCoreRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+ })
+
+ // ...
+}
+```
+
+This will automatically paginate your rows into pages of 10. See the [pagination docs](https://tanstack.com/table/v8/docs/api/features/pagination) for more information on customizing page size and implementing manual pagination.
+
+### Add pagination controls
+
+We can add pagination controls to our table using the `({
+ columns,
+ data,
+}: DataTableProps) {
+ const table = useReactTable({
+ data,
+ columns,
+ getCoreRowModel: getCoreRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+ })
+
+ return (
+
+
+
+ table.previousPage()}
+ disabled={!table.getCanPreviousPage()}
+ >
+ Previous
+
+ table.nextPage()}
+ disabled={!table.getCanNextPage()}
+ >
+ Next
+
+
+
+
+## Sorting
+
+Let's make the email column sortable.
+
+
+
+### Update ``
+
+```tsx showLineNumbers title="app/payments/data-table.tsx" showLineNumbers {3,6,10,18,25-28}
+"use client"
+
+import * as React from "react"
+import {
+ ColumnDef,
+ SortingState,
+ flexRender,
+ getCoreRowModel,
+ getPaginationRowModel,
+ getSortedRowModel,
+ useReactTable,
+} from "@tanstack/react-table"
+
+export function DataTable({
+ columns,
+ data,
+}: DataTableProps) {
+ const [sorting, setSorting] = React.useState([])
+
+ const table = useReactTable({
+ data,
+ columns,
+ getCoreRowModel: getCoreRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+ onSortingChange: setSorting,
+ getSortedRowModel: getSortedRowModel(),
+ state: {
+ sorting,
+ },
+ })
+
+ return (
+
+ )
+}
+```
+
+### Make header cell sortable
+
+We can now update the `email` header cell to add sorting controls.
+
+```tsx showLineNumbers title="app/payments/columns.tsx" {4,9-19}
+"use client"
+
+import { ColumnDef } from "@tanstack/react-table"
+import { ArrowUpDown } from "lucide-react"
+
+export const columns: ColumnDef[] = [
+ {
+ accessorKey: "email",
+ header: ({ column }) => {
+ return (
+ column.toggleSorting(column.getIsSorted() === "asc")}
+ >
+ Email
+
+ )
+ },
+ },
+]
+```
+
+This will automatically sort the table (asc and desc) when the user toggles on the header cell.
+
+
+
+## Filtering
+
+Let's add a search input to filter emails in our table.
+
+
+
+### Update ``
+
+```tsx showLineNumbers title="app/payments/data-table.tsx" {6,10,17,24-26,35-36,39,45-54}
+"use client"
+
+import * as React from "react"
+import {
+ ColumnDef,
+ ColumnFiltersState,
+ SortingState,
+ flexRender,
+ getCoreRowModel,
+ getFilteredRowModel,
+ getPaginationRowModel,
+ getSortedRowModel,
+ useReactTable,
+} from "@tanstack/react-table"
+
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+
+export function DataTable({
+ columns,
+ data,
+}: DataTableProps) {
+ const [sorting, setSorting] = React.useState([])
+ const [columnFilters, setColumnFilters] = React.useState(
+ []
+ )
+
+ const table = useReactTable({
+ data,
+ columns,
+ onSortingChange: setSorting,
+ getCoreRowModel: getCoreRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+ getSortedRowModel: getSortedRowModel(),
+ onColumnFiltersChange: setColumnFilters,
+ getFilteredRowModel: getFilteredRowModel(),
+ state: {
+ sorting,
+ columnFilters,
+ },
+ })
+
+ return (
+
+
+
+
+
+
+## Visibility
+
+Adding column visibility is fairly simple using `@tanstack/react-table` visibility API.
+
+
+
+### Update ``
+
+```tsx showLineNumbers title="app/payments/data-table.tsx" {8,18-23,33-34,45,49,64-91}
+"use client"
+
+import * as React from "react"
+import {
+ ColumnDef,
+ ColumnFiltersState,
+ SortingState,
+ VisibilityState,
+ flexRender,
+ getCoreRowModel,
+ getFilteredRowModel,
+ getPaginationRowModel,
+ getSortedRowModel,
+ useReactTable,
+} from "@tanstack/react-table"
+
+import { Button } from "@/components/ui/button"
+import {
+ DropdownMenu,
+ DropdownMenuCheckboxItem,
+ DropdownMenuContent,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function DataTable({
+ columns,
+ data,
+}: DataTableProps) {
+ const [sorting, setSorting] = React.useState([])
+ const [columnFilters, setColumnFilters] = React.useState(
+ []
+ )
+ const [columnVisibility, setColumnVisibility] =
+ React.useState({})
+
+ const table = useReactTable({
+ data,
+ columns,
+ onSortingChange: setSorting,
+ onColumnFiltersChange: setColumnFilters,
+ getCoreRowModel: getCoreRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+ getSortedRowModel: getSortedRowModel(),
+ getFilteredRowModel: getFilteredRowModel(),
+ onColumnVisibilityChange: setColumnVisibility,
+ state: {
+ sorting,
+ columnFilters,
+ columnVisibility,
+ },
+ })
+
+ return (
+
+
+
+
+
+ Columns
+
+
+
+ {table
+ .getAllColumns()
+ .filter(
+ (column) => column.getCanHide()
+ )
+ .map((column) => {
+ return (
+
+ column.toggleVisibility(!!value)
+ }
+ >
+ {column.id}
+
+ )
+ })}
+
+
+
+
+
+
+## Row Selection
+
+Next, we're going to add row selection to our table.
+
+
+
+### Update column definitions
+
+```tsx showLineNumbers title="app/payments/columns.tsx" {6,9-27}
+"use client"
+
+import { ColumnDef } from "@tanstack/react-table"
+
+import { Badge } from "@/components/ui/badge"
+import { Checkbox } from "@/components/ui/checkbox"
+
+export const columns: ColumnDef[] = [
+ {
+ id: "select",
+ header: ({ table }) => (
+ table.toggleAllPageRowsSelected(!!value)}
+ aria-label="Select all"
+ />
+ ),
+ cell: ({ row }) => (
+ row.toggleSelected(!!value)}
+ aria-label="Select row"
+ />
+ ),
+ enableSorting: false,
+ enableHiding: false,
+ },
+]
+```
+
+### Update ``
+
+```tsx showLineNumbers title="app/payments/data-table.tsx" {11,23,28}
+export function DataTable({
+ columns,
+ data,
+}: DataTableProps) {
+ const [sorting, setSorting] = React.useState([])
+ const [columnFilters, setColumnFilters] = React.useState(
+ []
+ )
+ const [columnVisibility, setColumnVisibility] =
+ React.useState({})
+ const [rowSelection, setRowSelection] = React.useState({})
+
+ const table = useReactTable({
+ data,
+ columns,
+ onSortingChange: setSorting,
+ onColumnFiltersChange: setColumnFilters,
+ getCoreRowModel: getCoreRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+ getSortedRowModel: getSortedRowModel(),
+ getFilteredRowModel: getFilteredRowModel(),
+ onColumnVisibilityChange: setColumnVisibility,
+ onRowSelectionChange: setRowSelection,
+ state: {
+ sorting,
+ columnFilters,
+ columnVisibility,
+ rowSelection,
+ },
+ })
+
+ return (
+
+ )
+}
+```
+
+This adds a checkbox to each row and a checkbox in the header to select all rows.
+
+### Show selected rows
+
+You can show the number of selected rows using the `table.getFilteredSelectedRowModel()` API.
+
+```tsx
+
+ {table.getFilteredSelectedRowModel().rows.length} of{" "}
+ {table.getFilteredRowModel().rows.length} row(s) selected.
+
+```
+
+
+
+## Reusable Components
+
+Here are some components you can use to build your data tables. This is from the [Tasks](/examples/tasks) demo.
+
+### Column header
+
+Make any column header sortable and hideable.
+
+()
+
+ return (
+
+
+
+ Pick a date }
+
+
+
+
+
+ )
+}
+```
+
+See the [React DayPicker](https://react-day-picker.js.org) documentation for more information.
+
+## Examples
+
+### Date of Birth Picker
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add dialog
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-dialog
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+ DialogTrigger,
+} from "@/components/ui/dialog"
+```
+
+```tsx showLineNumbers
+
+ Open
+
+
+ Are you absolutely sure?
+
+ This action cannot be undone. This will permanently delete your account
+ and remove your data from our servers.
+
+
+
+
+```
+
+## Examples
+
+### Custom close button
+
+
+
+ Right click
+
+ Open
+ Download
+
+
+ Delete
+
+
+
+
+
+
+ Are you absolutely sure?
+
+ This action cannot be undone. Are you sure you want to permanently
+ delete this file from our servers?
+
+
+
+ Confirm
+
+
+
+```
diff --git a/apps/v4/content/docs/components/radix/drawer.mdx b/apps/v4/content/docs/components/radix/drawer.mdx
new file mode 100644
index 0000000000..72f61872d3
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/drawer.mdx
@@ -0,0 +1,101 @@
+---
+title: Drawer
+description: A drawer component for React.
+base: radix
+component: true
+links:
+ doc: https://vaul.emilkowal.ski/getting-started
+---
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add drawer
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install vaul
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import {
+ Drawer,
+ DrawerClose,
+ DrawerContent,
+ DrawerDescription,
+ DrawerFooter,
+ DrawerHeader,
+ DrawerTitle,
+ DrawerTrigger,
+} from "@/components/ui/drawer"
+```
+
+```tsx showLineNumbers
+
+ Open
+
+
+ Are you absolutely sure?
+ This action cannot be undone.
+
+
+ Submit
+
+ Cancel
+
+
+
+
+```
+
+## Examples
+
+### Responsive Dialog
+
+You can combine the `Dialog` and `Drawer` components to create a responsive dialog. This renders a `Dialog` component on desktop and a `Drawer` on mobile.
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add dropdown-menu
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-dropdown-menu
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+```
+
+```tsx showLineNumbers
+
+ Open
+
+ My Account
+ Profile
+ Billing
+ Team
+ Subscription
+
+
+```
+
+## Examples
+
+### Checkboxes
+
+
+
+ Actions
+
+
+```
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add empty
+```
+
+
+
+
+
+
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx
+import {
+ Empty,
+ EmptyContent,
+ EmptyDescription,
+ EmptyHeader,
+ EmptyMedia,
+ EmptyTitle,
+} from "@/components/ui/empty"
+```
+
+```tsx
+
+
+
+
+ No data
+ No data found
+
+
+ Add data
+
+
+```
+
+## Examples
+
+### Outline
+
+Use the `border` utility class to create an outline empty state.
+
+
+
+```
+
+### EmptyHeader
+
+The `EmptyHeader` component wraps the empty media, title, and description.
+
+| Prop | Type | Default |
+| ----------- | -------- | ------- |
+| `className` | `string` | |
+
+```tsx
+
+
+```
+
+### EmptyMedia
+
+Use the `EmptyMedia` component to display the media of the empty state such as an icon or an image. You can also use it to display other components such as an avatar.
+
+| Prop | Type | Default |
+| ----------- | --------------------- | --------- |
+| `variant` | `"default" \| "icon"` | `default` |
+| `className` | `string` | |
+
+```tsx
+
+
+```
+
+```tsx
+
+
+ CN
+
+
+```
+
+### EmptyTitle
+
+Use the `EmptyTitle` component to display the title of the empty state.
+
+| Prop | Type | Default |
+| ----------- | -------- | ------- |
+| `className` | `string` | |
+
+```tsx
+No data
+```
+
+### EmptyDescription
+
+Use the `EmptyDescription` component to display the description of the empty state.
+
+| Prop | Type | Default |
+| ----------- | -------- | ------- |
+| `className` | `string` | |
+
+```tsx
+You do not have any notifications.
+```
+
+### EmptyContent
+
+Use the `EmptyContent` component to display the content of the empty state such as a button, input or a link.
+
+| Prop | Type | Default |
+| ----------- | -------- | ------- |
+| `className` | `string` | |
+
+```tsx
+
+ Add Project
+
+```
diff --git a/apps/v4/content/docs/components/radix/field.mdx b/apps/v4/content/docs/components/radix/field.mdx
new file mode 100644
index 0000000000..d3de9f2a88
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/field.mdx
@@ -0,0 +1,378 @@
+---
+title: Field
+description: Combine labels, controls, and help text to compose accessible form fields and grouped inputs.
+base: radix
+component: true
+---
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add field
+```
+
+
+
+
+
+
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import {
+ Field,
+ FieldContent,
+ FieldDescription,
+ FieldError,
+ FieldGroup,
+ FieldLabel,
+ FieldLegend,
+ FieldSeparator,
+ FieldSet,
+ FieldTitle,
+} from "@/components/ui/field"
+```
+
+```tsx showLineNumbers
+
+ Profile
+ This appears on invoices and emails.
+
+
+ Full name
+ This appears on invoices and emails.
+
+
+ Username
+ Choose another username.
+
+
+ Subscribe to the newsletter
+
+
+
+```
+
+## Anatomy
+
+The `Field` family is designed for composing accessible forms. A typical field is structured as follows:
+
+```tsx showLineNumbers
+
+ Label
+ {/* Input, Select, Switch, etc. */}
+ Optional helper text.
+ Validation message.
+
+```
+
+- `Field` is the core wrapper for a single field.
+- `FieldContent` is a flex column that groups label and description. Not required if you have no description.
+- Wrap related fields with `FieldGroup`, and use `FieldSet` with `FieldLegend` for semantic grouping.
+
+## Form
+
+See the [Form](/docs/forms) documentation for building forms with the `Field` component and [React Hook Form](/docs/forms/react-hook-form) or [Tanstack Form](/docs/forms/tanstack-form).
+
+## Examples
+
+### Input
+
+
+ Email
+ Enter a valid email address.
+
+```
+
+## Accessibility
+
+- `FieldSet` and `FieldLegend` keep related controls grouped for keyboard and assistive tech users.
+- `Field` outputs `role="group"` so nested controls inherit labeling from `FieldLabel` and `FieldLegend` when combined.
+- Apply `FieldSeparator` sparingly to ensure screen readers encounter clear section boundaries.
+
+## API Reference
+
+### FieldSet
+
+Container that renders a semantic `fieldset` with spacing presets.
+
+| Prop | Type | Default |
+| ----------- | -------- | ------- |
+| `className` | `string` | |
+
+```tsx
+
+ Delivery
+ {/* Fields */}
+
+```
+
+### FieldLegend
+
+Legend element for a `FieldSet`. Switch to the `label` variant to align with label sizing.
+
+| Prop | Type | Default |
+| ----------- | --------------------- | ---------- |
+| `variant` | `"legend" \| "label"` | `"legend"` |
+| `className` | `string` | |
+
+```tsx
+Notification Preferences
+```
+
+The `FieldLegend` has two variants: `legend` and `label`. The `label` variant applies label sizing and alignment. Handy if you have nested `FieldSet`.
+
+### FieldGroup
+
+Layout wrapper that stacks `Field` components and enables container queries for responsive orientations.
+
+| Prop | Type | Default |
+| ----------- | -------- | ------- |
+| `className` | `string` | |
+
+```tsx
+
+ {/* ... */}
+ {/* ... */}
+
+```
+
+### Field
+
+The core wrapper for a single field. Provides orientation control, invalid state styling, and spacing.
+
+| Prop | Type | Default |
+| -------------- | -------------------------------------------- | ------------ |
+| `orientation` | `"vertical" \| "horizontal" \| "responsive"` | `"vertical"` |
+| `className` | `string` | |
+| `data-invalid` | `boolean` | |
+
+```tsx
+
+ Remember me
+
+```
+
+### FieldContent
+
+Flex column that groups control and descriptions when the label sits beside the control. Not required if you have no description.
+
+| Prop | Type | Default |
+| ----------- | -------- | ------- |
+| `className` | `string` | |
+
+```tsx
+
+
+ Notifications
+ Email, SMS, and push options.
+
+
+```
+
+### FieldLabel
+
+Label styled for both direct inputs and nested `Field` children.
+
+| Prop | Type | Default |
+| ----------- | --------- | ------- |
+| `className` | `string` | |
+| `asChild` | `boolean` | `false` |
+
+```tsx
+Email
+```
+
+### FieldTitle
+
+Renders a title with label styling inside `FieldContent`.
+
+| Prop | Type | Default |
+| ----------- | -------- | ------- |
+| `className` | `string` | |
+
+```tsx
+
+ Enable Touch ID
+ Unlock your device faster.
+
+```
+
+### FieldDescription
+
+Helper text slot that automatically balances long lines in horizontal layouts.
+
+| Prop | Type | Default |
+| ----------- | -------- | ------- |
+| `className` | `string` | |
+
+```tsx
+We never share your email with anyone.
+```
+
+### FieldSeparator
+
+Visual divider to separate sections inside a `FieldGroup`. Accepts optional inline content.
+
+| Prop | Type | Default |
+| ----------- | -------- | ------- |
+| `className` | `string` | |
+
+```tsx
+Or continue with
+```
+
+### FieldError
+
+Accessible error container that accepts children or an `errors` array (e.g., from `react-hook-form`).
+
+| Prop | Type | Default |
+| ----------- | ------------------------------------------ | ------- |
+| `errors` | `Array<{ message?: string } \| undefined>` | |
+| `className` | `string` | |
+
+```tsx
+` component to compose accessible forms using Radix UI components.
+
+## Features
+
+The `` component is a wrapper around the `react-hook-form` library. It provides a few things:
+
+- Composable components for building forms.
+- A ` (
+
+ Username
+
+
+ This is your public display name.
+
+ )}
+/>
+```
+
+## Installation
+
+
+
+
+ CLI
+ Manual
+
+
+
+
+
+### Command
+
+```bash
+npx shadcn@latest add form
+```
+
+
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-label @radix-ui/react-slot react-hook-form @hookform/resolvers zod
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+### Create a form schema
+
+Define the shape of your form using a Zod schema. You can read more about using Zod in the [Zod documentation](https://zod.dev).
+
+```tsx showLineNumbers title="components/example-form.tsx" {3,5-7}
+"use client"
+
+import { z } from "zod"
+
+const formSchema = z.object({
+ username: z.string().min(2).max(50),
+})
+```
+
+### Define a form
+
+Use the `useForm` hook from `react-hook-form` to create a form.
+
+```tsx showLineNumbers title="components/example-form.tsx" {3-4,14-20,22-27}
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+const formSchema = z.object({
+ username: z.string().min(2, {
+ message: "Username must be at least 2 characters.",
+ }),
+})
+
+export function ProfileForm() {
+ // 1. Define your form.
+ const form = useForm>({
+ resolver: zodResolver(formSchema),
+ defaultValues: {
+ username: "",
+ },
+ })
+
+ // 2. Define a submit handler.
+ function onSubmit(values: z.infer) {
+ // Do something with the form values.
+ // ✅ This will be type-safe and validated.
+ console.log(values)
+ }
+}
+```
+
+Since `FormField` is using a controlled component, you need to provide a default value for the field. See the [React Hook Form docs](https://react-hook-form.com/docs/usecontroller) to learn more about controlled components.
+
+### Build your form
+
+We can now use the `` components to build our form.
+
+```tsx showLineNumbers title="components/example-form.tsx" {7-17,28-50}
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+
+import { Button } from "@/components/ui/button"
+import {
+ Form,
+ FormControl,
+ FormDescription,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+
+const formSchema = z.object({
+ username: z.string().min(2, {
+ message: "Username must be at least 2 characters.",
+ }),
+})
+
+export function ProfileForm() {
+ // ...
+
+ return (
+
+
+ )
+}
+```
+
+### Done
+
+That's it. You now have a fully accessible form that is type-safe with client-side validation.
diff --git a/apps/v4/content/docs/components/radix/hover-card.mdx b/apps/v4/content/docs/components/radix/hover-card.mdx
new file mode 100644
index 0000000000..fb49de8e53
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/hover-card.mdx
@@ -0,0 +1,76 @@
+---
+title: Hover Card
+description: For sighted users to preview content available behind a link.
+base: radix
+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
+---
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add hover-card
+```
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-hover-card
+```
+
+
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import {
+ HoverCard,
+ HoverCardContent,
+ HoverCardTrigger,
+} from "@/components/ui/hover-card"
+```
+
+```tsx showLineNumbers
+
+ Hover
+
+ The React Framework – created and maintained by @vercel.
+
+
+```
diff --git a/apps/v4/content/docs/components/radix/input-group.mdx b/apps/v4/content/docs/components/radix/input-group.mdx
new file mode 100644
index 0000000000..91329d8df3
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/input-group.mdx
@@ -0,0 +1,304 @@
+---
+title: Input Group
+description: Display additional information or actions to an input or textarea.
+base: radix
+component: true
+---
+
+import { IconInfoCircle } from "@tabler/icons-react"
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add input-group
+```
+
+
+
+
+
+
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import {
+ InputGroup,
+ InputGroupAddon,
+ InputGroupButton,
+ InputGroupInput,
+ InputGroupText,
+ InputGroupTextarea,
+} from "@/components/ui/input-group"
+```
+
+```tsx showLineNumbers
+
+
+
+
+ Search
+
+
+```
+
+## Examples
+
+### Icon
+
+
+ how
+
+ )
+}
+```
+
+## API Reference
+
+### InputGroup
+
+The main component that wraps inputs and addons.
+
+| Prop | Type | Default |
+| ----------- | -------- | ------- |
+| `className` | `string` | |
+
+```tsx
+
+
+```
+
+### InputGroupAddon
+
+Displays icons, text, buttons, or other content alongside inputs.
+
+
+
+```
+
+**For `
+ Button
+ Button
+
+```
+
+### InputGroupButton
+
+Displays buttons within input groups.
+
+| Prop | Type | Default |
+| ----------- | ----------------------------------------------------------------------------- | --------- |
+| `size` | `"xs" \| "icon-xs" \| "sm" \| "icon-sm"` | `"xs"` |
+| `variant` | `"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"` | `"ghost"` |
+| `className` | `string` | |
+
+```tsx
+Button
+
+
+```
+
+### InputGroupInput
+
+Replacement for `
+
+
+
+```
+
+### InputGroupTextarea
+
+Replacement for `` when building input groups. This component has the textarea group styles pre-applied and uses the unified `data-slot="input-group-control"` for focus state handling.
+
+| Prop | Type | Default |
+| ----------- | -------- | ------- |
+| `className` | `string` | |
+
+All other props are passed through to the underlying `` component.
+
+```tsx
+
+
+ Send
+
+
+```
+
+## Changelog
+
+### 2025-10-06 `InputGroup`
+
+Add the `min-w-0` class to the `InputGroup` component. See [diff](https://github.com/shadcn-ui/ui/pull/8341/files#diff-0e2ee95d0050ca4c5d82339df86c54e14a6739dc4638fdda0eec8f73aebc2da9).
diff --git a/apps/v4/content/docs/components/radix/input-otp.mdx b/apps/v4/content/docs/components/radix/input-otp.mdx
new file mode 100644
index 0000000000..7b7fe9b299
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/input-otp.mdx
@@ -0,0 +1,241 @@
+---
+title: Input OTP
+description: Accessible one-time password component with copy paste functionality.
+base: radix
+component: true
+links:
+ doc: https://input-otp.rodz.dev
+---
+
+
+
+
+ CLI
+ Manual
+
+
+
+
+
+Run the following command:
+
+```bash
+npx shadcn@latest add input-otp
+```
+
+
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install input-otp
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import {
+ InputOTP,
+ InputOTPGroup,
+ InputOTPSeparator,
+ InputOTPSlot,
+} from "@/components/ui/input-otp"
+```
+
+```tsx showLineNumbers
+
+
+
+
+
+
+```
+
+## Examples
+
+### Pattern
+
+Use the `pattern` prop to define a custom pattern for the OTP input.
+
+
+
+
+
+```
+
+### Separator
+
+You can use the `
+
+
+
+
+
+```
+
+### Controlled
+
+You can use the `value` and `onChange` props to control the input value.
+
+
+ **Note:** You are not required to update your code if you are using the
+ `render` prop. It is still supported.
+
+
+
+
+Update to the latest version of `input-otp`.
+
+```bash
+npm install input-otp@latest
+```
+
+Update `input-otp.tsx`
+
+```diff showLineNumbers title="input-otp.tsx" {2,8-11}
+- import { OTPInput, SlotProps } from "input-otp"
++ import { OTPInput, OTPInputContext } from "input-otp"
+
+ const InputOTPSlot = React.forwardRef<
+ React.ElementRef<"div">,
+- SlotProps & React.ComponentPropsWithoutRef<"div">
+- >(({ char, hasFakeCaret, isActive, className, ...props }, ref) => {
++ React.ComponentPropsWithoutRef<"div"> & { index: number }
++ >(({ index, className, ...props }, ref) => {
++ const inputOTPContext = React.useContext(OTPInputContext)
++ const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+```
+
+Then replace the `render` prop in your code.
+
+```diff showLineNumbers {2-12}
+
+
+
+
+
+
+```
+
+
+
+### 2024-03-19 Disabled
+
+To add a disabled state to the input, update `,
+ React.ComponentPropsWithoutRef
+>(({ className, containerClassName, ...props }, ref) => (
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add input
+```
+
+
+
+
+
+
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx
+import { Input } from "@/components/ui/input"
+```
+
+```tsx
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add item
+```
+
+
+
+
+
+
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import {
+ Item,
+ ItemActions,
+ ItemContent,
+ ItemDescription,
+ ItemFooter,
+ ItemHeader,
+ ItemMedia,
+ ItemTitle,
+} from "@/components/ui/item"
+```
+
+```tsx showLineNumbers
+-
+
Item Header
+
+ Item
+ Item
+
+ Item Footer
+
+```
+
+## Item vs Field
+
+Use `Field` if you need to display a form input such as a checkbox, input, radio, or select.
+
+If you only need to display content such as a title, description, and actions, use `Item`.
+
+## Examples
+
+### Variants
+
+-
+
+
+ Dashboard
+ Overview of your account and activity.
+
+
+
+```
+
+### Dropdown
+
+-
+
+ Item
+ Item
+
+
+```
+
+You can use the `asChild` prop to render a custom component as the item, for example a link. The hover and focus states will be applied to the custom component.
+
+```tsx showLineNumbers
+import {
+ Item,
+ ItemContent,
+ ItemDescription,
+ ItemMedia,
+ ItemTitle,
+} from "@/components/ui/item"
+
+export function ItemLink() {
+ return (
+ -
+
+
+
+
+ Dashboard
+
+ Overview of your account and activity.
+
+
+
+
+ )
+}
+```
+
+### ItemGroup
+
+The `ItemGroup` component is a container that groups related items together with consistent styling.
+
+| Prop | Type | Default |
+| ----------- | -------- | ------- |
+| `className` | `string` | |
+
+```tsx
+
+
+```
+
+### ItemSeparator
+
+The `ItemSeparator` component is a separator that separates items in the item group.
+
+| Prop | Type | Default |
+| ----------- | -------- | ------- |
+| `className` | `string` | |
+
+```tsx
+
+
+```
+
+### ItemMedia
+
+Use the `ItemMedia` component to display media content such as icons, images, or avatars.
+
+| Prop | Type | Default |
+| ----------- | -------------------------------- | ----------- |
+| `variant` | `"default" \| "icon" \| "image"` | `"default"` |
+| `className` | `string` | |
+
+```tsx
+
+
+```
+
+```tsx
+
+
+```
+
+### ItemContent
+
+The `ItemContent` component wraps the title and description of the item.
+
+You can skip `ItemContent` if you only need a title.
+
+| Prop | Type | Default |
+| ----------- | -------- | ------- |
+| `className` | `string` | |
+
+```tsx
+
+ Item
+ Item
+
+```
+
+### ItemTitle
+
+Use the `ItemTitle` component to display the title of the item.
+
+| Prop | Type | Default |
+| ----------- | -------- | ------- |
+| `className` | `string` | |
+
+```tsx
+Item Title
+```
+
+### ItemDescription
+
+Use the `ItemDescription` component to display the description of the item.
+
+| Prop | Type | Default |
+| ----------- | -------- | ------- |
+| `className` | `string` | |
+
+```tsx
+Item description
+```
+
+### ItemActions
+
+Use the `ItemActions` component to display action buttons or other interactive elements.
+
+| Prop | Type | Default |
+| ----------- | -------- | ------- |
+| `className` | `string` | |
+
+```tsx
+
+ Action
+ Action
+
+```
+
+### ItemHeader
+
+Use the `ItemHeader` component to display a header in the item.
+
+| Prop | Type | Default |
+| ----------- | -------- | ------- |
+| `className` | `string` | |
+
+```tsx
+Item Header
+```
+
+### ItemFooter
+
+Use the `ItemFooter` component to display a footer in the item.
+
+| Prop | Type | Default |
+| ----------- | -------- | ------- |
+| `className` | `string` | |
+
+```tsx
+Item Footer
+```
diff --git a/apps/v4/content/docs/components/radix/kbd.mdx b/apps/v4/content/docs/components/radix/kbd.mdx
new file mode 100644
index 0000000000..f5e5476864
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/kbd.mdx
@@ -0,0 +1,109 @@
+---
+title: Kbd
+description: Used to display textual user input from keyboard.
+base: radix
+component: true
+---
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add kbd
+```
+
+
+
+
+
+
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx
+import { Kbd } from "@/components/ui/kbd"
+```
+
+```tsx
+Ctrl
+```
+
+## Examples
+
+### Group
+
+Use the `KbdGroup` component to group keyboard keys together.
+
+Ctrl
+```
+
+### KbdGroup
+
+Use the `KbdGroup` component to group `Kbd` components together.
+
+| Prop | Type | Default |
+| ----------- | -------- | ------- |
+| `className` | `string` | `` |
+
+```tsx
+
+ Ctrl
+ B
+
+```
diff --git a/apps/v4/content/docs/components/radix/label.mdx b/apps/v4/content/docs/components/radix/label.mdx
new file mode 100644
index 0000000000..e57e21a6ed
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/label.mdx
@@ -0,0 +1,67 @@
+---
+title: Label
+description: Renders an accessible label associated with controls.
+base: radix
+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
+---
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add label
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-label
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx
+import { Label } from "@/components/ui/label"
+```
+
+```tsx
+Your email address
+```
diff --git a/apps/v4/content/docs/components/radix/menubar.mdx b/apps/v4/content/docs/components/radix/menubar.mdx
new file mode 100644
index 0000000000..6ac6d15f57
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/menubar.mdx
@@ -0,0 +1,89 @@
+---
+title: Menubar
+description: A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
+base: radix
+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
+---
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add menubar
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-menubar
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import {
+ Menubar,
+ MenubarContent,
+ MenubarItem,
+ MenubarMenu,
+ MenubarSeparator,
+ MenubarShortcut,
+ MenubarTrigger,
+} from "@/components/ui/menubar"
+```
+
+```tsx showLineNumbers
+
+
+ File
+
+
+ New Tab ⌘T
+
+ New Window
+ Share
+ Print
+
+
+
+```
diff --git a/apps/v4/content/docs/components/radix/meta.json b/apps/v4/content/docs/components/radix/meta.json
new file mode 100644
index 0000000000..1e71ba5d95
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/meta.json
@@ -0,0 +1,64 @@
+{
+ "title": "Radix UI",
+ "pages": [
+ "accordion",
+ "alert",
+ "alert-dialog",
+ "aspect-ratio",
+ "avatar",
+ "badge",
+ "breadcrumb",
+ "button",
+ "button-group",
+ "calendar",
+ "card",
+ "carousel",
+ "chart",
+ "checkbox",
+ "collapsible",
+ "combobox",
+ "command",
+ "context-menu",
+ "data-table",
+ "date-picker",
+ "dialog",
+ "drawer",
+ "dropdown-menu",
+ "empty",
+ "field",
+ "form",
+ "hover-card",
+ "input",
+ "input-group",
+ "input-otp",
+ "item",
+ "kbd",
+ "label",
+ "menubar",
+ "native-select",
+ "navigation-menu",
+ "pagination",
+ "popover",
+ "progress",
+ "radio-group",
+ "resizable",
+ "scroll-area",
+ "select",
+ "separator",
+ "sheet",
+ "sidebar",
+ "skeleton",
+ "slider",
+ "sonner",
+ "spinner",
+ "switch",
+ "table",
+ "tabs",
+ "textarea",
+ "toast",
+ "toggle",
+ "toggle-group",
+ "tooltip",
+ "typography"
+ ]
+}
diff --git a/apps/v4/content/docs/components/radix/native-select.mdx b/apps/v4/content/docs/components/radix/native-select.mdx
new file mode 100644
index 0000000000..4bf8ebfe91
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/native-select.mdx
@@ -0,0 +1,210 @@
+---
+title: Native Select
+description: A styled native HTML select element with consistent design system integration.
+base: radix
+component: true
+---
+
+import { InfoIcon } from "lucide-react"
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add native-select
+```
+
+
+
+
+
+
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import {
+ NativeSelect,
+ NativeSelectOptGroup,
+ NativeSelectOption,
+} from "@/components/ui/native-select"
+```
+
+```tsx showLineNumbers
+
+ Select a fruit
+ Apple
+ Banana
+ Blueberry
+
+ Grapes
+
+ Pineapple
+
+```
+
+## Examples
+
+### With Groups
+
+Organize options using `NativeSelectOptGroup` for better categorization.
+
+
+ Select a food
+
+ Apple
+ Banana
+ Blueberry
+
+
+ Carrot
+ Broccoli
+ Spinach
+
+
+```
+
+### Disabled State
+
+Disable individual options or the entire select component.
+
+
+ Select a country
+ United States
+ United Kingdom
+ Canada
+
+```
+
+### Form Integration
+
+Use with form libraries like React Hook Form for controlled components.
+
+
+ English
+ Spanish
+ French
+
+```
+
+## API Reference
+
+### NativeSelect
+
+The main select component that wraps the native HTML select element.
+
+| Prop | Type | Default |
+| ----------- | -------- | ------- |
+| `className` | `string` | |
+
+All other props are passed through to the underlying `` element.
+
+```tsx
+
+ Option 1
+ Option 2
+
+```
+
+### NativeSelectOption
+
+Represents an individual option within the select.
+
+| Prop | Type | Default |
+| ----------- | --------- | ------- |
+| `value` | `string` | |
+| `disabled` | `boolean` | `false` |
+| `className` | `string` | |
+
+All other props are passed through to the underlying `` element.
+
+```tsx
+Apple
+
+ Banana
+
+```
+
+### NativeSelectOptGroup
+
+Groups related options together for better organization.
+
+| Prop | Type | Default |
+| ----------- | --------- | ------- |
+| `label` | `string` | |
+| `disabled` | `boolean` | `false` |
+| `className` | `string` | |
+
+All other props are passed through to the underlying ` ` element.
+
+```tsx
+
+ Apple
+ Banana
+
+```
diff --git a/apps/v4/content/docs/components/radix/navigation-menu.mdx b/apps/v4/content/docs/components/radix/navigation-menu.mdx
new file mode 100644
index 0000000000..7855b5338b
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/navigation-menu.mdx
@@ -0,0 +1,102 @@
+---
+title: Navigation Menu
+description: A collection of links for navigating websites.
+base: radix
+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
+---
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add navigation-menu
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-navigation-menu
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import {
+ NavigationMenu,
+ NavigationMenuContent,
+ NavigationMenuIndicator,
+ NavigationMenuItem,
+ NavigationMenuLink,
+ NavigationMenuList,
+ NavigationMenuTrigger,
+ NavigationMenuViewport,
+} from "@/components/ui/navigation-menu"
+```
+
+```tsx showLineNumbers
+
+
+
+ Item One
+
+ Link
+
+
+
+
+```
+
+## Link
+
+You can use the `asChild` prop to make another component look like a navigation menu trigger. Here's an example of a link that looks like a navigation menu trigger.
+
+```tsx showLineNumbers title="components/example-navigation-menu.tsx"
+import Link from "next/link"
+
+export function NavigationMenuDemo() {
+ return (
+
+
+
+
+ )
+}
+```
diff --git a/apps/v4/content/docs/components/radix/pagination.mdx b/apps/v4/content/docs/components/radix/pagination.mdx
new file mode 100644
index 0000000000..84675f1365
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/pagination.mdx
@@ -0,0 +1,111 @@
+---
+title: Pagination
+description: Pagination with page navigation, next and previous links.
+base: radix
+component: true
+---
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add pagination
+```
+
+
+
+
+
+
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import {
+ Pagination,
+ PaginationContent,
+ PaginationEllipsis,
+ PaginationItem,
+ PaginationLink,
+ PaginationNext,
+ PaginationPrevious,
+} from "@/components/ui/pagination"
+```
+
+```tsx showLineNumbers
+
+
+
+
+
+ 1
+
+
+
+
+
+
+
+```
+
+### Next.js
+
+By default the `
+
+const PaginationLink = ({...props }: ) => (
+
+-
++
++
+
+)
+
+```
+
+
+
+**Note:** We are making updates to the cli to automatically do this for you.
+
+
diff --git a/apps/v4/content/docs/components/radix/popover.mdx b/apps/v4/content/docs/components/radix/popover.mdx
new file mode 100644
index 0000000000..95a933c054
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/popover.mdx
@@ -0,0 +1,74 @@
+---
+title: Popover
+description: Displays rich content in a portal, triggered by a button.
+base: radix
+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
+---
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add popover
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-popover
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover"
+```
+
+```tsx showLineNumbers
+
+ Open
+ Place content for the popover here.
+
+```
diff --git a/apps/v4/content/docs/components/radix/progress.mdx b/apps/v4/content/docs/components/radix/progress.mdx
new file mode 100644
index 0000000000..f68f7292b4
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/progress.mdx
@@ -0,0 +1,67 @@
+---
+title: Progress
+description: Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
+base: radix
+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
+---
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add progress
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-progress
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import { Progress } from "@/components/ui/progress"
+```
+
+```tsx showLineNumbers
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add radio-group
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-radio-group
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import { Label } from "@/components/ui/label"
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
+```
+
+```tsx showLineNumbers
+
+
+ Option One
+
+
+ Option Two
+
+
+```
diff --git a/apps/v4/content/docs/components/radix/resizable.mdx b/apps/v4/content/docs/components/radix/resizable.mdx
new file mode 100644
index 0000000000..feecf09efb
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/resizable.mdx
@@ -0,0 +1,137 @@
+---
+title: Resizable
+description: Accessible resizable panel groups and layouts with keyboard support.
+base: radix
+component: true
+links:
+ doc: https://github.com/bvaughn/react-resizable-panels
+ api: https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels
+---
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add resizable
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install react-resizable-panels
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import {
+ ResizableHandle,
+ ResizablePanel,
+ ResizablePanelGroup,
+} from "@/components/ui/resizable"
+```
+
+```tsx showLineNumbers
+
+ One
+ Two
+
+```
+
+## Examples
+
+### Vertical
+
+Use the `direction` prop to set the direction of the resizable panels.
+
+
+ One
+ Two
+
+ )
+}
+```
+
+### Handle
+
+You can set or hide the handle by using the `withHandle` prop on the `ResizableHandle` component.
+
+
+ One
+ Two
+
+ )
+}
+```
diff --git a/apps/v4/content/docs/components/radix/scroll-area.mdx b/apps/v4/content/docs/components/radix/scroll-area.mdx
new file mode 100644
index 0000000000..8c0069aba0
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/scroll-area.mdx
@@ -0,0 +1,80 @@
+---
+title: Scroll Area
+description: Augments native scroll functionality for custom, cross-browser styling.
+base: radix
+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
+---
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add scroll-area
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-scroll-area
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import { ScrollArea } from "@/components/ui/scroll-area"
+```
+
+```tsx showLineNumbers
+
+ Jokester began sneaking into the castle in the middle of the night and leaving
+ jokes all over the place: under the king's pillow, in his soup, even in the
+ royal toilet. The king was furious, but he couldn't seem to stop Jokester. And
+ then, one day, the people of the kingdom discovered that the jokes left by
+ Jokester were so funny that they couldn't help but laugh. And once they
+ started laughing, they couldn't stop.
+
+```
+
+## Examples
+
+### Horizontal Scrolling
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add select
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-select
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select"
+```
+
+```tsx showLineNumbers
+
+
+
+
+ Light
+ Dark
+ System
+
+
+```
+
+## Examples
+
+### Scrollable
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add separator
+```
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-separator
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import { Separator } from "@/components/ui/separator"
+```
+
+```tsx showLineNumbers
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add sheet
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-dialog
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+### Usage
+
+```tsx showLineNumbers
+import {
+ Sheet,
+ SheetContent,
+ SheetDescription,
+ SheetHeader,
+ SheetTitle,
+ SheetTrigger,
+} from "@/components/ui/sheet"
+```
+
+```tsx showLineNumbers
+
+ Open
+
+
+ Are you absolutely sure?
+
+ This action cannot be undone. This will permanently delete your account
+ and remove your data from our servers.
+
+
+
+
+```
+
+## Examples
+
+### Side
+
+Use the `side` property to `
+ Open
+
+
+ Are you absolutely sure?
+
+ This action cannot be undone. This will permanently delete your account
+ and remove your data from our servers.
+
+
+
+
+```
diff --git a/apps/v4/content/docs/components/radix/sidebar.mdx b/apps/v4/content/docs/components/radix/sidebar.mdx
new file mode 100644
index 0000000000..193daa7429
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/sidebar.mdx
@@ -0,0 +1,1395 @@
+---
+title: Sidebar
+description: A composable, themeable and customizable sidebar component.
+base: radix
+component: true
+---
+
+
+
+ A sidebar that collapses to icons.
+
+
+
+Sidebars are one of the most complex components to build. They are central
+to any application and often contain a lot of moving parts.
+
+I don't like building sidebars. So I built 30+ of them. All kinds of
+configurations. Then I extracted the core components into `sidebar.tsx`.
+
+We now have a solid foundation to build on top of. Composable. Themeable.
+Customizable.
+
+[Browse the Blocks Library](/blocks).
+
+## Installation
+
+
+
+
+ CLI
+ Manual
+
+
+
+
+
+Run the following command to install `sidebar.tsx`
+
+```bash
+npx shadcn@latest add sidebar
+```
+
+Add the following colors to your CSS file
+
+The command above should install the colors for you. If not, copy and paste the following in your CSS file.
+
+We'll go over the colors later in the [theming section](/docs/components/sidebar#theming).
+
+```css showLineNumbers title="app/globals.css"
+@layer base {
+ :root {
+ --sidebar: oklch(0.985 0 0);
+ --sidebar-foreground: oklch(0.145 0 0);
+ --sidebar-primary: oklch(0.205 0 0);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.97 0 0);
+ --sidebar-accent-foreground: oklch(0.205 0 0);
+ --sidebar-border: oklch(0.922 0 0);
+ --sidebar-ring: oklch(0.708 0 0);
+ }
+
+ .dark {
+ --sidebar: oklch(0.205 0 0);
+ --sidebar-foreground: oklch(0.985 0 0);
+ --sidebar-primary: oklch(0.488 0.243 264.376);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.269 0 0);
+ --sidebar-accent-foreground: oklch(0.985 0 0);
+ --sidebar-border: oklch(1 0 0 / 10%);
+ --sidebar-ring: oklch(0.439 0 0);
+ }
+}
+```
+
+
+
+
+
+
+
+
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+Add the following colors to your CSS file
+
+We'll go over the colors later in the [theming section](/docs/components/sidebar#theming).
+
+```css showLineNumbers title="app/globals.css"
+@layer base {
+ :root {
+ --sidebar: oklch(0.985 0 0);
+ --sidebar-foreground: oklch(0.145 0 0);
+ --sidebar-primary: oklch(0.205 0 0);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.97 0 0);
+ --sidebar-accent-foreground: oklch(0.205 0 0);
+ --sidebar-border: oklch(0.922 0 0);
+ --sidebar-ring: oklch(0.708 0 0);
+ }
+
+ .dark {
+ --sidebar: oklch(0.205 0 0);
+ --sidebar-foreground: oklch(0.985 0 0);
+ --sidebar-primary: oklch(0.488 0.243 264.376);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.269 0 0);
+ --sidebar-accent-foreground: oklch(0.985 0 0);
+ --sidebar-border: oklch(1 0 0 / 10%);
+ --sidebar-ring: oklch(0.439 0 0);
+ }
+}
+```
+
+
+
+
+
+
+
+## Structure
+
+A `Sidebar` component is composed of the following parts:
+
+- `SidebarProvider` - Handles collapsible state.
+- `Sidebar` - The sidebar container.
+- `SidebarHeader` and `SidebarFooter` - Sticky at the top and bottom of the sidebar.
+- `SidebarContent` - Scrollable content.
+- `SidebarGroup` - Section within the `SidebarContent`.
+- `SidebarTrigger` - Trigger for the `Sidebar`.
+
+
+
+
+
+ )
+}
+```
+
+```tsx showLineNumbers title="components/app-sidebar.tsx"
+import {
+ Sidebar,
+ SidebarContent,
+ SidebarFooter,
+ SidebarGroup,
+ SidebarHeader,
+} from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+ return (
+
+
+
+
+ )
+}
+```
+
+## Your First Sidebar
+
+Let's start with the most basic sidebar. A collapsible sidebar with a menu.
+
+
+
+
+ Add a `SidebarProvider` and `SidebarTrigger` at the root of your application.
+
+
+```tsx showLineNumbers title="app/layout.tsx"
+import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
+import { AppSidebar } from "@/components/app-sidebar"
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+ return (
+
+
+
+
+ )
+}
+```
+
+Create a new sidebar component at `components/app-sidebar.tsx`.
+
+```tsx showLineNumbers title="components/app-sidebar.tsx"
+import { Sidebar, SidebarContent } from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+ return (
+
+
+ )
+}
+```
+
+Now, let's add a `SidebarMenu` to the sidebar.
+
+We'll use the `SidebarMenu` component in a `SidebarGroup`.
+
+```tsx showLineNumbers title="components/app-sidebar.tsx"
+import { Calendar, Home, Inbox, Search, Settings } from "lucide-react"
+
+import {
+ Sidebar,
+ SidebarContent,
+ SidebarGroup,
+ SidebarGroupContent,
+ SidebarGroupLabel,
+ SidebarMenu,
+ SidebarMenuButton,
+ SidebarMenuItem,
+} from "@/components/ui/sidebar"
+
+// Menu items.
+const items = [
+ {
+ title: "Home",
+ url: "#",
+ icon: Home,
+ },
+ {
+ title: "Inbox",
+ url: "#",
+ icon: Inbox,
+ },
+ {
+ title: "Calendar",
+ url: "#",
+ icon: Calendar,
+ },
+ {
+ title: "Search",
+ url: "#",
+ icon: Search,
+ },
+ {
+ title: "Settings",
+ url: "#",
+ icon: Settings,
+ },
+]
+
+export function AppSidebar() {
+ return (
+
+
+
+ Application
+
+
+ {items.map((item) => (
+
+
+
+ {item.title}
+
+
+
+ ))}
+
+
+
+
+
+ )
+}
+```
+
+You've created your first sidebar.
+
+You should see something like this:
+
+
+
+ Your first sidebar.
+
+
+
+
+
+## Components
+
+The components in `sidebar.tsx` are built to be composable i.e you build your sidebar by putting the provided components together. They also compose well with other shadcn/ui components such as `DropdownMenu`, `Collapsible` or `Dialog` etc.
+
+**If you need to change the code in `sidebar.tsx`, you are encouraged to do so. The code is yours. Use `sidebar.tsx` as a starting point and build your own.**
+
+In the next sections, we'll go over each component and how to use them.
+
+## SidebarProvider
+
+The `SidebarProvider` component is used to provide the sidebar context to the `Sidebar` component. You should always wrap your application in a `SidebarProvider` component.
+
+### Props
+
+| Name | Type | Description |
+| -------------- | ------------------------- | -------------------------------------------- |
+| `defaultOpen` | `boolean` | Default open state of the sidebar. |
+| `open` | `boolean` | Open state of the sidebar (controlled). |
+| `onOpenChange` | `(open: boolean) => void` | Sets open state of the sidebar (controlled). |
+
+### Width
+
+If you have a single sidebar in your application, you can use the `SIDEBAR_WIDTH` and `SIDEBAR_WIDTH_MOBILE` variables in `sidebar.tsx` to set the width of the sidebar.
+
+```tsx showLineNumbers title="components/ui/sidebar.tsx"
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+```
+
+For multiple sidebars in your application, you can use the `style` prop to set the width of the sidebar.
+
+To set the width of the sidebar, you can use the `--sidebar-width` and `--sidebar-width-mobile` CSS variables in the `style` prop.
+
+```tsx showLineNumbers title="components/ui/sidebar.tsx"
+
+
+```
+
+This will handle the width of the sidebar but also the layout spacing.
+
+### Keyboard Shortcut
+
+The `SIDEBAR_KEYBOARD_SHORTCUT` variable is used to set the keyboard shortcut used to open and close the sidebar.
+
+To trigger the sidebar, you use the `cmd+b` keyboard shortcut on Mac and `ctrl+b` on Windows.
+
+You can change the keyboard shortcut by updating the `SIDEBAR_KEYBOARD_SHORTCUT` variable.
+
+```tsx showLineNumbers title="components/ui/sidebar.tsx"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+```
+
+### Persisted State
+
+The `SidebarProvider` supports persisting the sidebar state across page reloads and server-side rendering. It uses cookies to store the current state of the sidebar. When the sidebar state changes, a default cookie named `sidebar_state` is set with the current open/closed state. This cookie is then read on subsequent page loads to restore the sidebar state.
+
+To persist sidebar state in Next.js, set up your `SidebarProvider` in `app/layout.tsx` like this:
+
+```tsx showLineNumbers title="app/layout.tsx"
+import { cookies } from "next/headers"
+
+import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
+import { AppSidebar } from "@/components/app-sidebar"
+
+export async function Layout({ children }: { children: React.ReactNode }) {
+ const cookieStore = await cookies()
+ const defaultOpen = cookieStore.get("sidebar_state")?.value === "true"
+
+ return (
+
+
+
+
+ )
+}
+```
+
+You can change the name of the cookie by updating the `SIDEBAR_COOKIE_NAME` variable in `sidebar.tsx`.
+
+```tsx showLineNumbers title="components/ui/sidebar.tsx"
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+```
+
+## Sidebar
+
+The main `Sidebar` component used to render a collapsible sidebar.
+
+```tsx showLineNumbers
+import { Sidebar } from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+ return
+ **Note:** If you use the `inset` variant, remember to wrap your main content
+ in a `SidebarInset` component.
+
+
+```tsx showLineNumbers
+
+
+ {children}
+
+
+```
+
+### collapsible
+
+Use the `collapsible` prop to make the sidebar collapsible.
+
+Available options are `offcanvas`, `icon` and `none`.
+
+```tsx showLineNumbers
+import { Sidebar } from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+ return ` to the `SidebarHeader`.
+
+
+
+ A sidebar header with a dropdown menu.
+
+
+
+```tsx showLineNumbers title="components/app-sidebar.tsx"
+
+
+
+
+
+
+
+ Select Workspace
+
+
+
+
+ Acme Inc
+
+
+ Acme Corp.
+
+
+
+
+
+
+
+```
+
+## SidebarFooter
+
+Use the `SidebarFooter` component to add a sticky footer to the sidebar.
+
+The following example adds a `` to the `SidebarFooter`.
+
+
+
+ A sidebar footer with a dropdown menu.
+
+
+
+```tsx showLineNumbers title="components/app-sidebar.tsx"
+export function AppSidebar() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ Account
+
+
+ Billing
+
+
+ Sign out
+
+
+
+
+
+
+
+
+ )
+}
+```
+
+## SidebarContent
+
+The `SidebarContent` component is used to wrap the content of the sidebar. This is where you add your `SidebarGroup` components. It is scrollable.
+
+```tsx showLineNumbers
+import { Sidebar, SidebarContent } from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+ return (
+
+
+
+
+ )
+}
+```
+
+## SidebarGroup
+
+Use the `SidebarGroup` component to create a section within the sidebar.
+
+A `SidebarGroup` has a `SidebarGroupLabel`, a `SidebarGroupContent` and an optional `SidebarGroupAction`.
+
+
+
+ A sidebar group.
+
+
+
+```tsx showLineNumbers
+import { Sidebar, SidebarContent, SidebarGroup } from "@/components/ui/sidebar"
+
+export function AppSidebar() {
+ return (
+
+
+
+ Application
+
+ Add Project
+
+
+
+
+ )
+}
+```
+
+## Collapsible SidebarGroup
+
+To make a `SidebarGroup` collapsible, wrap it in a `Collapsible`.
+
+
+
+ A collapsible sidebar group.
+
+
+
+```tsx showLineNumbers
+export function AppSidebar() {
+ return (
+
+
+
+
+ Help
+
+
+
+
+
+
+ )
+}
+```
+
+
+ **Note:** We wrap the `CollapsibleTrigger` in a `SidebarGroupLabel` to render
+ a button.
+
+
+## SidebarGroupAction
+
+Use the `SidebarGroupAction` component to add an action button to the `SidebarGroup`.
+
+
+
+ A sidebar group with an action button.
+
+
+
+```tsx showLineNumbers {5-7}
+export function AppSidebar() {
+ return (
+
+ Projects
+
+ Add Project
+
+
+ )
+}
+```
+
+## SidebarMenu
+
+The `SidebarMenu` component is used for building a menu within a `SidebarGroup`.
+
+A `SidebarMenu` component is composed of `SidebarMenuItem`, `SidebarMenuButton`, `
+
+ A sidebar menu with a list of projects.
+
+
+
+```tsx showLineNumbers
+
+
+
+ Projects
+
+
+ {projects.map((project) => (
+
+
+
+ {project.name}
+
+
+
+ ))}
+
+
+
+
+
+```
+
+## SidebarMenuButton
+
+The `SidebarMenuButton` component is used to render a menu button within a `SidebarMenuItem`.
+
+### Link or Anchor
+
+By default, the `SidebarMenuButton` renders a button but you can use the `asChild` prop to render a different component such as a `Link` or an `a` tag.
+
+```tsx showLineNumbers
+
+ Home
+
+```
+
+### Icon and Label
+
+You can render an icon and a truncated label inside the button. Remember to wrap the label in a ``.
+
+```tsx showLineNumbers
+
+
+ Home
+
+
+```
+
+### isActive
+
+Use the `isActive` prop to mark a menu item as active.
+
+```tsx showLineNumbers
+
+ Home
+
+```
+
+## SidebarMenuAction
+
+The `SidebarMenuAction` component is used to render a menu action within a `SidebarMenuItem`.
+
+This button works independently of the `SidebarMenuButton` i.e you can have the `
+
+
+ Home
+
+
+
+ Add Project
+
+
+```
+
+### DropdownMenu
+
+Here's an example of a `SidebarMenuAction` component rendering a `DropdownMenu`.
+
+
+
+ A sidebar menu action with a dropdown menu.
+
+
+
+```tsx showLineNumbers
+
+
+
+ Home
+
+
+
+
+
+
+
+
+
+ Edit Project
+
+
+ Delete Project
+
+
+
+
+```
+
+## SidebarMenuSub
+
+The `SidebarMenuSub` component is used to render a submenu within a `SidebarMenu`.
+
+Use `
+
+ A sidebar menu with a submenu.
+
+
+
+```tsx showLineNumbers
+
+
+
+
+
+
+
+
+```
+
+## Collapsible SidebarMenu
+
+To make a `SidebarMenu` component collapsible, wrap it and the `SidebarMenuSub` components in a `Collapsible`.
+
+
+
+ A collapsible sidebar menu.
+
+
+
+```tsx showLineNumbers
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## SidebarMenuBadge
+
+The `SidebarMenuBadge` component is used to render a badge within a `SidebarMenuItem`.
+
+
+
+ A sidebar menu with a badge.
+
+
+
+```tsx showLineNumbers
+
+ 24
+
+```
+
+## SidebarMenuSkeleton
+
+The `SidebarMenuSkeleton` component is used to render a skeleton for a `SidebarMenu`. You can use this to show a loading state when using React Server Components, SWR or react-query.
+
+```tsx showLineNumbers
+function NavProjectsSkeleton() {
+ return (
+
+ {Array.from({ length: 5 }).map((_, index) => (
+
+
+ ))}
+
+ )
+}
+```
+
+## SidebarSeparator
+
+The `SidebarSeparator` component is used to render a separator within a `Sidebar`.
+
+```tsx showLineNumbers
+
+
+
+
+```
+
+## SidebarTrigger
+
+Use the `SidebarTrigger` component to render a button that toggles the sidebar.
+
+The `SidebarTrigger` component must be used within a `SidebarProvider`.
+
+```tsx showLineNumbers
+
+
+
+
+```
+
+### Custom Trigger
+
+To create a custom trigger, you can use the `useSidebar` hook.
+
+```tsx showLineNumbers
+import { useSidebar } from "@/components/ui/sidebar"
+
+export function CustomTrigger() {
+ const { toggleSidebar } = useSidebar()
+
+ return Toggle Sidebar
+}
+```
+
+## SidebarRail
+
+The `SidebarRail` component is used to render a rail within a `Sidebar`. This rail can be used to toggle the sidebar.
+
+```tsx showLineNumbers
+
+
+
+
+```
+
+## Data Fetching
+
+### React Server Components
+
+Here's an example of a `SidebarMenu` component rendering a list of projects using React Server Components.
+
+
+
+ A sidebar menu using React Server Components.
+
+
+
+```tsx showLineNumbers {6} title="Skeleton to show loading state."
+function NavProjectsSkeleton() {
+ return (
+
+ {Array.from({ length: 5 }).map((_, index) => (
+
+
+ ))}
+
+ )
+}
+```
+
+```tsx showLineNumbers {2} title="Server component fetching data."
+async function NavProjects() {
+ const projects = await fetchProjects()
+
+ return (
+
+ {projects.map((project) => (
+
+
+
+ {project.name}
+
+
+
+ ))}
+
+ )
+}
+```
+
+```tsx showLineNumbers {8-10} title="Usage with React Suspense."
+function AppSidebar() {
+ return (
+
+
+
+ Projects
+
+
+
+
+
+ )
+}
+```
+
+### SWR and React Query
+
+You can use the same approach with [SWR](https://swr.vercel.app/) or [react-query](https://tanstack.com/query/latest/docs/framework/react/overview).
+
+```tsx showLineNumbers title="SWR"
+function NavProjects() {
+ const { data, isLoading } = useSWR("/api/projects", fetcher)
+
+ if (isLoading) {
+ return (
+
+ {Array.from({ length: 5 }).map((_, index) => (
+
+
+ ))}
+
+ )
+ }
+
+ if (!data) {
+ return ...
+ }
+
+ return (
+
+ {data.map((project) => (
+
+
+
+ {project.name}
+
+
+
+ ))}
+
+ )
+}
+```
+
+```tsx showLineNumbers title="React Query"
+function NavProjects() {
+ const { data, isLoading } = useQuery()
+
+ if (isLoading) {
+ return (
+
+ {Array.from({ length: 5 }).map((_, index) => (
+
+
+ ))}
+
+ )
+ }
+
+ if (!data) {
+ return ...
+ }
+
+ return (
+
+ {data.map((project) => (
+
+
+
+ {project.name}
+
+
+
+ ))}
+
+ )
+}
+```
+
+## Controlled Sidebar
+
+Use the `open` and `onOpenChange` props to control the sidebar.
+
+
+
+ A controlled sidebar.
+
+
+
+```tsx showLineNumbers
+export function AppSidebar() {
+ const [open, setOpen] = React.useState(false)
+
+ return (
+
+
+ )
+}
+```
+
+## Theming
+
+We use the following CSS variables to theme the sidebar.
+
+```css
+@layer base {
+ :root {
+ --sidebar-background: 0 0% 98%;
+ --sidebar-foreground: 240 5.3% 26.1%;
+ --sidebar-primary: 240 5.9% 10%;
+ --sidebar-primary-foreground: 0 0% 98%;
+ --sidebar-accent: 240 4.8% 95.9%;
+ --sidebar-accent-foreground: 240 5.9% 10%;
+ --sidebar-border: 220 13% 91%;
+ --sidebar-ring: 217.2 91.2% 59.8%;
+ }
+
+ .dark {
+ --sidebar-background: 240 5.9% 10%;
+ --sidebar-foreground: 240 4.8% 95.9%;
+ --sidebar-primary: 0 0% 98%;
+ --sidebar-primary-foreground: 240 5.9% 10%;
+ --sidebar-accent: 240 3.7% 15.9%;
+ --sidebar-accent-foreground: 240 4.8% 95.9%;
+ --sidebar-border: 240 3.7% 15.9%;
+ --sidebar-ring: 217.2 91.2% 59.8%;
+ }
+}
+```
+
+**We intentionally use different variables for the sidebar and the rest of the application** to make it easy to have a sidebar that is styled differently from the rest of the application. Think a sidebar with a darker shade from the main application.
+
+## Styling
+
+Here are some tips for styling the sidebar based on different states.
+
+- **Styling an element based on the sidebar collapsible state.** The following will hide the `SidebarGroup` when the sidebar is in `icon` mode.
+
+```tsx
+
+
+
+
+```
+
+- **Styling a menu action based on the menu button active state.** The following will force the menu action to be visible when the menu button is active.
+
+```tsx
+
+
+```
+
+You can find more tips on using states for styling in this [Twitter thread](https://x.com/shadcn/status/1842329158879420864).
+
+## Changelog
+
+### 2024-10-30 Cookie handling in setOpen
+
+- [#5593](https://github.com/shadcn-ui/ui/pull/5593) - Improved setOpen callback logic in ``.
+
+Update the `setOpen` callback in `` as follows:
+
+```tsx showLineNumbers
+const setOpen = React.useCallback(
+ (value: boolean | ((value: boolean) => boolean)) => {
+ const openState = typeof value === "function" ? value(open) : value
+ if (setOpenProp) {
+ setOpenProp(openState)
+ } else {
+ _setOpen(openState)
+ }
+
+ // This sets the cookie to keep the sidebar state.
+ document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+ },
+ [setOpenProp, open]
+)
+```
+
+### 2024-10-21 Fixed `text-sidebar-foreground`
+
+- [#5491](https://github.com/shadcn-ui/ui/pull/5491) - Moved `text-sidebar-foreground` from `` to `` component.
+
+### 2024-10-20 Typo in `useSidebar` hook.
+
+Fixed typo in `useSidebar` hook.
+
+```diff showLineNumbers title="sidebar.tsx"
+- throw new Error("useSidebar must be used within a Sidebar.")
++ throw new Error("useSidebar must be used within a SidebarProvider.")
+```
diff --git a/apps/v4/content/docs/components/radix/skeleton.mdx b/apps/v4/content/docs/components/radix/skeleton.mdx
new file mode 100644
index 0000000000..c2779a9535
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/skeleton.mdx
@@ -0,0 +1,68 @@
+---
+title: Skeleton
+description: Use to show a placeholder while content is loading.
+base: radix
+component: true
+---
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add skeleton
+```
+
+
+
+
+
+
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx
+import { Skeleton } from "@/components/ui/skeleton"
+```
+
+```tsx
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add slider
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-slider
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx
+import { Slider } from "@/components/ui/slider"
+```
+
+```tsx
+
+
+
+ CLI
+ Manual
+
+
+
+
+
+Run the following command:
+
+```bash
+npx shadcn@latest add sonner
+```
+
+Add the Toaster component
+
+```tsx title="app/layout.tsx" {1,9}
+import { Toaster } from "@/components/ui/sonner"
+
+export default function RootLayout({ children }) {
+ return (
+
+
+
+ {children}
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install sonner next-themes
+```
+
+Copy and paste the following code into your project.
+
+Add the Toaster component
+
+```tsx showLineNumbers title="app/layout.tsx" {1,8}
+import { Toaster } from "@/components/ui/sonner"
+
+export default function RootLayout({ children }) {
+ return (
+
+
+
+ {children}
+
+
+ )
+}
+```
+
+
+
+
+
+
+
+## Usage
+
+```tsx
+import { toast } from "sonner"
+```
+
+```tsx
+toast("Event has been created.")
+```
+
+## Examples
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add spinner
+```
+
+
+
+
+
+
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx
+import { Spinner } from "@/components/ui/spinner"
+```
+
+```tsx
+`.
+
+` to indicate a loading state.
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add switch
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-switch
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx
+import { Switch } from "@/components/ui/switch"
+```
+
+```tsx
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add table
+```
+
+
+
+
+
+
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import {
+ Table,
+ TableBody,
+ TableCaption,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "@/components/ui/table"
+```
+
+```tsx showLineNumbers
+
+ A list of your recent invoices.
+
+
+ Invoice
+ Status
+ Method
+ Amount
+
+
+
+
+ INV001
+ Paid
+ Credit Card
+ $250.00
+
+
+
+```
+
+## Data Table
+
+You can use the `` component to build more complex data tables. Combine it with [@tanstack/react-table](https://tanstack.com/table/v8) to create tables with sorting, filtering and pagination.
+
+See the [Data Table](/docs/components/data-table) documentation for more information.
+
+You can also see an example of a data table in the [Tasks](/examples/tasks) demo.
diff --git a/apps/v4/content/docs/components/radix/tabs.mdx b/apps/v4/content/docs/components/radix/tabs.mdx
new file mode 100644
index 0000000000..ee9988cf48
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/tabs.mdx
@@ -0,0 +1,74 @@
+---
+title: Tabs
+description: A set of layered sections of content—known as tab panels—that are displayed one at a time.
+base: radix
+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
+---
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add tabs
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-tabs
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+```
+
+```tsx showLineNumbers
+
+
+ Account
+ Password
+
+ Make changes to your account here.
+ Change your password here.
+
+```
diff --git a/apps/v4/content/docs/components/radix/textarea.mdx b/apps/v4/content/docs/components/radix/textarea.mdx
new file mode 100644
index 0000000000..bcf23b7088
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/textarea.mdx
@@ -0,0 +1,101 @@
+---
+title: Textarea
+description: Displays a form textarea or a component that looks like a textarea.
+base: radix
+component: true
+---
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add textarea
+```
+
+
+
+
+
+
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx
+import { Textarea } from "@/components/ui/textarea"
+```
+
+```tsx
+
+```
+
+## Examples
+
+### Default
+
+
+ See the [sonner](/docs/components/sonner) documentation for more information.
+
+
+If you're looking for the old toast component, see the [old docs](https://v3.shadcn.com/docs/components/toast) for more information.
diff --git a/apps/v4/content/docs/components/radix/toggle-group.mdx b/apps/v4/content/docs/components/radix/toggle-group.mdx
new file mode 100644
index 0000000000..28819d62f7
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/toggle-group.mdx
@@ -0,0 +1,149 @@
+---
+title: Toggle Group
+description: A set of two-state buttons that can be toggled on or off.
+base: radix
+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
+---
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add toggle-group
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-toggle-group
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
+```
+
+```tsx
+
+ A
+ B
+ C
+
+```
+
+## Examples
+
+### Outline
+
+
+ A
+ B
+
+```
+
+### ToggleGroupItem
+
+Individual toggle items within a toggle group. Remember to add an `aria-label` to each item for accessibility.
+
+| Prop | Type | Default |
+| ----------- | -------- | -------- |
+| `value` | `string` | Required |
+| `className` | `string` | |
diff --git a/apps/v4/content/docs/components/radix/toggle.mdx b/apps/v4/content/docs/components/radix/toggle.mdx
new file mode 100644
index 0000000000..32b6848530
--- /dev/null
+++ b/apps/v4/content/docs/components/radix/toggle.mdx
@@ -0,0 +1,117 @@
+---
+title: Toggle
+description: A two-state button that can be either on or off.
+base: radix
+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
+---
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add toggle
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-toggle
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx
+import { Toggle } from "@/components/ui/toggle"
+```
+
+```tsx
+Toggle
+```
+
+## Examples
+
+### Default
+
+
+
+
+ CLI
+ Manual
+
+
+
+```bash
+npx shadcn@latest add tooltip
+```
+
+
+
+
+
+
+
+Install the following dependencies:
+
+```bash
+npm install @radix-ui/react-tooltip
+```
+
+Copy and paste the following code into your project.
+
+Update the import paths to match your project setup.
+
+
+
+
+
+
+
+## Usage
+
+```tsx showLineNumbers
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+} from "@/components/ui/tooltip"
+```
+
+```tsx showLineNumbers
+
+ Hover
+
+ Add to library
+
+
+```
+
+---
+
+## Changelog
+
+### 2025-09-22 Update tooltip colors
+
+We've updated the tooltip colors to use the foreground color for the background and the background color for the foreground.
+
+Replace `bg-primary text-primary-foreground` with `bg-foreground text-background` for both `) => boolean
) {
- const styleIndex = Index[styleName]
+ const { index, key } = getIndexForStyle(styleName)
+ const styleIndex = index[key]
if (!styleIndex) {
return []
@@ -34,8 +47,9 @@ export async function getRegistryItems(
).then((results) => results.filter(Boolean))
}
-export async function getRegistryItem(name: string, styleName: Style["name"]) {
- const item = Index[styleName]?.[name]
+export async function getRegistryItem(name: string, styleName: string) {
+ const { index, key } = getIndexForStyle(styleName)
+ const item = index[key]?.[name]
if (!item) {
return null
diff --git a/apps/v4/lib/rehype.ts b/apps/v4/lib/rehype.ts
index 2b2c70dd10..175989cc5d 100644
--- a/apps/v4/lib/rehype.ts
+++ b/apps/v4/lib/rehype.ts
@@ -3,8 +3,20 @@ import path from "path"
import { u } from "unist-builder"
import { visit } from "unist-util-visit"
-import { Index } from "@/registry/__index__"
+import { Index as StylesIndex } from "@/registry/__index__"
import { getActiveStyle } from "@/registry/_legacy-styles"
+import { Index as BasesIndex } from "@/registry/bases/__index__"
+
+// Map style names to their corresponding index and key.
+function getIndexForStyle(styleName: string) {
+ if (styleName.startsWith("radix-")) {
+ return { index: BasesIndex, key: "radix" }
+ }
+ if (styleName.startsWith("base-")) {
+ return { index: BasesIndex, key: "base" }
+ }
+ return { index: StylesIndex, key: styleName }
+}
interface UnistNode {
type: string
@@ -43,6 +55,9 @@ export function rehypeComponent() {
const fileName = getNodeAttributeByName(node, "fileName")?.value as
| string
| undefined
+ const styleName =
+ (getNodeAttributeByName(node, "styleName")?.value as string) ||
+ activeStyle.name
if (!name && !srcPath) {
return null
@@ -54,7 +69,8 @@ export function rehypeComponent() {
if (srcPath) {
src = path.join(process.cwd(), srcPath)
} else {
- const component = Index[name]
+ const { index, key } = getIndexForStyle(styleName)
+ const component = index[key]?.[name]
src = fileName
? component.files.find((file: unknown) => {
if (typeof file === "string") {
@@ -75,7 +91,12 @@ export function rehypeComponent() {
// Replace imports.
// TODO: Use @swc/core and a visitor to replace this.
// For now a simple regex should do.
- source = source.replaceAll(`@/registry/new-york-v4/`, "@/components/")
+ source = source.replaceAll(
+ `@/registry/${styleName}/`,
+ "@/components/"
+ )
+ source = source.replaceAll(`@/registry/bases/radix/`, "@/components/")
+ source = source.replaceAll(`@/registry/bases/base/`, "@/components/")
source = source.replaceAll("export default", "export")
// Add code as children so that rehype can take over at build time.
@@ -108,13 +129,17 @@ export function rehypeComponent() {
if (node.name === "ComponentPreview") {
const name = getNodeAttributeByName(node, "name")?.value as string
+ const styleName =
+ (getNodeAttributeByName(node, "styleName")?.value as string) ||
+ activeStyle.name
if (!name) {
return null
}
try {
- const component = Index[activeStyle.name]?.[name]
+ const { index, key } = getIndexForStyle(styleName)
+ const component = index[key]?.[name]
const src = component.files[0]?.path
// Read the source file.
@@ -124,7 +149,12 @@ export function rehypeComponent() {
// Replace imports.
// TODO: Use @swc/core and a visitor to replace this.
// For now a simple regex should do.
- source = source.replaceAll(`@/registry/new-york-v4/`, "@/components/")
+ source = source.replaceAll(
+ `@/registry/${styleName}/`,
+ "@/components/"
+ )
+ source = source.replaceAll(`@/registry/bases/radix/`, "@/components/")
+ source = source.replaceAll(`@/registry/bases/base/`, "@/components/")
source = source.replaceAll("export default", "export")
// Add code as children so that rehype can take over at build time.
diff --git a/apps/v4/middleware.ts b/apps/v4/middleware.ts
new file mode 100644
index 0000000000..973604f2c0
--- /dev/null
+++ b/apps/v4/middleware.ts
@@ -0,0 +1,89 @@
+import { NextResponse } from "next/server"
+import type { NextRequest } from "next/server"
+
+// List of all component names.
+const COMPONENT_NAMES = [
+ "accordion",
+ "alert",
+ "alert-dialog",
+ "aspect-ratio",
+ "avatar",
+ "badge",
+ "breadcrumb",
+ "button",
+ "button-group",
+ "calendar",
+ "card",
+ "carousel",
+ "chart",
+ "checkbox",
+ "collapsible",
+ "combobox",
+ "command",
+ "context-menu",
+ "data-table",
+ "date-picker",
+ "dialog",
+ "drawer",
+ "dropdown-menu",
+ "empty",
+ "field",
+ "form",
+ "hover-card",
+ "input",
+ "input-group",
+ "input-otp",
+ "item",
+ "kbd",
+ "label",
+ "menubar",
+ "native-select",
+ "navigation-menu",
+ "pagination",
+ "popover",
+ "progress",
+ "radio-group",
+ "resizable",
+ "scroll-area",
+ "select",
+ "separator",
+ "sheet",
+ "sidebar",
+ "skeleton",
+ "slider",
+ "sonner",
+ "spinner",
+ "switch",
+ "table",
+ "tabs",
+ "textarea",
+ "toast",
+ "toggle",
+ "toggle-group",
+ "tooltip",
+ "typography",
+]
+
+export function middleware(request: NextRequest) {
+ const { pathname } = request.nextUrl
+
+ // Match /docs/components/:component (not /docs/components/radix/:component or /docs/components/base/:component).
+ const match = pathname.match(/^\/docs\/components\/([^/]+)$/)
+
+ if (match) {
+ const segment = match[1]
+ // Redirect component pages to radix version (default).
+ if (COMPONENT_NAMES.includes(segment)) {
+ return NextResponse.redirect(
+ new URL(`/docs/components/radix/${segment}`, request.url),
+ 301
+ )
+ }
+ }
+
+ return NextResponse.next()
+}
+
+export const config = {
+ matcher: "/docs/components/:path*",
+}