dropdown-menu

lyse/dropdown-menu

FreeComponent

lyse publishes no description for this item.

Live preview

live · rendered by the registry

Rendered by lyse on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://ui.getlyse.com/r/dropdown-menu.json

Source

registry/new-york/ui/dropdown-menu/dropdown-menu.tsxui.getlyse.com/r/dropdown-menu.json · first 6 KB

1import * as React from "react"
2import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
3import { cva, type VariantProps } from "class-variance-authority"
4 
5import { cn } from "@/lib/utils"
6import "./dropdown-menu.css"
7 
8/* ------------------------------------------------------------------ */
9/*  CVA                                                                */
10/* ------------------------------------------------------------------ */
11 
12const dropdownMenuItemVariants = cva(
13  "dropdown-menu-item flex items-center rounded-[var(--layout-radius-lg)] text-content-note font-accent",
14  {
15    variants: {
16      variant: {
17        default: "",
18        destructive: "dropdown-menu-item-destructive",
19      },
20      size: {
21        sm: "h-[var(--layout-size-lg)] gap-[var(--layout-gap-sm)] py-[var(--layout-padding-sm)] px-[var(--layout-padding-md)] [&_.dropdown-menu-item-icon]:h-[var(--layout-size-xs)] [&_.dropdown-menu-item-icon]:w-[var(--layout-size-xs)] [&_.dropdown-menu-item-icon>svg]:h-[var(--layout-size-xs)] [&_.dropdown-menu-item-icon>svg]:w-[var(--layout-size-xs)]",
22        md: "h-9 gap-[var(--layout-gap-md)] p-[var(--layout-padding-md)] [&_.dropdown-menu-item-icon]:h-[var(--layout-size-xs)] [&_.dropdown-menu-item-icon]:w-[var(--layout-size-xs)] [&_.dropdown-menu-item-icon>svg]:h-[var(--layout-size-xs)] [&_.dropdown-menu-item-icon>svg]:w-[var(--layout-size-xs)]",
23      },
24    },
25    defaultVariants: {
26      variant: "default",
27      size: "md",
28    },
29  }
30)
31 
32/* ------------------------------------------------------------------ */
33/*  DropdownMenu                                                       */
34/* ------------------------------------------------------------------ */
35 
36function DropdownMenu({
37  ...props
38}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
39  return <DropdownMenuPrimitive.Root {...props} />
40}
41 
42/* ------------------------------------------------------------------ */
43/*  DropdownMenuTrigger                                                */
44/* ------------------------------------------------------------------ */
45 
46function DropdownMenuTrigger({
47  ...props
48}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
49  return (
50    <DropdownMenuPrimitive.Trigger
51      data-slot="dropdown-menu-trigger"
52      {...props}
53    />
54  )
55}
56 
57/* ------------------------------------------------------------------ */
58/*  DropdownMenuContent                                                */
59// … truncated

What it pulls in

npm packages

class-variance-authority
@radix-ui/react-dropdown-menu

Other registry items

https://ui.getlyse.com/r/lyse-tokens.json

Files it writes

registry/new-york/ui/dropdown-menu/dropdown-menu.tsx
registry/new-york/ui/dropdown-menu/dropdown-menu.css

More from lyse

All 33 items

Same registry, same kind — the ones you would have found next
Component	Registry	Kind	Access	Installs
action-cardaction-card	lyse	Components	Free	no deps · 2 files
alertalert	lyse	Components	Free	2 deps · 2 files
alert-dialogalert-dialog	lyse	Components	Free	2 deps · 2 files
avataravatar	lyse	Components	Free	3 deps · 2 files
badgebadge	lyse	Components	Free	1 dep · 2 files
banner-infobanner-info	lyse	Components	Free	2 deps · 2 files
breadcrumbbreadcrumb	lyse	Components	Free	2 deps · 2 files
buttonbutton	lyse	Components	Free	2 deps · 2 files