docs: add Switch docs

packages/react/src/App.tsx

@@ -33,6 +33,9 @@ import ComponentsDrawer, {
 import ComponentsLabel, {
   tableOfContents as componentsLabelToc,
 } from "./docs/components/Label.mdx";
+import ComponentsSwitch, {
+  tableOfContents as componentsSwitchToc,
+} from "./docs/components/Switch.mdx";
 import ComponentsTabs, {
   tableOfContents as componentsTabsToc,
 } from "./docs/components/Tabs.mdx";
@@ -191,6 +194,14 @@ const router = createBrowserRouter(
               </DynamicLayout>
             }
           />
+          <Route
+            path="switch"
+            element={
+              <DynamicLayout toc={componentsSwitchToc}>
+                <ComponentsSwitch components={overrideComponents} />
+              </DynamicLayout>
+            }
+          />
           <Route
             path="tabs"
             element={

packages/react/src/RouteObject.ts

@@ -55,6 +55,11 @@ export default {
         name: "Label",
         eq: (pathname: string) => pathname === "/docs/components/label"
       },
+      {
+        path: "/docs/components/switch",
+        name: "Switch",
+        eq: (pathname: string) => pathname === "/docs/components/switch"
+      },
       {
         path: "/docs/components/tabs",
         name: "Tabs",

packages/react/src/docs/components/Switch.mdx

@@ -0,0 +1,40 @@
+import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
+import { Story } from "@/components/Story";
+import { LoadedCode, GITHUB } from "@/components/LoadedCode";
+import { SwitchDemo } from "./SwitchBlocks/Preview";
+
+# Switch
+Toggle between two states with a sleek design. Perfect for enabling/disabling options.
+
+<TabProvider defaultName="preview">
+    <TabList>
+        <TabTrigger name="preview">Preview</TabTrigger>
+        <TabTrigger name="code">Code</TabTrigger>
+    </TabList>
+    <TabContent name="preview">
+        <Story layout="centered">
+            <SwitchDemo />
+        </Story>
+    </TabContent>
+    <TabContent name="code">
+        <LoadedCode from={`${GITHUB}/packages/react/src/docs/components/SwitchBlocks/Preview.tsx`} />
+    </TabContent>
+</TabProvider>
+
+## Installation
+
+1. Create a new file `Switch.tsx` in your component folder.
+2. Copy and paste the following code into the file.
+
+<LoadedCode from={`${GITHUB}/packages/react/components/Switch.tsx`} />
+
+## Usage
+
+```tsx
+import { Switch } from "@components/Switch";
+```
+
+```html
+<Switch />
+```
+

packages/react/src/docs/components/SwitchBlocks/Preview.tsx

@@ -0,0 +1,5 @@
+import { Switch } from "@components/Switch";
+
+export function SwitchDemo() {
+  return <Switch />;
+}