Skip to content

Instantly share code, notes, and snippets.

@shiny
Last active November 6, 2024 14:10
Show Gist options
  • Save shiny/540a3619f867dd72d2695e95d6cc75be to your computer and use it in GitHub Desktop.
Save shiny/540a3619f867dd72d2695e95d6cc75be to your computer and use it in GitHub Desktop.
test shadcn component
{
"name": "button",
"type": "registry:ui",
"dependencies": [
"@radix-ui/react-slot"
],
"files": [
{
"path": "ui/button.tsx",
"content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\",\n {\n variants: {\n variant: {\n default:\n \"bg-primary text-primary-foreground shadow hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90\",\n outline:\n \"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n default: \"h-9 px-4 py-2\",\n sm: \"h-8 rounded-md px-3 text-xs\",\n lg: \"h-10 rounded-md px-8\",\n icon: \"h-9 w-9\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n asChild?: boolean\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"button\"\n return (\n <Comp\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n {...props}\n />\n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n",
"type": "registry:ui",
"target": ""
}
]
}
@shiny
Copy link
Author

shiny commented Nov 6, 2024

you can add your custom components by running cli command shadcn add https://gist.githubusercontent.com/shiny/540a3619f867dd72d2695e95d6cc75be/raw/7c45a5fde17fe4161b3219a8a6ee341ab97ea7c8/shadcn.json

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment