create-bdpa-react-scaffold 1.9.0 → 2.0.2

package/create-ui-lib.js

@@ -658,6 +658,7 @@ export function cn(...inputs) {
 write("src/index.js", `
 export { Button } from "./components/ui/button.jsx";
 
+export { default as Home } from "./pages/Home.jsx";
 export { default as Login } from "./pages/auth/Login.jsx";
 export { default as Register } from "./pages/auth/Register.jsx";
 
@@ -669,8 +670,50 @@ export { hashPassword, verifyPassword, getPasswordStrength, getPasswordStrengthL
 `);
 
 write("src/App.jsx", `
-import { useState } from "react";
 import { Routes, Route, useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+import Home from "./pages/Home.jsx";
+import Login from "./pages/auth/Login.jsx";
+import Register from "./pages/auth/Register.jsx";
+import ComponentTest from "./pages/ComponentTest.jsx";
+
+export default function App() {
+  const navigate = useNavigate();
+
+  return (
+    <Routes>
+      <Route path="/" element={<Home />} />
+      <Route
+        path="/login"
+        element={
+          <Login
+            onSubmit={() => {
+              toast.success("Login submitted!");
+              navigate("/");
+            }}
+          />
+        }
+      />
+      <Route
+        path="/register"
+        element={
+          <Register
+            onSubmit={() => {
+              toast.success("Registration submitted!");
+              navigate("/");
+            }}
+          />
+        }
+      />
+      <Route path="/component-test" element={<ComponentTest />} />
+    </Routes>
+  );
+}
+`);
+
+write("src/pages/Home.jsx", `
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
@@ -679,24 +722,38 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { Badge } from "@/components/ui/badge";
+import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Progress } from "@/components/ui/progress";
+import { Separator } from "@/components/ui/separator";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { toast } from "sonner";
-import { Menu } from "lucide-react";
-import { ApiClient } from "./utils/api.js";
-import Login from "./pages/auth/Login.jsx";
-import Register from "./pages/auth/Register.jsx";
+import { Menu, Info, CheckCircle } from "lucide-react";
+import { ApiClient } from "@/utils/api.js";
 
 const enrollmentData = [
   { name: "Alex", course: "Web Design Fundamentals", status: "Enrolled" },
   { name: "Jordan", course: "Advanced Web App Design", status: "Waitlisted" },
-  { name: "Taylor", course: "eSports Strategy", status: "Enrolled" }
+  { name: "Taylor", course: "eSports Strategy", status: "Enrolled" },
 ];
 
-function Dashboard() {
+const navLinks = [
+  { label: "Home", href: "/" },
+  { label: "Login", href: "/login" },
+  { label: "Register", href: "/register" },
+  { label: "Component Test", href: "/component-test" },
+];
+
+export default function Home() {
   const [modalOpen, setModalOpen] = useState(false);
   const [posts, setPosts] = useState([]);
   const [loadingPosts, setLoadingPosts] = useState(false);
   const [postsError, setPostsError] = useState("");
-  const navigate = useNavigate();
   const client = new ApiClient("https://jsonplaceholder.typicode.com");
 
   const fetchPosts = async () => {
@@ -711,12 +768,6 @@ function Dashboard() {
     setLoadingPosts(false);
   };
 
-  const navLinks = [
-    { label: "Home", href: "/" },
-    { label: "Login", href: "/login" },
-    { label: "Register", href: "/register" }
-  ];
-
   return (
     <div className="flex h-screen overflow-hidden">
 
@@ -737,7 +788,6 @@ function Dashboard() {
 
         {/* Navbar */}
         <nav className="bg-white border-b px-4 py-3 flex items-center justify-between">
-          {/* Mobile sidebar trigger */}
           <Sheet>
             <SheetTrigger asChild>
               <Button variant="ghost" size="icon" className="md:hidden">
@@ -762,14 +812,10 @@ function Dashboard() {
         {/* Page content */}
         <div className="p-6 space-y-6 overflow-auto">
 
-          {/* BDPA Logo Section */}
+          {/* BDPA Logo */}
           <Card className="text-center">
             <CardContent className="pt-6">
-              <img
-                src="/BDPA_edited.png"
-                alt="BDPA Logo"
-                className="h-32 mx-auto mb-4"
-              />
+              <img src="/BDPA_edited.png" alt="BDPA Logo" className="h-32 mx-auto mb-4" />
               <h1 className="text-3xl font-bold text-blue-600">Welcome to BDPA</h1>
               <p className="text-gray-600 mt-2">Black Data Professionals Association</p>
             </CardContent>
@@ -782,14 +828,28 @@ function Dashboard() {
               <TabsTrigger value="components">Components</TabsTrigger>
               <TabsTrigger value="auth">Auth</TabsTrigger>
             </TabsList>
-            <TabsContent value="overview"><p className="mt-2 text-sm">Welcome to the BDPA React Scaffold and Demo.</p></TabsContent>
-            <TabsContent value="components"><p className="mt-2 text-sm">Buttons, Cards, Inputs, Tables, and more.</p></TabsContent>
-            <TabsContent value="auth"><p className="mt-2 text-sm">Login + Registration pages included.</p></TabsContent>
+            <TabsContent value="overview">
+              <Alert className="mt-2">
+                <CheckCircle className="h-4 w-4" />
+                <AlertTitle>Welcome!</AlertTitle>
+                <AlertDescription>Welcome to the BDPA React Scaffold and Demo. shadcn/ui components are fully installed.</AlertDescription>
+              </Alert>
+            </TabsContent>
+            <TabsContent value="components">
+              <Alert className="mt-2" variant="default">
+                <Info className="h-4 w-4" />
+                <AlertTitle>Components</AlertTitle>
+                <AlertDescription>Buttons, Cards, Inputs, Tables, Badges, Selects, and more — all from shadcn/ui.</AlertDescription>
+              </Alert>
+            </TabsContent>
+            <TabsContent value="auth">
+              <p className="mt-2 text-sm">Login + Registration pages included.</p>
+            </TabsContent>
           </Tabs>
 
           <div className="grid md:grid-cols-2 gap-6">
 
-            {/* Form/Card example */}
+            {/* Sample Form */}
             <Card>
               <CardHeader><CardTitle>Sample Form</CardTitle></CardHeader>
               <CardContent className="space-y-4">
@@ -812,7 +872,7 @@ function Dashboard() {
               </CardContent>
             </Card>
 
-            {/* Table example */}
+            {/* Enrollment Table */}
             <Card>
               <CardHeader><CardTitle>Enrollment Overview</CardTitle></CardHeader>
               <CardContent>
@@ -842,10 +902,85 @@ function Dashboard() {
           <Card>
             <CardHeader><CardTitle>Button Variants</CardTitle></CardHeader>
             <CardContent className="flex flex-wrap gap-3">
-              <Button>Primary</Button>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild><Button>Primary</Button></TooltipTrigger>
+                  <TooltipContent>Primary action</TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
               <Button variant="secondary">Secondary</Button>
               <Button variant="destructive">Danger</Button>
               <Button variant="outline">Outline</Button>
+              <Button variant="ghost">Ghost</Button>
+              <Button variant="link">Link</Button>
+            </CardContent>
+          </Card>
+
+          <Separator />
+
+          {/* Badges */}
+          <Card>
+            <CardHeader><CardTitle>Badges</CardTitle></CardHeader>
+            <CardContent className="flex flex-wrap gap-2">
+              <Badge>Default</Badge>
+              <Badge variant="secondary">Secondary</Badge>
+              <Badge variant="destructive">Destructive</Badge>
+              <Badge variant="outline">Outline</Badge>
+            </CardContent>
+          </Card>
+
+          {/* Select / Checkbox / Switch / Textarea / Progress */}
+          <div className="grid md:grid-cols-2 gap-6">
+            <Card>
+              <CardHeader><CardTitle>Select &amp; Switch</CardTitle></CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-1">
+                  <Label>Course Level</Label>
+                  <Select>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select level" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="beginner">Beginner</SelectItem>
+                      <SelectItem value="intermediate">Intermediate</SelectItem>
+                      <SelectItem value="advanced">Advanced</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Checkbox id="terms" />
+                  <Label htmlFor="terms">Accept terms &amp; conditions</Label>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Switch id="notifications" />
+                  <Label htmlFor="notifications">Enable notifications</Label>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader><CardTitle>Textarea &amp; Progress</CardTitle></CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-1">
+                  <Label htmlFor="bio">Bio</Label>
+                  <Textarea id="bio" placeholder="Tell us about yourself..." />
+                </div>
+                <div className="space-y-1">
+                  <Label>Profile Completion</Label>
+                  <Progress value={65} className="h-2" />
+                  <p className="text-xs text-muted-foreground">65% complete</p>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Skeleton */}
+          <Card>
+            <CardHeader><CardTitle>Skeleton Loading State</CardTitle></CardHeader>
+            <CardContent className="space-y-2">
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-3/4" />
+              <Skeleton className="h-4 w-1/2" />
             </CardContent>
           </Card>
 
@@ -874,9 +1009,7 @@ function Dashboard() {
           {/* Dialog + Toast */}
           <div className="flex gap-4">
             <Button onClick={() => setModalOpen(true)}>Open Dialog</Button>
-            <Button onClick={() => toast.success("This is a toast!")}>
-              Show Toast
-            </Button>
+            <Button onClick={() => toast.success("This is a toast!")}>Show Toast</Button>
           </div>
 
           <Dialog open={modalOpen} onOpenChange={setModalOpen}>
@@ -894,38 +1027,6 @@ function Dashboard() {
     </div>
   );
 }
-
-export default function App() {
-  const navigate = useNavigate();
-
-  return (
-    <Routes>
-      <Route path="/" element={<Dashboard />} />
-      <Route
-        path="/login"
-        element={
-          <Login
-            onSubmit={() => {
-              alert("Login submitted!");
-              navigate("/");
-            }}
-          />
-        }
-      />
-      <Route
-        path="/register"
-        element={
-          <Register
-            onSubmit={() => {
-              alert("Registration submitted!");
-              navigate("/");
-            }}
-          />
-        }
-      />
-    </Routes>
-  );
-}
 `);
 
 // Note: All UI components (Card, Input, Form, Table, Navbar, Tabs, Toast, etc.)
@@ -937,32 +1038,83 @@ export default function App() {
 // -------------------------------
 
 write("src/pages/auth/Login.jsx", `
+import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Separator } from "@/components/ui/separator";
+import { Badge } from "@/components/ui/badge";
 
 export default function Login({ onSubmit }) {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const [rememberMe, setRememberMe] = useState(false);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!email || !password) {
+      setError("Email and password are required.");
+      return;
+    }
+    setError("");
+    if (onSubmit) onSubmit({ email, password, rememberMe });
+  };
+
   return (
     <div className="flex items-center justify-center min-h-screen bg-gray-100">
       <Card className="w-full max-w-sm">
         <CardHeader>
-          <CardTitle>Sign In</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-4">
-          <div className="space-y-1">
-            <Label htmlFor="email">Email</Label>
-            <Input id="email" type="email" placeholder="you@example.com" />
-          </div>
-          <div className="space-y-1">
-            <Label htmlFor="password">Password</Label>
-            <Input id="password" type="password" placeholder="••••••••" />
+          <div className="flex items-center justify-between">
+            <CardTitle>Sign In</CardTitle>
+            <Badge variant="outline">shadcn/ui</Badge>
           </div>
-          <Button className="w-full" onClick={onSubmit}>
-            Sign In
-          </Button>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {error && (
+              <Alert variant="destructive">
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
+            <div className="space-y-1">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="you@example.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+              />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="password">Password</Label>
+              <Input
+                id="password"
+                type="password"
+                placeholder="Password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+            </div>
+            <div className="flex items-center gap-2">
+              <Checkbox
+                id="remember"
+                checked={rememberMe}
+                onCheckedChange={setRememberMe}
+              />
+              <Label htmlFor="remember" className="text-sm">Remember me</Label>
+            </div>
+            <Button type="submit" className="w-full">
+              Sign In
+            </Button>
+          </form>
+          <Separator className="my-4" />
           <p className="text-sm text-center text-gray-600">
-            Don’t have an account?{" "}
+            Don't have an account?{" "}
             <a href="/register" className="text-blue-600 hover:underline">
               Create one
             </a>
@@ -973,35 +1125,108 @@ export default function Login({ onSubmit }) {
   );
 }`);
 
+
 write("src/pages/auth/Register.jsx", `
+import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Progress } from "@/components/ui/progress";
+import { Separator } from "@/components/ui/separator";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Badge } from "@/components/ui/badge";
+
+function calcStrength(pw) {
+  let s = 0;
+  if (pw.length >= 8) s++;
+  if (pw.length >= 12) s++;
+  if (/[a-z]/.test(pw) && /[A-Z]/.test(pw)) s++;
+  if (/\\d/.test(pw)) s++;
+  if (/[^A-Za-z0-9]/.test(pw)) s++;
+  return Math.min(s, 4);
+}
+
+const strengthLabels = ["Weak", "Fair", "Good", "Strong", "Very Strong"];
+const strengthColors = ["bg-red-500", "bg-orange-400", "bg-yellow-400", "bg-green-400", "bg-green-600"];
 
 export default function Register({ onSubmit }) {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [role, setRole] = useState("");
+  const [error, setError] = useState("");
+  const strength = calcStrength(password);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!name || !email || !password) {
+      setError("All fields are required.");
+      return;
+    }
+    if (password.length < 8) {
+      setError("Password must be at least 8 characters.");
+      return;
+    }
+    setError("");
+    if (onSubmit) onSubmit({ name, email, password, role });
+  };
+
   return (
     <div className="flex items-center justify-center min-h-screen bg-gray-100">
       <Card className="w-full max-w-sm">
         <CardHeader>
-          <CardTitle>Create Account</CardTitle>
+          <div className="flex items-center justify-between">
+            <CardTitle>Create Account</CardTitle>
+            <Badge variant="outline">shadcn/ui</Badge>
+          </div>
         </CardHeader>
-        <CardContent className="space-y-4">
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            {error && (
+              <Alert variant="destructive">
+                <AlertDescription>{error}</AlertDescription>
+              </Alert>
+            )}
           <div className="space-y-1">
             <Label htmlFor="name">Full Name</Label>
-            <Input id="name" placeholder="Your Name" />
+            <Input id="name" placeholder="Your Name" value={name} onChange={(e) => setName(e.target.value)} />
           </div>
           <div className="space-y-1">
             <Label htmlFor="email">Email</Label>
-            <Input id="email" type="email" placeholder="you@example.com" />
+            <Input id="email" type="email" placeholder="you@example.com" value={email} onChange={(e) => setEmail(e.target.value)} />
+          </div>
+          <div className="space-y-1">
+            <Label htmlFor="r-role">Role</Label>
+            <Select onValueChange={setRole}>
+              <SelectTrigger id="r-role">
+                <SelectValue placeholder="Select your role" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="student">Student</SelectItem>
+                <SelectItem value="mentor">Mentor</SelectItem>
+                <SelectItem value="admin">Admin</SelectItem>
+              </SelectContent>
+            </Select>
           </div>
           <div className="space-y-1">
             <Label htmlFor="password">Password</Label>
-            <Input id="password" type="password" placeholder="••••••••" />
+            <Input id="password" type="password" placeholder="••••••••" value={password} onChange={(e) => setPassword(e.target.value)} />
           </div>
-          <Button className="w-full" onClick={onSubmit}>
-            Register
-          </Button>
+            {password && (
+              <div className="space-y-1">
+                <Progress value={(strength / 4) * 100} className="h-2" />
+                <p className="text-xs text-muted-foreground">
+                  Strength: <span className="font-medium">{strengthLabels[strength]}</span>
+                </p>
+              </div>
+            )}
+            <Button type="submit" className="w-full">
+              Register
+            </Button>
+          </form>
+          <Separator className="my-4" />
           <p className="text-sm text-center text-gray-600">
             Already have an account?{" "}
             <a href="/login" className="text-blue-600 hover:underline">
@@ -1015,6 +1240,304 @@ export default function Register({ onSubmit }) {
 }
 `);
 
+// -------------------------------
+// ComponentTest page — comprehensive shadcn test
+// -------------------------------
+
+write("src/pages/ComponentTest.jsx", `
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Switch } from "@/components/ui/switch";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Progress } from "@/components/ui/progress";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Textarea } from "@/components/ui/textarea";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from "@/components/ui/dialog";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { toast } from "sonner";
+import { CheckCircle, Info, AlertCircle } from "lucide-react";
+
+const sampleRows = [
+  { id: 1, name: "Ada Lovelace", role: "Student", status: "Active" },
+  { id: 2, name: "Grace Hopper", role: "Mentor", status: "Active" },
+  { id: 3, name: "Alan Turing", role: "Admin", status: "Inactive" },
+];
+
+export default function ComponentTest() {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [progress, setProgress] = useState(40);
+  const [switchOn, setSwitchOn] = useState(false);
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <div className="p-6 max-w-4xl mx-auto space-y-8">
+      <div className="flex items-center justify-between">
+        <h1 className="text-3xl font-bold">shadcn/ui Component Test</h1>
+        <Badge>All Components</Badge>
+      </div>
+
+      <Separator />
+
+      {/* Alerts */}
+      <Card>
+        <CardHeader><CardTitle>Alert</CardTitle></CardHeader>
+        <CardContent className="space-y-3">
+          <Alert>
+            <Info className="h-4 w-4" />
+            <AlertTitle>Info</AlertTitle>
+            <AlertDescription>This is a default informational alert.</AlertDescription>
+          </Alert>
+          <Alert variant="destructive">
+            <AlertCircle className="h-4 w-4" />
+            <AlertTitle>Error</AlertTitle>
+            <AlertDescription>Something went wrong. Please try again.</AlertDescription>
+          </Alert>
+        </CardContent>
+      </Card>
+
+      {/* Avatar */}
+      <Card>
+        <CardHeader><CardTitle>Avatar</CardTitle></CardHeader>
+        <CardContent className="flex gap-4">
+          <Avatar>
+            <AvatarImage src="https://github.com/shadcn.png" alt="shadcn" />
+            <AvatarFallback>CN</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>AL</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarFallback>GH</AvatarFallback>
+          </Avatar>
+        </CardContent>
+      </Card>
+
+      {/* Badge */}
+      <Card>
+        <CardHeader><CardTitle>Badge</CardTitle></CardHeader>
+        <CardContent className="flex flex-wrap gap-2">
+          <Badge>Default</Badge>
+          <Badge variant="secondary">Secondary</Badge>
+          <Badge variant="destructive">Destructive</Badge>
+          <Badge variant="outline">Outline</Badge>
+        </CardContent>
+      </Card>
+
+      {/* Button */}
+      <Card>
+        <CardHeader><CardTitle>Button</CardTitle></CardHeader>
+        <CardContent className="flex flex-wrap gap-2">
+          <Button onClick={() => toast.success("Primary clicked!")}>Primary</Button>
+          <Button variant="secondary">Secondary</Button>
+          <Button variant="destructive">Destructive</Button>
+          <Button variant="outline">Outline</Button>
+          <Button variant="ghost">Ghost</Button>
+          <Button variant="link">Link</Button>
+          <Button disabled>Disabled</Button>
+          <Button size="sm">Small</Button>
+          <Button size="lg">Large</Button>
+        </CardContent>
+      </Card>
+
+      {/* Checkbox + Switch */}
+      <Card>
+        <CardHeader><CardTitle>Checkbox &amp; Switch</CardTitle></CardHeader>
+        <CardContent className="space-y-3">
+          <div className="flex items-center gap-2">
+            <Checkbox id="test-cb" checked={checked} onCheckedChange={setChecked} />
+            <Label htmlFor="test-cb">Accept terms: {checked ? "Yes" : "No"}</Label>
+          </div>
+          <div className="flex items-center gap-2">
+            <Switch id="test-sw" checked={switchOn} onCheckedChange={setSwitchOn} />
+            <Label htmlFor="test-sw">Notifications: {switchOn ? "On" : "Off"}</Label>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Input + Textarea + Select + Label */}
+      <Card>
+        <CardHeader><CardTitle>Input / Textarea / Select</CardTitle></CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-1">
+            <Label htmlFor="ct-name">Name</Label>
+            <Input id="ct-name" placeholder="Enter your name" />
+          </div>
+          <div className="space-y-1">
+            <Label htmlFor="ct-bio">Bio</Label>
+            <Textarea id="ct-bio" placeholder="Tell us about yourself" />
+          </div>
+          <div className="space-y-1">
+            <Label>Role</Label>
+            <Select>
+              <SelectTrigger>
+                <SelectValue placeholder="Choose a role" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="student">Student</SelectItem>
+                <SelectItem value="mentor">Mentor</SelectItem>
+                <SelectItem value="admin">Admin</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Progress */}
+      <Card>
+        <CardHeader><CardTitle>Progress</CardTitle></CardHeader>
+        <CardContent className="space-y-3">
+          <Progress value={progress} />
+          <div className="flex gap-2">
+            <Button size="sm" onClick={() => setProgress(Math.max(0, progress - 10))}>-10</Button>
+            <Button size="sm" onClick={() => setProgress(Math.min(100, progress + 10))}>+10</Button>
+            <span className="text-sm self-center">{progress}%</span>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Skeleton */}
+      <Card>
+        <CardHeader><CardTitle>Skeleton</CardTitle></CardHeader>
+        <CardContent className="space-y-2">
+          <div className="flex items-center gap-3">
+            <Skeleton className="h-10 w-10 rounded-full" />
+            <div className="space-y-1 flex-1">
+              <Skeleton className="h-4 w-full" />
+              <Skeleton className="h-4 w-2/3" />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Tabs */}
+      <Card>
+        <CardHeader><CardTitle>Tabs</CardTitle></CardHeader>
+        <CardContent>
+          <Tabs defaultValue="tab1">
+            <TabsList>
+              <TabsTrigger value="tab1">Tab One</TabsTrigger>
+              <TabsTrigger value="tab2">Tab Two</TabsTrigger>
+              <TabsTrigger value="tab3">Tab Three</TabsTrigger>
+            </TabsList>
+            <TabsContent value="tab1"><p className="mt-2 text-sm">Content for Tab One.</p></TabsContent>
+            <TabsContent value="tab2"><p className="mt-2 text-sm">Content for Tab Two.</p></TabsContent>
+            <TabsContent value="tab3"><p className="mt-2 text-sm">Content for Tab Three.</p></TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+
+      {/* Table */}
+      <Card>
+        <CardHeader><CardTitle>Table</CardTitle></CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>#</TableHead>
+                <TableHead>Name</TableHead>
+                <TableHead>Role</TableHead>
+                <TableHead>Status</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {sampleRows.map((r) => (
+                <TableRow key={r.id}>
+                  <TableCell>{r.id}</TableCell>
+                  <TableCell>{r.name}</TableCell>
+                  <TableCell>{r.role}</TableCell>
+                  <TableCell>
+                    <Badge variant={r.status === "Active" ? "default" : "secondary"}>{r.status}</Badge>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+
+      {/* Dialog */}
+      <Card>
+        <CardHeader><CardTitle>Dialog</CardTitle></CardHeader>
+        <CardContent>
+          <Button onClick={() => setDialogOpen(true)}>Open Dialog</Button>
+          <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>shadcn Dialog</DialogTitle>
+                <DialogDescription>This is a modal dialog from shadcn/ui.</DialogDescription>
+              </DialogHeader>
+              <p className="text-sm">Dialog content goes here.</p>
+              <Button className="mt-4" onClick={() => setDialogOpen(false)}>Close</Button>
+            </DialogContent>
+          </Dialog>
+        </CardContent>
+      </Card>
+
+      {/* Sheet */}
+      <Card>
+        <CardHeader><CardTitle>Sheet</CardTitle></CardHeader>
+        <CardContent>
+          <Sheet>
+            <SheetTrigger asChild>
+              <Button variant="outline">Open Sheet</Button>
+            </SheetTrigger>
+            <SheetContent>
+              <SheetHeader>
+                <SheetTitle>Side Sheet</SheetTitle>
+              </SheetHeader>
+              <p className="mt-4 text-sm">Sheet content from shadcn/ui.</p>
+            </SheetContent>
+          </Sheet>
+        </CardContent>
+      </Card>
+
+      {/* Tooltip */}
+      <Card>
+        <CardHeader><CardTitle>Tooltip</CardTitle></CardHeader>
+        <CardContent>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button variant="outline">Hover me</Button>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>This is a shadcn Tooltip</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </CardContent>
+      </Card>
+
+      {/* Toast */}
+      <Card>
+        <CardHeader><CardTitle>Toast (Sonner)</CardTitle></CardHeader>
+        <CardContent className="flex flex-wrap gap-2">
+          <Button onClick={() => toast.success("Success toast!")}>Success</Button>
+          <Button variant="destructive" onClick={() => toast.error("Error toast!")}>Error</Button>
+          <Button variant="outline" onClick={() => toast.info("Info toast!")}>Info</Button>
+          <Button variant="secondary" onClick={() => toast.warning("Warning toast!")}>Warning</Button>
+        </CardContent>
+      </Card>
+
+      <div className="flex justify-center pt-4">
+        <a href="/" className="text-sm text-blue-600 hover:underline">&larr; Back to Home</a>
+      </div>
+    </div>
+  );
+}
+`);
+
 // -------------------------------
 // Layout Components
 // -------------------------------

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-bdpa-react-scaffold",
-  "version": "1.9.0",
-  "description": "Scaffold a React + Tailwind UI library demo via Vite.",
+  "version": "2.0.2",
+  "description": "Scaffold a React + Tailwind + shadcn/ui component demo via Vite.",
   "bin": {
     "create-bdpa-react-scaffold": "create-ui-lib.js"
   },