feat: add a separator component

jaaydenh · jaaydenh · commit 97fe2be67acb · 2025-06-20T16:27:36.000Z
diff --git a/site/package.json b/site/package.json
@@ -64,6 +64,7 @@
 		"@radix-ui/react-radio-group": "1.2.3",
 		"@radix-ui/react-scroll-area": "1.2.3",
 		"@radix-ui/react-select": "2.1.4",
+		"@radix-ui/react-separator": "1.1.7",
 		"@radix-ui/react-slider": "1.2.2",
 		"@radix-ui/react-slot": "1.1.1",
 		"@radix-ui/react-switch": "1.1.1",
diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/components/Separator/Separator.tsx b/site/src/components/Separator/Separator.tsx
@@ -0,0 +1,30 @@
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+/**
+ * Copied from shadc/ui on 06/20/2025
+ * @see {@link https://ui.shadcn.com/docs/components/separator}
+ */
+import type * as React from "react";
+
+import { cn } from "utils/cn";
+
+function Separator({
+	className,
+	orientation = "horizontal",
+	decorative = true,
+	...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+	return (
+		<SeparatorPrimitive.Root
+			data-slot="separator"
+			decorative={decorative}
+			orientation={orientation}
+			className={cn(
+				"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Separator };
diff --git a/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPageExperimental.tsx b/site/src/pages/TemplatePage/TemplateEmbedPage/TemplateEmbedPageExperimental.tsx
@@ -13,6 +13,7 @@ import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Button } from "components/Button/Button";
 import { Label } from "components/Label/Label";
 import { RadioGroup, RadioGroupItem } from "components/RadioGroup/RadioGroup";
+import { Separator } from "components/Separator/Separator";
 import { Skeleton } from "components/Skeleton/Skeleton";
 import { useAuthenticated } from "hooks";
 import { useEffectEvent } from "hooks/hookPolyfills";
@@ -244,6 +245,8 @@ const TemplateEmbedPageView: FC<TemplateEmbedPageViewProps> = ({
 									</RadioGroup>
 								</section>
 
+								<Separator />
+
 								{parameters.length > 0 && (
 									<div className="flex flex-col gap-9">
 										{parameters.map((parameter) => {
