mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-01 00:24:20 +00:00
fix(shadcn-ui): add missing deps for Button (#259)
* fix: add missing deps for Button * fix: use correct dep Co-authored-by: Pablo <its.monotype@gmail.com> * chore: add changeset --------- Co-authored-by: Pablo <its.monotype@gmail.com> Co-authored-by: shadcn <m@shadcn.com>
This commit is contained in:
5
.changeset/wicked-eagles-turn.md
Normal file
5
.changeset/wicked-eagles-turn.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"shadcn-ui": patch
|
||||
---
|
||||
|
||||
add missing deps for button
|
||||
@@ -36,6 +36,7 @@ export const components = [
|
||||
{
|
||||
component: "button",
|
||||
name: "Button",
|
||||
dependencies: ["@radix-ui/react-slot"],
|
||||
files: ["components/ui/button.tsx"],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -20,7 +20,13 @@ npx shadcn-ui add button
|
||||
<AccordionTrigger>Manual Installation</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
|
||||
1. Copy and paste the following code into your project.
|
||||
1. Install the `@radix-ui/react-slot` component from radix-ui:
|
||||
|
||||
```bash
|
||||
npm install @radix-ui/react-slot
|
||||
```
|
||||
|
||||
2.
|
||||
|
||||
<ComponentSource src="/components/ui/button.tsx" />
|
||||
|
||||
|
||||
@@ -80,11 +80,12 @@
|
||||
{
|
||||
"component": "button",
|
||||
"name": "Button",
|
||||
"dependencies": ["@radix-ui/react-slot"],
|
||||
"files": [
|
||||
{
|
||||
"name": "button.tsx",
|
||||
"dir": "components/ui",
|
||||
"content": "import * as React from \"react\"\nimport { VariantProps, cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n outline:\n \"border border-input hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"underline-offset-4 hover:underline text-primary\",\n },\n size: {\n default: \"h-10 py-2 px-4\",\n sm: \"h-9 px-3 rounded-md\",\n lg: \"h-11 px-8 rounded-md\",\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\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, ...props }, ref) => {\n return (\n <button\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n {...props}\n />\n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n"
|
||||
"content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\nimport { VariantProps, cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background\",\n {\n variants: {\n variant: {\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive:\n \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n outline:\n \"border border-input hover:bg-accent hover:text-accent-foreground\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"underline-offset-4 hover:underline text-primary\",\n },\n size: {\n default: \"h-10 py-2 px-4\",\n sm: \"h-9 px-3 rounded-md\",\n lg: \"h-11 px-8 rounded-md\",\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\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, ...props }, ref) => {\n return (\n <button\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n {...props}\n />\n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n"
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -474,4 +475,4 @@
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user