docs: display live examples for UI Components

Author: pkosiec

biome.json

@@ -17,6 +17,8 @@
       "!packages/appkit-ui/src/react/ui",
       "!**/routeTree.gen.ts",
       "!docs/.docusaurus",
+      "!**/*.gen.css",
+      "!**/*.gen.ts",
       "!**/typedoc-sidebar.ts"
     ]
   },

docs/docs/api/appkit-ui/components/Accordion.mdx

@@ -4,6 +4,13 @@ title: Accordion
 
 # Accordion
 
+## Example
+
+import { DocExample } from "@site/src/components/DocExample";
+
+<DocExample name="accordion" />
+
+
 ## Accordion
 
 

docs/docs/api/appkit-ui/components/Alert.mdx

@@ -4,6 +4,13 @@ title: Alert
 
 # Alert
 
+## Example
+
+import { DocExample } from "@site/src/components/DocExample";
+
+<DocExample name="alert" />
+
+
 ## Alert
 
 

docs/docs/api/appkit-ui/components/AlertDialog.mdx

@@ -4,6 +4,13 @@ title: AlertDialog
 
 # AlertDialog
 
+## Example
+
+import { DocExample } from "@site/src/components/DocExample";
+
+<DocExample name="alert-dialog" />
+
+
 ## AlertDialog
 
 

docs/docs/api/appkit-ui/components/AspectRatio.mdx

@@ -4,6 +4,13 @@ title: AspectRatio
 
 # AspectRatio
 
+## Example
+
+import { DocExample } from "@site/src/components/DocExample";
+
+<DocExample name="aspect-ratio" />
+
+
 ## AspectRatio
 
 

docs/docs/api/appkit-ui/components/Avatar.mdx

@@ -4,6 +4,13 @@ title: Avatar
 
 # Avatar
 
+## Example
+
+import { DocExample } from "@site/src/components/DocExample";
+
+<DocExample name="avatar" />
+
+
 ## Avatar
 
 

docs/docs/api/appkit-ui/components/Badge.mdx

@@ -4,6 +4,13 @@ title: Badge
 
 # Badge
 
+## Example
+
+import { DocExample } from "@site/src/components/DocExample";
+
+<DocExample name="badge" />
+
+
 ## Badge
 
 

docs/docs/api/appkit-ui/components/Breadcrumb.mdx

@@ -4,6 +4,13 @@ title: Breadcrumb
 
 # Breadcrumb
 
+## Example
+
+import { DocExample } from "@site/src/components/DocExample";
+
+<DocExample name="breadcrumb" />
+
+
 ## Breadcrumb
 
 

docs/docs/api/appkit-ui/components/Button.mdx

@@ -4,6 +4,13 @@ title: Button
 
 # Button
 
+## Example
+
+import { DocExample } from "@site/src/components/DocExample";
+
+<DocExample name="button" />
+
+
 ## Button
 
 

docs/docs/api/appkit-ui/components/Calendar.mdx

@@ -4,6 +4,13 @@ title: Calendar
 
 # Calendar
 
+## Example
+
+import { DocExample } from "@site/src/components/DocExample";
+
+<DocExample name="calendar" />
+
+
 ## Calendar