card-with-form.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-with-form",
  "type": "registry:example",
  "author": "shadcn (https://ui.shadcn.com)",
  "registryDependencies": [
    "button",
    "card",
    "input",
    "label",
    "select"
  ],
  "files": [
    {
      "path": "examples/card-with-form.tsx",
      "content": "import * as React from \"react\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport { Input } from \"@/registry/default/ui/input\"\nimport { Label } from \"@/registry/default/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nexport default function CardWithForm() {\n  return (\n    <Card className=\"w-[350px]\">\n      <CardHeader>\n        <CardTitle>Create project</CardTitle>\n        <CardDescription>Deploy your new project in one-click.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <div className=\"grid w-full items-center gap-4\">\n            <div className=\"flex flex-col space-y-1.5\">\n              <Label htmlFor=\"name\">Name</Label>\n              <Input id=\"name\" placeholder=\"Name of your project\" />\n            </div>\n            <div className=\"flex flex-col space-y-1.5\">\n              <Label htmlFor=\"framework\">Framework</Label>\n              <Select>\n                <SelectTrigger id=\"framework\">\n                  <SelectValue placeholder=\"Select\" />\n                </SelectTrigger>\n                <SelectContent position=\"popper\">\n                  <SelectItem value=\"next\">Next.js</SelectItem>\n                  <SelectItem value=\"sveltekit\">SvelteKit</SelectItem>\n                  <SelectItem value=\"astro\">Astro</SelectItem>\n                  <SelectItem value=\"nuxt\">Nuxt.js</SelectItem>\n                </SelectContent>\n              </Select>\n            </div>\n          </div>\n        </form>\n      </CardContent>\n      <CardFooter className=\"flex justify-between\">\n        <Button variant=\"outline\">Cancel</Button>\n        <Button>Deploy</Button>\n      </CardFooter>\n    </Card>\n  )\n}\n",
      "type": "registry:example",
      "target": ""
    }
  ]
}