rayan/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-07-01 08:34:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(v4): update cards

Browse Source
This commit is contained in:
shadcn
2025-02-21 20:44:09 +04:00
parent 9d7c7b8978
commit 3b90317e3c
9 changed files with 78 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
apps/v4/components/card-demo.tsx
View File

@@ -138,6 +138,54 @@ export function CardDemo() {
<div className="ml-auto font-medium tabular-nums">$135,000</div>
</CardFooter>
</Card>
<div className="flex w-full flex-wrap items-start gap-8 md:*:data-[slot=card]:basis-1/4">
<Card>
<CardContent className="text-sm">Content Only</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Header Only</CardTitle>
<CardDescription>
This is a card with a header and a description.
</CardDescription>
</CardHeader>
</Card>
<Card>
<CardHeader>
<CardTitle>Header and Content</CardTitle>
<CardDescription>
This is a card with a header and a content.
</CardDescription>
</CardHeader>
<CardContent className="text-sm">Content</CardContent>
</Card>
<Card>
<CardFooter className="text-sm">Footer Only</CardFooter>
</Card>
<Card>
<CardHeader>
<CardTitle>Header + Footer</CardTitle>
<CardDescription>
This is a card with a header and a footer.
</CardDescription>
</CardHeader>
<CardFooter className="text-sm">Footer</CardFooter>
</Card>
<Card>
<CardContent className="text-sm">Content</CardContent>
<CardFooter className="text-sm">Footer</CardFooter>
</Card>
<Card>
<CardHeader>
<CardTitle>Header + Footer</CardTitle>
<CardDescription>
This is a card with a header and a footer.
</CardDescription>
</CardHeader>
<CardContent className="text-sm">Content</CardContent>
<CardFooter className="text-sm">Footer</CardFooter>
</Card>
</div>
</div>
)
}

2
apps/v4/registry/new-york-v4/blocks/login-04/components/login-form.tsx
View File

@@ -10,7 +10,7 @@ export function LoginForm({
}: React.ComponentProps<"div">) {
return (
<div className={cn("flex flex-col gap-6", className)} {...props}>
<Card className="overflow-hidden">
<Card className="overflow-hidden p-0">
<CardContent className="grid p-0 md:grid-cols-2">
<form className="p-6 md:p-8">
<div className="flex flex-col gap-6">

38
apps/v4/registry/new-york-v4/blocks/sidebar-06/components/sidebar-opt-in-form.tsx
View File

@@ -10,24 +10,26 @@ import { SidebarInput } from "@/registry/new-york-v4/ui/sidebar"
export function SidebarOptInForm() {
return (
<Card className="shadow-none">
<form>
<CardHeader className="p-4 pb-0">
<CardTitle className="text-sm">Subscribe to our newsletter</CardTitle>
<CardDescription>
Opt-in to receive updates and news about the sidebar.
</CardDescription>
</CardHeader>
<CardContent className="grid gap-2.5 p-4">
<SidebarInput type="email" placeholder="Email" />
<Button
className="bg-sidebar-primary text-sidebar-primary-foreground w-full shadow-none"
size="sm"
>
Subscribe
</Button>
</CardContent>
</form>
<Card className="gap-2 py-4 shadow-none">
<CardHeader className="px-4">
<CardTitle className="text-sm">Subscribe to our newsletter</CardTitle>
<CardDescription>
Opt-in to receive updates and news about the sidebar.
</CardDescription>
</CardHeader>
<CardContent className="px-4">
<form>
<div className="grid gap-2.5">
<SidebarInput type="email" placeholder="Email" />
<Button
className="bg-sidebar-primary text-sidebar-primary-foreground w-full shadow-none"
size="sm"
>
Subscribe
</Button>
</div>
</form>
</CardContent>
</Card>
)
}

6
apps/v4/registry/new-york-v4/ui/card.tsx
View File

@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
<div
data-slot="card"
className={cn(
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm",
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
className
)}
{...props}
@@ -19,7 +19,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-header"
className={cn("flex flex-col gap-1.5 px-6 pt-6", className)}
className={cn("flex flex-col gap-1.5 px-6", className)}
{...props}
/>
)
@@ -59,7 +59,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
return (
<div
data-slot="card-footer"
className={cn("flex items-center px-6 pb-6", className)}
className={cn("flex items-center px-6", className)}
{...props}
/>
)

4
apps/v4/registry/new-york-v4/ui/checkbox.tsx
View File

@@ -14,14 +14,14 @@ function Checkbox({
<CheckboxPrimitive.Root
data-slot="checkbox"
className={cn(
"peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
"peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}
>
<CheckboxPrimitive.Indicator
data-slot="checkbox-indicator"
className="flex items-center justify-center text-current"
className="flex items-center justify-center text-current transition-none"
>
<CheckIcon className="size-3.5" />
</CheckboxPrimitive.Indicator>

2
apps/www/public/r/styles/new-york-v4/card.json
View File

@@ -5,7 +5,7 @@
"files": [
{
"path": "registry/new-york-v4/ui/card.tsx",
"content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card\"\n className={cn(\n \"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-header\"\n className={cn(\"flex flex-col gap-1.5 px-6 pt-6\", className)}\n {...props}\n />\n )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-title\"\n className={cn(\"leading-none font-semibold\", className)}\n {...props}\n />\n )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-description\"\n className={cn(\"text-muted-foreground text-sm\", className)}\n {...props}\n />\n )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-content\"\n className={cn(\"px-6\", className)}\n {...props}\n />\n )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-footer\"\n className={cn(\"flex items-center px-6 pb-6\", className)}\n {...props}\n />\n )\n}\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n",
"content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card\"\n className={cn(\n \"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-header\"\n className={cn(\"flex flex-col gap-1.5 px-6\", className)}\n {...props}\n />\n )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-title\"\n className={cn(\"leading-none font-semibold\", className)}\n {...props}\n />\n )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-description\"\n className={cn(\"text-muted-foreground text-sm\", className)}\n {...props}\n />\n )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-content\"\n className={cn(\"px-6\", className)}\n {...props}\n />\n )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"card-footer\"\n className={cn(\"flex items-center px-6\", className)}\n {...props}\n />\n )\n}\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n",
"type": "registry:ui"
}
]

2
apps/www/public/r/styles/new-york-v4/checkbox.json
View File

@@ -8,7 +8,7 @@
"files": [
{
"path": "registry/new-york-v4/ui/checkbox.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { CheckIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Checkbox({\n className,\n ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n return (\n <CheckboxPrimitive.Root\n data-slot=\"checkbox\"\n className={cn(\n \"peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\n className\n )}\n {...props}\n >\n <CheckboxPrimitive.Indicator\n data-slot=\"checkbox-indicator\"\n className=\"flex items-center justify-center text-current\"\n >\n <CheckIcon className=\"size-3.5\" />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n )\n}\n\nexport { Checkbox }\n",
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\"\nimport { CheckIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Checkbox({\n className,\n ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n return (\n <CheckboxPrimitive.Root\n data-slot=\"checkbox\"\n className={cn(\n \"peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\n className\n )}\n {...props}\n >\n <CheckboxPrimitive.Indicator\n data-slot=\"checkbox-indicator\"\n className=\"flex items-center justify-center text-current transition-none\"\n >\n <CheckIcon className=\"size-3.5\" />\n </CheckboxPrimitive.Indicator>\n </CheckboxPrimitive.Root>\n )\n}\n\nexport { Checkbox }\n",
"type": "registry:ui"
}
]

2
apps/www/public/r/styles/new-york-v4/login-04.json
View File

File diff suppressed because one or more lines are too long

2
apps/www/public/r/styles/new-york-v4/sidebar-06.json
View File

@@ -29,7 +29,7 @@
},
{
"path": "registry/new-york-v4/blocks/sidebar-06/components/sidebar-opt-in-form.tsx",
"content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport { SidebarInput } from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n return (\n <Card className=\"shadow-none\">\n <form>\n <CardHeader className=\"p-4 pb-0\">\n <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n <CardDescription>\n Opt-in to receive updates and news about the sidebar.\n </CardDescription>\n </CardHeader>\n <CardContent className=\"grid gap-2.5 p-4\">\n <SidebarInput type=\"email\" placeholder=\"Email\" />\n <Button\n className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full shadow-none\"\n size=\"sm\"\n >\n Subscribe\n </Button>\n </CardContent>\n </form>\n </Card>\n )\n}\n",
"content": "import { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport { SidebarInput } from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function SidebarOptInForm() {\n return (\n <Card className=\"gap-2 py-4 shadow-none\">\n <CardHeader className=\"px-4\">\n <CardTitle className=\"text-sm\">Subscribe to our newsletter</CardTitle>\n <CardDescription>\n Opt-in to receive updates and news about the sidebar.\n </CardDescription>\n </CardHeader>\n <CardContent className=\"px-4\">\n <form>\n <div className=\"grid gap-2.5\">\n <SidebarInput type=\"email\" placeholder=\"Email\" />\n <Button\n className=\"bg-sidebar-primary text-sidebar-primary-foreground w-full shadow-none\"\n size=\"sm\"\n >\n Subscribe\n </Button>\n </div>\n </form>\n </CardContent>\n </Card>\n )\n}\n",
"type": "registry:component"
}
],