@clidey/dory 0.22.0 → 0.24.0

package/src/mdx/accordion.tsx

@@ -1,12 +1,16 @@
-import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react'
-import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline'
+import {
+  Accordion as UXAccordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent
+} from '@clidey/ux'
 import { Icon } from './icon'
 
 export function AccordionGroup({ children }: { children: React.ReactNode }) {
   return (
-    <div className="my-6 divide-y divide-slate-200 dark:divide-slate-800">
+    <UXAccordion type="single" collapsible className="my-6">
       {children}
-    </div>
+    </UXAccordion>
   )
 }
 
@@ -20,29 +24,18 @@ export function Accordion({
   icon?: React.ComponentProps<typeof Icon>['icon']
 }) {
   return (
-    <Disclosure as="div" className="py-4 first:pt-8 last:pb-8">
-      {({ open }) => (
-        <>
-          <DisclosureButton className="group flex w-full items-start justify-between text-left text-slate-900 dark:text-white">
-            <div className="flex items-center gap-2">
-              {icon && <Icon icon={icon} className="h-5 w-5" />}
-              <span className="text-base font-semibold">{title}</span>
-            </div>
-            <span className="ml-6 flex h-7 items-center">
-              {open ? (
-                <MinusIcon className="h-6 w-6 text-slate-500 dark:text-slate-400" />
-              ) : (
-                <PlusIcon className="h-6 w-6 text-slate-500 dark:text-slate-400" />
-              )}
-            </span>
-          </DisclosureButton>
-          <DisclosurePanel as="dd" className="mt-2 pr-12">
-            <div className="text-base text-slate-600 dark:text-slate-400 leading-relaxed">
-              {children}
-            </div>
-          </DisclosurePanel>
-        </>
-      )}
-    </Disclosure>
+    <AccordionItem value={title}>
+      <AccordionTrigger className="text-left">
+        <div className="flex items-center gap-2">
+          {icon && <Icon icon={icon} className="h-5 w-5" />}
+          <span className="text-base font-semibold">{title}</span>
+        </div>
+      </AccordionTrigger>
+      <AccordionContent>
+        <div className="text-base leading-relaxed">
+          {children}
+        </div>
+      </AccordionContent>
+    </AccordionItem>
   )
 }

package/src/mdx/api-playground.tsx

@@ -1,11 +1,11 @@
-import { Input, Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
+import { Button, TextArea, useTheme, Input } from '@clidey/ux'
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
 import { CheckIcon } from '@heroicons/react/24/outline'
 import classNames from 'classnames'
-import { PencilIcon, TrashIcon, XIcon } from 'lucide-react'
+import { PencilIcon, PlusIcon, TrashIcon, XIcon } from 'lucide-react'
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks'
 import { Highlight, themes } from 'prism-react-renderer'
 import Dropdown from '../components/dropdown'
-import { useDarkMode } from '../utils/hooks'
 import { Fence } from './fence'
 import { Tag } from './tag'
 
@@ -166,39 +166,39 @@ export const HeadersTab = ({ requestConfig, setRequestConfig }: HeadersTabProps)
                 value={hdr.key}
                 onChange={e => updateHeader(idx, 'key', (e.target as HTMLInputElement).value)}
                 placeholder="Header name"
-                className="w-32 rounded-lg bg-zinc-800 border border-zinc-600 px-2 py-1 text-sm text-white"
+                className="w-32 text-sm"
               />
               <Input
                 type="text"
                 value={hdr.value}
                 onChange={e => updateHeader(idx, 'value', (e.target as HTMLInputElement).value)}
                 placeholder="Header value"
-                className="flex-1 rounded-lg bg-zinc-800 border border-zinc-600 px-2 py-1 text-sm text-white"
+                className="flex-1 text-sm"
               />
-              <button onClick={() => saveHeader(idx)} className="text-white">
+              <Button onClick={() => saveHeader(idx)}>
                 <CheckIcon className="w-4 h-4" />
-              </button>
-              <button onClick={() => cancelEdit(idx)} className="text-white">
+              </Button>
+              <Button onClick={() => cancelEdit(idx)}>
                 <XIcon className="w-4 h-4" />
-              </button>
+              </Button>
             </>
           ) : (
             <>
-              <span className="text-sm text-white w-32 truncate">{hdr.key}</span>
-              <span className="text-sm text-white flex-1 truncate">{hdr.value}</span>
-              <button onClick={() => editHeader(idx)} className="text-white">
+              <span className="text-sm  w-32 truncate">{hdr.key}</span>
+              <span className="text-sm  flex-1 truncate">{hdr.value}</span>
+              <Button onClick={() => editHeader(idx)}>
                 <PencilIcon className="w-4 h-4" />
-              </button>
-              <button onClick={() => removeHeader(idx)} className="text-red-400">
+              </Button>
+              <Button onClick={() => removeHeader(idx)} className="text-red-400">
                 <TrashIcon className="w-4 h-4" />
-              </button>
+              </Button>
             </>
           )}
         </div>
       ))}
-      <button onClick={addEmptyHeaderRow} className="text-sm text-sky-400 hover:text-sky-300 mt-2 w-fit">
-        + Add Header
-      </button>
+      <Button onClick={addEmptyHeaderRow} className="text-sm mt-2 w-fit">
+        <PlusIcon className="w-4 h-4" /> Add Header
+      </Button>
     </div>
   )
 }
@@ -281,32 +281,32 @@ export const ParamsTab = ({ queryParams, setQueryParams }: ParamsTabProps) => {
         <div key={i} className="flex items-center gap-2">
           {p.isEditing ? (
             <>
-              <Input value={p.name} onChange={e => updateParam(i, 'name', (e.target as HTMLInputElement).value)} placeholder="Param name" className="w-32 rounded-lg bg-zinc-800 border border-zinc-600 px-2 py-1 text-sm text-white" />
-              <Input value={p.value} onChange={e => updateParam(i, 'value', (e.target as HTMLInputElement).value)} placeholder="Param value" className="flex-1 rounded-lg bg-zinc-800 border border-zinc-600 px-2 py-1 text-sm text-white" />
-              <button onClick={() => saveParam(i)} className="text-white">
+              <Input value={p.name} onChange={e => updateParam(i, 'name', (e.target as HTMLInputElement).value)} placeholder="Param name" className="w-32 text-sm" />
+              <Input value={p.value} onChange={e => updateParam(i, 'value', (e.target as HTMLInputElement).value)} placeholder="Param value" className="flex-1 text-sm" />
+              <Button onClick={() => saveParam(i)}>
                 <CheckIcon className="w-4 h-4" />
-              </button>
-              <button onClick={() => cancelEdit(i)} className="text-white">
+              </Button>
+              <Button onClick={() => cancelEdit(i)}>
                 <XIcon className="w-4 h-4" />
-              </button>
+              </Button>
             </>
           ) : (
             <>
-              <span className="w-32 truncate text-sm text-white">{p.name}</span>
-              <span className="flex-1 truncate text-sm text-white">{p.value}</span>
-              <button onClick={() => editParam(i)} className="text-white">
+              <span className="w-32 truncate text-sm">{p.name}</span>
+              <span className="flex-1 truncate text-sm">{p.value}</span>
+              <Button onClick={() => editParam(i)}>
                 <PencilIcon className="w-4 h-4" />
-              </button>
-              <button onClick={() => removeParam(i)} className="text-red-400">
+              </Button>
+              <Button onClick={() => removeParam(i)} className="text-red-400">
                 <TrashIcon className="w-4 h-4" />
-              </button>
+              </Button>
             </>
           )}
         </div>
       ))}
-      <button onClick={addParamRow} className="mt-2 text-sm text-sky-400 hover:text-sky-300 self-start">
-        + Add Parameter
-      </button>
+      <Button onClick={addParamRow} className="mt-2 text-sm self-end">
+        <PlusIcon className="w-4 h-4" /> Add Parameter
+      </Button>
     </div>
   );
 };
@@ -327,7 +327,7 @@ export function APIPlayground({
   const [isLoading, setIsLoading] = useState(false)
   const [response, setResponse] = useState<ResponseData | null>(null)
   const [error, setError] = useState<string | null>(null)
-  const { isDark } = useDarkMode();
+  const isDark = useTheme().theme === 'dark';
   const [selectedServer, setSelectedServer] = useState<Server | null>(servers?.[0] || null)
   
   // Request configuration state
@@ -430,39 +430,26 @@ export function APIPlayground({
   return (
     <div className="my-6 overflow-hidden rounded-2xl">
       {/* Header */}
-      <div className="flex min-h-[calc(--spacing(12)+1px)] flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent pb-4">
+      <div className="flex min-h-[calc(--spacing(12)+1px)] flex-wrap items-start gap-x-4 px-4 pt-2 pb-4 justify-between">
         <div className="flex items-center gap-3 pt-3">
           <Tag variant="small">{method.toUpperCase()}</Tag>
-          <span className="font-mono text-sm text-white">{title || url}</span>
+          <span className="font-mono text-sm">{title || url}</span>
         </div>
-        <button
+        <Button
           onClick={executeRequest}
-          disabled={isLoading}
-          className={classNames(
-            'ml-auto mt-3 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition',
-            isLoading
-              ? 'bg-zinc-600 text-zinc-400 cursor-not-allowed'
-              : 'bg-sky-600 text-white hover:bg-sky-700'
-          )}
-        >
-          {isLoading ? (
-            <LoadingSpinner className="h-4 w-4" />
-          ) : (
-            <PlayButton className="h-4 w-4" />
-          )}
+          disabled={isLoading}>
           {isLoading ? 'Sending...' : 'Send Request'}
-        </button>
+          {isLoading ? <LoadingSpinner className="h-4 w-4" /> : <PlayButton className="h-4 w-4" />}
+        </Button>
       </div>
 
       {description && (
-        <div className="px-4 py-3 border-b border-zinc-700 dark:border-zinc-800">
-          <p className="text-sm text-zinc-300">{description}</p>
-        </div>
+        <p className="text-sm px-4 py-3">{description}</p>
       )}
 
       <div className="flex flex-col gap-4">
         <div className="flex flex-col gap-2">
-          <label className="text-sm font-medium text-white">Server</label>
+          <label className="text-sm font-medium">Server</label>
           <Dropdown
             buttonLabel={selectedServer?.description || 'Select Server'}
             items={servers.map(server => ({ label: server.description || server.url, onClick: () => setSelectedServer(server) }))}
@@ -471,9 +458,9 @@ export function APIPlayground({
         </div>
 
         {/* Request Configuration */}
-        <div className="flex-1 border-r border-zinc-700 dark:border-zinc-800">
+        <div className="flex-1">
           <TabGroup selectedIndex={selectedTab} onChange={setSelectedTab}>
-            <TabList className="flex border-b border-zinc-700 dark:border-zinc-800">
+            <TabList className="flex">
               {tabs.map((tab) => (
                 <Tab
                   key={tab.key}
@@ -481,7 +468,7 @@ export function APIPlayground({
                     classNames(
                       'px-4 py-3 text-sm font-medium transition border-b-2',
                       selected
-                        ? 'border-sky-500 text-sky-400'
+                        ? 'border-brand-foreground text-brand-foreground'
                         : 'border-transparent text-zinc-400 hover:text-zinc-300'
                     )
                   }
@@ -510,18 +497,18 @@ export function APIPlayground({
               <TabPanel className="p-4">
                 {['POST', 'PUT', 'PATCH'].includes(method.toUpperCase()) ? (
                   <div className="flex flex-col space-y-2">
-                    <label className="text-sm font-medium text-white">Request Body (JSON)</label>
+                    <label className="text-sm font-medium">Request Body (JSON)</label>
                     <Highlight
                       code={requestConfig.body || ''}
                       language="json"
                       theme={isDark ? themes.vsDark : themes.vsLight}>
                       {({ className, style }) => (
-                        <textarea
+                        <TextArea
                           value={requestConfig.body}
                           onChange={(e) => setRequestConfig(prev => ({ ...prev, body: (e.target as HTMLTextAreaElement).value }))}
                           placeholder="Enter JSON body..."
                           rows={8}
-                          className={`w-full rounded-lg bg-zinc-800 border border-zinc-600 px-3 py-2 text-sm text-white placeholder-zinc-400 focus:border-sky-500 focus:outline-none font-mono ${className}`}
+                          className={`w-full text-sm font-mono ${className}`}
                           style={style}
                         />
                       )}
@@ -535,7 +522,7 @@ export function APIPlayground({
               {/* Auth Tab */}
               <TabPanel className="p-4 space-y-4">
                 <div className="flex flex-col space-y-2">
-                  <label className="text-sm font-medium text-white">Authentication Type</label>
+                  <label className="text-sm font-medium">Authentication Type</label>
                   <Dropdown
                     buttonLabel={auth.type === 'none' ? 'Select Auth Type' : auth.type.charAt(0).toUpperCase() + auth.type.slice(1)}
                     items={[
@@ -550,26 +537,26 @@ export function APIPlayground({
 
                 {auth.type === 'bearer' && (
                   <div className="space-y-2">
-                    <label className="text-sm font-medium text-white">Bearer Token</label>
-                    <input
+                    <label className="text-sm font-medium">Bearer Token</label>
+                    <Input
                       type="password"
                       value={auth.token}
                       onChange={(e) => setAuth(prev => ({ ...prev, token: (e.target as HTMLInputElement).value }))}
                       placeholder="Enter bearer token..."
-                      className="w-full rounded-lg bg-zinc-800 border border-zinc-600 px-3 py-2 text-sm text-white placeholder-zinc-400 focus:border-sky-500 focus:outline-none"
+                      className="w-full text-sm"
                     />
                   </div>
                 )}
 
                 {auth.type === 'apiKey' && (
                   <div className="space-y-2">
-                    <label className="text-sm font-medium text-white">API Key</label>
-                    <input
+                    <label className="text-sm font-medium">API Key</label>
+                    <Input
                       type="password"
                       value={auth.apiKey}
                       onChange={(e) => setAuth(prev => ({ ...prev, apiKey: (e.target as HTMLInputElement).value }))}
                       placeholder="Enter API key..."
-                      className="w-full rounded-lg bg-zinc-800 border border-zinc-600 px-3 py-2 text-sm text-white placeholder-zinc-400 focus:border-sky-500 focus:outline-none"
+                      className="w-full text-sm"
                     />
                   </div>
                 )}
@@ -577,23 +564,23 @@ export function APIPlayground({
                 {auth.type === 'basic' && (
                   <div className="space-y-4">
                     <div className="space-y-2">
-                      <label className="text-sm font-medium text-white">Username</label>
-                      <input
+                      <label className="text-sm font-medium">Username</label>
+                      <Input
                         type="text"
                         value={auth.username}
                         onChange={(e) => setAuth(prev => ({ ...prev, username: (e.target as HTMLInputElement).value }))}
                         placeholder="Enter username..."
-                        className="w-full rounded-lg bg-zinc-800 border border-zinc-600 px-3 py-2 text-sm text-white placeholder-zinc-400 focus:border-sky-500 focus:outline-none"
+                        className="w-full text-sm"
                       />
                     </div>
                     <div className="space-y-2">
-                      <label className="text-sm font-medium text-white">Password</label>
-                      <input
+                      <label className="text-sm font-medium">Password</label>
+                      <Input
                         type="password"
                         value={auth.password}
                         onChange={(e) => setAuth(prev => ({ ...prev, password: (e.target as HTMLInputElement).value }))}
                         placeholder="Enter password..."
-                        className="w-full rounded-lg bg-zinc-800 border border-zinc-600 px-3 py-2 text-sm text-white placeholder-zinc-400 focus:border-sky-500 focus:outline-none"
+                        className="w-full text-sm"
                       />
                     </div>
                   </div>
@@ -605,8 +592,8 @@ export function APIPlayground({
 
         {/* Response */}
         <div className="flex-1">
-          <div className="border-b border-zinc-700 dark:border-zinc-800 px-4 py-3">
-            <h3 className="text-sm font-semibold text-white">Response</h3>
+          <div className="px-4 py-3">
+            <h3 className="text-sm font-semibold">Response</h3>
           </div>
           
           <div className="p-4">
@@ -638,7 +625,7 @@ export function APIPlayground({
                 </div>
 
                 <div className="space-y-2">
-                  <h4 className="text-sm font-medium text-white">Response Body</h4>
+                  <h4 className="text-sm font-medium">Response Body</h4>
                   <Fence language="json">
                     {typeof response.data === 'string' 
                       ? response.data 
@@ -648,7 +635,7 @@ export function APIPlayground({
                 </div>
 
                 <div className="space-y-2">
-                  <h4 className="text-sm font-medium text-white">Response Headers</h4>
+                  <h4 className="text-sm font-medium">Response Headers</h4>
                   <div className="space-y-1">
                     {Object.entries(response.headers).map(([key, value]) => (
                       <div key={key} className="flex text-xs">
@@ -660,11 +647,9 @@ export function APIPlayground({
                 </div>
               </div>
             ) : (
-              <div className="text-center py-8">
-                <div className="text-zinc-400 text-sm">
-                  Click "Send Request" to see the response
-                </div>
-              </div>
+              <p className="text-sm text-center py-8 text-muted-foreground">
+                Click"Send Request" to see the response
+              </p>
             )}
           </div>
         </div>

package/src/mdx/api.tsx

@@ -10,6 +10,8 @@ import {
   useState,
 } from 'react'
 import { Tag } from './tag'
+import { CheckIcon } from 'lucide-react'
+import { Button, Card } from '@clidey/ux'
 
 const languageNames: Record<string, string> = {
   js: 'JavaScript',
@@ -68,8 +70,7 @@ function CopyButton({ code }: { code: string }) {
   }, [copyCount])
 
   return (
-    <button
-      type="button"
+    <Button
       className={classNames(
         'group/button absolute top-3.5 right-4 overflow-hidden rounded-full py-1 pr-3 pl-2 text-2xs font-medium opacity-0 backdrop-blur-sm transition group-hover:opacity-100 focus:opacity-100',
         copied
@@ -89,8 +90,7 @@ function CopyButton({ code }: { code: string }) {
           copied && '-translate-y-1.5 opacity-0',
         )}
       >
-        <ClipboardIcon className="h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" />
-        Copy
+        <ClipboardIcon className="h-4 w-4 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" />
       </span>
       <span
         aria-hidden={!copied}
@@ -99,9 +99,9 @@ function CopyButton({ code }: { code: string }) {
           !copied && 'translate-y-1.5 opacity-0',
         )}
       >
-        Copied!
+        <CheckIcon className="h-4 w-4" />
       </span>
-    </button>
+    </Button>
   )
 }
 
@@ -111,7 +111,7 @@ function APIPanelHeader({ tag, label }: { tag?: string; label?: string }) {
   }
 
   return (
-    <div className="flex h-9 items-center gap-2 border-y border-t-transparent border-b-white/7.5 bg-zinc-900 px-4 dark:border-b-white/5 dark:bg-white/1">
+    <div className="flex h-9 items-center gap-2 px-4">
       {tag && (
         <div className="dark flex">
           <Tag variant="small">{tag}</Tag>
@@ -153,7 +153,7 @@ function APIPanel({
     <div className="group dark:bg-white/2.5">
       <APIPanelHeader tag={tag} label={label} />
       <div className="relative">
-        <pre className="overflow-x-auto p-4 text-xs text-white">{children}</pre>
+        <pre className="overflow-x-auto p-4 text-xs">{children}</pre>
         {/* @ts-expect-error code is not typed */}
         <CopyButton code={code} />
       </div>
@@ -177,9 +177,9 @@ function APIGroupHeader({
   }
 
   return (
-    <div className="flex min-h-[calc(--spacing(12)+1px)] flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent">
+    <div className="flex min-h-[calc(--spacing(12)+1px)] flex-wrap items-start gap-x-4 px-4 pt-2">
       {title && (
-        <h3 className="mr-auto pt-3 text-xs font-semibold text-white">
+        <h3 className="mr-auto pt-3 text-xs font-semibold">
           {title}
         </h3>
       )}
@@ -188,7 +188,7 @@ function APIGroupHeader({
           {Children.map(children, (child, childIndex) => (
             <Tab
               className={classNames(
-                'border-b py-3 transition data-selected:not-data-focus:outline-hidden',
+                'pt-2 transition data-selected:not-data-focus:outline-hidden',
                 childIndex === selectedIndex
                   ? 'border-sky-500 text-sky-400'
                   : 'border-transparent text-zinc-400 hover:text-zinc-300',
@@ -303,8 +303,6 @@ export function APIGroup({
   const tabGroupProps = useTabGroupProps(languages)
   const hasTabs = Children.count(children) > 1
 
-  const containerClassName =
-    'my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10 w-full'
   const header = (
     <APIGroupHeader title={title} selectedIndex={tabGroupProps.selectedIndex}>
       {children}
@@ -315,19 +313,21 @@ export function APIGroup({
   return (
     <APIGroupContext.Provider value={true}>
       {hasTabs ? (
-        <TabGroup {...tabGroupProps} className={containerClassName}>
-          <div className="not-prose">
-            {header}
-            {panels}
-          </div>
-        </TabGroup>
+        <Card className="py-0 border-black/10 bg-none overflow-hidden mb-4">
+          <TabGroup {...tabGroupProps}>
+            <div className="not-prose">
+              {header}
+              {panels}
+            </div>
+          </TabGroup>
+        </Card>
       ) : (
-        <div className={containerClassName}>
+        <Card className="py-0 border-black/10 bg-none overflow-hidden mb-4">
           <div className="not-prose">
             {header}
             {panels}
           </div>
-        </div>
+        </Card>
       )}
     </APIGroupContext.Provider>
   )

package/src/mdx/async-api.tsx

@@ -1,4 +1,3 @@
-import { motion } from "motion/react"
 import { useState } from "preact/hooks"
 import { APIGroup } from "./api"
 import { PlayButton } from "./api-playground"
@@ -7,6 +6,7 @@ import { Properties, Property } from "./open-api"
 import { Tag } from "./tag"
 import { Col, Row } from "./text"
 import { WebSocketPlayground, type WebSocketServer } from "./websocket-playground"
+import { Button, Sheet, SheetContent, SheetHeader, SheetTitle } from "@clidey/ux"
 
 interface AsyncAPIMessage {
   name?: string
@@ -191,33 +191,17 @@ export function AsyncAPI({
 
   return (
     <div className="max-w-none w-full">
-      {showPlayground && (
-        <motion.div
-          initial={{ x: "100%" }}
-          animate={{ x: 0 }}
-          exit={{ x: "100%" }}
-          transition={{ type: "spring", damping: 20 }}
-          className="fixed inset-y-0 right-0 w-full max-w-3xl bg-white dark:bg-[#1e1e1e] shadow-xl z-50 overflow-y-auto border-l border-zinc-200 dark:border-zinc-800"
-        >
-          <div className="p-6">
-            <div className="flex justify-between items-center mb-6">
-              <h2 className="text-xl font-semibold">WebSocket Playground</h2>
-              <button
-                onClick={() => setShowPlayground(false)}
-                className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
-              >
-                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                </svg>
-              </button>
-            </div>
-            <WebSocketPlayground
-              url={selectedChannel}
-              servers={wsServers}
-            />
-          </div>
-        </motion.div>
-      )}
+      <Sheet open={showPlayground} onOpenChange={setShowPlayground} modal={true}>
+        <SheetContent side="bottom" className="h-[90vh] w-full overflow-y-auto p-8">
+          <SheetHeader className="p-0">
+            <SheetTitle>WebSocket Playground</SheetTitle>
+          </SheetHeader>
+          <WebSocketPlayground
+            url={selectedChannel}
+            servers={wsServers}
+          />
+        </SheetContent>
+      </Sheet>
 
       {Object.entries(channels).map(([channelPath, channelDetails]) => {
         if (channelPath !== selectedChannel) {
@@ -340,13 +324,13 @@ export function AsyncAPI({
                 )}
               </Col>
               <Col sticky>
-                <button
+                <Button
                   onClick={handleShowPlayground}
-                  className='ml-auto mt-3 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition bg-sky-600 text-white hover:bg-sky-700'
+                  className='ml-auto mt-3 flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium'
                 >
                   Try
                   <PlayButton className="h-4 w-4" />
-                </button>
+                </Button>
                 <APIGroup title="Message" tag={selectedOperation.toUpperCase()} label={channelPath}>
                   <>
                     {resolvedMessage?.payload && (() => {