card-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-example",
  "title": "Card",
  "registryDependencies": [
    "avatar",
    "button",
    "card",
    "field",
    "input",
    "example"
  ],
  "files": [
    {
      "path": "registry/radix-vega/examples/card-example.tsx",
      "content": "import Image from \"next/image\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarGroup,\n  AvatarGroupCount,\n  AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/radix-vega/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CardExample() {\n  return (\n    <ExampleWrapper>\n      <CardDefault />\n      <CardSmall />\n      <CardHeaderWithBorder />\n      <CardFooterWithBorder />\n      <CardHeaderWithBorderSmall />\n      <CardFooterWithBorderSmall />\n      <CardWithImage />\n      <CardWithImageSmall />\n      <CardLogin />\n      <CardMeetingNotes />\n    </ExampleWrapper>\n  )\n}\n\nfunction CardLogin() {\n  return (\n    <Example title=\"Login\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Login to your account</CardTitle>\n          <CardDescription>\n            Enter your email below to login to your account\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form>\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Email</FieldLabel>\n                <Input\n                  id=\"email\"\n                  type=\"email\"\n                  placeholder=\"m@example.com\"\n                  required\n                />\n              </Field>\n              <Field>\n                <div className=\"flex items-center\">\n                  <FieldLabel htmlFor=\"password\">Password</FieldLabel>\n                  <a\n                    href=\"#\"\n                    className=\"ml-auto inline-block underline-offset-4 hover:underline\"\n                  >\n                    Forgot your password?\n                  </a>\n                </div>\n                <Input id=\"password\" type=\"password\" required />\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter className=\"flex-col gap-2\">\n          <Button type=\"submit\" className=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" className=\"w-full\">\n            Login with Google\n          </Button>\n          <div className=\"style-nova:mt-2 mt-4 text-center\">\n            Don&apos;t have an account?{\" \"}\n            <a href=\"#\" className=\"underline underline-offset-4\">\n              Sign up\n            </a>\n          </div>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardMeetingNotes() {\n  return (\n    <Example title=\"Meeting Notes\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Meeting Notes</CardTitle>\n          <CardDescription>\n            Transcript from the meeting with the client.\n          </CardDescription>\n          <CardAction>\n            <Button variant=\"outline\" size=\"sm\">\n              <IconPlaceholder\n                lucide=\"CaptionsIcon\"\n                tabler=\"IconTextCaption\"\n                hugeicons=\"TextCheckIcon\"\n                phosphor=\"TextTIcon\"\n                remixicon=\"RiTextWrap\"\n                data-icon=\"inline-start\"\n              />\n              Transcribe\n            </Button>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <p>\n            Client requested dashboard redesign with focus on mobile\n            responsiveness.\n          </p>\n          <ol className=\"mt-4 flex list-decimal flex-col gap-2 pl-6\">\n            <li>New analytics widgets for daily/weekly metrics</li>\n            <li>Simplified navigation menu</li>\n            <li>Dark mode support</li>\n            <li>Timeline: 6 weeks</li>\n            <li>Follow-up meeting scheduled for next Tuesday</li>\n          </ol>\n        </CardContent>\n        <CardFooter>\n          <AvatarGroup>\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"@shadcn\" />\n              <AvatarFallback>CN</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/maxleiter.png\"\n                alt=\"@maxleiter\"\n              />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n            <Avatar>\n              <AvatarImage\n                src=\"https://github.com/evilrabbit.png\"\n                alt=\"@evilrabbit\"\n              />\n              <AvatarFallback>ER</AvatarFallback>\n            </Avatar>\n            <AvatarGroupCount>+8</AvatarGroupCount>\n          </AvatarGroup>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImage() {\n  return (\n    <Example title=\"With Image\">\n      <Card size=\"default\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardWithImageSmall() {\n  return (\n    <Example title=\"With Image (Small)\">\n      <Card size=\"sm\" className=\"relative mx-auto w-full max-w-sm pt-0\">\n        <div className=\"bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color\" />\n        <img\n          src=\"https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n          alt=\"Photo by mymind on Unsplash\"\n          title=\"Photo by mymind on Unsplash\"\n          className=\"relative z-20 aspect-video w-full object-cover brightness-60 grayscale\"\n        />\n        <CardHeader>\n          <CardTitle>Beautiful Landscape</CardTitle>\n          <CardDescription>\n            A stunning view that captures the essence of natural beauty.\n          </CardDescription>\n        </CardHeader>\n        <CardFooter>\n          <Button size=\"sm\" className=\"w-full\">\n            <IconPlaceholder\n              lucide=\"PlusIcon\"\n              tabler=\"IconPlus\"\n              hugeicons=\"Add01Icon\"\n              phosphor=\"PlusIcon\"\n              remixicon=\"RiAddLine\"\n              data-icon=\"inline-start\"\n            />\n            Button\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorder() {\n  return (\n    <Example title=\"Header with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorder() {\n  return (\n    <Example title=\"Footer with Border\">\n      <Card className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardDefault() {\n  return (\n    <Example title=\"Default Size\">\n      <Card size=\"default\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Default Card</CardTitle>\n          <CardDescription>\n            This card uses the default size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that defaults to\n            &quot;default&quot; for standard spacing and sizing.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardSmall() {\n  return (\n    <Example title=\"Small Size\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader>\n          <CardTitle>Small Card</CardTitle>\n          <CardDescription>\n            This card uses the small size variant.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The card component supports a size prop that can be set to\n            &quot;sm&quot; for a more compact appearance.\n          </p>\n        </CardContent>\n        <CardFooter>\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Action\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardHeaderWithBorderSmall() {\n  return (\n    <Example title=\"Header with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle>Header with Border</CardTitle>\n          <CardDescription>\n            This is a small card with a header that has a bottom border.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <p>\n            The header has a border-b class applied, creating a visual\n            separation between the header and content sections.\n          </p>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CardFooterWithBorderSmall() {\n  return (\n    <Example title=\"Footer with Border (Small)\">\n      <Card size=\"sm\" className=\"mx-auto w-full max-w-sm\">\n        <CardContent>\n          <p>\n            The footer has a border-t class applied, creating a visual\n            separation between the content and footer sections.\n          </p>\n        </CardContent>\n        <CardFooter className=\"border-t\">\n          <Button variant=\"outline\" size=\"sm\" className=\"w-full\">\n            Footer with Border\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}