rayan/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-07-02 17:08:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: dropdown-menu

Browse Source
This commit is contained in:
shadcn
2026-01-15 15:50:35 +04:00
parent da07cf6ffe
commit 66637058fc
50 changed files with 2746 additions and 5703 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
apps/v4/content/docs/components/base/dropdown-menu.mdx
View File

@@ -60,9 +60,11 @@ npm install @base-ui/react
## Usage
```tsx showLineNumbers
import { Button } from "@/components/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
@@ -72,48 +74,92 @@ import {
```tsx showLineNumbers
<DropdownMenu>
<DropdownMenuTrigger>Open</DropdownMenuTrigger>
<DropdownMenuTrigger render={<Button variant="outline" />}>
Open
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Billing</DropdownMenuItem>
<DropdownMenuItem>Team</DropdownMenuItem>
<DropdownMenuItem>Subscription</DropdownMenuItem>
<DropdownMenuGroup>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Billing</DropdownMenuItem>
<DropdownMenuSeparator />
</DropdownMenuGroup>
<DropdownMenuGroup>
<DropdownMenuItem>Team</DropdownMenuItem>
<DropdownMenuItem>Subscription</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
```
## Examples
### Basic
A basic dropdown menu with labels and separators.
<ComponentPreview styleName="base-nova" name="dropdown-menu-basic" />
### Submenu
Use `DropdownMenuSub` to nest secondary actions.
<ComponentPreview styleName="base-nova" name="dropdown-menu-submenu" />
### Shortcuts
Add `DropdownMenuShortcut` to show keyboard hints.
<ComponentPreview styleName="base-nova" name="dropdown-menu-shortcuts" />
### Icons
Combine icons with labels for quick scanning.
<ComponentPreview styleName="base-nova" name="dropdown-menu-icons" />
### Checkboxes
<ComponentPreview
styleName="base-nova"
name="dropdown-menu-checkboxes"
description="A dropdown menu with checkboxes."
/>
Use `DropdownMenuCheckboxItem` for toggles.
<ComponentPreview styleName="base-nova" name="dropdown-menu-checkboxes" />
### Checkboxes Icons
Add icons to checkbox items.
<ComponentPreview styleName="base-nova" name="dropdown-menu-checkboxes-icons" />
### Radio Group
<ComponentPreview
styleName="base-nova"
name="dropdown-menu-radio-group"
description="A dropdown menu with radio items."
/>
Use `DropdownMenuRadioGroup` for exclusive choices.
### Dialog
<ComponentPreview styleName="base-nova" name="dropdown-menu-radio-group" />
This example shows how to open a dialog from a dropdown menu.
### Radio Icons
Use `modal={false}` on the `DropdownMenu` component.
Show radio options with icons.
```tsx showLineNumbers
<DropdownMenu modal={false}>
<DropdownMenuTrigger asChild>
<Button variant="outline">Actions</Button>
</DropdownMenuTrigger>
</DropdownMenu>
```
<ComponentPreview styleName="base-nova" name="dropdown-menu-radio-icons" />
<ComponentPreview styleName="base-nova" name="dropdown-menu-dialog" />
### Destructive
Use `variant="destructive"` for irreversible actions.
<ComponentPreview styleName="base-nova" name="dropdown-menu-destructive" />
### Avatar
An account switcher dropdown triggered by an avatar.
<ComponentPreview styleName="base-nova" name="dropdown-menu-avatar" />
### Complex
A richer example combining groups, icons, and submenus.
<ComponentPreview styleName="base-nova" name="dropdown-menu-complex" />
## API Reference
See the [Base UI documentation](https://base-ui.com/react/components/dropdown-menu) for the full API reference.

99
apps/v4/content/docs/components/radix/dropdown-menu.mdx
View File

@@ -60,9 +60,11 @@ npm install radix-ui
## Usage
```tsx showLineNumbers
import { Button } from "@/components/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
@@ -72,48 +74,95 @@ import {
```tsx showLineNumbers
<DropdownMenu>
<DropdownMenuTrigger>Open</DropdownMenuTrigger>
<DropdownMenuTrigger asChild>
<Button variant="outline">Open</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Billing</DropdownMenuItem>
<DropdownMenuItem>Team</DropdownMenuItem>
<DropdownMenuItem>Subscription</DropdownMenuItem>
<DropdownMenuGroup>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Billing</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem>Team</DropdownMenuItem>
<DropdownMenuItem>Subscription</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
```
## Examples
### Basic
A basic dropdown menu with labels and separators.
<ComponentPreview styleName="radix-nova" name="dropdown-menu-basic" />
### Submenu
Use `DropdownMenuSub` to nest secondary actions.
<ComponentPreview styleName="radix-nova" name="dropdown-menu-submenu" />
### Shortcuts
Add `DropdownMenuShortcut` to show keyboard hints.
<ComponentPreview styleName="radix-nova" name="dropdown-menu-shortcuts" />
### Icons
Combine icons with labels for quick scanning.
<ComponentPreview styleName="radix-nova" name="dropdown-menu-icons" />
### Checkboxes
Use `DropdownMenuCheckboxItem` for toggles.
<ComponentPreview styleName="radix-nova" name="dropdown-menu-checkboxes" />
### Checkboxes Icons
Add icons to checkbox items.
<ComponentPreview
styleName="radix-nova"
name="dropdown-menu-checkboxes"
description="A dropdown menu with checkboxes."
name="dropdown-menu-checkboxes-icons"
/>
### Radio Group
<ComponentPreview
styleName="radix-nova"
name="dropdown-menu-radio-group"
description="A dropdown menu with radio items."
/>
Use `DropdownMenuRadioGroup` for exclusive choices.
### Dialog
<ComponentPreview styleName="radix-nova" name="dropdown-menu-radio-group" />
This example shows how to open a dialog from a dropdown menu.
### Radio Icons
Use `modal={false}` on the `DropdownMenu` component.
Show radio options with icons.
```tsx showLineNumbers
<DropdownMenu modal={false}>
<DropdownMenuTrigger asChild>
<Button variant="outline">Actions</Button>
</DropdownMenuTrigger>
</DropdownMenu>
```
<ComponentPreview styleName="radix-nova" name="dropdown-menu-radio-icons" />
<ComponentPreview styleName="radix-nova" name="dropdown-menu-dialog" />
### Destructive
Use `variant="destructive"` for irreversible actions.
<ComponentPreview styleName="radix-nova" name="dropdown-menu-destructive" />
### Avatar
An account switcher dropdown triggered by an avatar.
<ComponentPreview styleName="radix-nova" name="dropdown-menu-avatar" />
### Complex
A richer example combining groups, icons, and submenus.
<ComponentPreview styleName="radix-nova" name="dropdown-menu-complex" />
## API Reference
See the [Radix UI documentation](https://www.radix-ui.com/docs/primitives/components/dropdown-menu) for the full API reference.

308
apps/v4/examples/__index__.tsx
View File

@@ -1916,6 +1916,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-avatar": {
name: "dropdown-menu-avatar",
filePath: "examples/radix/dropdown-menu-avatar.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/dropdown-menu-avatar")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "dropdown-menu-avatar"
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-basic": {
name: "dropdown-menu-basic",
filePath: "examples/radix/dropdown-menu-basic.tsx",
@@ -1929,6 +1942,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-checkboxes-icons": {
name: "dropdown-menu-checkboxes-icons",
filePath: "examples/radix/dropdown-menu-checkboxes-icons.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/dropdown-menu-checkboxes-icons")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "dropdown-menu-checkboxes-icons"
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-checkboxes": {
name: "dropdown-menu-checkboxes",
filePath: "examples/radix/dropdown-menu-checkboxes.tsx",
@@ -1968,29 +1994,29 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-dialog": {
name: "dropdown-menu-dialog",
filePath: "examples/radix/dropdown-menu-dialog.tsx",
"dropdown-menu-destructive": {
name: "dropdown-menu-destructive",
filePath: "examples/radix/dropdown-menu-destructive.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/dropdown-menu-dialog")
const mod = await import("./radix/dropdown-menu-destructive")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "dropdown-menu-dialog"
) || "dropdown-menu-destructive"
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-in-dialog": {
name: "dropdown-menu-in-dialog",
filePath: "examples/radix/dropdown-menu-in-dialog.tsx",
"dropdown-menu-icons": {
name: "dropdown-menu-icons",
filePath: "examples/radix/dropdown-menu-icons.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/dropdown-menu-in-dialog")
const mod = await import("./radix/dropdown-menu-icons")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "dropdown-menu-in-dialog"
) || "dropdown-menu-icons"
return { default: mod.default || mod[exportName] }
}),
},
@@ -2007,120 +2033,42 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-with-avatar": {
name: "dropdown-menu-with-avatar",
filePath: "examples/radix/dropdown-menu-with-avatar.tsx",
"dropdown-menu-radio-icons": {
name: "dropdown-menu-radio-icons",
filePath: "examples/radix/dropdown-menu-radio-icons.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/dropdown-menu-with-avatar")
const mod = await import("./radix/dropdown-menu-radio-icons")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "dropdown-menu-with-avatar"
) || "dropdown-menu-radio-icons"
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-with-checkboxes-icons": {
name: "dropdown-menu-with-checkboxes-icons",
filePath: "examples/radix/dropdown-menu-with-checkboxes-icons.tsx",
"dropdown-menu-shortcuts": {
name: "dropdown-menu-shortcuts",
filePath: "examples/radix/dropdown-menu-shortcuts.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/dropdown-menu-with-checkboxes-icons")
const mod = await import("./radix/dropdown-menu-shortcuts")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "dropdown-menu-with-checkboxes-icons"
) || "dropdown-menu-shortcuts"
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-with-checkboxes": {
name: "dropdown-menu-with-checkboxes",
filePath: "examples/radix/dropdown-menu-with-checkboxes.tsx",
"dropdown-menu-submenu": {
name: "dropdown-menu-submenu",
filePath: "examples/radix/dropdown-menu-submenu.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/dropdown-menu-with-checkboxes")
const mod = await import("./radix/dropdown-menu-submenu")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "dropdown-menu-with-checkboxes"
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-with-destructive": {
name: "dropdown-menu-with-destructive",
filePath: "examples/radix/dropdown-menu-with-destructive.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/dropdown-menu-with-destructive")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "dropdown-menu-with-destructive"
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-with-icons": {
name: "dropdown-menu-with-icons",
filePath: "examples/radix/dropdown-menu-with-icons.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/dropdown-menu-with-icons")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "dropdown-menu-with-icons"
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-with-radio-icons": {
name: "dropdown-menu-with-radio-icons",
filePath: "examples/radix/dropdown-menu-with-radio-icons.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/dropdown-menu-with-radio-icons")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "dropdown-menu-with-radio-icons"
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-with-radio": {
name: "dropdown-menu-with-radio",
filePath: "examples/radix/dropdown-menu-with-radio.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/dropdown-menu-with-radio")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "dropdown-menu-with-radio"
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-with-shortcuts": {
name: "dropdown-menu-with-shortcuts",
filePath: "examples/radix/dropdown-menu-with-shortcuts.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/dropdown-menu-with-shortcuts")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "dropdown-menu-with-shortcuts"
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-with-submenu": {
name: "dropdown-menu-with-submenu",
filePath: "examples/radix/dropdown-menu-with-submenu.tsx",
component: React.lazy(async () => {
const mod = await import("./radix/dropdown-menu-with-submenu")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "dropdown-menu-with-submenu"
) || "dropdown-menu-submenu"
return { default: mod.default || mod[exportName] }
}),
},
@@ -8329,6 +8277,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-avatar": {
name: "dropdown-menu-avatar",
filePath: "examples/base/dropdown-menu-avatar.tsx",
component: React.lazy(async () => {
const mod = await import("./base/dropdown-menu-avatar")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "dropdown-menu-avatar"
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-basic": {
name: "dropdown-menu-basic",
filePath: "examples/base/dropdown-menu-basic.tsx",
@@ -8342,6 +8303,19 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-checkboxes-icons": {
name: "dropdown-menu-checkboxes-icons",
filePath: "examples/base/dropdown-menu-checkboxes-icons.tsx",
component: React.lazy(async () => {
const mod = await import("./base/dropdown-menu-checkboxes-icons")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "dropdown-menu-checkboxes-icons"
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-checkboxes": {
name: "dropdown-menu-checkboxes",
filePath: "examples/base/dropdown-menu-checkboxes.tsx",
@@ -8381,29 +8355,29 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-dialog": {
name: "dropdown-menu-dialog",
filePath: "examples/base/dropdown-menu-dialog.tsx",
"dropdown-menu-destructive": {
name: "dropdown-menu-destructive",
filePath: "examples/base/dropdown-menu-destructive.tsx",
component: React.lazy(async () => {
const mod = await import("./base/dropdown-menu-dialog")
const mod = await import("./base/dropdown-menu-destructive")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "dropdown-menu-dialog"
) || "dropdown-menu-destructive"
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-in-dialog": {
name: "dropdown-menu-in-dialog",
filePath: "examples/base/dropdown-menu-in-dialog.tsx",
"dropdown-menu-icons": {
name: "dropdown-menu-icons",
filePath: "examples/base/dropdown-menu-icons.tsx",
component: React.lazy(async () => {
const mod = await import("./base/dropdown-menu-in-dialog")
const mod = await import("./base/dropdown-menu-icons")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "dropdown-menu-in-dialog"
) || "dropdown-menu-icons"
return { default: mod.default || mod[exportName] }
}),
},
@@ -8420,120 +8394,42 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-with-avatar": {
name: "dropdown-menu-with-avatar",
filePath: "examples/base/dropdown-menu-with-avatar.tsx",
"dropdown-menu-radio-icons": {
name: "dropdown-menu-radio-icons",
filePath: "examples/base/dropdown-menu-radio-icons.tsx",
component: React.lazy(async () => {
const mod = await import("./base/dropdown-menu-with-avatar")
const mod = await import("./base/dropdown-menu-radio-icons")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "dropdown-menu-with-avatar"
) || "dropdown-menu-radio-icons"
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-with-checkboxes-icons": {
name: "dropdown-menu-with-checkboxes-icons",
filePath: "examples/base/dropdown-menu-with-checkboxes-icons.tsx",
"dropdown-menu-shortcuts": {
name: "dropdown-menu-shortcuts",
filePath: "examples/base/dropdown-menu-shortcuts.tsx",
component: React.lazy(async () => {
const mod = await import("./base/dropdown-menu-with-checkboxes-icons")
const mod = await import("./base/dropdown-menu-shortcuts")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "dropdown-menu-with-checkboxes-icons"
) || "dropdown-menu-shortcuts"
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-with-checkboxes": {
name: "dropdown-menu-with-checkboxes",
filePath: "examples/base/dropdown-menu-with-checkboxes.tsx",
"dropdown-menu-submenu": {
name: "dropdown-menu-submenu",
filePath: "examples/base/dropdown-menu-submenu.tsx",
component: React.lazy(async () => {
const mod = await import("./base/dropdown-menu-with-checkboxes")
const mod = await import("./base/dropdown-menu-submenu")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "dropdown-menu-with-checkboxes"
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-with-destructive": {
name: "dropdown-menu-with-destructive",
filePath: "examples/base/dropdown-menu-with-destructive.tsx",
component: React.lazy(async () => {
const mod = await import("./base/dropdown-menu-with-destructive")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "dropdown-menu-with-destructive"
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-with-icons": {
name: "dropdown-menu-with-icons",
filePath: "examples/base/dropdown-menu-with-icons.tsx",
component: React.lazy(async () => {
const mod = await import("./base/dropdown-menu-with-icons")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "dropdown-menu-with-icons"
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-with-radio-icons": {
name: "dropdown-menu-with-radio-icons",
filePath: "examples/base/dropdown-menu-with-radio-icons.tsx",
component: React.lazy(async () => {
const mod = await import("./base/dropdown-menu-with-radio-icons")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "dropdown-menu-with-radio-icons"
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-with-radio": {
name: "dropdown-menu-with-radio",
filePath: "examples/base/dropdown-menu-with-radio.tsx",
component: React.lazy(async () => {
const mod = await import("./base/dropdown-menu-with-radio")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "dropdown-menu-with-radio"
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-with-shortcuts": {
name: "dropdown-menu-with-shortcuts",
filePath: "examples/base/dropdown-menu-with-shortcuts.tsx",
component: React.lazy(async () => {
const mod = await import("./base/dropdown-menu-with-shortcuts")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "dropdown-menu-with-shortcuts"
return { default: mod.default || mod[exportName] }
}),
},
"dropdown-menu-with-submenu": {
name: "dropdown-menu-with-submenu",
filePath: "examples/base/dropdown-menu-with-submenu.tsx",
component: React.lazy(async () => {
const mod = await import("./base/dropdown-menu-with-submenu")
const exportName =
Object.keys(mod).find(
(key) =>
typeof mod[key] === "function" || typeof mod[key] === "object"
) || "dropdown-menu-with-submenu"
) || "dropdown-menu-submenu"
return { default: mod.default || mod[exportName] }
}),
},

52
apps/v4/examples/base/dropdown-menu-avatar.tsx Normal file
View File

@@ -0,0 +1,52 @@
import { Avatar, AvatarFallback, AvatarImage } from "@/examples/base/ui/avatar"
import { Button } from "@/examples/base/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/examples/base/ui/dropdown-menu"
import {
BadgeCheckIcon,
BellIcon,
CreditCardIcon,
LogOutIcon,
} from "lucide-react"
export function DropdownMenuAvatar() {
return (
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant="ghost" size="icon" className="rounded-full" />}
>
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="shadcn" />
<AvatarFallback>LR</AvatarFallback>
</Avatar>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuGroup>
<DropdownMenuItem>
<BadgeCheckIcon />
Account
</DropdownMenuItem>
<DropdownMenuItem>
<CreditCardIcon />
Billing
</DropdownMenuItem>
<DropdownMenuItem>
<BellIcon />
Notifications
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem>
<LogOutIcon />
Sign Out
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}

40
apps/v4/examples/base/dropdown-menu-basic.tsx
View File

@@ -11,26 +11,24 @@ import {
export function DropdownMenuBasic() {
return (
<>
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant="outline" className="w-fit" />}
>
Open
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuGroup>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Billing</DropdownMenuItem>
<DropdownMenuItem>Settings</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem>GitHub</DropdownMenuItem>
<DropdownMenuItem>Support</DropdownMenuItem>
<DropdownMenuItem disabled>API</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</>
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant="outline" />}
>
Open
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuGroup>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Billing</DropdownMenuItem>
<DropdownMenuItem>Settings</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem>GitHub</DropdownMenuItem>
<DropdownMenuItem>Support</DropdownMenuItem>
<DropdownMenuItem disabled>API</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}

63
apps/v4/examples/base/dropdown-menu-checkboxes-icons.tsx Normal file
View File

@@ -0,0 +1,63 @@
"use client"
import * as React from "react"
import { Button } from "@/examples/base/ui/button"
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuLabel,
DropdownMenuTrigger,
} from "@/examples/base/ui/dropdown-menu"
import { BellIcon, MailIcon, MessageSquareIcon } from "lucide-react"
export function DropdownMenuCheckboxesIcons() {
const [notifications, setNotifications] = React.useState({
email: true,
sms: false,
push: true,
})
return (
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant="outline" />}
>
Notifications
</DropdownMenuTrigger>
<DropdownMenuContent className="w-48">
<DropdownMenuGroup>
<DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>
<DropdownMenuCheckboxItem
checked={notifications.email}
onCheckedChange={(checked) =>
setNotifications({ ...notifications, email: checked === true })
}
>
<MailIcon />
Email notifications
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={notifications.sms}
onCheckedChange={(checked) =>
setNotifications({ ...notifications, sms: checked === true })
}
>
<MessageSquareIcon />
SMS notifications
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={notifications.push}
onCheckedChange={(checked) =>
setNotifications({ ...notifications, push: checked === true })
}
>
<BellIcon />
Push notifications
</DropdownMenuCheckboxItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
)
}

2
apps/v4/examples/base/dropdown-menu-checkboxes.tsx
View File

@@ -21,7 +21,7 @@ export function DropdownMenuCheckboxes() {
<DropdownMenuTrigger render={<Button variant="outline" />}>
Open
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
<DropdownMenuContent className="w-40">
<DropdownMenuGroup>
<DropdownMenuLabel>Appearance</DropdownMenuLabel>
<DropdownMenuCheckboxItem

460
apps/v4/examples/base/dropdown-menu-complex.tsx
View File

@@ -56,237 +56,235 @@ export function DropdownMenuComplex() {
const [theme, setTheme] = React.useState("light")
return (
<>
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant="outline" className="w-fit" />}
>
Complex Menu
</DropdownMenuTrigger>
<DropdownMenuContent className="style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48">
<DropdownMenuGroup>
<DropdownMenuLabel>File</DropdownMenuLabel>
<DropdownMenuItem>
<FileIcon />
New File
<DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<FolderIcon />
New Folder
<DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<FolderOpenIcon />
Open Recent
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuGroup>
<DropdownMenuLabel>Recent Projects</DropdownMenuLabel>
<DropdownMenuItem>
<FileCodeIcon />
Project Alpha
</DropdownMenuItem>
<DropdownMenuItem>
<FileCodeIcon />
Project Beta
</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<MoreHorizontalIcon />
More Projects
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuItem>
<FileCodeIcon />
Project Gamma
</DropdownMenuItem>
<DropdownMenuItem>
<FileCodeIcon />
Project Delta
</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<FolderSearchIcon />
Browse...
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<DropdownMenuSeparator />
<DropdownMenuItem>
<SaveIcon />
Save
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<DownloadIcon />
Export
<DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant="outline" />}
>
Complex Menu
</DropdownMenuTrigger>
<DropdownMenuContent className="w-44">
<DropdownMenuGroup>
<DropdownMenuLabel>File</DropdownMenuLabel>
<DropdownMenuItem>
<FileIcon />
New File
<DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<FolderIcon />
New Folder
<DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<FolderOpenIcon />
Open Recent
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuGroup>
<DropdownMenuLabel>Recent Projects</DropdownMenuLabel>
<DropdownMenuItem>
<FileCodeIcon />
Project Alpha
</DropdownMenuItem>
<DropdownMenuItem>
<FileCodeIcon />
Project Beta
</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<MoreHorizontalIcon />
More Projects
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuItem>
<FileCodeIcon />
Project Gamma
</DropdownMenuItem>
<DropdownMenuItem>
<FileCodeIcon />
Project Delta
</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<FolderSearchIcon />
Browse...
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuLabel>View</DropdownMenuLabel>
<DropdownMenuCheckboxItem
checked={notifications.email}
onCheckedChange={(checked) =>
setNotifications({ ...notifications, email: checked === true })
}
>
<EyeIcon />
Show Sidebar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={notifications.sms}
onCheckedChange={(checked) =>
setNotifications({ ...notifications, sms: checked === true })
}
>
<LayoutIcon />
Show Status Bar
</DropdownMenuCheckboxItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<PaletteIcon />
Theme
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuGroup>
<DropdownMenuLabel>Appearance</DropdownMenuLabel>
<DropdownMenuRadioGroup
value={theme}
onValueChange={setTheme}
>
<DropdownMenuRadioItem value="light">
<SunIcon />
Light
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="dark">
<MoonIcon />
Dark
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="system">
<MonitorIcon />
System
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuGroup>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuLabel>Account</DropdownMenuLabel>
<DropdownMenuItem>
<UserIcon />
Profile
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<CreditCardIcon />
Billing
</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<SettingsIcon />
Settings
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuGroup>
<DropdownMenuLabel>Preferences</DropdownMenuLabel>
<DropdownMenuItem>
<KeyboardIcon />
Keyboard Shortcuts
</DropdownMenuItem>
<DropdownMenuItem>
<LanguagesIcon />
Language
</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<BellIcon />
Notifications
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuGroup>
<DropdownMenuLabel>
Notification Types
</DropdownMenuLabel>
<DropdownMenuCheckboxItem
checked={notifications.push}
onCheckedChange={(checked) =>
setNotifications({
...notifications,
push: checked === true,
})
}
>
<BellIcon />
Push Notifications
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={notifications.email}
onCheckedChange={(checked) =>
setNotifications({
...notifications,
email: checked === true,
})
}
>
<MailIcon />
Email Notifications
</DropdownMenuCheckboxItem>
</DropdownMenuGroup>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<ShieldIcon />
Privacy & Security
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<HelpCircleIcon />
Help & Support
</DropdownMenuItem>
<DropdownMenuItem>
<FileTextIcon />
Documentation
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem variant="destructive">
<LogOutIcon />
Sign Out
<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</>
<DropdownMenuItem>
<SaveIcon />
Save
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<DownloadIcon />
Export
<DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuLabel>View</DropdownMenuLabel>
<DropdownMenuCheckboxItem
checked={notifications.email}
onCheckedChange={(checked) =>
setNotifications({ ...notifications, email: checked === true })
}
>
<EyeIcon />
Show Sidebar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={notifications.sms}
onCheckedChange={(checked) =>
setNotifications({ ...notifications, sms: checked === true })
}
>
<LayoutIcon />
Show Status Bar
</DropdownMenuCheckboxItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<PaletteIcon />
Theme
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuGroup>
<DropdownMenuLabel>Appearance</DropdownMenuLabel>
<DropdownMenuRadioGroup
value={theme}
onValueChange={setTheme}
>
<DropdownMenuRadioItem value="light">
<SunIcon />
Light
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="dark">
<MoonIcon />
Dark
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="system">
<MonitorIcon />
System
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuGroup>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuLabel>Account</DropdownMenuLabel>
<DropdownMenuItem>
<UserIcon />
Profile
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
<CreditCardIcon />
Billing
</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<SettingsIcon />
Settings
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuGroup>
<DropdownMenuLabel>Preferences</DropdownMenuLabel>
<DropdownMenuItem>
<KeyboardIcon />
Keyboard Shortcuts
</DropdownMenuItem>
<DropdownMenuItem>
<LanguagesIcon />
Language
</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>
<BellIcon />
Notifications
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuGroup>
<DropdownMenuLabel>
Notification Types
</DropdownMenuLabel>
<DropdownMenuCheckboxItem
checked={notifications.push}
onCheckedChange={(checked) =>
setNotifications({
...notifications,
push: checked === true,
})
}
>
<BellIcon />
Push Notifications
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={notifications.email}
onCheckedChange={(checked) =>
setNotifications({
...notifications,
email: checked === true,
})
}
>
<MailIcon />
Email Notifications
</DropdownMenuCheckboxItem>
</DropdownMenuGroup>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<ShieldIcon />
Privacy & Security
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<HelpCircleIcon />
Help & Support
</DropdownMenuItem>
<DropdownMenuItem>
<FileTextIcon />
Documentation
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem variant="destructive">
<LogOutIcon />
Sign Out
<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
)
}

6
apps/v4/examples/base/dropdown-menu-demo.tsx
View File

@@ -20,7 +20,7 @@ export function DropdownMenuDemo() {
<DropdownMenuTrigger render={<Button variant="outline" />}>
Open
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56" align="start">
<DropdownMenuContent className="w-40" align="start">
<DropdownMenuGroup>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuItem>
@@ -35,10 +35,6 @@ export function DropdownMenuDemo() {
Settings
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
Keyboard shortcuts
<DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>

35
apps/v4/examples/base/dropdown-menu-with-destructive.tsx → apps/v4/examples/base/dropdown-menu-destructive.tsx
View File

@@ -2,22 +2,23 @@ import { Button } from "@/examples/base/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/examples/base/ui/dropdown-menu"
import { ArchiveIcon, PencilIcon, ShareIcon, TrashIcon } from "lucide-react"
import { PencilIcon, ShareIcon, TrashIcon } from "lucide-react"
export function DropdownMenuWithDestructive() {
export function DropdownMenuDestructive() {
return (
<>
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant="outline" className="w-fit" />}
>
Actions
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant="outline" />}
>
Actions
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuGroup>
<DropdownMenuItem>
<PencilIcon />
Edit
@@ -26,17 +27,15 @@ export function DropdownMenuWithDestructive() {
<ShareIcon />
Share
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
<ArchiveIcon />
Archive
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem variant="destructive">
<TrashIcon />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
)
}

116
apps/v4/examples/base/dropdown-menu-dialog.tsx
View File

@@ -1,116 +0,0 @@
"use client"
import { useState } from "react"
import { Button } from "@/examples/base/ui/button"
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/examples/base/ui/dialog"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuTrigger,
} from "@/examples/base/ui/dropdown-menu"
import { Field, FieldGroup, FieldLabel } from "@/examples/base/ui/field"
import { Input } from "@/examples/base/ui/input"
import { Label } from "@/examples/base/ui/label"
import { Textarea } from "@/examples/base/ui/textarea"
import { MoreHorizontalIcon } from "lucide-react"
export function DropdownMenuDialog() {
const [showNewDialog, setShowNewDialog] = useState(false)
const [showShareDialog, setShowShareDialog] = useState(false)
return (
<>
<DropdownMenu modal={false}>
<DropdownMenuTrigger
render={
<Button variant="outline" aria-label="Open menu" size="icon-sm" />
}
>
<MoreHorizontalIcon />
</DropdownMenuTrigger>
<DropdownMenuContent className="w-40" align="end">
<DropdownMenuGroup>
<DropdownMenuLabel>File Actions</DropdownMenuLabel>
<DropdownMenuItem onSelect={() => setShowNewDialog(true)}>
New File...
</DropdownMenuItem>
<DropdownMenuItem onSelect={() => setShowShareDialog(true)}>
Share...
</DropdownMenuItem>
<DropdownMenuItem disabled>Download</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
<Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Create New File</DialogTitle>
<DialogDescription>
Provide a name for your new file. Click create when you&apos;re
done.
</DialogDescription>
</DialogHeader>
<FieldGroup className="pb-3">
<Field>
<FieldLabel htmlFor="filename">File Name</FieldLabel>
<Input id="filename" name="filename" placeholder="document.txt" />
</Field>
</FieldGroup>
<DialogFooter>
<DialogClose render={<Button variant="outline" />}>
Cancel
</DialogClose>
<Button type="submit">Create</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Share File</DialogTitle>
<DialogDescription>
Anyone with the link will be able to view this file.
</DialogDescription>
</DialogHeader>
<FieldGroup className="py-3">
<Field>
<Label htmlFor="email">Email Address</Label>
<Input
id="email"
name="email"
type="email"
placeholder="shadcn@vercel.com"
autoComplete="off"
/>
</Field>
<Field>
<FieldLabel htmlFor="message">Message (Optional)</FieldLabel>
<Textarea
id="message"
name="message"
placeholder="Check out this file"
/>
</Field>
</FieldGroup>
<DialogFooter>
<DialogClose render={<Button variant="outline" />}>
Cancel
</DialogClose>
<Button type="submit">Send Invite</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</>
)
}

45
apps/v4/examples/base/dropdown-menu-icons.tsx Normal file
View File

@@ -0,0 +1,45 @@
import { Button } from "@/examples/base/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/examples/base/ui/dropdown-menu"
import {
CreditCardIcon,
LogOutIcon,
SettingsIcon,
UserIcon,
} from "lucide-react"
export function DropdownMenuIcons() {
return (
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant="outline" />}
>
Open
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<UserIcon />
Profile
</DropdownMenuItem>
<DropdownMenuItem>
<CreditCardIcon />
Billing
</DropdownMenuItem>
<DropdownMenuItem>
<SettingsIcon />
Settings
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem variant="destructive">
<LogOutIcon />
Log out
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}

85
apps/v4/examples/base/dropdown-menu-in-dialog.tsx
View File

@@ -1,85 +0,0 @@
import { Button } from "@/examples/base/ui/button"
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/examples/base/ui/dialog"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuPortal,
DropdownMenuSeparator,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@/examples/base/ui/dropdown-menu"
import {
ClipboardPasteIcon,
CopyIcon,
ScissorsIcon,
TrashIcon,
} from "lucide-react"
export function DropdownMenuInDialog() {
return (
<>
<Dialog>
<DialogTrigger render={<Button variant="outline" />}>
Open Dialog
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Dropdown Menu Example</DialogTitle>
<DialogDescription>
Click the button below to see the dropdown menu.
</DialogDescription>
</DialogHeader>
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant="outline" className="w-fit" />}
>
Open Menu
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<CopyIcon />
Copy
</DropdownMenuItem>
<DropdownMenuItem>
<ScissorsIcon />
Cut
</DropdownMenuItem>
<DropdownMenuItem>
<ClipboardPasteIcon />
Paste
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuSub>
<DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuItem>Save Page...</DropdownMenuItem>
<DropdownMenuItem>Create Shortcut...</DropdownMenuItem>
<DropdownMenuItem>Name Window...</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>Developer Tools</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<DropdownMenuSeparator />
<DropdownMenuItem variant="destructive">
<TrashIcon />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</DialogContent>
</Dialog>
</>
)
}

2
apps/v4/examples/base/dropdown-menu-radio-group.tsx
View File

@@ -20,7 +20,7 @@ export function DropdownMenuRadioGroupDemo() {
<DropdownMenuTrigger render={<Button variant="outline" />}>
Open
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
<DropdownMenuContent className="w-32">
<DropdownMenuGroup>
<DropdownMenuLabel>Panel Position</DropdownMenuLabel>
<DropdownMenuRadioGroup value={position} onValueChange={setPosition}>

50
apps/v4/examples/base/dropdown-menu-radio-icons.tsx Normal file
View File

@@ -0,0 +1,50 @@
"use client"
import * as React from "react"
import { Button } from "@/examples/base/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuLabel,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuTrigger,
} from "@/examples/base/ui/dropdown-menu"
import { Building2Icon, CreditCardIcon, WalletIcon } from "lucide-react"
export function DropdownMenuRadioIcons() {
const [paymentMethod, setPaymentMethod] = React.useState("card")
return (
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant="outline" />}
>
Payment Method
</DropdownMenuTrigger>
<DropdownMenuContent className="min-w-56">
<DropdownMenuGroup>
<DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>
<DropdownMenuRadioGroup
value={paymentMethod}
onValueChange={setPaymentMethod}
>
<DropdownMenuRadioItem value="card">
<CreditCardIcon />
Credit Card
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="paypal">
<WalletIcon />
PayPal
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="bank">
<Building2Icon />
Bank Transfer
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
)
}

45
apps/v4/examples/base/dropdown-menu-shortcuts.tsx Normal file
View File

@@ -0,0 +1,45 @@
import { Button } from "@/examples/base/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuTrigger,
} from "@/examples/base/ui/dropdown-menu"
export function DropdownMenuShortcuts() {
return (
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant="outline" />}
>
Open
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuGroup>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuItem>
Profile
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
Billing
<DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
Settings
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem>
Log out
<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}

57
apps/v4/examples/base/dropdown-menu-submenu.tsx Normal file
View File

@@ -0,0 +1,57 @@
import { Button } from "@/examples/base/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuPortal,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@/examples/base/ui/dropdown-menu"
export function DropdownMenuSubmenu() {
return (
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant="outline" />}
>
Open
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuGroup>
<DropdownMenuItem>Team</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuItem>Email</DropdownMenuItem>
<DropdownMenuItem>Message</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>More options</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuItem>Calendly</DropdownMenuItem>
<DropdownMenuItem>Slack</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>Webhook</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<DropdownMenuSeparator />
<DropdownMenuItem>Advanced...</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<DropdownMenuItem>
New Team
<DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
)
}

90
apps/v4/examples/base/dropdown-menu-with-avatar.tsx
View File

@@ -1,90 +0,0 @@
import { Avatar, AvatarFallback, AvatarImage } from "@/examples/base/ui/avatar"
import { Button } from "@/examples/base/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/examples/base/ui/dropdown-menu"
import {
BadgeCheckIcon,
BellIcon,
ChevronsUpDownIcon,
CreditCardIcon,
LogOutIcon,
} from "lucide-react"
export function DropdownMenuWithAvatar() {
const menuContent = (
<>
<DropdownMenuGroup>
<DropdownMenuItem>
<BadgeCheckIcon />
Account
</DropdownMenuItem>
<DropdownMenuItem>
<CreditCardIcon />
Billing
</DropdownMenuItem>
<DropdownMenuItem>
<BellIcon />
Notifications
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem>
<LogOutIcon />
Sign Out
</DropdownMenuItem>
</>
)
return (
<>
<div className="flex items-center justify-between gap-4">
<DropdownMenu>
<DropdownMenuTrigger
render={
<Button
variant="outline"
className="h-12 justify-start px-2 md:max-w-[200px]"
/>
}
>
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="Shadcn" />
<AvatarFallback className="rounded-lg">CN</AvatarFallback>
</Avatar>
<div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-semibold">shadcn</span>
<span className="text-muted-foreground truncate text-xs">
shadcn@example.com
</span>
</div>
<ChevronsUpDownIcon className="text-muted-foreground ml-auto" />
</DropdownMenuTrigger>
<DropdownMenuContent className="w-(--anchor-width) min-w-56">
{menuContent}
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu>
<DropdownMenuTrigger
render={
<Button variant="ghost" size="icon" className="rounded-full" />
}
>
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="shadcn" />
<AvatarFallback>LR</AvatarFallback>
</Avatar>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" side="top">
{menuContent}
</DropdownMenuContent>
</DropdownMenu>
</div>
</>
)
}

65
apps/v4/examples/base/dropdown-menu-with-checkboxes-icons.tsx
View File

@@ -1,65 +0,0 @@
"use client"
import * as React from "react"
import { Button } from "@/examples/base/ui/button"
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuLabel,
DropdownMenuTrigger,
} from "@/examples/base/ui/dropdown-menu"
import { BellIcon, MailIcon, MessageSquareIcon } from "lucide-react"
export function DropdownMenuWithCheckboxesIcons() {
const [notifications, setNotifications] = React.useState({
email: true,
sms: false,
push: true,
})
return (
<>
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant="outline" className="w-fit" />}
>
Notifications
</DropdownMenuTrigger>
<DropdownMenuContent className="min-w-56">
<DropdownMenuGroup>
<DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>
<DropdownMenuCheckboxItem
checked={notifications.email}
onCheckedChange={(checked) =>
setNotifications({ ...notifications, email: checked === true })
}
>
<MailIcon />
Email notifications
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={notifications.sms}
onCheckedChange={(checked) =>
setNotifications({ ...notifications, sms: checked === true })
}
>
<MessageSquareIcon />
SMS notifications
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={notifications.push}
onCheckedChange={(checked) =>
setNotifications({ ...notifications, push: checked === true })
}
>
<BellIcon />
Push notifications
</DropdownMenuCheckboxItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</>
)
}

58
apps/v4/examples/base/dropdown-menu-with-checkboxes.tsx
View File

@@ -1,58 +0,0 @@
"use client"
import * as React from "react"
import { Button } from "@/examples/base/ui/button"
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuLabel,
DropdownMenuTrigger,
} from "@/examples/base/ui/dropdown-menu"
import { ActivityIcon, LayoutIcon, PanelLeftIcon } from "lucide-react"
export function DropdownMenuWithCheckboxes() {
const [showStatusBar, setShowStatusBar] = React.useState(true)
const [showActivityBar, setShowActivityBar] = React.useState(false)
const [showPanel, setShowPanel] = React.useState(false)
return (
<>
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant="outline" className="w-fit" />}
>
Checkboxes
</DropdownMenuTrigger>
<DropdownMenuContent className="min-w-40">
<DropdownMenuGroup>
<DropdownMenuLabel>Appearance</DropdownMenuLabel>
<DropdownMenuCheckboxItem
checked={showStatusBar}
onCheckedChange={setShowStatusBar}
>
<LayoutIcon />
Status Bar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={showActivityBar}
onCheckedChange={setShowActivityBar}
disabled
>
<ActivityIcon />
Activity Bar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={showPanel}
onCheckedChange={setShowPanel}
>
<PanelLeftIcon />
Panel
</DropdownMenuCheckboxItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</>
)
}

47
apps/v4/examples/base/dropdown-menu-with-icons.tsx
View File

@@ -1,47 +0,0 @@
import { Button } from "@/examples/base/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/examples/base/ui/dropdown-menu"
import {
CreditCardIcon,
LogOutIcon,
SettingsIcon,
UserIcon,
} from "lucide-react"
export function DropdownMenuWithIcons() {
return (
<>
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant="outline" className="w-fit" />}
>
Open
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<UserIcon />
Profile
</DropdownMenuItem>
<DropdownMenuItem>
<CreditCardIcon />
Billing
</DropdownMenuItem>
<DropdownMenuItem>
<SettingsIcon />
Settings
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem variant="destructive">
<LogOutIcon />
Log out
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</>
)
}

52
apps/v4/examples/base/dropdown-menu-with-radio-icons.tsx
View File

@@ -1,52 +0,0 @@
"use client"
import * as React from "react"
import { Button } from "@/examples/base/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuLabel,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuTrigger,
} from "@/examples/base/ui/dropdown-menu"
import { Building2Icon, CreditCardIcon, WalletIcon } from "lucide-react"
export function DropdownMenuWithRadioIcons() {
const [paymentMethod, setPaymentMethod] = React.useState("card")
return (
<>
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant="outline" className="w-fit" />}
>
Payment Method
</DropdownMenuTrigger>
<DropdownMenuContent className="min-w-56">
<DropdownMenuGroup>
<DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>
<DropdownMenuRadioGroup
value={paymentMethod}
onValueChange={setPaymentMethod}
>
<DropdownMenuRadioItem value="card">
<CreditCardIcon />
Credit Card
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="paypal">
<WalletIcon />
PayPal
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="bank">
<Building2Icon />
Bank Transfer
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</>
)
}

52
apps/v4/examples/base/dropdown-menu-with-radio.tsx
View File

@@ -1,52 +0,0 @@
"use client"
import * as React from "react"
import { Button } from "@/examples/base/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuLabel,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuTrigger,
} from "@/examples/base/ui/dropdown-menu"
import { ArrowDownIcon, ArrowRightIcon, ArrowUpIcon } from "lucide-react"
export function DropdownMenuWithRadio() {
const [position, setPosition] = React.useState("bottom")
return (
<>
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant="outline" className="w-fit" />}
>
Radio Group
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuGroup>
<DropdownMenuLabel>Panel Position</DropdownMenuLabel>
<DropdownMenuRadioGroup
value={position}
onValueChange={setPosition}
>
<DropdownMenuRadioItem value="top">
<ArrowUpIcon />
Top
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="bottom">
<ArrowDownIcon />
Bottom
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="right" disabled>
<ArrowRightIcon />
Right
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</>
)
}

51
apps/v4/examples/base/dropdown-menu-with-shortcuts.tsx
View File

@@ -1,51 +0,0 @@
import { Button } from "@/examples/base/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuTrigger,
} from "@/examples/base/ui/dropdown-menu"
export function DropdownMenuWithShortcuts() {
return (
<>
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant="outline" className="w-fit" />}
>
Open
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuGroup>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuItem>
Profile
<DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
Billing
<DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
Settings
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
Keyboard shortcuts
<DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuItem>
Log out
<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</>
)
}

48
apps/v4/examples/base/dropdown-menu-with-submenu.tsx
View File

@@ -1,48 +0,0 @@
import { Button } from "@/examples/base/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuPortal,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@/examples/base/ui/dropdown-menu"
export function DropdownMenuWithSubmenu() {
return (
<>
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant="outline" className="w-fit" />}
>
Open
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuGroup>
<DropdownMenuItem>Team</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuItem>Email</DropdownMenuItem>
<DropdownMenuItem>Message</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>More...</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<DropdownMenuItem>
New Team
<DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</>
)
}

2
apps/v4/examples/base/ui/dropdown-menu.tsx
View File

@@ -116,7 +116,7 @@ function DropdownMenuSubTrigger({
data-slot="dropdown-menu-sub-trigger"
data-inset={inset}
className={cn(
"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}

34
apps/v4/examples/radix/dropdown-menu-with-icons.tsx → apps/v4/examples/radix/dropdown-menu-avatar.tsx
View File

@@ -1,3 +1,4 @@
import { Avatar, AvatarFallback, AvatarImage } from "@/examples/radix/ui/avatar"
import { Button } from "@/examples/radix/ui/button"
import {
DropdownMenu,
@@ -8,42 +9,43 @@ import {
DropdownMenuTrigger,
} from "@/examples/radix/ui/dropdown-menu"
import {
BadgeCheckIcon,
BellIcon,
CreditCardIcon,
LogOutIcon,
SettingsIcon,
UserIcon,
} from "lucide-react"
export function DropdownMenuWithIcons() {
export function DropdownMenuAvatar() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="w-fit">
Open
<Button variant="ghost" size="icon" className="rounded-full">
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="shadcn" />
<AvatarFallback>LR</AvatarFallback>
</Avatar>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuContent align="end">
<DropdownMenuGroup>
<DropdownMenuItem>
<UserIcon />
Profile
<BadgeCheckIcon />
Account
</DropdownMenuItem>
<DropdownMenuItem>
<CreditCardIcon />
Billing
</DropdownMenuItem>
<DropdownMenuItem>
<SettingsIcon />
Settings
<BellIcon />
Notifications
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem variant="destructive">
<LogOutIcon />
Log out
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuItem>
<LogOutIcon />
Sign Out
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)

10
apps/v4/examples/radix/dropdown-menu-basic.tsx
View File

@@ -13,7 +13,7 @@ export function DropdownMenuBasic() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="w-fit">
<Button variant="outline">
Open
</Button>
</DropdownMenuTrigger>
@@ -25,11 +25,9 @@ export function DropdownMenuBasic() {
<DropdownMenuItem>Settings</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>GitHub</DropdownMenuItem>
<DropdownMenuItem>Support</DropdownMenuItem>
<DropdownMenuItem disabled>API</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuItem>GitHub</DropdownMenuItem>
<DropdownMenuItem>Support</DropdownMenuItem>
<DropdownMenuItem disabled>API</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)

6
apps/v4/examples/radix/dropdown-menu-with-checkboxes-icons.tsx → apps/v4/examples/radix/dropdown-menu-checkboxes-icons.tsx
View File

@@ -12,7 +12,7 @@ import {
} from "@/examples/radix/ui/dropdown-menu"
import { BellIcon, MailIcon, MessageSquareIcon } from "lucide-react"
export function DropdownMenuWithCheckboxesIcons() {
export function DropdownMenuCheckboxesIcons() {
const [notifications, setNotifications] = React.useState({
email: true,
sms: false,
@@ -22,11 +22,11 @@ export function DropdownMenuWithCheckboxesIcons() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="w-fit">
<Button variant="outline">
Notifications
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="min-w-56">
<DropdownMenuContent className="w-48">
<DropdownMenuGroup>
<DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>
<DropdownMenuCheckboxItem

13
apps/v4/examples/radix/dropdown-menu-checkboxes.tsx
View File

@@ -10,25 +10,22 @@ import {
DropdownMenuLabel,
DropdownMenuTrigger,
} from "@/examples/radix/ui/dropdown-menu"
import { type DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu"
type Checked = DropdownMenuCheckboxItemProps["checked"]
export function DropdownMenuCheckboxes() {
const [showStatusBar, setShowStatusBar] = React.useState<Checked>(true)
const [showActivityBar, setShowActivityBar] = React.useState<Checked>(false)
const [showPanel, setShowPanel] = React.useState<Checked>(false)
const [showStatusBar, setShowStatusBar] = React.useState(true)
const [showActivityBar, setShowActivityBar] = React.useState(false)
const [showPanel, setShowPanel] = React.useState(false)
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">Open</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
<DropdownMenuContent className="w-40">
<DropdownMenuGroup>
<DropdownMenuLabel>Appearance</DropdownMenuLabel>
<DropdownMenuCheckboxItem
checked={showStatusBar}
checked={showStatusBar ?? false}
onCheckedChange={setShowStatusBar}
>
Status Bar

4
apps/v4/examples/radix/dropdown-menu-complex.tsx
View File

@@ -58,11 +58,11 @@ export function DropdownMenuComplex() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="w-fit">
<Button variant="outline">
Complex Menu
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48">
<DropdownMenuContent className="w-44">
<DropdownMenuGroup>
<DropdownMenuLabel>File</DropdownMenuLabel>
<DropdownMenuItem>

21
apps/v4/examples/radix/dropdown-menu-demo.tsx
View File

@@ -6,6 +6,7 @@ import {
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuPortal,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuSub,
DropdownMenuSubContent,
@@ -19,7 +20,7 @@ export function DropdownMenuDemo() {
<DropdownMenuTrigger asChild>
<Button variant="outline">Open</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56" align="start">
<DropdownMenuContent className="w-40" align="start">
<DropdownMenuGroup>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuItem>
@@ -34,24 +35,18 @@ export function DropdownMenuDemo() {
Settings
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
Keyboard shortcuts
<DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>Team</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuGroup>
<DropdownMenuItem>Email</DropdownMenuItem>
<DropdownMenuItem>Message</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuGroup>
<DropdownMenuItem>More...</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuItem>Email</DropdownMenuItem>
<DropdownMenuItem>Message</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>More...</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
@@ -60,11 +55,13 @@ export function DropdownMenuDemo() {
<DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>GitHub</DropdownMenuItem>
<DropdownMenuItem>Support</DropdownMenuItem>
<DropdownMenuItem disabled>API</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
Log out

10
apps/v4/examples/radix/dropdown-menu-with-destructive.tsx → apps/v4/examples/radix/dropdown-menu-destructive.tsx
View File

@@ -7,13 +7,13 @@ import {
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/examples/radix/ui/dropdown-menu"
import { ArchiveIcon, PencilIcon, ShareIcon, TrashIcon } from "lucide-react"
import { PencilIcon, ShareIcon, TrashIcon } from "lucide-react"
export function DropdownMenuWithDestructive() {
export function DropdownMenuDestructive() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="w-fit">
<Button variant="outline">
Actions
</Button>
</DropdownMenuTrigger>
@@ -30,10 +30,6 @@ export function DropdownMenuWithDestructive() {
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<ArchiveIcon />
Archive
</DropdownMenuItem>
<DropdownMenuItem variant="destructive">
<TrashIcon />
Delete

114
apps/v4/examples/radix/dropdown-menu-dialog.tsx
View File

@@ -1,114 +0,0 @@
"use client"
import { useState } from "react"
import { Button } from "@/examples/radix/ui/button"
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from "@/examples/radix/ui/dialog"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuTrigger,
} from "@/examples/radix/ui/dropdown-menu"
import { Field, FieldGroup, FieldLabel } from "@/examples/radix/ui/field"
import { Input } from "@/examples/radix/ui/input"
import { Label } from "@/examples/radix/ui/label"
import { Textarea } from "@/examples/radix/ui/textarea"
import { MoreHorizontalIcon } from "lucide-react"
export function DropdownMenuDialog() {
const [showNewDialog, setShowNewDialog] = useState(false)
const [showShareDialog, setShowShareDialog] = useState(false)
return (
<>
<DropdownMenu modal={false}>
<DropdownMenuTrigger asChild>
<Button variant="outline" aria-label="Open menu" size="icon-sm">
<MoreHorizontalIcon />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-40" align="end">
<DropdownMenuGroup>
<DropdownMenuLabel>File Actions</DropdownMenuLabel>
<DropdownMenuItem onSelect={() => setShowNewDialog(true)}>
New File...
</DropdownMenuItem>
<DropdownMenuItem onSelect={() => setShowShareDialog(true)}>
Share...
</DropdownMenuItem>
<DropdownMenuItem disabled>Download</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
<Dialog open={showNewDialog} onOpenChange={setShowNewDialog}>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Create New File</DialogTitle>
<DialogDescription>
Provide a name for your new file. Click create when you&apos;re
done.
</DialogDescription>
</DialogHeader>
<FieldGroup className="pb-3">
<Field>
<FieldLabel htmlFor="filename">File Name</FieldLabel>
<Input id="filename" name="filename" placeholder="document.txt" />
</Field>
</FieldGroup>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button type="submit">Create</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<Dialog open={showShareDialog} onOpenChange={setShowShareDialog}>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>Share File</DialogTitle>
<DialogDescription>
Anyone with the link will be able to view this file.
</DialogDescription>
</DialogHeader>
<FieldGroup className="py-3">
<Field>
<Label htmlFor="email">Email Address</Label>
<Input
id="email"
name="email"
type="email"
placeholder="shadcn@vercel.com"
autoComplete="off"
/>
</Field>
<Field>
<FieldLabel htmlFor="message">Message (Optional)</FieldLabel>
<Textarea
id="message"
name="message"
placeholder="Check out this file"
/>
</Field>
</FieldGroup>
<DialogFooter>
<DialogClose asChild>
<Button variant="outline">Cancel</Button>
</DialogClose>
<Button type="submit">Send Invite</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</>
)
}

45
apps/v4/examples/radix/dropdown-menu-icons.tsx Normal file
View File

@@ -0,0 +1,45 @@
import { Button } from "@/examples/radix/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/examples/radix/ui/dropdown-menu"
import {
CreditCardIcon,
LogOutIcon,
SettingsIcon,
UserIcon,
} from "lucide-react"
export function DropdownMenuIcons() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">
Open
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<UserIcon />
Profile
</DropdownMenuItem>
<DropdownMenuItem>
<CreditCardIcon />
Billing
</DropdownMenuItem>
<DropdownMenuItem>
<SettingsIcon />
Settings
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem variant="destructive">
<LogOutIcon />
Log out
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}

92
apps/v4/examples/radix/dropdown-menu-in-dialog.tsx
View File

@@ -1,92 +0,0 @@
import { Button } from "@/examples/radix/ui/button"
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/examples/radix/ui/dialog"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuPortal,
DropdownMenuSeparator,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuTrigger,
} from "@/examples/radix/ui/dropdown-menu"
import {
ClipboardPasteIcon,
CopyIcon,
ScissorsIcon,
TrashIcon,
} from "lucide-react"
export function DropdownMenuInDialog() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="outline">Open Dialog</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Dropdown Menu Example</DialogTitle>
<DialogDescription>
Click the button below to see the dropdown menu.
</DialogDescription>
</DialogHeader>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="w-fit">
Open Menu
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuGroup>
<DropdownMenuItem>
<CopyIcon />
Copy
</DropdownMenuItem>
<DropdownMenuItem>
<ScissorsIcon />
Cut
</DropdownMenuItem>
<DropdownMenuItem>
<ClipboardPasteIcon />
Paste
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuSub>
<DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuGroup>
<DropdownMenuItem>Save Page...</DropdownMenuItem>
<DropdownMenuItem>Create Shortcut...</DropdownMenuItem>
<DropdownMenuItem>Name Window...</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>Developer Tools</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem variant="destructive">
<TrashIcon />
Delete
</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</DialogContent>
</Dialog>
)
}

2
apps/v4/examples/radix/dropdown-menu-radio-group.tsx
View File

@@ -20,7 +20,7 @@ export function DropdownMenuRadioGroupDemo() {
<DropdownMenuTrigger asChild>
<Button variant="outline">Open</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
<DropdownMenuContent className="w-32">
<DropdownMenuGroup>
<DropdownMenuLabel>Panel Position</DropdownMenuLabel>
<DropdownMenuRadioGroup value={position} onValueChange={setPosition}>

6
apps/v4/examples/radix/dropdown-menu-with-radio-icons.tsx → apps/v4/examples/radix/dropdown-menu-radio-icons.tsx
View File

@@ -13,13 +13,15 @@ import {
} from "@/examples/radix/ui/dropdown-menu"
import { Building2Icon, CreditCardIcon, WalletIcon } from "lucide-react"
export function DropdownMenuWithRadioIcons() {
export function DropdownMenuRadioIcons() {
const [paymentMethod, setPaymentMethod] = React.useState("card")
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">Payment Method</Button>
<Button variant="outline">
Payment Method
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="min-w-56">
<DropdownMenuGroup>

18
apps/v4/examples/radix/dropdown-menu-with-shortcuts.tsx → apps/v4/examples/radix/dropdown-menu-shortcuts.tsx
View File

@@ -10,11 +10,11 @@ import {
DropdownMenuTrigger,
} from "@/examples/radix/ui/dropdown-menu"
export function DropdownMenuWithShortcuts() {
export function DropdownMenuShortcuts() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="w-fit">
<Button variant="outline">
Open
</Button>
</DropdownMenuTrigger>
@@ -33,18 +33,12 @@ export function DropdownMenuWithShortcuts() {
Settings
<DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
</DropdownMenuItem>
<DropdownMenuItem>
Keyboard shortcuts
<DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
Log out
<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuItem>
Log out
<DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)

25
apps/v4/examples/radix/dropdown-menu-with-submenu.tsx → apps/v4/examples/radix/dropdown-menu-submenu.tsx
View File

@@ -13,11 +13,11 @@ import {
DropdownMenuTrigger,
} from "@/examples/radix/ui/dropdown-menu"
export function DropdownMenuWithSubmenu() {
export function DropdownMenuSubmenu() {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="w-fit">
<Button variant="outline">
Open
</Button>
</DropdownMenuTrigger>
@@ -28,14 +28,21 @@ export function DropdownMenuWithSubmenu() {
<DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuGroup>
<DropdownMenuItem>Email</DropdownMenuItem>
<DropdownMenuItem>Message</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuItem>Email</DropdownMenuItem>
<DropdownMenuItem>Message</DropdownMenuItem>
<DropdownMenuSub>
<DropdownMenuSubTrigger>More options</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuItem>Calendly</DropdownMenuItem>
<DropdownMenuItem>Slack</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>Webhook</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>More...</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuItem>Advanced...</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>

86
apps/v4/examples/radix/dropdown-menu-with-avatar.tsx
View File

@@ -1,86 +0,0 @@
import { Avatar, AvatarFallback, AvatarImage } from "@/examples/radix/ui/avatar"
import { Button } from "@/examples/radix/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/examples/radix/ui/dropdown-menu"
import {
BadgeCheckIcon,
BellIcon,
ChevronsUpDownIcon,
CreditCardIcon,
LogOutIcon,
} from "lucide-react"
export function DropdownMenuWithAvatar() {
const menuContent = (
<>
<DropdownMenuGroup>
<DropdownMenuItem>
<BadgeCheckIcon />
Account
</DropdownMenuItem>
<DropdownMenuItem>
<CreditCardIcon />
Billing
</DropdownMenuItem>
<DropdownMenuItem>
<BellIcon />
Notifications
</DropdownMenuItem>
</DropdownMenuGroup>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>
<LogOutIcon />
Sign Out
</DropdownMenuItem>
</DropdownMenuGroup>
</>
)
return (
<div className="flex items-center justify-between gap-4">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
variant="outline"
className="h-12 justify-start px-2 md:max-w-[200px]"
>
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="Shadcn" />
<AvatarFallback className="rounded-lg">CN</AvatarFallback>
</Avatar>
<div className="grid flex-1 text-left text-sm leading-tight">
<span className="truncate font-semibold">shadcn</span>
<span className="text-muted-foreground truncate text-xs">
shadcn@example.com
</span>
</div>
<ChevronsUpDownIcon className="text-muted-foreground ml-auto" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-(--radix-dropdown-menu-trigger-width) min-w-56">
{menuContent}
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="rounded-full">
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="shadcn" />
<AvatarFallback>LR</AvatarFallback>
</Avatar>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" side="top">
{menuContent}
</DropdownMenuContent>
</DropdownMenu>
</div>
)
}

56
apps/v4/examples/radix/dropdown-menu-with-checkboxes.tsx
View File

@@ -1,56 +0,0 @@
"use client"
import * as React from "react"
import { Button } from "@/examples/radix/ui/button"
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuLabel,
DropdownMenuTrigger,
} from "@/examples/radix/ui/dropdown-menu"
import { ActivityIcon, LayoutIcon, PanelLeftIcon } from "lucide-react"
export function DropdownMenuWithCheckboxes() {
const [showStatusBar, setShowStatusBar] = React.useState(true)
const [showActivityBar, setShowActivityBar] = React.useState(false)
const [showPanel, setShowPanel] = React.useState(false)
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="w-fit">
Checkboxes
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="min-w-40">
<DropdownMenuGroup>
<DropdownMenuLabel>Appearance</DropdownMenuLabel>
<DropdownMenuCheckboxItem
checked={showStatusBar}
onCheckedChange={setShowStatusBar}
>
<LayoutIcon />
Status Bar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={showActivityBar}
onCheckedChange={setShowActivityBar}
disabled
>
<ActivityIcon />
Activity Bar
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={showPanel}
onCheckedChange={setShowPanel}
>
<PanelLeftIcon />
Panel
</DropdownMenuCheckboxItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
)
}

47
apps/v4/examples/radix/dropdown-menu-with-radio.tsx
View File

@@ -1,47 +0,0 @@
"use client"
import * as React from "react"
import { Button } from "@/examples/radix/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuGroup,
DropdownMenuLabel,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuTrigger,
} from "@/examples/radix/ui/dropdown-menu"
import { ArrowDownIcon, ArrowRightIcon, ArrowUpIcon } from "lucide-react"
export function DropdownMenuWithRadio() {
const [position, setPosition] = React.useState("bottom")
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline" className="w-fit">
Radio Group
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuGroup>
<DropdownMenuLabel>Panel Position</DropdownMenuLabel>
<DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
<DropdownMenuRadioItem value="top">
<ArrowUpIcon />
Top
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="bottom">
<ArrowDownIcon />
Bottom
</DropdownMenuRadioItem>
<DropdownMenuRadioItem value="right" disabled>
<ArrowRightIcon />
Right
</DropdownMenuRadioItem>
</DropdownMenuRadioGroup>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
)
}

2
apps/v4/public/r/styles/base-lyra/dropdown-menu.json
View File

File diff suppressed because one or more lines are too long

2
apps/v4/public/r/styles/base-maia/dropdown-menu.json
View File

File diff suppressed because one or more lines are too long

2
apps/v4/public/r/styles/base-mira/dropdown-menu.json
View File

File diff suppressed because one or more lines are too long

2
apps/v4/public/r/styles/base-nova/dropdown-menu.json
View File

File diff suppressed because one or more lines are too long

2
apps/v4/public/r/styles/base-vega/dropdown-menu.json
View File

File diff suppressed because one or more lines are too long

5816
apps/v4/registry/bases/__index__.tsx
View File

File diff suppressed because it is too large Load Diff

2
apps/v4/registry/bases/base/ui/dropdown-menu.tsx
View File

@@ -113,7 +113,7 @@ function DropdownMenuSubTrigger({
data-slot="dropdown-menu-sub-trigger"
data-inset={inset}
className={cn(
"cn-dropdown-menu-sub-trigger flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"cn-dropdown-menu-sub-trigger data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
className
)}
{...props}