import { CheckIcon, ClipboardIcon } from "lucide-react" import { NpmCommands } from "types/unist" import { Event, trackEvent } from "@/lib/events" import { cn } from "@/lib/utils" import { Button } from "@/registry/new-york/ui/button" import { Button, ButtonProps } from "@/reg...
"use client"importReact,{MouseEventHandler}from"react";import{Button}from"../ui/button";importLcIconfrom"./lc-icon";import{cn}from"@/lib/utils";/** * Button扩展,增加图标功能 * <CustomButton icon="Loader" onClick={handleSubmit}>Button</CustomButton> * */exportconstCustomButton=(props:{...
</Button> ); }, ); CarouselPrevious.displayName = 'CarouselPrevious'; const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>( ({ className, variant = 'outline', size = 'icon', ...props }, ref) => { const { orientation, scrollNext, canScrollNext ...
首先我们去到web目录里执行命令 pnpx shadcn-ui@latest init 按上图所示先选择类型,然后我们引入一下button组件试一下,我们使用pmpm dlx 命令可以在web的项目目录下载button组件到web/src/components 然后修改一下app/page.tsx文件,我们直接使用button组件看看 import{Button}from"web/src/components/ui/button";expor...
'use client'; import { zodResolver } from '@hookform/resolvers/zod'; import { CaretSortIcon, CheckIcon } from '@radix-ui/react-icons'; import { useForm } from 'react-hook-form'; import { z } from 'zod'; import { cn } from '@/app/lib/utils'; import { Button ...
import { Icon } from 'astro-icon/components'; import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, } from "@/components/ui/drawer" import { Button } from '@/components/ui/button'; ...
<Cross2Icon className="h-4 w-4" /> <span className="sr-only">Close</span> </button> </DialogPrimitive.Content> </DialogPortal> )})InterceptedDialogContent.displayName = DialogPrimitive.Content.displayNameexport InterceptedDialogContent
spinner className='mr-2 h-4 w-4 animate-spin' />} // Show loading icon if isLoading is true Sign Up </Button> </div> </form> </Form> ) } This component encapsulates a user registration form, utilizing react-hook-form for form state management and Zod for schema ...
import React from "react"; import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"; import { Button } from "@/components/ui/button"; import { CalendarIcon } from "lucide-react"; import { format } from "date-fns/format"; import { cn } from "@/lib/utils";...
import { Button } from "~/components/ui/button";/** * Toggle theme between light & dark modes. */ export function ThemeToggle() { const [theme, setTheme] = useTheme();return ( <Button className="ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 h-8 w-8"...