chore: card component with docs moved to ui

apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/components/log-details/components/log-outcome-distribution-section.tsx

@@ -1,8 +1,7 @@
-import { Card, CardContent } from "@/components/ui/card";
 import { formatNumber } from "@/lib/fmt";
 import { cn } from "@/lib/utils";
 import { Clone } from "@unkey/icons";
-import { Button } from "@unkey/ui";
+import { Button, Card, CardContent } from "@unkey/ui";
 import { toast } from "sonner";
 import { formatOutcomeName, getOutcomeColor } from "../../../../../utils";
 

apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/components/log-details/components/log-section.tsx

@@ -1,8 +1,7 @@
 "use client";
-import { Card, CardContent } from "@/components/ui/card";
 import { toast } from "@/components/ui/toaster";
 import { Clone } from "@unkey/icons";
-import { Button } from "@unkey/ui";
+import { Button, Card, CardContent } from "@unkey/ui";
 
 export const LogSection = ({
   details,

apps/dashboard/app/(app)/apis/[apiId]/_overview/components/table/components/log-details/components/roles-permissions.tsx

@@ -1,7 +1,6 @@
-import { Card, CardContent } from "@/components/ui/card";
 import { toast } from "@/components/ui/toaster";
 import { Clone } from "@unkey/icons";
-import { Button } from "@unkey/ui";
+import { Button, Card, CardContent } from "@unkey/ui";
 
 type Role = {
   name: string;

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/components/rbac/permissions.tsx

@@ -1,7 +1,6 @@
 "use client";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { trpc } from "@/lib/trpc/client";
-import { Checkbox } from "@unkey/ui";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, Checkbox } from "@unkey/ui";
 import { toast } from "sonner";
 
 export type Role = {

apps/dashboard/app/(app)/audit/components/table/log-details/components/log-section.tsx

@@ -1,6 +1,5 @@
-import { Card, CardContent } from "@/components/ui/card";
 import { toast } from "@/components/ui/toaster";
-import { Button } from "@unkey/ui";
+import { Button, Card, CardContent } from "@unkey/ui";
 import { Copy } from "lucide-react";
 
 export const LogSection = ({

apps/dashboard/app/(app)/logs/components/table/log-details/components/log-meta.tsx

@@ -1,6 +1,5 @@
-import { Card, CardContent } from "@/components/ui/card";
 import { toast } from "@/components/ui/toaster";
-import { Button } from "@unkey/ui";
+import { Button, Card, CardContent } from "@unkey/ui";
 import { Copy } from "lucide-react";
 
 export const LogMetaSection = ({ content }: { content: string }) => {

apps/dashboard/app/(app)/logs/components/table/log-details/components/log-section.tsx

@@ -1,6 +1,5 @@
-import { Card, CardContent } from "@/components/ui/card";
 import { toast } from "@/components/ui/toaster";
-import { Button } from "@unkey/ui";
+import { Button, Card, CardContent } from "@unkey/ui";
 import { Copy } from "lucide-react";
 
 export const LogSection = ({

apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/log-details/components/log-meta.tsx

@@ -1,6 +1,5 @@
-import { Card, CardContent } from "@/components/ui/card";
 import { toast } from "@/components/ui/toaster";
-import { Button } from "@unkey/ui";
+import { Button, Card, CardContent } from "@unkey/ui";
 import { Copy } from "lucide-react";
 
 export const LogMetaSection = ({ content }: { content: string }) => {

apps/dashboard/app/(app)/ratelimits/[namespaceId]/logs/components/table/log-details/components/log-section.tsx

@@ -1,6 +1,5 @@
-import { Card, CardContent } from "@/components/ui/card";
 import { toast } from "@/components/ui/toaster";
-import { Button } from "@unkey/ui";
+import { Button, Card, CardContent } from "@unkey/ui";
 import { Copy } from "lucide-react";
 
 export const LogSection = ({

apps/dashboard/app/(app)/settings/root-keys/[keyId]/page-layout.tsx

@@ -1,7 +1,7 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Metric } from "@/components/ui/metric";
 import { clickhouse } from "@/lib/clickhouse";
 import type { Key } from "@unkey/db";
+import { Card, CardContent, CardHeader, CardTitle } from "@unkey/ui";
 import { ArrowLeft } from "lucide-react";
 import ms from "ms";
 import Link from "next/link";

apps/dashboard/app/(app)/settings/root-keys/[keyId]/page.tsx

@@ -1,11 +1,10 @@
 import { PageContent } from "@/components/page-content";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { DialogTrigger } from "@/components/ui/dialog";
 import { getAuth } from "@/lib/auth";
 import { clickhouse } from "@/lib/clickhouse";
 import { type Permission, db, eq, schema } from "@/lib/db";
 import { env } from "@/lib/env";
-import { Button } from "@unkey/ui";
+import { Button, Card, CardContent, CardHeader, CardTitle } from "@unkey/ui";
 import { notFound } from "next/navigation";
 import { AccessTable } from "./history/access-table";
 import { Navigation } from "./navigation";

apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/legacy.tsx

@@ -1,18 +1,18 @@
 "use client";
 
 import { Alert, AlertDescription } from "@/components/ui/alert";
+import { toast } from "@/components/ui/toaster";
+import { trpc } from "@/lib/trpc/client";
+import type { Permission } from "@unkey/db";
 import {
+  Button,
   Card,
   CardContent,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
-import { toast } from "@/components/ui/toaster";
-import { trpc } from "@/lib/trpc/client";
-import type { Permission } from "@unkey/db";
-import { Button } from "@unkey/ui";
+} from "@unkey/ui";
 import { Loader2 } from "lucide-react";
 import { useRouter } from "next/navigation";
 

apps/dashboard/app/(app)/settings/root-keys/[keyId]/permissions/permission-manager-card.tsx

@@ -1,4 +1,3 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   Dialog,
   DialogContent,
@@ -9,7 +8,7 @@ import {
 } from "@/components/ui/dialog";
 import { Label } from "@/components/ui/label";
 import type { Permission } from "@unkey/db";
-import { Button } from "@unkey/ui";
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle } from "@unkey/ui";
 import { Check } from "lucide-react";
 import { PermissionToggle } from "./permission_toggle";
 import type { UnkeyPermissions } from "./permissions";

apps/dashboard/app/(app)/settings/root-keys/[keyId]/update-root-key-name.tsx

@@ -1,10 +1,9 @@
 "use client";
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Button, FormInput } from "@unkey/ui";
+import { Button, Card, CardContent, CardFooter, CardHeader, CardTitle, FormInput } from "@unkey/ui";
 import { useRouter } from "next/navigation";
 import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";

apps/dashboard/app/(app)/settings/root-keys/new/client.tsx

@@ -2,9 +2,6 @@
 
 import { VisibleButton } from "@/components/dashboard/visible-button";
 import { Code } from "@/components/ui/code";
-import { Button, Checkbox, CopyButton, Input } from "@unkey/ui";
-
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import {
   Dialog,
@@ -18,6 +15,17 @@ import { Label } from "@/components/ui/label";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import { type UnkeyPermission, unkeyPermissionValidation } from "@unkey/rbac";
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  CopyButton,
+  Input,
+} from "@unkey/ui";
 import { ChevronRight } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { createParser, parseAsArrayOf, useQueryState } from "nuqs";

apps/dashboard/app/new/keys.tsx

@@ -2,18 +2,20 @@
 
 import { VisibleButton } from "@/components/dashboard/visible-button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Code } from "@/components/ui/code";
+import { trpc } from "@/lib/trpc/client";
 import {
+  Button,
   Card,
   CardContent,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
-import { Code } from "@/components/ui/code";
-import { trpc } from "@/lib/trpc/client";
-import { Separator } from "@unkey/ui";
-import { Button, CopyButton, Empty } from "@unkey/ui";
+  CopyButton,
+  Empty,
+  Separator,
+} from "@unkey/ui";
 import { AlertCircle, KeyRound, Lock } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";

apps/engineering/content/design/components/card.example.tsx

@@ -0,0 +1,195 @@
+"use client";
+import { RenderComponentWithSnippet } from "@/app/components/render";
+import { Button } from "@unkey/ui";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  MetricCardTitle,
+} from "@unkey/ui";
+
+export function BasicCard() {
+  return (
+    <RenderComponentWithSnippet>
+      <div className="w-full max-w-md">
+        <Card>
+          <CardContent>
+            <p>
+              This is a basic card with just content. Perfect for simple layouts where you only need
+              a container with consistent styling.
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    </RenderComponentWithSnippet>
+  );
+}
+
+export function CardWithHeader() {
+  return (
+    <RenderComponentWithSnippet>
+      <div className="w-full max-w-md">
+        <Card>
+          <CardHeader>
+            <CardTitle>Card Title</CardTitle>
+            <CardDescription>
+              This card has a header with a title and description. Great for introducing content
+              sections.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p>
+              Your main content goes here. The header provides clear context for what this card
+              contains.
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    </RenderComponentWithSnippet>
+  );
+}
+
+export function CardWithFooter() {
+  return (
+    <RenderComponentWithSnippet>
+      <div className="w-full max-w-md">
+        <Card>
+          <CardContent>
+            <p>
+              This card includes a footer section with actions. The footer has a border separator
+              and consistent spacing.
+            </p>
+          </CardContent>
+          <CardFooter>
+            <Button variant="outline" className="mr-2">
+              Cancel
+            </Button>
+            <Button>Save</Button>
+          </CardFooter>
+        </Card>
+      </div>
+    </RenderComponentWithSnippet>
+  );
+}
+
+export function CompleteCard() {
+  return (
+    <RenderComponentWithSnippet>
+      <div className="w-full max-w-md">
+        <Card>
+          <CardHeader>
+            <CardTitle>Complete Card Example</CardTitle>
+            <CardDescription>
+              This card demonstrates all components working together: header, content, and footer.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              <p>This is the main content area where you can place any content you need.</p>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="p-2 bg-gray-50 rounded">Item 1</div>
+                <div className="p-2 bg-gray-50 rounded">Item 2</div>
+              </div>
+            </div>
+          </CardContent>
+          <CardFooter>
+            <div className="flex justify-between w-full">
+              <span className="text-sm text-gray-500">Last updated: 2 hours ago</span>
+              <div>
+                <Button variant="outline" className="mr-2">
+                  Edit
+                </Button>
+                <Button>View Details</Button>
+              </div>
+            </div>
+          </CardFooter>
+        </Card>
+      </div>
+    </RenderComponentWithSnippet>
+  );
+}
+
+export function MetricCard() {
+  return (
+    <RenderComponentWithSnippet>
+      <div className="w-full max-w-md">
+        <Card>
+          <CardHeader>
+            <CardDescription>Total API Calls</CardDescription>
+            <MetricCardTitle>1,234,567</MetricCardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              <div className="flex justify-between text-sm">
+                <span>This month</span>
+                <span className="text-green-600">+12.5%</span>
+              </div>
+              <div className="flex justify-between text-sm">
+                <span>This week</span>
+                <span className="text-green-600">+8.2%</span>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </RenderComponentWithSnippet>
+  );
+}
+
+export function CardGrid() {
+  return (
+    <RenderComponentWithSnippet>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full">
+        <Card>
+          <CardHeader>
+            <CardTitle>API Keys</CardTitle>
+            <CardDescription>Manage your API keys</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm">Create and manage API keys for your applications.</p>
+          </CardContent>
+          <CardFooter>
+            <Button className="w-full">Manage Keys</Button>
+          </CardFooter>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Analytics</CardTitle>
+            <CardDescription>View usage analytics</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-2">
+              <div className="flex justify-between">
+                <span className="text-sm">Requests</span>
+                <MetricCardTitle>45.2K</MetricCardTitle>
+              </div>
+              <div className="flex justify-between">
+                <span className="text-sm">Success Rate</span>
+                <MetricCardTitle>99.9%</MetricCardTitle>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Settings</CardTitle>
+            <CardDescription>Configure your workspace</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm">Update your workspace settings and preferences.</p>
+          </CardContent>
+          <CardFooter>
+            <Button variant="outline" className="w-full">
+              Configure
+            </Button>
+          </CardFooter>
+        </Card>
+      </div>
+    </RenderComponentWithSnippet>
+  );
+}