{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "native-button-shadcnui", "type": "registry:component", "title": "Native Button", "description": "Glassmorphism-inspired button component based on shadcn/ui with smooth animations and modern styling", "dependencies": [ "framer-motion", "react" ], "files": [ { "path": "@uitripled/react-shadcn/src/components/native/native-button-shadcnui.tsx", "content": "import { Button, ButtonProps } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { Loader2 } from \"lucide-react\";\nimport { ReactNode } from \"react\";\n\nexport interface NativeButtonProps extends ButtonProps {\n children: ReactNode;\n loading?: boolean;\n glow?: boolean;\n}\n\nconst NativeButton = ({\n className,\n variant = \"default\",\n size = \"lg\",\n children,\n loading = false,\n glow = false,\n disabled,\n ...props\n}: NativeButtonProps) => {\n const buttonContent = (\n <>\n {loading && (\n \n )}\n \n {children}\n \n \n );\n\n const glassmorphismClassName = cn(\n \"cursor-pointer h-12 rounded-md px-7 text-sm relative overflow-hidden\",\n \"transition-[scale,box-shadow,background-color,border-color,color] duration-200\",\n !disabled &&\n !loading &&\n \"motion-safe:hover:scale-[1.02] motion-safe:active:scale-[0.98]\",\n !glow && \"shadow-md hover:shadow-lg\",\n glow && \"shadow-lg shadow-primary/20 hover:shadow-primary/40\",\n variant === \"outline\" && \"text-foreground/80 hover:bg-foreground/5\",\n (disabled || loading) && \"opacity-50 cursor-not-allowed grayscale\",\n className\n );\n\n return (\n
\n {glow && !disabled && !loading && (\n \n )}\n \n {buttonContent}\n \n
\n );\n};\n\nNativeButton.displayName = \"NativeButton\";\n\nexport { NativeButton };\n", "type": "registry:component", "target": "components/uitripled/native-button-shadcnui.tsx" } ] }