Card , shadcn/ui components例

概要

• shadcn/ui , Card 実装例になります。

• まとめリンクは、下記になります。

• https://knakatech-blog.pages.dev/books/12

---

関連

• https://ui.shadcn.com/docs/components/card

---

• src/client/Card.tsx
• https://github.com/kuc-arc-f/express_49preact/blob/main/src/client/Card.tsx

<Card className="w-[350px]">
  <CardHeader>
  <CardTitle>Create Card Item</CardTitle>
  <CardDescription>information , title</CardDescription>
  </CardHeader>
  <CardContent>
  <form>
    <div className="grid w-full items-center gap-4">
    <div className="flex flex-col space-y-1.5">
        <Label htmlFor="name">Name</Label>
        <Input id="name" placeholder="Name 123" />
    </div>
    </div>
  </form>
  </CardContent>
  <CardFooter className="flex justify-between">
  <Button variant="outline">Cancel</Button>
  <Button>Deploy</Button>
  </CardFooter>
</Card>