diff --git a/src/docs/components/Checkbox.mdx b/src/docs/components/Checkbox.mdx
index a257c60..c38618c 100644
--- a/src/docs/components/Checkbox.mdx
+++ b/src/docs/components/Checkbox.mdx
@@ -1,84 +1,77 @@
-import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
-import { Story } from "@/components/Story";
-import { LoadedCode, GITHUB_COMP, GITHUB_COMP_PREVIEW, GITHUB_STORY } from "@/components/LoadedCode";
-import { CheckboxDemo } from "./CheckboxBlocks/Preview";
-import Examples from "./CheckboxBlocks/Examples";
-
-# Checkbox
-A control that allows the user to toggle between checked and not checked.
-
-
-
- Preview
- Code
-
-
-
-
-
-
-
-
-
-
-
-## Installation
-
-1. Create a new file `Checkbox.mdx` in your component folder.
-2. Copy and paste the following code into the file.
-
-
-
-## Usage
-
-```tsx
-import { Checkbox } from "@components/Checkbox";
-```
-
-```html
-
-```
-
-## Props
-
-### Variants
-
-| Prop | Type | Default | Description |
-|:-------|:-------------------------|:--------|:-------------------------|
-| `size` | `"base" \| "md" \| "lg"` | `"md"` | The size of the checkbox |
-
-## Examples
-
-### Text
-
-
-
- Preview
- Code
-
-
-
-
-
-
-
-
-
-
-
-### Disabled
-
-
-
- Preview
- Code
-
-
-
-
-
-
-
-
-
-
+import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
+import { Story } from "@/components/Story";
+import {
+ LoadedCode,
+ GITHUB_COMP,
+ GITHUB_COMP_PREVIEW,
+ GITHUB_STORY,
+} from "@/components/LoadedCode";
+import Examples from "./CheckboxBlocks/Examples";
+import Playground from "./CheckboxBlocks/Playground";
+
+# Checkbox
+
+A control that allows the user to toggle between checked and not checked.
+
+
+
+## Installation
+
+1. Create a new file `Checkbox.mdx` in your component folder.
+2. Copy and paste the following code into the file.
+
+
+
+## Usage
+
+```tsx
+import { Checkbox } from "@components/Checkbox";
+```
+
+```html
+
+```
+
+## Props
+
+### Variants
+
+| Prop | Type | Default | Description |
+| :----- | :----------------------- | :------ | :----------------------- |
+| `size` | `"base" \| "md" \| "lg"` | `"md"` | The size of the checkbox |
+
+## Examples
+
+### Text
+
+
+
+ Preview
+ Code
+
+
+
+
+
+
+
+
+
+
+
+### Disabled
+
+
+
+ Preview
+ Code
+
+
+
+
+
+
+
+
+
+
diff --git a/src/docs/components/CheckboxBlocks/Playground.tsx b/src/docs/components/CheckboxBlocks/Playground.tsx
new file mode 100644
index 0000000..bd6b332
--- /dev/null
+++ b/src/docs/components/CheckboxBlocks/Playground.tsx
@@ -0,0 +1,28 @@
+import type { TEMPLATE } from "@/components/LoadedCode";
+import { usePgProps } from "@/components/PgHooks";
+import { PlaygroundLayout } from "@/components/Playground";
+import { CheckboxDemo, type CheckboxDemoPlaygroundProps } from "./Preview";
+
+interface TemplateProps extends TEMPLATE, CheckboxDemoPlaygroundProps {}
+
+export default function CheckboxPlayground() {
+ const [props, control] = usePgProps({
+ CheckboxProps: {
+ size: {
+ type: "select",
+ options: ["base", "md", "lg"],
+ value: "md",
+ },
+ },
+ });
+
+ return (
+
+
+
+ );
+}
diff --git a/src/docs/components/CheckboxBlocks/Preview.tsx b/src/docs/components/CheckboxBlocks/Preview.tsx
index d877750..373f8a4 100644
--- a/src/docs/components/CheckboxBlocks/Preview.tsx
+++ b/src/docs/components/CheckboxBlocks/Preview.tsx
@@ -1,10 +1,20 @@
import { Checkbox } from "@pswui/Checkbox";
import { Label } from "@pswui/Label";
+/* remove */
+export interface CheckboxDemoPlaygroundProps {
+ CheckboxProps: {
+ size: "base" | "md" | "lg";
+ };
+}
+/* replace */
+export function CheckboxDemo({ CheckboxProps }: CheckboxDemoPlaygroundProps) {
+ /* with
export function CheckboxDemo() {
+ */
return (
);