import { Button } from "@/registry/new-york/ui/button" import { Button, ButtonProps } from "@/registry/new-york/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/registry/new-york/ui/dropdown-menu" interface CopyButtonProps extends ...
DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" export function ModeToggle() { const { theme, setTheme } = useTheme(); return ( <DropdownMenu> The current theme is: {theme} <DropdownMenuTrigger asChild> <Button variant="outline" size="icon"> <Sun classNa...
我们第一步需要安装next-theme,然后创建layout组件,创建header组件,创建暗黑模式切换组件(modeToogle),切换组件我们使用点击切换,所以需要使用到了shadcn/ui 里面的dropdown-menu组件。 #切换到web目录,首先添加next-theme包pnpminstallnext-themes-S#然后添加shadcn/ui的dropdown-menupnpmdlxshadcn-ui@latestadddropdow...
A sidebar footer with a dropdown menu.components/app-sidebar.tsx export function AppSidebar() { return ( <SidebarProvider> <Sidebar> <SidebarHeader /> <SidebarContent /> <SidebarFooter> <SidebarMenu> <SidebarMenuItem> <DropdownMenu> <DropdownMenuTrigger asChild> <SidebarMenuButton> <User2 /...
pnpm dlx shadcn-ui@latest add avatar button dropdown-menu form input label tabs toast Creating Authentication Components src/components/auth-buttons.tsx: 'use client' import Link from 'next/link' import { signIn, useSession } from 'next-auth/react' import { Button } from '...
npx shadcn-ui add button scroll-area toast We are going to install it at./src/components/ui, however, you can choose any location that you like. Thebuttonandscroll-areaare all set when using the command above but we need to add one more file to the/uifolder calledtoa...
DropdownMenuItem, DropdownMenuTrigger, } from "@/registry/new-york/ui/dropdown-menu" import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, 104 changes: 104 additions & 0 deletions...
['on-click', 'Triggered when the dropdown item is clicked', 'boolean'], ]"> </ApiTable> 3 changes: 3 additions & 0 deletions 3 docs/components/index.md Original file line numberDiff line numberDiff line change @@ -138,4 +138,7 @@ features: - icon: <img style="width:100...
import ShadcnNumber from '@/ui/number' let components = [ ShadcnButton, @@ -136,7 +137,8 @@ let components = [ ShadcnWatermark, ShadcnHighlight, ShadcnDropdown, ShadcnDropdownItem ShadcnDropdownItem, ShadcnNumber ] const install = (Vue: App) => { @@ -228,6 +230,7 @...
DatePickerWithRange.vue HoverCardDemo.vue ToggleDemo.vue ui accordion AccordionTrigger.vue checkbox Checkbox.vue context-menu ContextMenuCheckboxItem.vue ContextMenuRadioItem.vue dialog DialogContent.vue dropdown-menu DropdownMenuCheckboxItem.vue DropdownMenuRadioItem.vue DropdownMenuSubTri...