From 52af8e628517f84f3e7e7a57d8193ed6f63ab5b9 Mon Sep 17 00:00:00 2001
From: Muhammed Sanjid <sanjid357@gmail.com>
Date: Thu, 26 Mar 2026 23:45:01 +0530
Subject: [PATCH] feat: added ui components

---
 .../showcase/component-live-preview.tsx       | 63 +++++++++++++++++
 apps/platform/components/ui/card.tsx          | 69 +++++++++++++++++++
 apps/platform/components/ui/label.tsx         | 23 +++++++
 apps/platform/components/ui/text.tsx          | 50 ++++++++++++++
 .../platform/content/docs/components/card.mdx | 59 ++++++++++++++++
 .../content/docs/components/label.mdx         | 50 ++++++++++++++
 .../content/docs/components/meta.json         |  2 +-
 .../content/docs/components/separator.mdx     | 60 ++++++++++++++++
 .../content/docs/components/textarea.mdx      | 47 +++++++++++++
 9 files changed, 422 insertions(+), 1 deletion(-)
 create mode 100644 apps/platform/components/ui/card.tsx
 create mode 100644 apps/platform/components/ui/label.tsx
 create mode 100644 apps/platform/components/ui/text.tsx
 create mode 100644 apps/platform/content/docs/components/card.mdx
 create mode 100644 apps/platform/content/docs/components/label.mdx
 create mode 100644 apps/platform/content/docs/components/separator.mdx
 create mode 100644 apps/platform/content/docs/components/textarea.mdx

diff --git a/apps/platform/components/showcase/component-live-preview.tsx b/apps/platform/components/showcase/component-live-preview.tsx
index 0ecf8eb..db2674f 100644
--- a/apps/platform/components/showcase/component-live-preview.tsx
+++ b/apps/platform/components/showcase/component-live-preview.tsx
@@ -6,6 +6,11 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { SpotlightButtonDemo } from "@/components/showcase/spotlight-button-demo";
+import { Card, CardContent, CardHeader, CardFooter } from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import { Separator } from "@/components/ui/separator";
+import { Textarea } from "@/components/ui/textarea";
+import { Text } from "@/components/ui/text";
 
 function PreviewShell({
   children,
@@ -362,6 +367,56 @@ export function TextCodeInlinePreview() {
   );
 }
 
+export function CardInlinePreview() {
+  return (
+    <PreviewShell>
+      <Card className="mx-auto w-full max-w-sm">
+        <CardHeader>
+          <Text variant="h3">Card Title</Text>
+          <Text variant="muted">Description or subtitle goes here.</Text>
+        </CardHeader>
+        <CardContent>
+          <Text>Main content area for your card data.</Text>
+        </CardContent>
+        <CardFooter>
+          <Text variant="small">Footer Action Area</Text>
+        </CardFooter>
+      </Card>
+    </PreviewShell>
+  );
+}
+
+export function LabelInlinePreview() {
+  return (
+    <PreviewShell>
+      <div className="flex flex-col gap-2">
+        <Label>Email Address</Label>
+        <Input placeholder="Enter your email" />
+      </div>
+    </PreviewShell>
+  );
+}
+
+export function SeparatorInlinePreview() {
+  return (
+    <PreviewShell>
+      <div className="flex flex-col gap-4">
+        <Text>Section Top</Text>
+        <Separator />
+        <Text>Section Bottom</Text>
+      </div>
+    </PreviewShell>
+  );
+}
+
+export function TextareaInlinePreview() {
+  return (
+    <PreviewShell>
+      <Textarea placeholder="Describe your issue..." className="min-h-[120px]" />
+    </PreviewShell>
+  );
+}
+
 export function ComponentLivePreview({ slug }: { slug: string }) {
   switch (slug) {
     case "button":
@@ -374,6 +429,14 @@ export function ComponentLivePreview({ slug }: { slug: string }) {
       return <BadgeLivePreview />;
     case "text":
       return <TextLivePreview />;
+    case "card":
+      return <CardInlinePreview />;
+    case "label":
+      return <LabelInlinePreview />;
+    case "separator":
+      return <SeparatorInlinePreview />;
+    case "textarea":
+      return <TextareaInlinePreview />;
     case "spotlight-button":
       return <SpotlightButtonDemo />;
     default:
diff --git a/apps/platform/components/ui/card.tsx b/apps/platform/components/ui/card.tsx
new file mode 100644
index 0000000..0b6c67a
--- /dev/null
+++ b/apps/platform/components/ui/card.tsx
@@ -0,0 +1,69 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col rounded-xl border shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn("flex flex-col gap-1.5 p-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("p-6 pt-0", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center p-6 pt-0", className)}
+      {...props}
+    />
+  )
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/apps/platform/components/ui/label.tsx b/apps/platform/components/ui/label.tsx
new file mode 100644
index 0000000..cfd000a
--- /dev/null
+++ b/apps/platform/components/ui/label.tsx
@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "text-sm font-medium leading-none select-none group-data-[disabled=true]/field:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/apps/platform/components/ui/text.tsx b/apps/platform/components/ui/text.tsx
new file mode 100644
index 0000000..88e6a5e
--- /dev/null
+++ b/apps/platform/components/ui/text.tsx
@@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+type TextVariant =
+  | "default"
+  | "h1"
+  | "h2"
+  | "h3"
+  | "h4"
+  | "p"
+  | "blockquote"
+  | "code"
+  | "lead"
+  | "large"
+  | "small"
+  | "muted";
+
+interface TextProps extends React.ComponentProps<"p"> {
+  variant?: TextVariant;
+}
+
+const TextStyleContext = React.createContext<string | undefined>(undefined);
+
+function Text({ className, variant = "default", ...props }: TextProps) {
+  const styles = {
+    default: "text-foreground",
+    h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl",
+    h2: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0",
+    h3: "scroll-m-20 text-2xl font-semibold tracking-tight",
+    h4: "scroll-m-20 text-xl font-semibold tracking-tight",
+    p: "leading-7 [&:not(:first-child)]:mt-6",
+    blockquote: "mt-6 border-l-2 pl-6 italic",
+    code: "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold",
+    lead: "text-xl text-muted-foreground",
+    large: "text-lg font-semibold",
+    small: "text-sm font-medium leading-none",
+    muted: "text-sm text-muted-foreground",
+  };
+
+  return (
+    <p
+      className={cn(styles[variant], className)}
+      {...props}
+    />
+  );
+}
+
+export { Text, TextStyleContext };
diff --git a/apps/platform/content/docs/components/card.mdx b/apps/platform/content/docs/components/card.mdx
new file mode 100644
index 0000000..2e7b2dc
--- /dev/null
+++ b/apps/platform/content/docs/components/card.mdx
@@ -0,0 +1,59 @@
+---
+title: Card
+description: A flexible container component with support for headers, content, and footers.
+kind: component
+category: Components
+image: /logo.png
+---
+
+import { CodeBlock } from "@/components/showcase/code-block";
+import {
+  ApiTable,
+  DocSection,
+  DocSubsection,
+} from "@/components/showcase/docs-primitives";
+import { CompPreview } from "@/components/mdx/component-preview";
+import { CardInlinePreview } from "@/components/showcase/component-live-preview";
+
+## Import
+
+<DocSection>
+  <CodeBlock language="tsx" title="Import" showLineNumbers={false}>
+    {`import { Card, CardHeader, CardContent, CardFooter } from "@/components/ui/card";
+import { Text } from "@/components/ui/text";`}
+  </CodeBlock>
+</DocSection>
+
+## Usage
+
+<DocSection>
+  The `Card` component provides a structured layout with consistent padding and borders for grouping related information.
+
+### Basic Card
+
+<DocSubsection>
+  A standard card with header, content, and footer.
+  <CompPreview
+    code={`<Card>
+  <CardHeader>
+    <Text variant="h3">Card Title</Text>
+    <Text variant="muted">Card Description</Text>
+  </CardHeader>
+  <CardContent>
+    <Text>This is the main content of the card.</Text>
+  </CardContent>
+  <CardFooter>
+    <Text variant="small">Footer Content</Text>
+  </CardFooter>
+</Card>`}
+  >
+    <CardInlinePreview />
+  </CompPreview>
+</DocSubsection>
+</DocSection>
+
+## API Reference
+
+<DocSection>
+  `Card`, `CardHeader`, `CardContent`, and `CardFooter` all extend the standard `View` props.
+</DocSection>
diff --git a/apps/platform/content/docs/components/label.mdx b/apps/platform/content/docs/components/label.mdx
new file mode 100644
index 0000000..8dc8df3
--- /dev/null
+++ b/apps/platform/content/docs/components/label.mdx
@@ -0,0 +1,50 @@
+---
+title: Label
+description: An accessible label component for form inputs and other interactive elements.
+kind: component
+category: Components
+image: /logo.png
+---
+
+import { CodeBlock } from "@/components/showcase/code-block";
+import {
+  ApiTable,
+  DocSection,
+  DocSubsection,
+} from "@/components/showcase/docs-primitives";
+import { CompPreview } from "@/components/mdx/component-preview";
+import { LabelInlinePreview } from "@/components/showcase/component-live-preview";
+
+## Import
+
+<DocSection>
+  <CodeBlock language="tsx" title="Import" showLineNumbers={false}>
+    {`import { Label } from "@/components/ui/label";`}
+  </CodeBlock>
+</DocSection>
+
+## Usage
+
+<DocSection>
+  The `Label` component provides a consistent typography style for labeling form fields.
+
+### Basic Usage
+
+<DocSubsection>
+  Use it alongside an input to provide clear context.
+  <CompPreview
+    code={`<View className="gap-2">
+  <Label>Email Address</Label>
+  <Input placeholder="Enter your email" />
+</View>`}
+  >
+    <LabelInlinePreview />
+  </CompPreview>
+</DocSubsection>
+</DocSection>
+
+## API Reference
+
+<DocSection>
+  `Label` extends the standard `Text` props from React Native.
+</DocSection>
diff --git a/apps/platform/content/docs/components/meta.json b/apps/platform/content/docs/components/meta.json
index 52047a1..70d5d70 100644
--- a/apps/platform/content/docs/components/meta.json
+++ b/apps/platform/content/docs/components/meta.json
@@ -1,4 +1,4 @@
 {
   "title": "Components",
-  "pages": ["button", "text", "spotlight-button"]
+  "pages": ["button", "text", "input", "badge", "avatar", "card", "label", "separator", "textarea", "spotlight-button"]
 }
diff --git a/apps/platform/content/docs/components/separator.mdx b/apps/platform/content/docs/components/separator.mdx
new file mode 100644
index 0000000..2cdfbdb
--- /dev/null
+++ b/apps/platform/content/docs/components/separator.mdx
@@ -0,0 +1,60 @@
+---
+title: Separator
+description: A thin line used to visually separate content or group related items.
+kind: component
+category: Components
+image: /logo.png
+---
+
+import { CodeBlock } from "@/components/showcase/code-block";
+import {
+  ApiTable,
+  DocSection,
+  DocSubsection,
+} from "@/components/showcase/docs-primitives";
+import { CompPreview } from "@/components/mdx/component-preview";
+import { SeparatorInlinePreview } from "@/components/showcase/component-live-preview";
+
+## Import
+
+<DocSection>
+  <CodeBlock language="tsx" title="Import" showLineNumbers={false}>
+    {`import { Separator } from "@/components/ui/separator";`}
+  </CodeBlock>
+</DocSection>
+
+## Usage
+
+<DocSection>
+  The `Separator` is a simple horizontal or vertical line divider.
+
+### Horizontal
+
+<DocSubsection>
+  The default orientation is horizontal.
+  <CompPreview
+    code={`<View className="gap-4">
+  <Text>Section Top</Text>
+  <Separator />
+  <Text>Section Bottom</Text>
+</View>`}
+  >
+    <SeparatorInlinePreview />
+  </CompPreview>
+</DocSubsection>
+</DocSection>
+
+## API Reference
+
+<DocSection>
+  <ApiTable
+    rows={[
+      {
+        prop: "orientation",
+        type: `"horizontal" | "vertical"`,
+        default: `"horizontal"`,
+        description: "The orientation of the separator.",
+      },
+    ]}
+  />
+</DocSection>
diff --git a/apps/platform/content/docs/components/textarea.mdx b/apps/platform/content/docs/components/textarea.mdx
new file mode 100644
index 0000000..c460700
--- /dev/null
+++ b/apps/platform/content/docs/components/textarea.mdx
@@ -0,0 +1,47 @@
+---
+title: Textarea
+description: A multi-line input component for longer text entries.
+kind: component
+category: Components
+image: /logo.png
+---
+
+import { CodeBlock } from "@/components/showcase/code-block";
+import {
+  ApiTable,
+  DocSection,
+  DocSubsection,
+} from "@/components/showcase/docs-primitives";
+import { CompPreview } from "@/components/mdx/component-preview";
+import { TextareaInlinePreview } from "@/components/showcase/component-live-preview";
+
+## Import
+
+<DocSection>
+  <CodeBlock language="tsx" title="Import" showLineNumbers={false}>
+    {`import { Textarea } from "@/components/ui/textarea";`}
+  </CodeBlock>
+</DocSection>
+
+## Usage
+
+<DocSection>
+  The `Textarea` is an extended `TextInput` that defaults to a multi-line format with a consistent border and background.
+
+### Basic Usage
+
+<DocSubsection>
+  Provide a placeholder for user guidance.
+  <CompPreview
+    code={`<Textarea placeholder="Describe your issue..." />`}
+  >
+    <TextareaInlinePreview />
+  </CompPreview>
+</DocSubsection>
+</DocSection>
+
+## API Reference
+
+<DocSection>
+  `Textarea` extends the standard `TextInput` props from React Native and adds support for the `variant` prop.
+</DocSection>