From 6d86b25ff00919aa4eca25636a108c4aceb7d7f6 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Tue, 5 Sep 2023 15:50:02 +0800
Subject: [PATCH] feat: add cards examples

---
 apps/www/src/content/examples/cards.md        |   5 +
 apps/www/src/examples/cards/Example.vue       |  66 +++++++
 .../examples/cards/components/Container.vue   |   9 +
 .../cards/components/CookieSettings.vue       |  58 ++++++
 .../cards/components/CreateAccount.vue        |  67 +++++++
 .../examples/cards/components/DatePicker.vue  |  18 ++
 .../examples/cards/components/GitHubCard.vue  |  84 +++++++++
 .../cards/components/Notifications.vue        |  59 ++++++
 .../cards/components/PaymentMethod.vue        | 170 ++++++++++++++++++
 .../cards/components/ReportAnIssue.vue        | 103 +++++++++++
 .../cards/components/ShareDocument.vue        | 138 ++++++++++++++
 .../examples/cards/components/TeamMembers.vue | 152 ++++++++++++++++
 12 files changed, 929 insertions(+)
 create mode 100644 apps/www/src/content/examples/cards.md
 create mode 100644 apps/www/src/examples/cards/Example.vue
 create mode 100644 apps/www/src/examples/cards/components/Container.vue
 create mode 100644 apps/www/src/examples/cards/components/CookieSettings.vue
 create mode 100644 apps/www/src/examples/cards/components/CreateAccount.vue
 create mode 100644 apps/www/src/examples/cards/components/DatePicker.vue
 create mode 100644 apps/www/src/examples/cards/components/GitHubCard.vue
 create mode 100644 apps/www/src/examples/cards/components/Notifications.vue
 create mode 100644 apps/www/src/examples/cards/components/PaymentMethod.vue
 create mode 100644 apps/www/src/examples/cards/components/ReportAnIssue.vue
 create mode 100644 apps/www/src/examples/cards/components/ShareDocument.vue
 create mode 100644 apps/www/src/examples/cards/components/TeamMembers.vue

diff --git a/apps/www/src/content/examples/cards.md b/apps/www/src/content/examples/cards.md
new file mode 100644
index 00000000..c9b122c0
--- /dev/null
+++ b/apps/www/src/content/examples/cards.md
@@ -0,0 +1,5 @@
+<script setup>
+import Cards from "@/examples/cards/Example.vue"
+</script>
+
+<Cards />
\ No newline at end of file
diff --git a/apps/www/src/examples/cards/Example.vue b/apps/www/src/examples/cards/Example.vue
new file mode 100644
index 00000000..ad122437
--- /dev/null
+++ b/apps/www/src/examples/cards/Example.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import Container from './components/Container.vue'
+import CookieSettings from './components/CookieSettings.vue'
+import CreateAccount from './components/CreateAccount.vue'
+import DatePicker from './components/DatePicker.vue'
+import GitHubCard from './components/GitHubCard.vue'
+import Notifications from './components/Notifications.vue'
+import PaymentMethod from './components/PaymentMethod.vue'
+import ReportAnIssue from './components/ReportAnIssue.vue'
+import ShareDocument from './components/ShareDocument.vue'
+import TeamMembers from './components/TeamMembers.vue'
+</script>
+
+<template>
+  <!-- <div class="md:hidden">
+        <Image
+          src="/examples/cards-light.png"
+          width={1280}
+          height={1214}
+          alt="Cards"
+          class="block dark:hidden"
+        />
+        <Image
+          src="/examples/cards-dark.png"
+          width={1280}
+          height={1214}
+          alt="Cards"
+          class="hidden dark:block"
+        />
+      </div> -->
+  <div class="hidden items-start justify-center gap-6 rounded-lg p-8 md:grid lg:grid-cols-2 xl:grid-cols-3">
+    <div class="col-span-2 grid items-start gap-6 lg:col-span-1">
+      <Container>
+        <CreateAccount />
+      </Container>
+      <Container>
+        <PaymentMethod />
+      </Container>
+    </div>
+    <div class="col-span-2 grid items-start gap-6 lg:col-span-1">
+      <Container>
+        <TeamMembers />
+      </Container>
+      <Container>
+        <ShareDocument />
+      </Container>
+      <Container>
+        <DatePicker />
+      </Container>
+      <Container>
+        <Notifications />
+      </Container>
+    </div>
+    <div class="col-span-2 grid items-start gap-6 lg:col-span-2 lg:grid-cols-2 xl:col-span-1 xl:grid-cols-1">
+      <Container>
+        <ReportAnIssue />
+      </Container>
+      <Container>
+        <GitHubCard />
+      </Container>
+      <Container>
+        <CookieSettings />
+      </Container>
+    </div>
+  </div>
+</template>
diff --git a/apps/www/src/examples/cards/components/Container.vue b/apps/www/src/examples/cards/components/Container.vue
new file mode 100644
index 00000000..e9a62785
--- /dev/null
+++ b/apps/www/src/examples/cards/components/Container.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+</script>
+
+<template>
+  <div :class="cn('flex items-center justify-center [&>div]:w-full', $attrs.class ?? '')">
+    <slot />
+  </div>
+</template>
diff --git a/apps/www/src/examples/cards/components/CookieSettings.vue b/apps/www/src/examples/cards/components/CookieSettings.vue
new file mode 100644
index 00000000..6083febe
--- /dev/null
+++ b/apps/www/src/examples/cards/components/CookieSettings.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/lib/registry/default/ui/card'
+import { Label } from '@/lib/registry/default/ui/label'
+import { Switch } from '@/lib/registry/default/ui/switch'
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>Cookie Settings</CardTitle>
+      <CardDescription>Manage your cookie settings here.</CardDescription>
+    </CardHeader>
+    <CardContent class="grid gap-6">
+      <div class="flex items-center justify-between space-x-2">
+        <Label for="necessary" class="flex flex-col space-y-1">
+          <span>Strictly Necessary</span>
+          <span class="font-normal leading-snug text-muted-foreground">
+            These cookies are essential in order to use the website and use
+            its features.
+          </span>
+        </Label>
+        <Switch id="necessary" default-checked />
+      </div>
+      <div class="flex items-center justify-between space-x-2">
+        <Label for="functional" class="flex flex-col space-y-1">
+          <span>Functional Cookies</span>
+          <span class="font-normal leading-snug text-muted-foreground">
+            These cookies allow the website to provide personalized
+            functionality.
+          </span>
+        </Label>
+        <Switch id="functional" />
+      </div>
+      <div class="flex items-center justify-between space-x-2">
+        <Label for="performance" class="flex flex-col space-y-1">
+          <span>Performance Cookies</span>
+          <span class="font-normal leading-snug text-muted-foreground">
+            These cookies help to improve the performance of the website.
+          </span>
+        </Label>
+        <Switch id="performance" />
+      </div>
+    </CardContent>
+    <CardFooter>
+      <Button variant="outline" class="w-full">
+        Save preferences
+      </Button>
+    </CardFooter>
+  </Card>
+</template>
diff --git a/apps/www/src/examples/cards/components/CreateAccount.vue b/apps/www/src/examples/cards/components/CreateAccount.vue
new file mode 100644
index 00000000..2bc17873
--- /dev/null
+++ b/apps/www/src/examples/cards/components/CreateAccount.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import GitHubIcon from '~icons/radix-icons/github-logo'
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/lib/registry/default/ui/card'
+import { Input } from '@/lib/registry/default/ui/input'
+import { Label } from '@/lib/registry/default/ui/label'
+</script>
+
+<template>
+  <Card>
+    <CardHeader class="space-y-1">
+      <CardTitle class="text-2xl">
+        Create an account
+      </CardTitle>
+      <CardDescription>
+        Enter your email below to create your account
+      </CardDescription>
+    </CardHeader>
+    <CardContent class="grid gap-4">
+      <div class="grid grid-cols-2 gap-6">
+        <Button variant="outline">
+          <GitHubIcon class="mr-2 h-4 w-4" />
+          Github
+        </Button>
+        <Button variant="outline">
+          <svg role="img" viewBox="0 0 24 24" class="mr-2 h-4 w-4">
+            <path
+              fill="currentColor"
+              d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+            />
+          </svg>
+          Google
+        </Button>
+      </div>
+      <div class="relative">
+        <div class="absolute inset-0 flex items-center">
+          <span class="w-full border-t" />
+        </div>
+        <div class="relative flex justify-center text-xs uppercase">
+          <span class="bg-background px-2 text-muted-foreground">
+            Or continue with
+          </span>
+        </div>
+      </div>
+      <div class="grid gap-2">
+        <Label html-for="email">Email</Label>
+        <Input id="email" type="email" placeholder="m@example.com" />
+      </div>
+      <div class="grid gap-2">
+        <Label html-for="password">Password</Label>
+        <Input id="password" type="password" />
+      </div>
+    </CardContent>
+    <CardFooter>
+      <Button class="w-full">
+        Create account
+      </Button>
+    </CardFooter>
+  </Card>
+</template>
diff --git a/apps/www/src/examples/cards/components/DatePicker.vue b/apps/www/src/examples/cards/components/DatePicker.vue
new file mode 100644
index 00000000..90f79103
--- /dev/null
+++ b/apps/www/src/examples/cards/components/DatePicker.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import DatePickerWithRange from '@/lib/registry/default/examples/DatePickerWithRange.vue'
+import { Card, CardContent } from '@/lib/registry/default/ui/card'
+import { Label } from '@/lib/registry/default/ui/label'
+</script>
+
+<template>
+  <Card>
+    <CardContent class="pt-6">
+      <div class="space-y-2">
+        <Label html-for="date" class="shrink-0">
+          Pick a date
+        </Label>
+        <DatePickerWithRange class="[&>button]:w-[260px]" />
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/apps/www/src/examples/cards/components/GitHubCard.vue b/apps/www/src/examples/cards/components/GitHubCard.vue
new file mode 100644
index 00000000..6d15123b
--- /dev/null
+++ b/apps/www/src/examples/cards/components/GitHubCard.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import ChevronDownIcon from '~icons/radix-icons/chevron-down'
+import CircleIcon from '~icons/radix-icons/circle'
+import PlusIcon from '~icons/radix-icons/plus'
+import StarIcon from '~icons/radix-icons/star'
+
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/lib/registry/default/ui/card'
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/lib/registry/default/ui/dropdown-menu'
+import { Separator } from '@/lib/registry/default/ui/separator'
+</script>
+
+<template>
+  <Card>
+    <CardHeader class="grid grid-cols-[1fr_110px] items-start gap-4 space-y-0">
+      <div class="space-y-1">
+        <CardTitle>shadcn/ui</CardTitle>
+        <CardDescription>
+          Beautifully designed components built with Radix UI and Tailwind
+          CSS.
+        </CardDescription>
+      </div>
+      <div class="flex items-center space-x-1 rounded-md bg-secondary text-secondary-foreground">
+        <Button variant="secondary" class="px-3 shadow-none">
+          <StarIcon class="mr-2 h-4 w-4" />
+          Star
+        </Button>
+        <Separator orientation="vertical" class="h-[20px]" />
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <Button variant="secondary" class="px-2 shadow-none">
+              <ChevronDownIcon class="h-4 w-4 text-secondary-foreground" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            align="end"
+            :align-offset="-5"
+            class="w-[200px]"
+            force-mount
+          >
+            <DropdownMenuLabel>Suggested Lists</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuCheckboxItem checked>
+              Future Ideas
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem>My Stack</DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem>Inspiration</DropdownMenuCheckboxItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <PlusIcon class="mr-2 h-4 w-4" /> Create List
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </CardHeader>
+    <CardContent>
+      <div class="flex space-x-4 text-sm text-muted-foreground">
+        <div class="flex items-center">
+          <CircleIcon class="mr-1 h-3 w-3 fill-sky-400 text-sky-400" />
+          TypeScript
+        </div>
+        <div class="flex items-center">
+          <StarIcon class="mr-1 h-3 w-3" />
+          20k
+        </div>
+        <div>Updated April 2023</div>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/apps/www/src/examples/cards/components/Notifications.vue b/apps/www/src/examples/cards/components/Notifications.vue
new file mode 100644
index 00000000..43033a9d
--- /dev/null
+++ b/apps/www/src/examples/cards/components/Notifications.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import BellIcon from '~icons/radix-icons/bell'
+import EyeNoneIcon from '~icons/radix-icons/eye-none'
+import PersonIcon from '~icons/radix-icons/person'
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/lib/registry/default/ui/card'
+</script>
+
+<template>
+  <Card>
+    <CardHeader class="pb-3">
+      <CardTitle>Notifications</CardTitle>
+      <CardDescription>
+        Choose what you want to be notified about.
+      </CardDescription>
+    </CardHeader>
+    <CardContent class="grid gap-1">
+      <div class="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground">
+        <BellIcon class="mt-px h-5 w-5" />
+        <div class="space-y-1">
+          <p class="text-sm font-medium leading-none">
+            Everything
+          </p>
+          <p class="text-sm text-muted-foreground">
+            Email digest, mentions & all activity.
+          </p>
+        </div>
+      </div>
+      <div class="-mx-2 flex items-start space-x-4 rounded-md bg-accent p-2 text-accent-foreground transition-all">
+        <PersonIcon class="mt-px h-5 w-5" />
+        <div class="space-y-1">
+          <p class="text-sm font-medium leading-none">
+            Available
+          </p>
+          <p class="text-sm text-muted-foreground">
+            Only mentions and comments.
+          </p>
+        </div>
+      </div>
+      <div class="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground">
+        <EyeNoneIcon class="mt-px h-5 w-5" />
+        <div class="space-y-1">
+          <p class="text-sm font-medium leading-none">
+            Ignoring
+          </p>
+          <p class="text-sm text-muted-foreground">
+            Turn off all notifications.
+          </p>
+        </div>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/apps/www/src/examples/cards/components/PaymentMethod.vue b/apps/www/src/examples/cards/components/PaymentMethod.vue
new file mode 100644
index 00000000..dc418b09
--- /dev/null
+++ b/apps/www/src/examples/cards/components/PaymentMethod.vue
@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/lib/registry/default/ui/card'
+import { Input } from '@/lib/registry/default/ui/input'
+import { Label } from '@/lib/registry/default/ui/label'
+import { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-group'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/default/ui/select'
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>Payment Method</CardTitle>
+      <CardDescription>
+        Add a new payment method to your account.
+      </CardDescription>
+    </CardHeader>
+    <CardContent class="grid gap-6">
+      <RadioGroup default-value="card" class="grid grid-cols-3 gap-4">
+        <div>
+          <RadioGroupItem id="card" model-value="card" class="peer sr-only" />
+          <Label
+            for="card"
+            class="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              class="mb-3 h-6 w-6"
+            >
+              <rect width="20" height="14" x="2" y="5" rx="2" />
+              <path d="M2 10h20" />
+            </svg>
+            Card
+          </Label>
+        </div>
+        <div>
+          <RadioGroupItem
+            id="paypal"
+            value="paypal"
+            class="peer sr-only"
+          />
+          <Label
+            for="paypal"
+            class="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+          >
+            <svg role="img" viewBox="0 0 24 24" class="mb-3 h-6 w-6">
+              <path
+                d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"
+                fill="currentColor"
+              />
+            </svg>
+            Paypal
+          </Label>
+        </div>
+        <div>
+          <RadioGroupItem id="apple" value="apple" class="peer sr-only" />
+          <Label
+            for="apple"
+            class="flex flex-col items-center justify-between rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground peer-data-[state=checked]:border-primary [&:has([data-state=checked])]:border-primary"
+          >
+            <svg role="img" viewBox="0 0 24 24" class="mb-3 h-6 w-6">
+              <path
+                d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"
+                fill="currentColor"
+              />
+            </svg>
+            Apple
+          </Label>
+        </div>
+      </RadioGroup>
+      <div class="grid gap-2">
+        <Label for="name">Name</Label>
+        <Input id="name" placeholder="First Last" />
+      </div>
+      <div class="grid gap-2">
+        <Label for="number">Card number</Label>
+        <Input id="number" placeholder="" />
+      </div>
+      <div class="grid grid-cols-3 gap-4">
+        <div class="grid gap-2">
+          <Label for="month">Expires</Label>
+          <Select>
+            <SelectTrigger id="month">
+              <SelectValue placeholder="Month" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="1">
+                January
+              </SelectItem>
+              <SelectItem value="2">
+                February
+              </SelectItem>
+              <SelectItem value="3">
+                March
+              </SelectItem>
+              <SelectItem value="4">
+                April
+              </SelectItem>
+              <SelectItem value="5">
+                May
+              </SelectItem>
+              <SelectItem value="6">
+                June
+              </SelectItem>
+              <SelectItem value="7">
+                July
+              </SelectItem>
+              <SelectItem value="8">
+                August
+              </SelectItem>
+              <SelectItem value="9">
+                September
+              </SelectItem>
+              <SelectItem value="10">
+                October
+              </SelectItem>
+              <SelectItem value="11">
+                November
+              </SelectItem>
+              <SelectItem value="12">
+                December
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div class="grid gap-2">
+          <Label for="year">Year</Label>
+          <Select>
+            <SelectTrigger id="year">
+              <SelectValue placeholder="Year" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem v-for="i in 10" :key="i" :value="`${new Date().getFullYear() + i}`">
+                {{ new Date().getFullYear() + i }}
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div class="grid gap-2">
+          <Label for="cvc">CVC</Label>
+          <Input id="cvc" placeholder="CVC" />
+        </div>
+      </div>
+    </CardContent>
+    <CardFooter>
+      <Button class="w-full">
+        Continue
+      </Button>
+    </CardFooter>
+  </Card>
+</template>
diff --git a/apps/www/src/examples/cards/components/ReportAnIssue.vue b/apps/www/src/examples/cards/components/ReportAnIssue.vue
new file mode 100644
index 00000000..ab7e4dd5
--- /dev/null
+++ b/apps/www/src/examples/cards/components/ReportAnIssue.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/lib/registry/default/ui/card'
+import { Input } from '@/lib/registry/default/ui/input'
+import { Label } from '@/lib/registry/default/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/default/ui/select'
+import { Textarea } from '@/lib/registry/default/ui/textarea'
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>Report an issue</CardTitle>
+      <CardDescription>
+        What area are you having problems with?
+      </CardDescription>
+    </CardHeader>
+    <CardContent class="grid gap-6">
+      <div class="grid grid-cols-2 gap-4">
+        <div class="grid gap-2">
+          <Label for="area">Area</Label>
+          <Select default-value="billing">
+            <SelectTrigger id="area">
+              <SelectValue placeholder="Select" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="team">
+                Team
+              </SelectItem>
+              <SelectItem value="billing">
+                Billing
+              </SelectItem>
+              <SelectItem value="account">
+                Account
+              </SelectItem>
+              <SelectItem value="deployments">
+                Deployments
+              </SelectItem>
+              <SelectItem value="support">
+                Support
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div class="grid gap-2">
+          <Label for="security-level">Security Level</Label>
+          <Select default-value="2">
+            <SelectTrigger
+              id="security-level"
+              class="line-clamp-1 w-[160px] truncate"
+            >
+              <SelectValue placeholder="Select level" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="1">
+                Severity 1 (Highest)
+              </SelectItem>
+              <SelectItem value="2">
+                Severity 2
+              </SelectItem>
+              <SelectItem value="3">
+                Severity 3
+              </SelectItem>
+              <SelectItem value="4">
+                Severity 4 (Lowest)
+              </SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+      <div class="grid gap-2">
+        <Label for="subject">Subject</Label>
+        <Input id="subject" placeholder="I need help with..." />
+      </div>
+      <div class="grid gap-2">
+        <Label for="description">Description</Label>
+        <Textarea
+          id="description"
+          placeholder="Please include all information relevant to your issue."
+        />
+      </div>
+    </CardContent>
+    <CardFooter class="justify-between space-x-2">
+      <Button variant="ghost">
+        Cancel
+      </Button>
+      <Button>Submit</Button>
+    </CardFooter>
+  </Card>
+</template>
diff --git a/apps/www/src/examples/cards/components/ShareDocument.vue b/apps/www/src/examples/cards/components/ShareDocument.vue
new file mode 100644
index 00000000..c24750c3
--- /dev/null
+++ b/apps/www/src/examples/cards/components/ShareDocument.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from '@/lib/registry/default/ui/avatar'
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/lib/registry/default/ui/card'
+import { Input } from '@/lib/registry/default/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/default/ui/select'
+import { Separator } from '@/lib/registry/default/ui/separator'
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>Share this document</CardTitle>
+      <CardDescription>
+        Anyone with the link can view this document.
+      </CardDescription>
+    </CardHeader>
+    <CardContent>
+      <div class="flex space-x-2">
+        <Input value="http://example.com/link/to/document" read-only />
+        <Button variant="secondary" class="shrink-0">
+          Copy Link
+        </Button>
+      </div>
+      <Separator class="my-4" />
+      <div class="space-y-4">
+        <h4 class="text-sm font-medium">
+          People with access
+        </h4>
+        <div class="grid gap-6">
+          <div class="flex items-center justify-between space-x-4">
+            <div class="flex items-center space-x-4">
+              <Avatar>
+                <AvatarImage src="/avatars/03.png" />
+                <AvatarFallback>OM</AvatarFallback>
+              </Avatar>
+              <div>
+                <p class="text-sm font-medium leading-none">
+                  Olivia Martin
+                </p>
+                <p class="text-sm text-muted-foreground">
+                  m@example.com
+                </p>
+              </div>
+            </div>
+            <Select default-value="edit">
+              <SelectTrigger class="ml-auto w-[110px]">
+                <SelectValue placeholder="Select" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="edit">
+                  Can edit
+                </SelectItem>
+                <SelectItem value="view">
+                  Can view
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div class="flex items-center justify-between space-x-4">
+            <div class="flex items-center space-x-4">
+              <Avatar>
+                <AvatarImage src="/avatars/05.png" />
+                <AvatarFallback>IN</AvatarFallback>
+              </Avatar>
+              <div>
+                <p class="text-sm font-medium leading-none">
+                  Isabella Nguyen
+                </p>
+                <p class="text-sm text-muted-foreground">
+                  b@example.com
+                </p>
+              </div>
+            </div>
+            <Select default-value="view">
+              <SelectTrigger class="ml-auto w-[110px]">
+                <SelectValue placeholder="Select" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="edit">
+                  Can edit
+                </SelectItem>
+                <SelectItem value="view">
+                  Can view
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div class="flex items-center justify-between space-x-4">
+            <div class="flex items-center space-x-4">
+              <Avatar>
+                <AvatarImage src="/avatars/01.png" />
+                <AvatarFallback>SD</AvatarFallback>
+              </Avatar>
+              <div>
+                <p class="text-sm font-medium leading-none">
+                  Sofia Davis
+                </p>
+                <p class="text-sm text-muted-foreground">
+                  p@example.com
+                </p>
+              </div>
+            </div>
+            <Select default-value="view">
+              <SelectTrigger class="ml-auto w-[110px]">
+                <SelectValue placeholder="Select" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="edit">
+                  Can edit
+                </SelectItem>
+                <SelectItem value="view">
+                  Can view
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/apps/www/src/examples/cards/components/TeamMembers.vue b/apps/www/src/examples/cards/components/TeamMembers.vue
new file mode 100644
index 00000000..28c4d76e
--- /dev/null
+++ b/apps/www/src/examples/cards/components/TeamMembers.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import ChevronDownIcon from '~icons/radix-icons/chevron-down'
+
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from '@/lib/registry/default/ui/avatar'
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/lib/registry/default/ui/card'
+
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/default/ui/popover'
+</script>
+
+<template>
+  <Card>
+    <CardHeader>
+      <CardTitle>Team Members</CardTitle>
+      <CardDescription>
+        Invite your team members to collaborate.
+      </CardDescription>
+    </CardHeader>
+    <CardContent class="grid gap-6">
+      <div class="flex items-center justify-between space-x-4">
+        <div class="flex items-center space-x-4">
+          <Avatar>
+            <AvatarImage src="/avatars/01.png" />
+            <AvatarFallback>OM</AvatarFallback>
+          </Avatar>
+          <div>
+            <p class="text-sm font-medium leading-none">
+              Sofia Davis
+            </p>
+            <p class="text-sm text-muted-foreground">
+              m@example.com
+            </p>
+          </div>
+        </div>
+        <Popover>
+          <PopoverTrigger as-child>
+            <Button variant="outline" class="ml-auto">
+              Owner
+              <ChevronDownIcon class="ml-2 h-4 w-4 text-muted-foreground" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent class="p-0" align="end">
+            <!-- <Command>
+                <CommandInput placeholder="Select new role..." />
+                <CommandList>
+                  <CommandEmpty>No roles found.</CommandEmpty>
+                  <CommandGroup>
+                    <CommandItem class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Viewer</p>
+                      <p class="text-sm text-muted-foreground">
+                        Can view and comment.
+                      </p>
+                    </CommandItem>
+                    <CommandItem class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Developer</p>
+                      <p class="text-sm text-muted-foreground">
+                        Can view, comment and edit.
+                      </p>
+                    </CommandItem>
+                    <CommandItem class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Billing</p>
+                      <p class="text-sm text-muted-foreground">
+                        Can view, comment and manage billing.
+                      </p>
+                    </CommandItem>
+                    <CommandItem class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Owner</p>
+                      <p class="text-sm text-muted-foreground">
+                        Admin-level access to all resources.
+                      </p>
+                    </CommandItem>
+                  </CommandGroup>
+                </CommandList>
+              </Command> -->
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div class="flex items-center justify-between space-x-4">
+        <div class="flex items-center space-x-4">
+          <Avatar>
+            <AvatarImage src="/avatars/02.png" />
+            <AvatarFallback>JL</AvatarFallback>
+          </Avatar>
+          <div>
+            <p class="text-sm font-medium leading-none">
+              Jackson Lee
+            </p>
+            <p class="text-sm text-muted-foreground">
+              p@example.com
+            </p>
+          </div>
+        </div>
+        <Popover>
+          <PopoverTrigger as-child>
+            <Button variant="outline" class="ml-auto">
+              Member
+              <ChevronDownIcon class="ml-2 h-4 w-4 text-muted-foreground" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent class="p-0" align="end">
+            <!-- <Command>
+                <CommandInput placeholder="Select new role..." />
+                <CommandList>
+                  <CommandEmpty>No roles found.</CommandEmpty>
+                  <CommandGroup class="p-1.5">
+                    <CommandItem class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Viewer</p>
+                      <p class="text-sm text-muted-foreground">
+                        Can view and comment.
+                      </p>
+                    </CommandItem>
+                    <CommandItem class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Developer</p>
+                      <p class="text-sm text-muted-foreground">
+                        Can view, comment and edit.
+                      </p>
+                    </CommandItem>
+                    <CommandItem class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Billing</p>
+                      <p class="text-sm text-muted-foreground">
+                        Can view, comment and manage billing.
+                      </p>
+                    </CommandItem>
+                    <CommandItem class="teamaspace-y-1 flex flex-col items-start px-4 py-2">
+                      <p>Owner</p>
+                      <p class="text-sm text-muted-foreground">
+                        Admin-level access to all resources.
+                      </p>
+                    </CommandItem>
+                  </CommandGroup>
+                </CommandList>
+              </Command> -->
+          </PopoverContent>
+        </Popover>
+      </div>
+    </CardContent>
+  </Card>
+</template>