diff --git a/client/src/utils/artifacts.ts b/client/src/utils/artifacts.ts
index d95530431e..d48362eed4 100644
--- a/client/src/utils/artifacts.ts
+++ b/client/src/utils/artifacts.ts
@@ -1,5 +1,5 @@
 import dedent from 'dedent';
-import type { CodeBlock } from '~/common';
+// import * as shadcnComponents from '~/utils/shadcn';
 
 const artifactFilename = {
   'application/vnd.react': 'App.tsx',
@@ -45,36 +45,35 @@ export const sharedProps = {
       'date-fns': '^3.3.1',
       'tailwind-merge': '^1.9.1',
       'tailwindcss-animate': '^1.0.5',
-      // recharts: '2.9.0',
-      // '@radix-ui/react-accordion': '^1.2.0',
-      // '@radix-ui/react-alert-dialog': '^1.1.1',
-      // '@radix-ui/react-aspect-ratio': '^1.1.0',
-      // '@radix-ui/react-avatar': '^1.1.0',
-      // '@radix-ui/react-checkbox': '^1.1.1',
-      // '@radix-ui/react-collapsible': '^1.1.0',
-      // '@radix-ui/react-dialog': '^1.1.1',
-      // '@radix-ui/react-dropdown-menu': '^2.1.1',
-      // '@radix-ui/react-hover-card': '^1.1.1',
-      // '@radix-ui/react-label': '^2.1.0',
-      // '@radix-ui/react-menubar': '^1.1.1',
-      // '@radix-ui/react-navigation-menu': '^1.2.0',
-      // '@radix-ui/react-popover': '^1.1.1',
-      // '@radix-ui/react-progress': '^1.1.0',
-      // '@radix-ui/react-radio-group': '^1.2.0',
-      // '@radix-ui/react-select': '^2.1.1',
-      // '@radix-ui/react-separator': '^1.1.0',
-      // '@radix-ui/react-slider': '^1.2.0',
-      // '@radix-ui/react-slot': '^1.1.0',
-      // '@radix-ui/react-switch': '^1.1.0',
-      // '@radix-ui/react-tabs': '^1.1.0',
-      // '@radix-ui/react-toast': '^1.2.1',
-      // '@radix-ui/react-toggle': '^1.1.0',
-      // '@radix-ui/react-toggle-group': '^1.1.0',
-      // '@radix-ui/react-tooltip': '^1.1.2',
-
-      // 'embla-carousel-react': '^8.1.8',
-      // 'react-day-picker': '^8.10.1',
-      // vaul: '^0.9.1',
+      recharts: '2.12.7',
+      '@radix-ui/react-accordion': '^1.1.2',
+      '@radix-ui/react-alert-dialog': '^1.0.2',
+      '@radix-ui/react-aspect-ratio': '^1.1.0',
+      '@radix-ui/react-avatar': '^1.1.0',
+      '@radix-ui/react-checkbox': '^1.0.3',
+      '@radix-ui/react-collapsible': '^1.0.3',
+      '@radix-ui/react-dialog': '^1.0.2',
+      '@radix-ui/react-dropdown-menu': '^2.1.1',
+      '@radix-ui/react-hover-card': '^1.0.5',
+      '@radix-ui/react-label': '^2.0.0',
+      '@radix-ui/react-menubar': '^1.1.1',
+      '@radix-ui/react-navigation-menu': '^1.2.0',
+      '@radix-ui/react-popover': '^1.0.7',
+      '@radix-ui/react-progress': '^1.1.0',
+      '@radix-ui/react-radio-group': '^1.1.3',
+      '@radix-ui/react-select': '^2.0.0',
+      '@radix-ui/react-separator': '^1.0.3',
+      '@radix-ui/react-slider': '^1.1.1',
+      '@radix-ui/react-switch': '^1.0.3',
+      '@radix-ui/react-tabs': '^1.0.3',
+      '@radix-ui/react-toast': '^1.1.5',
+      '@radix-ui/react-tooltip': '^1.0.6',
+      '@radix-ui/react-slot': '^1.1.0',
+      '@radix-ui/react-toggle': '^1.1.0',
+      '@radix-ui/react-toggle-group': '^1.1.0',
+      'embla-carousel-react': '^8.2.0',
+      'react-day-picker': '^9.0.8',
+      vaul: '^0.9.1',
     },
   },
 } as const;
@@ -84,6 +83,44 @@ export const sharedOptions = {
 };
 
 export const sharedFiles = {
+  // '/lib/utils.ts': shadcnComponents.utils,
+  // '/components/ui/accordion.tsx': shadcnComponents.accordian,
+  // '/components/ui/alert-dialog.tsx': shadcnComponents.alertDialog,
+  // '/components/ui/alert.tsx': shadcnComponents.alert,
+  // '/components/ui/avatar.tsx': shadcnComponents.avatar,
+  // '/components/ui/badge.tsx': shadcnComponents.badge,
+  // '/components/ui/breadcrumb.tsx': shadcnComponents.breadcrumb,
+  // '/components/ui/button.tsx': shadcnComponents.button,
+  // '/components/ui/calendar.tsx': shadcnComponents.calendar,
+  // '/components/ui/card.tsx': shadcnComponents.card,
+  // '/components/ui/carousel.tsx': shadcnComponents.carousel,
+  // '/components/ui/checkbox.tsx': shadcnComponents.checkbox,
+  // '/components/ui/collapsible.tsx': shadcnComponents.collapsible,
+  // '/components/ui/dialog.tsx': shadcnComponents.dialog,
+  // '/components/ui/drawer.tsx': shadcnComponents.drawer,
+  // '/components/ui/dropdown-menu.tsx': shadcnComponents.dropdownMenu,
+  // '/components/ui/input.tsx': shadcnComponents.input,
+  // '/components/ui/label.tsx': shadcnComponents.label,
+  // '/components/ui/menubar.tsx': shadcnComponents.menuBar,
+  // '/components/ui/navigation-menu.tsx': shadcnComponents.navigationMenu,
+  // '/components/ui/pagination.tsx': shadcnComponents.pagination,
+  // '/components/ui/popover.tsx': shadcnComponents.popover,
+  // '/components/ui/progress.tsx': shadcnComponents.progress,
+  // '/components/ui/radio-group.tsx': shadcnComponents.radioGroup,
+  // '/components/ui/select.tsx': shadcnComponents.select,
+  // '/components/ui/separator.tsx': shadcnComponents.separator,
+  // '/components/ui/skeleton.tsx': shadcnComponents.skeleton,
+  // '/components/ui/slider.tsx': shadcnComponents.slider,
+  // '/components/ui/switch.tsx': shadcnComponents.switchComponent,
+  // '/components/ui/table.tsx': shadcnComponents.table,
+  // '/components/ui/tabs.tsx': shadcnComponents.tabs,
+  // '/components/ui/textarea.tsx': shadcnComponents.textarea,
+  // '/components/ui/toast.tsx': shadcnComponents.toast,
+  // '/components/ui/toaster.tsx': shadcnComponents.toaster,
+  // '/components/ui/toggle-group.tsx': shadcnComponents.toggleGroup,
+  // '/components/ui/toggle.tsx': shadcnComponents.toggle,
+  // '/components/ui/tooltip.tsx': shadcnComponents.tooltip,
+  // '/components/ui/use-toast.tsx': shadcnComponents.useToast,
   '/public/index.html': dedent`
     <!DOCTYPE html>
     <html lang="en">
diff --git a/client/src/utils/shadcn-docs/avatar.tsx b/client/src/utils/shadcn-docs/avatar.tsx
new file mode 100644
index 0000000000..9499bf689f
--- /dev/null
+++ b/client/src/utils/shadcn-docs/avatar.tsx
@@ -0,0 +1,12 @@
+export const name = 'Avatar';
+
+export const importDocs = `
+import { Avatar, AvatarFallback, AvatarImage } from "/components/ui/avatar";
+`;
+
+export const usageDocs = `
+<Avatar>
+  <AvatarImage src="https://github.com/nutlope.png" />
+  <AvatarFallback>CN</AvatarFallback>
+</Avatar>
+`;
diff --git a/client/src/utils/shadcn-docs/button.tsx b/client/src/utils/shadcn-docs/button.tsx
new file mode 100644
index 0000000000..e63e9f7aba
--- /dev/null
+++ b/client/src/utils/shadcn-docs/button.tsx
@@ -0,0 +1,14 @@
+export const name = 'Button';
+
+export const importDocs = `
+import { Button } from "/components/ui/button"
+`;
+
+export const usageDocs = `
+<Button>A normal button</Button>
+<Button variant='secondary'>Button</Button>
+<Button variant='destructive'>Button</Button>
+<Button variant='outline'>Button</Button>
+<Button variant='ghost'>Button</Button>
+<Button variant='link'>Button</Button>
+`;
diff --git a/client/src/utils/shadcn-docs/card.tsx b/client/src/utils/shadcn-docs/card.tsx
new file mode 100644
index 0000000000..bb4f9a5e3e
--- /dev/null
+++ b/client/src/utils/shadcn-docs/card.tsx
@@ -0,0 +1,27 @@
+export const name = 'Card';
+
+export const importDocs = `
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "/components/ui/card"
+ `;
+
+export const usageDocs = `
+<Card>
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Card Description</CardDescription>
+  </CardHeader>
+  <CardContent>
+    <p>Card Content</p>
+  </CardContent>
+  <CardFooter>
+    <p>Card Footer</p>
+  </CardFooter>
+</Card>
+`;
diff --git a/client/src/utils/shadcn-docs/checkbox.tsx b/client/src/utils/shadcn-docs/checkbox.tsx
new file mode 100644
index 0000000000..96c5f27789
--- /dev/null
+++ b/client/src/utils/shadcn-docs/checkbox.tsx
@@ -0,0 +1,9 @@
+export const name = 'Checkbox';
+
+export const importDocs = `
+import { Checkbox } from "/components/ui/checkbox"
+`;
+
+export const usageDocs = `
+<Checkbox />
+`;
diff --git a/client/src/utils/shadcn-docs/index.ts b/client/src/utils/shadcn-docs/index.ts
new file mode 100644
index 0000000000..943d8957d1
--- /dev/null
+++ b/client/src/utils/shadcn-docs/index.ts
@@ -0,0 +1,23 @@
+import * as Avatar from './avatar';
+import * as Button from './button';
+import * as Card from './card';
+// import * as Checkbox from "./checkbox";
+import * as Input from './input';
+import * as Label from './label';
+import * as RadioGroup from './radio-group';
+import * as Select from './select';
+import * as Textarea from './textarea';
+
+const shadcnDocs = [
+  Avatar,
+  Button,
+  Card,
+  // Checkbox,
+  Input,
+  Label,
+  RadioGroup,
+  Select,
+  Textarea,
+];
+
+export default shadcnDocs;
diff --git a/client/src/utils/shadcn-docs/input.tsx b/client/src/utils/shadcn-docs/input.tsx
new file mode 100644
index 0000000000..62f764da5f
--- /dev/null
+++ b/client/src/utils/shadcn-docs/input.tsx
@@ -0,0 +1,9 @@
+export const name = 'Input';
+
+export const importDocs = `
+import { Input } from "/components/ui/input"
+`;
+
+export const usageDocs = `
+<Input />
+`;
diff --git a/client/src/utils/shadcn-docs/label.tsx b/client/src/utils/shadcn-docs/label.tsx
new file mode 100644
index 0000000000..5fdfa3ca5a
--- /dev/null
+++ b/client/src/utils/shadcn-docs/label.tsx
@@ -0,0 +1,9 @@
+export const name = 'Label';
+
+export const importDocs = `
+import { Label } from "/components/ui/label"
+`;
+
+export const usageDocs = `
+<Label htmlFor="email">Your email address</Label>
+`;
diff --git a/client/src/utils/shadcn-docs/radio-group.tsx b/client/src/utils/shadcn-docs/radio-group.tsx
new file mode 100644
index 0000000000..a82ba7170e
--- /dev/null
+++ b/client/src/utils/shadcn-docs/radio-group.tsx
@@ -0,0 +1,19 @@
+export const name = 'RadioGroup';
+
+export const importDocs = `
+import { Label } from "/components/ui/label"
+import { RadioGroup, RadioGroupItem } from "/components/ui/radio-group"
+`;
+
+export const usageDocs = `
+<RadioGroup defaultValue="option-one">
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem value="option-one" id="option-one" />
+    <Label htmlFor="option-one">Option One</Label>
+  </div>
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem value="option-two" id="option-two" />
+    <Label htmlFor="option-two">Option Two</Label>
+  </div>
+</RadioGroup>
+`;
diff --git a/client/src/utils/shadcn-docs/select.tsx b/client/src/utils/shadcn-docs/select.tsx
new file mode 100644
index 0000000000..526fb9d013
--- /dev/null
+++ b/client/src/utils/shadcn-docs/select.tsx
@@ -0,0 +1,24 @@
+export const name = 'Select';
+
+export const importDocs = `
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "/components/ui/select"
+`;
+
+export const usageDocs = `
+<Select>
+  <SelectTrigger className="w-[180px]">
+    <SelectValue placeholder="Theme" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="light">Light</SelectItem>
+    <SelectItem value="dark">Dark</SelectItem>
+    <SelectItem value="system">System</SelectItem>
+  </SelectContent>
+</Select>
+`;
diff --git a/client/src/utils/shadcn-docs/textarea.tsx b/client/src/utils/shadcn-docs/textarea.tsx
new file mode 100644
index 0000000000..c846da50de
--- /dev/null
+++ b/client/src/utils/shadcn-docs/textarea.tsx
@@ -0,0 +1,9 @@
+export const name = 'Textarea';
+
+export const importDocs = `
+import { Textarea } from "/components/ui/textarea"
+`;
+
+export const usageDocs = `
+<Textarea />
+`;