diff --git a/packages/_site/src/App.tsx b/packages/_site/src/App.tsx
index e479289..e33d67b 100644
--- a/packages/_site/src/App.tsx
+++ b/packages/_site/src/App.tsx
@@ -37,6 +37,8 @@ import DialogPage from "./pages/components/dialog";
 import CollapsiblePage from "./pages/components/collapsible";
 import TextareaPage from "./pages/components/textarea";
 import DropdownMenuPage from "./pages/components/dropdown-menu";
+import PopoverPage from "./pages/components/popover";
+
 import InputPage from "./pages/components/input";
 
 const styles = stylex.create({
@@ -193,9 +195,14 @@ export default function App() {
             <Route path="examples" element={<HoverCardPage />} />
           </Route>
 
+          <Route path="popover">
+            <Route path="examples" element={<PopoverPage />} />
+          </Route>
+
           <Route path="input">
             <Route path="examples" element={<InputPage />} />
           </Route>
+
           <Route path="textarea">
             <Route path="examples" element={<TextareaPage />} />
           </Route>
diff --git a/packages/_site/src/pages/components/popover/index.tsx b/packages/_site/src/pages/components/popover/index.tsx
new file mode 100644
index 0000000..1282dc3
--- /dev/null
+++ b/packages/_site/src/pages/components/popover/index.tsx
@@ -0,0 +1,390 @@
+import ComponentHero from "../commons/component-hero";
+import stylex from "@stylexjs/stylex";
+import ExampleBlock from "../commons/example-block";
+import CodeBlock from "../commons/code-block";
+import { PreviewBlock } from "../commons/preview_block";
+import ComponentInfo from "../commons/component-info";
+import { Divider } from "@controlkit/divider";
+import { H2, H5 } from "@controlkit/headings";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@controlkit/tabs";
+import { useRef } from "react";
+import { styles } from "../_layout/styles";
+import ContentsSidebar from "../commons/contents_sidebar";
+import { Popover, PopoverContent, PopoverTrigger } from "@controlkit/popover";
+import { Button } from "@controlkit/button";
+
+export default function PopoverPage() {
+	const divRef = useRef<HTMLDivElement>(null);
+
+	return (
+		<div
+			{...stylex.props(styles.wrapper)}
+			ref={divRef}
+		>
+			<ComponentHero
+				title="Popover"
+				description="A popover is an element that is hidden until opened by invoking an action from an element, such as a button."
+			/>
+
+			<div {...stylex.props(styles.threeColumnLayout)}>
+				<ContentsSidebar ref={divRef} />
+
+				<div {...stylex.props(styles.middleColumn)}>
+					<H2 id="installation">Installation</H2>
+					<Divider />
+					<div>
+						<Tabs defaultValue="tab-1">
+							<TabsList>
+								<TabsTrigger value="tab-1">Automatic</TabsTrigger>
+								<TabsTrigger value="tab-2">Manual</TabsTrigger>
+							</TabsList>
+							<TabsContent value="tab-1">
+								<div {...stylex.props(styles.blockWrapper)}>
+									<ComponentInfo
+										install="pnpm add @controlkit/popover"
+										npmjs="https://www.npmjs.com/package/@controlkit/popover"
+										npmTitle="@controlkit/popover"
+										source="https://github.com/clearfeld/control-ui/tree/main/packages/popover"
+									/>
+								</div>
+							</TabsContent>
+							<TabsContent value="tab-2">
+								<div {...stylex.props(styles.stepBlock)}>
+									<H5>1. Copy and paste the following code into your project.</H5>
+
+									<CodeBlock
+										language="tsx"
+										url={"https://raw.githubusercontent.com/clearfeld/control-ui/main/packages/popover/lib/index.tsx"}
+									/>
+								</div>
+							</TabsContent>
+						</Tabs>
+					</div>
+
+					<H2 id="examples">Examples</H2>
+					<Divider />
+
+					<div>
+						<ExampleBlock
+							title="Top"
+							description="Button that displays content to the top."
+						/>
+						<div {...stylex.props(styles.codeWrapper)}>
+							<PreviewBlock>
+								<Popover>
+									<PopoverTrigger
+										style={{
+											width: "20rem",
+										}}
+										asChild
+									>
+										<Button>Open Top</Button>
+									</PopoverTrigger>
+
+									<PopoverContent
+										style={{
+											width: "20rem",
+										}}
+										side={"top"}
+									>
+										<div
+											style={{
+												border: "0.0625rem solid #535251",
+												backgroundColor: "#252525",
+												height: "20rem",
+												textAlign: "center",
+												borderRadius: "0.25rem",
+											}}
+										>
+											Place content for the popover here.
+										</div>
+									</PopoverContent>
+								</Popover>
+							</PreviewBlock>
+
+							<CodeBlock
+								language="tsx"
+								code={`import { Popover, PopoverContent, PopoverTrigger } from "@controlkit/popover";
+import { Button } from "@controlkit/button";
+
+export default function CardGroup() {
+	return (
+		<Popover>
+			<PopoverTrigger
+				style={{
+					width: "20rem",
+				}}
+				asChild
+			>
+				<Button>Open Top</Button>
+			</PopoverTrigger>
+
+			<PopoverContent
+				style={{
+					width: "20rem",
+				}}
+				side={"top"}
+			>
+				<div
+					style={{
+						border: "0.0625rem solid #535251",
+						backgroundColor: "#252525",
+						height: "20rem",
+						textAlign: "center",
+						borderRadius: "0.25rem",
+					}}
+				>
+					Place content for the popover here.
+				</div>
+			</PopoverContent>
+		</Popover>
+	);
+}`}
+							/>
+						</div>
+					</div>
+
+					<div>
+						<ExampleBlock
+							title="Left"
+							description="Button that displays content to the left."
+						/>
+						<div {...stylex.props(styles.codeWrapper)}>
+							<PreviewBlock>
+								<Popover>
+									<PopoverTrigger
+										style={{
+											width: "20rem",
+										}}
+										asChild
+									>
+										<Button>Open Left</Button>
+									</PopoverTrigger>
+
+									<PopoverContent
+										style={{
+											width: "20rem",
+										}}
+										side={"left"}
+									>
+										<div
+											style={{
+												border: "0.0625rem solid #535251",
+												backgroundColor: "#252525",
+												height: "20rem",
+												textAlign: "center",
+												borderRadius: "0.25rem",
+											}}
+										>
+											Place content for the popover here.
+										</div>
+									</PopoverContent>
+								</Popover>
+							</PreviewBlock>
+
+							<CodeBlock
+								language="tsx"
+								code={`import { Popover, PopoverContent, PopoverTrigger } from "@controlkit/popover";
+import { Button } from "@controlkit/button";
+
+export default function CardGroup() {
+	return (
+		<Popover>
+			<PopoverTrigger
+				style={{
+					width: "20rem",
+				}}
+				asChild
+			>
+				<Button>Open left</Button>
+			</PopoverTrigger>
+
+			<PopoverContent
+				style={{
+					width: "20rem",
+				}}
+				side={"left"}
+			>
+				<div
+					style={{
+						border: "0.0625rem solid #535251",
+						backgroundColor: "#252525",
+						height: "20rem",
+						textAlign: "center",
+						borderRadius: "0.25rem",
+					}}
+				>
+					Place content for the popover here.
+				</div>
+			</PopoverContent>
+		</Popover>
+	);
+}`}
+							/>
+						</div>
+					</div>
+
+					<div>
+						<ExampleBlock
+							title="Right"
+							description="Button that displays content to the right."
+						/>
+						<div {...stylex.props(styles.codeWrapper)}>
+							<PreviewBlock>
+								<Popover>
+									<PopoverTrigger
+										style={{
+											width: "20rem",
+										}}
+										asChild
+									>
+										<Button>Open Right</Button>
+									</PopoverTrigger>
+
+									<PopoverContent
+										style={{
+											width: "20rem",
+										}}
+										side={"right"}
+									>
+										<div
+											style={{
+												border: "0.0625rem solid #535251",
+												backgroundColor: "#252525",
+												height: "20rem",
+												textAlign: "center",
+												borderRadius: "0.25rem",
+											}}
+										>
+											Place content for the popover here.
+										</div>
+									</PopoverContent>
+								</Popover>
+							</PreviewBlock>
+
+							<CodeBlock
+								language="tsx"
+								code={`import { Popover, PopoverContent, PopoverTrigger } from "@controlkit/popover";
+import { Button } from "@controlkit/button";
+
+export default function CardGroup() {
+	return (
+		<Popover>
+			<PopoverTrigger
+				style={{
+					width: "20rem",
+				}}
+				asChild
+			>
+				<Button>Open right</Button>
+			</PopoverTrigger>
+
+			<PopoverContent
+				style={{
+					width: "20rem",
+				}}
+				side={"right"}
+			>
+				<div
+					style={{
+						border: "0.0625rem solid #535251",
+						backgroundColor: "#252525",
+						height: "20rem",
+						textAlign: "center",
+						borderRadius: "0.25rem",
+					}}
+				>
+					Place content for the popover here.
+				</div>
+			</PopoverContent>
+		</Popover>
+	);
+}`}
+							/>
+						</div>
+					</div>
+
+					<div>
+						<ExampleBlock
+							title="Bottom"
+							description="Button that displays content to the bottom."
+						/>
+						<div {...stylex.props(styles.codeWrapper)}>
+							<PreviewBlock>
+								<Popover>
+									<PopoverTrigger
+										style={{
+											width: "20rem",
+										}}
+										asChild
+									>
+										<Button>Open Bottom</Button>
+									</PopoverTrigger>
+
+									<PopoverContent
+										style={{
+											width: "20rem",
+										}}
+										side={"bottom"}
+									>
+										<div
+											style={{
+												border: "0.0625rem solid #535251",
+												backgroundColor: "#252525",
+												height: "20rem",
+												textAlign: "center",
+												borderRadius: "0.25rem",
+											}}
+										>
+											Place content for the popover here.
+										</div>
+									</PopoverContent>
+								</Popover>
+							</PreviewBlock>
+
+							<CodeBlock
+								language="tsx"
+								code={`import { Popover, PopoverContent, PopoverTrigger } from "@controlkit/popover";
+import { Button } from "@controlkit/button";
+
+export default function CardGroup() {
+	return (
+		<Popover>
+			<PopoverTrigger
+				style={{
+					width: "20rem",
+				}}
+				asChild
+			>
+				<Button>Open bottom</Button>
+			</PopoverTrigger>
+
+			<PopoverContent
+				style={{
+					width: "20rem",
+				}}
+				side={"bottom"}
+			>
+				<div
+					style={{
+						border: "0.0625rem solid #535251",
+						backgroundColor: "#252525",
+						height: "20rem",
+						textAlign: "center",
+						borderRadius: "0.25rem",
+					}}
+				>
+					Place content for the popover here.
+				</div>
+			</PopoverContent>
+		</Popover>
+	);
+}`}
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}
diff --git a/packages/_site/src/pages/components/routes_list_docs_components.ts b/packages/_site/src/pages/components/routes_list_docs_components.ts
index 0b2b2bb..c5ea2fd 100644
--- a/packages/_site/src/pages/components/routes_list_docs_components.ts
+++ b/packages/_site/src/pages/components/routes_list_docs_components.ts
@@ -113,11 +113,18 @@ export const componentsList: I_ComponentsList[] = [
     link: "/components/hover_card/examples",
   },
 
+  {
+    title: "Popover",
+    description: "Popover Element. Will remain hidden until opened by invoking an action from another element, such as a button click.",
+    link: "/components/popover/examples",
+  },
+
   {
     title: "Input",
     description: "An input lets users enter text.",
     link: "/components/input/examples",
   },
+
   {
     title: "Textarea",
     description: