diff --git a/.commitlintrc.ts b/.commitlintrc.ts
index 965f5a91..0d997938 100644
--- a/.commitlintrc.ts
+++ b/.commitlintrc.ts
@@ -1,4 +1,4 @@
-import { getWorkspacePackageNames } from './scripts/utils';
+import { getWorkspacePackageNames } from './scripts/utils'
 
 // ------------------------------------------------------------------
 
@@ -15,7 +15,7 @@ import { getWorkspacePackageNames } from './scripts/utils';
 // ------------------------------------------------------------------
 
 interface Context {
-  cwd?: string;
+  cwd?: string
 }
 
 // ------------------------------------------------------------------
@@ -26,24 +26,24 @@ interface Context {
  * @returns An array of all projects in the workspace
  */
 function getProjects(context?: Context): string[] {
-  const ctx = context ?? {};
-  const cwd = ctx.cwd ?? process.cwd();
+  const ctx = context ?? {}
+  const cwd = ctx.cwd ?? process.cwd()
 
   return getWorkspacePackageNames(cwd)
     .reduce((projects: string[], name) => {
       if (name.startsWith('@')) {
-        const project = name.split('/')[1];
+        const project = name.split('/')[1]
 
         if (typeof project === 'string') {
-          projects.push(project);
+          projects.push(project)
         }
 
-        projects.push(name);
+        projects.push(name)
       }
 
-      return projects;
+      return projects
     }, [])
-    .sort();
+    .sort()
 }
 
 // We are exporting a custom commitlint configuration
@@ -53,4 +53,4 @@ export default {
   rules: {
     'scope-enum': (ctx: Context) => [2, 'always', getProjects(ctx)],
   },
-};
+}
diff --git a/apps/docs/installation.mdx b/apps/docs/installation.mdx
index 49dae824..51439439 100644
--- a/apps/docs/installation.mdx
+++ b/apps/docs/installation.mdx
@@ -132,7 +132,7 @@ OrbitKit currently ships with two authentication providers, Google and Github. Y
 </Note>
 
 <AccordionGroup>
-  <Accordion title="Configuring Github OAuth" icon="github">
+  <Accordion title='Configuring Github OAuth' icon='github'>
     <ol>
       <li>Go to your Github Settings.</li>
       <li>Go to Developer Settings.</li>
@@ -153,7 +153,7 @@ OrbitKit currently ships with two authentication providers, Google and Github. Y
       </li>
     </ol>
   </Accordion>
-  <Accordion title="Configuring Google OAuth" icon="google">
+  <Accordion title='Configuring Google OAuth' icon='google'>
     <ol>
       <li>Go to the Google Cloud Console.</li>
       <li>Create a new project.</li>
diff --git a/apps/docs/introduction.mdx b/apps/docs/introduction.mdx
index a63579a2..c008c56a 100644
--- a/apps/docs/introduction.mdx
+++ b/apps/docs/introduction.mdx
@@ -5,14 +5,14 @@ description: '🚀 OrbitKit is an enterprise ready monorepo StarterKit ready to
 ---
 
 <img
-  className="block dark:hidden"
-  src="/images/orbitkit-hero-light.svg"
-  alt="Hero Light"
+  className='block dark:hidden'
+  src='/images/orbitkit-hero-light.svg'
+  alt='Hero Light'
 />
 <img
-  className="hidden dark:block"
-  src="/images/orbitkit-hero-dark.svg"
-  alt="Hero Dark"
+  className='hidden dark:block'
+  src='/images/orbitkit-hero-dark.svg'
+  alt='Hero Dark'
 />
 
 **OrbitKit** is not like any starterkit, it's built for **startups** & **big projects** alike, leveraging the newest technologies in a **monorepo codebase** to deliver a starterkit that scales with your business **from the start**.
diff --git a/apps/docs/technologies/playwright.mdx b/apps/docs/technologies/playwright.mdx
index e64917b4..ae992801 100644
--- a/apps/docs/technologies/playwright.mdx
+++ b/apps/docs/technologies/playwright.mdx
@@ -27,13 +27,13 @@ To write tests, you can create a new file in the `e2e` directory of the applicat
 Here is an example of a test file:
 
 ```typescript
-import { expect, test } from '@playwright/test';
+import { expect, test } from '@playwright/test'
 
 test('has title', async ({ page }) => {
-  await page.goto('/');
+  await page.goto('/')
 
-  await expect(page.getByText(/astro website/i)).toBeVisible();
-});
+  await expect(page.getByText(/astro website/i)).toBeVisible()
+})
 ```
 
 ## CI setup
diff --git a/apps/marketing/astro.config.ts b/apps/marketing/astro.config.ts
index 6e985fe6..d703ff5c 100644
--- a/apps/marketing/astro.config.ts
+++ b/apps/marketing/astro.config.ts
@@ -1,8 +1,8 @@
-import mdx from '@astrojs/mdx';
-import react from '@astrojs/react';
-import sitemap from '@astrojs/sitemap';
-import tailwind from '@astrojs/tailwind';
-import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx'
+import react from '@astrojs/react'
+import sitemap from '@astrojs/sitemap'
+import tailwind from '@astrojs/tailwind'
+import { defineConfig } from 'astro/config'
 
 // https://astro.build/config
 export default defineConfig({
@@ -13,4 +13,4 @@ export default defineConfig({
     tailwind({ applyBaseStyles: false }),
     react(),
   ],
-});
+})
diff --git a/apps/marketing/e2e/example.spec.ts b/apps/marketing/e2e/example.spec.ts
index ab8f2ffe..27ab50d0 100644
--- a/apps/marketing/e2e/example.spec.ts
+++ b/apps/marketing/e2e/example.spec.ts
@@ -1,7 +1,7 @@
-import { expect, test } from '@playwright/test';
+import { expect, test } from '@playwright/test'
 
 test('has title', async ({ page }) => {
-  await page.goto('/');
+  await page.goto('/')
 
-  await expect(page.getByText(/astro website/i)).toBeVisible();
-});
+  await expect(page.getByText(/astro website/i)).toBeVisible()
+})
diff --git a/apps/marketing/eslint.config.js b/apps/marketing/eslint.config.js
index de02f6a8..9d11e9cd 100644
--- a/apps/marketing/eslint.config.js
+++ b/apps/marketing/eslint.config.js
@@ -1,4 +1,4 @@
-import { configs, defineConfig } from '@orbitkit/eslint';
+import { configs, defineConfig } from '@orbitkit/eslint'
 
 export default defineConfig(
   ...configs.base,
@@ -12,4 +12,4 @@ export default defineConfig(
       },
     },
   },
-);
+)
diff --git a/apps/marketing/package.json b/apps/marketing/package.json
index 8d17fdde..51dc06e6 100644
--- a/apps/marketing/package.json
+++ b/apps/marketing/package.json
@@ -22,7 +22,7 @@
     "@orbitkit/ui": "workspace:^",
     "@t3-oss/env-core": "^0.10.1",
     "@total-typescript/ts-reset": "^0.5.1",
-    "astro": "^4.10.2",
+    "astro": "^4.10.3",
     "posthog-js": "^1.139.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -30,9 +30,9 @@
   },
   "devDependencies": {
     "@astrojs/check": "^0.7.0",
-    "@astrojs/mdx": "^3.1.0",
-    "@astrojs/react": "^3.5.0",
-    "@astrojs/sitemap": "^3.1.5",
+    "@astrojs/mdx": "^3.1.1",
+    "@astrojs/react": "^3.6.0",
+    "@astrojs/sitemap": "^3.1.6",
     "@astrojs/tailwind": "^5.1.0",
     "@orbitkit/eslint": "workspace:^",
     "@orbitkit/tailwind": "workspace:^",
diff --git a/apps/marketing/playwright.config.ts b/apps/marketing/playwright.config.ts
index 7c132ede..6aed9920 100644
--- a/apps/marketing/playwright.config.ts
+++ b/apps/marketing/playwright.config.ts
@@ -1,7 +1,7 @@
-import { defineConfig, devices } from '@playwright/test';
-import * as dotenv from 'dotenv';
+import { defineConfig, devices } from '@playwright/test'
+import * as dotenv from 'dotenv'
 
-dotenv.config({ path: './env.local' });
+dotenv.config({ path: './env.local' })
 
 export default defineConfig({
   testDir: './e2e',
@@ -33,4 +33,4 @@ export default defineConfig({
     url: 'http://localhost:4321',
     reuseExistingServer: !process.env['CI'],
   },
-});
+})
diff --git a/apps/marketing/postcss.config.cjs b/apps/marketing/postcss.config.cjs
index 12a703d9..33ad091d 100644
--- a/apps/marketing/postcss.config.cjs
+++ b/apps/marketing/postcss.config.cjs
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-};
+}
diff --git a/apps/marketing/reset.d.ts b/apps/marketing/reset.d.ts
index 12bd3edc..69fc8bf0 100644
--- a/apps/marketing/reset.d.ts
+++ b/apps/marketing/reset.d.ts
@@ -1 +1 @@
-import '@total-typescript/ts-reset';
+import '@total-typescript/ts-reset'
diff --git a/apps/marketing/src/components/BaseHead.astro b/apps/marketing/src/components/BaseHead.astro
index 377f0c31..813ba236 100644
--- a/apps/marketing/src/components/BaseHead.astro
+++ b/apps/marketing/src/components/BaseHead.astro
@@ -1,75 +1,75 @@
 ---
-import '@orbitkit/assets/fonts/stylesheet.css';
-import '@/styles/globals.css';
+import '@orbitkit/assets/fonts/stylesheet.css'
+import '@/styles/globals.css'
 
-import GeistMono from '@orbitkit/assets/fonts/GeistMonoVariable.ttf';
-import GeistSans from '@orbitkit/assets/fonts/GeistVariable.ttf';
+import GeistMono from '@orbitkit/assets/fonts/GeistMonoVariable.ttf'
+import GeistSans from '@orbitkit/assets/fonts/GeistVariable.ttf'
 
-import { consts } from '@/consts';
+import { consts } from '@/consts'
 
 interface Props {
-  title?: string;
-  description?: string;
-  image?: string;
+  title?: string
+  description?: string
+  image?: string
 }
 
-const canonicalURL = new URL(Astro.url.pathname, Astro.site);
+const canonicalURL = new URL(Astro.url.pathname, Astro.site)
 
 const {
   title = consts.site.title,
   description = consts.site.description,
   image = consts.site.previewImage,
-} = Astro.props;
+} = Astro.props
 ---
 
 <!-- Global Metadata -->
-<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width,initial-scale=1" />
-<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-<meta name="generator" content={Astro.generator} />
+<meta charset='utf-8' />
+<meta name='viewport' content='width=device-width,initial-scale=1' />
+<link rel='icon' type='image/svg+xml' href='/favicon.svg' />
+<meta name='generator' content={Astro.generator} />
 
 <!-- Font preloads -->
-<link rel="preload" href={GeistSans} as="font" type="font/ttf" crossorigin />
-<link rel="preload" href={GeistMono} as="font" type="font/ttf" crossorigin />
+<link rel='preload' href={GeistSans} as='font' type='font/ttf' crossorigin />
+<link rel='preload' href={GeistMono} as='font' type='font/ttf' crossorigin />
 
 <!-- Canonical URL -->
-<link rel="canonical" href={canonicalURL} />
+<link rel='canonical' href={canonicalURL} />
 
 <!-- Primary Meta Tags -->
 <title>{title}</title>
-<meta name="title" content={title} />
-<meta name="description" content={description} />
+<meta name='title' content={title} />
+<meta name='description' content={description} />
 
 <!-- Open Graph / Facebook -->
-<meta property="og:type" content="website" />
-<meta property="og:url" content={Astro.url} />
-<meta property="og:title" content={title} />
-<meta property="og:description" content={description} />
-<meta property="og:image" content={new URL(image, Astro.url)} />
+<meta property='og:type' content='website' />
+<meta property='og:url' content={Astro.url} />
+<meta property='og:title' content={title} />
+<meta property='og:description' content={description} />
+<meta property='og:image' content={new URL(image, Astro.url)} />
 
 <!-- Twitter -->
-<meta property="twitter:card" content="summary_large_image" />
-<meta property="twitter:url" content={Astro.url} />
-<meta property="twitter:title" content={title} />
-<meta property="twitter:description" content={description} />
-<meta property="twitter:image" content={new URL(image, Astro.url)} />
+<meta property='twitter:card' content='summary_large_image' />
+<meta property='twitter:url' content={Astro.url} />
+<meta property='twitter:title' content={title} />
+<meta property='twitter:description' content={description} />
+<meta property='twitter:image' content={new URL(image, Astro.url)} />
 
 <script is:inline>
   const theme = (() => {
     if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
-      return localStorage.getItem('theme') || '';
+      return localStorage.getItem('theme') || ''
     }
     if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      return 'dark';
+      return 'dark'
     }
-    return 'light';
-  })();
+    return 'light'
+  })()
 
   if (theme === 'light') {
-    document.documentElement.classList.remove('dark');
+    document.documentElement.classList.remove('dark')
   } else {
-    document.documentElement.classList.add('dark');
+    document.documentElement.classList.add('dark')
   }
 
-  window.localStorage.setItem('theme', theme);
+  window.localStorage.setItem('theme', theme)
 </script>
diff --git a/apps/marketing/src/components/FormattedDate.astro b/apps/marketing/src/components/FormattedDate.astro
index 60b112c6..656471bd 100644
--- a/apps/marketing/src/components/FormattedDate.astro
+++ b/apps/marketing/src/components/FormattedDate.astro
@@ -1,9 +1,9 @@
 ---
 interface Props {
-  date: Date;
+  date: Date
 }
 
-const { date } = Astro.props;
+const { date } = Astro.props
 ---
 
 <time datetime={date.toISOString()}>
diff --git a/apps/marketing/src/components/avatar.tsx b/apps/marketing/src/components/avatar.tsx
index 756a42b0..722895a1 100644
--- a/apps/marketing/src/components/avatar.tsx
+++ b/apps/marketing/src/components/avatar.tsx
@@ -1,10 +1,10 @@
-import { Avatar, AvatarFallback, AvatarImage } from '@orbitkit/ui/avatar';
+import { Avatar, AvatarFallback, AvatarImage } from '@orbitkit/ui/avatar'
 
 export const MyAvatar = () => {
   return (
     <Avatar>
-      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+      <AvatarImage src='https://github.com/shadcn.png' alt='@shadcn' />
       <AvatarFallback>CN</AvatarFallback>
     </Avatar>
-  );
-};
+  )
+}
diff --git a/apps/marketing/src/components/posthog/PostHog.astro b/apps/marketing/src/components/posthog/PostHog.astro
index 7946c11f..e5e1a79c 100644
--- a/apps/marketing/src/components/posthog/PostHog.astro
+++ b/apps/marketing/src/components/posthog/PostHog.astro
@@ -1 +1 @@
-<script src="./posthog.ts"></script>
+<script src='./posthog.ts'></script>
diff --git a/apps/marketing/src/components/posthog/posthog.ts b/apps/marketing/src/components/posthog/posthog.ts
index 0667b05e..65b86106 100644
--- a/apps/marketing/src/components/posthog/posthog.ts
+++ b/apps/marketing/src/components/posthog/posthog.ts
@@ -1,8 +1,9 @@
-import { env } from '@orbitkit/env/marketing';
-import posthog from 'posthog-js';
+import posthog from 'posthog-js'
+
+import { env } from '@orbitkit/env/marketing'
 
 if (env.PUBLIC_POSTHOG_KEY && env.PUBLIC_POSTHOG_HOST) {
   posthog.init(env.PUBLIC_POSTHOG_KEY, {
     api_host: env.PUBLIC_POSTHOG_HOST,
-  });
+  })
 }
diff --git a/apps/marketing/src/consts.ts b/apps/marketing/src/consts.ts
index a2ed60aa..d14a6950 100644
--- a/apps/marketing/src/consts.ts
+++ b/apps/marketing/src/consts.ts
@@ -5,4 +5,4 @@ export const consts = {
       'Orbitkit is a SaaS Monorepo StarterKit for startups and enterprises. It includes a Next.js web application, Astrojs marketing website and much more.',
     previewImage: '/images/preview.png',
   },
-};
+}
diff --git a/apps/marketing/src/content/config.ts b/apps/marketing/src/content/config.ts
index f7ff5a14..afd8d6e1 100644
--- a/apps/marketing/src/content/config.ts
+++ b/apps/marketing/src/content/config.ts
@@ -1,4 +1,4 @@
-import { defineCollection, z } from 'astro:content';
+import { defineCollection, z } from 'astro:content'
 
 const blog = defineCollection({
   type: 'content',
@@ -9,6 +9,6 @@ const blog = defineCollection({
     updatedDate: z.coerce.date().optional(),
     heroImage: z.string().optional(),
   }),
-});
+})
 
-export const collections = { blog };
+export const collections = { blog }
diff --git a/apps/marketing/src/layouts/BlogPost.astro b/apps/marketing/src/layouts/BlogPost.astro
index cab19d0c..858bb126 100644
--- a/apps/marketing/src/layouts/BlogPost.astro
+++ b/apps/marketing/src/layouts/BlogPost.astro
@@ -1,16 +1,16 @@
 ---
-import type { CollectionEntry } from 'astro:content';
+import type { CollectionEntry } from 'astro:content'
 
-import BaseHead from '@/components/BaseHead.astro';
-import FormattedDate from '@/components/FormattedDate.astro';
+import BaseHead from '@/components/BaseHead.astro'
+import FormattedDate from '@/components/FormattedDate.astro'
 
-type Props = CollectionEntry<'blog'>['data'];
+type Props = CollectionEntry<'blog'>['data']
 
-const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
+const { title, description, pubDate, updatedDate, heroImage } = Astro.props
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang='en'>
   <head>
     <BaseHead title={title} description={description} />
   </head>
@@ -18,20 +18,20 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
   <body>
     <main>
       <article>
-        <div class="hero-image">
+        <div class='hero-image'>
           {
             heroImage && (
-              <img width={1020} height={510} src={heroImage} alt="" />
+              <img width={1020} height={510} src={heroImage} alt='' />
             )
           }
         </div>
-        <div class="prose">
-          <div class="title">
-            <div class="date">
+        <div class='prose'>
+          <div class='title'>
+            <div class='date'>
               <FormattedDate date={pubDate} />
               {
                 updatedDate && (
-                  <div class="last-updated-on">
+                  <div class='last-updated-on'>
                     Last updated on <FormattedDate date={updatedDate} />
                   </div>
                 )
diff --git a/apps/marketing/src/pages/blog/[...slug].astro b/apps/marketing/src/pages/blog/[...slug].astro
index 1d339db6..08569fbb 100644
--- a/apps/marketing/src/pages/blog/[...slug].astro
+++ b/apps/marketing/src/pages/blog/[...slug].astro
@@ -1,21 +1,21 @@
 ---
-import type { CollectionEntry } from 'astro:content';
+import type { CollectionEntry } from 'astro:content'
 
-import { getCollection } from 'astro:content';
+import { getCollection } from 'astro:content'
 
-import BlogPost from '@/layouts/BlogPost.astro';
+import BlogPost from '@/layouts/BlogPost.astro'
 
 export async function getStaticPaths() {
-  const posts = await getCollection('blog');
+  const posts = await getCollection('blog')
   return posts.map((post) => ({
     params: { slug: post.slug },
     props: post,
-  }));
+  }))
 }
-type Props = CollectionEntry<'blog'>;
+type Props = CollectionEntry<'blog'>
 
-const post = Astro.props;
-const { Content } = await post.render();
+const post = Astro.props
+const { Content } = await post.render()
 ---
 
 <BlogPost {...post.data}>
diff --git a/apps/marketing/src/pages/blog/index.astro b/apps/marketing/src/pages/blog/index.astro
index 1f701c77..e185b29a 100644
--- a/apps/marketing/src/pages/blog/index.astro
+++ b/apps/marketing/src/pages/blog/index.astro
@@ -1,16 +1,16 @@
 ---
-import { getCollection } from 'astro:content';
+import { getCollection } from 'astro:content'
 
-import BaseHead from '@/components/BaseHead.astro';
-import FormattedDate from '@/components/FormattedDate.astro';
+import BaseHead from '@/components/BaseHead.astro'
+import FormattedDate from '@/components/FormattedDate.astro'
 
 const posts = (await getCollection('blog')).sort(
   (a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf(),
-);
+)
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang='en'>
   <head>
     <BaseHead />
   </head>
@@ -26,10 +26,10 @@ const posts = (await getCollection('blog')).sort(
                     width={720}
                     height={360}
                     src={post.data.heroImage}
-                    alt=""
+                    alt=''
                   />
-                  <h4 class="title">{post.data.title}</h4>
-                  <p class="date">
+                  <h4 class='title'>{post.data.title}</h4>
+                  <p class='date'>
                     <FormattedDate date={post.data.pubDate} />
                   </p>
                 </a>
diff --git a/apps/marketing/src/pages/index.astro b/apps/marketing/src/pages/index.astro
index 76121e01..73f5c683 100644
--- a/apps/marketing/src/pages/index.astro
+++ b/apps/marketing/src/pages/index.astro
@@ -1,17 +1,17 @@
 ---
-import { MyAvatar } from '@/components/avatar';
-import BaseHead from '@/components/BaseHead.astro';
-import PostHog from '@/components/posthog/PostHog.astro';
+import { MyAvatar } from '@/components/avatar'
+import BaseHead from '@/components/BaseHead.astro'
+import PostHog from '@/components/posthog/PostHog.astro'
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang='en'>
   <head>
     <BaseHead />
     <PostHog />
   </head>
   <body>
-    <main class="container mx-auto py-6 px-6">
+    <main class='container mx-auto py-6 px-6'>
       <h1>Astro website</h1>
       <MyAvatar client:load />
     </main>
diff --git a/apps/marketing/src/pages/rss.xml.js b/apps/marketing/src/pages/rss.xml.js
index ccc417fc..0a3779e8 100644
--- a/apps/marketing/src/pages/rss.xml.js
+++ b/apps/marketing/src/pages/rss.xml.js
@@ -1,11 +1,11 @@
-import rss from '@astrojs/rss';
-import { getCollection } from 'astro:content';
+import rss from '@astrojs/rss'
+import { getCollection } from 'astro:content'
 
-import { consts } from '../consts';
+import { consts } from '../consts'
 
 /** @param {import('astro').APIContext} context */
 export async function GET(context) {
-  const posts = await getCollection('blog');
+  const posts = await getCollection('blog')
   return rss({
     title: consts.site.title,
     description: consts.site.description,
@@ -14,5 +14,5 @@ export async function GET(context) {
       ...post.data,
       link: `/blog/${post.slug}/`,
     })),
-  });
+  })
 }
diff --git a/apps/marketing/tailwind.config.ts b/apps/marketing/tailwind.config.ts
index 59780698..49a7a5da 100644
--- a/apps/marketing/tailwind.config.ts
+++ b/apps/marketing/tailwind.config.ts
@@ -1,6 +1,6 @@
-import type { Config } from 'tailwindcss';
+import type { Config } from 'tailwindcss'
 
-import { orbitKitTailwindPreset } from '@orbitkit/tailwind';
+import { orbitKitTailwindPreset } from '@orbitkit/tailwind'
 
 const config: Config = {
   content: [
@@ -9,6 +9,6 @@ const config: Config = {
   ],
   darkMode: 'class',
   presets: [orbitKitTailwindPreset],
-};
+}
 
-export default config;
+export default config
diff --git a/apps/web/e2e/sample-test.spec.ts b/apps/web/e2e/sample-test.spec.ts
index 443b6586..1a3f563e 100644
--- a/apps/web/e2e/sample-test.spec.ts
+++ b/apps/web/e2e/sample-test.spec.ts
@@ -1,9 +1,9 @@
-import { expect, test } from '@playwright/test';
+import { expect, test } from '@playwright/test'
 
 test('has title', async ({ page }) => {
-  await page.goto('/');
+  await page.goto('/')
 
   await expect(
     page.getByRole('link', { name: 'Sign in with Github' }),
-  ).toBeVisible();
-});
+  ).toBeVisible()
+})
diff --git a/apps/web/eslint.config.js b/apps/web/eslint.config.js
index 3d621f71..d7dd1f7e 100644
--- a/apps/web/eslint.config.js
+++ b/apps/web/eslint.config.js
@@ -1,4 +1,4 @@
-import { defineConfig, configs } from '@orbitkit/eslint';
+import { configs, defineConfig } from '@orbitkit/eslint'
 
 export default defineConfig(
   ...configs.base,
@@ -12,4 +12,4 @@ export default defineConfig(
       },
     },
   },
-);
+)
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index 3a215212..d668e5e3 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -1,16 +1,16 @@
-import { fileURLToPath } from 'node:url';
-import bundleAnalyzerPlugin from '@next/bundle-analyzer';
+import { fileURLToPath } from 'node:url'
 
-import createJiti from 'jiti';
+import bundleAnalyzerPlugin from '@next/bundle-analyzer'
+import createJiti from 'jiti'
 
-const jiti = createJiti(fileURLToPath(import.meta.url));
+const jiti = createJiti(fileURLToPath(import.meta.url))
 
-jiti('@orbitkit/env/web/server');
-jiti('@orbitkit/env/web/client');
+jiti('@orbitkit/env/web/server')
+jiti('@orbitkit/env/web/client')
 
 const withBundleAnalyzer = bundleAnalyzerPlugin({
   enabled: process.env['ANALYZE'] === 'true',
-});
+})
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -25,6 +25,6 @@ const nextConfig = {
   experimental: {
     typedRoutes: true,
   },
-};
+}
 
-export default withBundleAnalyzer(nextConfig);
+export default withBundleAnalyzer(nextConfig)
diff --git a/apps/web/package.json b/apps/web/package.json
index 6a4e5ed5..db2987ce 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -23,7 +23,7 @@
     "@orbitkit/ui": "workspace:^",
     "@orbitkit/utils": "workspace:^",
     "@t3-oss/env-nextjs": "^0.10.1",
-    "@tanstack/react-query": "^5.45.0",
+    "@tanstack/react-query": "^5.45.1",
     "@total-typescript/ts-reset": "^0.5.1",
     "@trpc/client": "next",
     "@trpc/react-query": "next",
diff --git a/apps/web/playwright.config.ts b/apps/web/playwright.config.ts
index 01ad6feb..9508599e 100644
--- a/apps/web/playwright.config.ts
+++ b/apps/web/playwright.config.ts
@@ -1,7 +1,7 @@
-import { defineConfig, devices } from '@playwright/test';
-import * as dotenv from 'dotenv';
+import { defineConfig, devices } from '@playwright/test'
+import * as dotenv from 'dotenv'
 
-dotenv.config({ path: './env.local' });
+dotenv.config({ path: './env.local' })
 
 export default defineConfig({
   testDir: './e2e',
@@ -33,4 +33,4 @@ export default defineConfig({
     url: 'http://localhost:3000',
     reuseExistingServer: !process.env['CI'],
   },
-});
+})
diff --git a/apps/web/postcss.config.cjs b/apps/web/postcss.config.cjs
index 12a703d9..33ad091d 100644
--- a/apps/web/postcss.config.cjs
+++ b/apps/web/postcss.config.cjs
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-};
+}
diff --git a/apps/web/reset.d.ts b/apps/web/reset.d.ts
index 12bd3edc..69fc8bf0 100644
--- a/apps/web/reset.d.ts
+++ b/apps/web/reset.d.ts
@@ -1 +1 @@
-import '@total-typescript/ts-reset';
+import '@total-typescript/ts-reset'
diff --git a/apps/web/src/app/(auth)/login/github/callback/route.ts b/apps/web/src/app/(auth)/login/github/callback/route.ts
index 3c1797a8..c02eaacd 100644
--- a/apps/web/src/app/(auth)/login/github/callback/route.ts
+++ b/apps/web/src/app/(auth)/login/github/callback/route.ts
@@ -1,3 +1,3 @@
-import { validateGithubCallback } from '@orbitkit/auth/providers/github';
+import { validateGithubCallback } from '@orbitkit/auth/providers/github'
 
-export { validateGithubCallback as GET };
+export { validateGithubCallback as GET }
diff --git a/apps/web/src/app/(auth)/login/github/route.ts b/apps/web/src/app/(auth)/login/github/route.ts
index 70a6ee5d..30c1d8fe 100644
--- a/apps/web/src/app/(auth)/login/github/route.ts
+++ b/apps/web/src/app/(auth)/login/github/route.ts
@@ -1,3 +1,3 @@
-import { createGithubAuthorizationURL } from '@orbitkit/auth/providers/github';
+import { createGithubAuthorizationURL } from '@orbitkit/auth/providers/github'
 
-export { createGithubAuthorizationURL as GET };
+export { createGithubAuthorizationURL as GET }
diff --git a/apps/web/src/app/(auth)/login/google/callback/route.ts b/apps/web/src/app/(auth)/login/google/callback/route.ts
index 5d0d5645..4d4853d8 100644
--- a/apps/web/src/app/(auth)/login/google/callback/route.ts
+++ b/apps/web/src/app/(auth)/login/google/callback/route.ts
@@ -1,3 +1,3 @@
-import { validateGoogleCallback } from '@orbitkit/auth/providers/google';
+import { validateGoogleCallback } from '@orbitkit/auth/providers/google'
 
-export { validateGoogleCallback as GET };
+export { validateGoogleCallback as GET }
diff --git a/apps/web/src/app/(auth)/login/google/route.ts b/apps/web/src/app/(auth)/login/google/route.ts
index 6ae71877..d0bfa067 100644
--- a/apps/web/src/app/(auth)/login/google/route.ts
+++ b/apps/web/src/app/(auth)/login/google/route.ts
@@ -1,3 +1,3 @@
-import { createGoogleAuthorizationURL } from '@orbitkit/auth/providers/google';
+import { createGoogleAuthorizationURL } from '@orbitkit/auth/providers/google'
 
-export { createGoogleAuthorizationURL as GET };
+export { createGoogleAuthorizationURL as GET }
diff --git a/apps/web/src/app/(auth)/login/page.tsx b/apps/web/src/app/(auth)/login/page.tsx
index 5b8abf84..8ac50ae1 100644
--- a/apps/web/src/app/(auth)/login/page.tsx
+++ b/apps/web/src/app/(auth)/login/page.tsx
@@ -1,38 +1,36 @@
-import Link from 'next/link';
-import { redirect } from 'next/navigation';
+import Link from 'next/link'
+import { redirect } from 'next/navigation'
 
-import { auth } from '@orbitkit/auth';
-import { env } from '@orbitkit/env/web/server';
+import { auth } from '@orbitkit/auth'
+import { env } from '@orbitkit/env/web/server'
 
 const googleAuthIsEnabled =
-  env.AUTH_GOOGLE_ID !== undefined && env.AUTH_GOOGLE_SECRET !== undefined;
+  env.AUTH_GOOGLE_ID !== undefined && env.AUTH_GOOGLE_SECRET !== undefined
 
 const githubAuthIsEnabled =
-  env.AUTH_GITHUB_SECRET !== undefined && env.AUTH_GITHUB_ID !== undefined;
+  env.AUTH_GITHUB_SECRET !== undefined && env.AUTH_GITHUB_ID !== undefined
 
 /**
  * The login page of the application, if the user is already logged in they will be redirected to the home page.
  * @returns Next.js RSC page.
  */
 export default async function Page() {
-  const { user } = await auth();
+  const { user } = await auth()
 
-  if (user) {
-    redirect('/');
-  }
+  if (user) redirect('/')
 
   return (
-    <main className="container mx-auto flex flex-col">
+    <main className='container mx-auto flex flex-col'>
       {githubAuthIsEnabled && (
-        <Link href="/login/github">Sign in with Github</Link>
+        <Link href='/login/github'>Sign in with Github</Link>
       )}
       {googleAuthIsEnabled && (
-        <Link href="/login/google">Sign in with Google</Link>
+        <Link href='/login/google'>Sign in with Google</Link>
       )}
 
       {!githubAuthIsEnabled && !googleAuthIsEnabled && (
         <p>Authentication environment variables are not configured.</p>
       )}
     </main>
-  );
+  )
 }
diff --git a/apps/web/src/app/api/trpc/[trpc]/route.ts b/apps/web/src/app/api/trpc/[trpc]/route.ts
index 8e1f9b5f..4d5b713d 100644
--- a/apps/web/src/app/api/trpc/[trpc]/route.ts
+++ b/apps/web/src/app/api/trpc/[trpc]/route.ts
@@ -1,15 +1,15 @@
-import { type NextRequest } from 'next/server';
+import { type NextRequest } from 'next/server'
 
-import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch'
 
-import { appRouter, createTRPCContext } from '@orbitkit/api';
-import { env } from '@orbitkit/env/web/server';
+import { appRouter, createTRPCContext } from '@orbitkit/api'
+import { env } from '@orbitkit/env/web/server'
 
 const createContext = async (req: NextRequest) => {
   return createTRPCContext({
     headers: req.headers,
-  });
-};
+  })
+}
 
 const handler = (req: NextRequest) =>
   fetchRequestHandler({
@@ -21,9 +21,9 @@ const handler = (req: NextRequest) =>
       if (env.NODE_ENV === 'development') {
         console.error(
           `❌ tRPC failed on ${path ?? '<no-path>'}: ${error.message}`,
-        );
+        )
       }
     },
-  });
+  })
 
-export { handler as GET, handler as POST };
+export { handler as GET, handler as POST }
diff --git a/apps/web/src/app/api/uploadthing/core.ts b/apps/web/src/app/api/uploadthing/core.ts
index 819d6d82..2b5269ff 100644
--- a/apps/web/src/app/api/uploadthing/core.ts
+++ b/apps/web/src/app/api/uploadthing/core.ts
@@ -1,34 +1,34 @@
-import type { FileRouter } from 'uploadthing/next';
+import type { FileRouter } from 'uploadthing/next'
 
-import { createUploadthing } from 'uploadthing/next';
-import { UploadThingError } from 'uploadthing/server';
+import { createUploadthing } from 'uploadthing/next'
+import { UploadThingError } from 'uploadthing/server'
 
-import { auth } from '@orbitkit/auth';
+import { auth } from '@orbitkit/auth'
 
-const f = createUploadthing();
+const f = createUploadthing()
 
 export const fileRouter = {
   imageUploader: f({ image: { maxFileSize: '4MB' } })
     .middleware(async () => {
-      const session = await auth();
+      const session = await auth()
 
       if (!session.user) {
         // eslint-disable-next-line @typescript-eslint/only-throw-error
         throw new UploadThingError({
           message: 'You must be logged in to upload files',
           code: 'BAD_REQUEST',
-        });
+        })
       }
 
-      return { userId: session.user.id };
+      return { userId: session.user.id }
     })
     .onUploadComplete(({ metadata, file }) => {
-      console.log('Upload complete for userId:', metadata.userId);
+      console.log('Upload complete for userId:', metadata.userId)
 
-      console.log('file url', file.url);
+      console.log('file url', file.url)
 
-      return { uploadedBy: metadata.userId };
+      return { uploadedBy: metadata.userId }
     }),
-} satisfies FileRouter;
+} satisfies FileRouter
 
-export type OurFileRouter = typeof fileRouter;
+export type OurFileRouter = typeof fileRouter
diff --git a/apps/web/src/app/api/uploadthing/route.ts b/apps/web/src/app/api/uploadthing/route.ts
index e384f2eb..def4d5b1 100644
--- a/apps/web/src/app/api/uploadthing/route.ts
+++ b/apps/web/src/app/api/uploadthing/route.ts
@@ -1,7 +1,7 @@
-import { createRouteHandler } from 'uploadthing/next';
+import { createRouteHandler } from 'uploadthing/next'
 
-import { fileRouter } from './core';
+import { fileRouter } from './core'
 
 export const { GET, POST } = createRouteHandler({
   router: fileRouter,
-});
+})
diff --git a/apps/web/src/app/blocked/page.tsx b/apps/web/src/app/blocked/page.tsx
index 3b6f5d6a..6a457943 100644
--- a/apps/web/src/app/blocked/page.tsx
+++ b/apps/web/src/app/blocked/page.tsx
@@ -7,5 +7,5 @@ export default function page() {
     <main>
       <h1>Blocked</h1>
     </main>
-  );
+  )
 }
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 1de6a3b6..60c4389b 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -1,31 +1,30 @@
-import './globals.css';
+import dynamic from 'next/dynamic'
 
-import { ThemeProvider } from 'next-themes';
+import type { Metadata } from 'next'
 
-import type { Metadata } from 'next';
-import dynamic from 'next/dynamic';
+import { NextSSRPlugin } from '@uploadthing/react/next-ssr-plugin'
+import { GeistMono } from 'geist/font/mono'
+import { GeistSans } from 'geist/font/sans'
+import { ThemeProvider } from 'next-themes'
+import { extractRouterConfig } from 'uploadthing/server'
 
-import { NextSSRPlugin } from '@uploadthing/react/next-ssr-plugin';
-import { GeistMono } from 'geist/font/mono';
-import { GeistSans } from 'geist/font/sans';
-import { extractRouterConfig } from 'uploadthing/server';
+import { Toaster } from '@orbitkit/ui/toast'
 
-import { Toaster } from '@orbitkit/ui/toast';
+import { PostHogReactProvider } from '@/lib/posthog/react'
+import { TRPCReactProvider } from '@/lib/trpc/react'
 
-import { TRPCReactProvider } from '@/lib/trpc/react';
+import { fileRouter } from './api/uploadthing/core'
 
-import { fileRouter } from './api/uploadthing/core';
-
-import { PostHogReactProvider } from '@/lib/posthog/react';
+import './globals.css'
 
 const PostHogPageView = dynamic(() => import('@/lib/posthog/view'), {
   ssr: false,
-});
+})
 
 export const metadata: Metadata = {
   title: 'Create Next App',
   description: 'Generated by create next app',
-};
+}
 
 /**
  * The root layout of the entire application. This is where we wrap the entire application in the necessary providers.
@@ -36,16 +35,16 @@ export const metadata: Metadata = {
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: React.ReactNode
 }>) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang='en' suppressHydrationWarning>
       <PostHogReactProvider>
         <body className={`${GeistSans.variable} ${GeistMono.variable}`}>
           <PostHogPageView />
           <NextSSRPlugin routerConfig={extractRouterConfig(fileRouter)} />
           <ThemeProvider
-            attribute="class"
+            attribute='class'
             enableSystem
             disableTransitionOnChange
           >
@@ -55,5 +54,5 @@ export default function RootLayout({
         </body>
       </PostHogReactProvider>
     </html>
-  );
+  )
 }
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 32874ea6..8f748909 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,31 +1,29 @@
-import { redirect } from 'next/navigation';
+import { redirect } from 'next/navigation'
 
-import { auth } from '@orbitkit/auth';
-import { logout } from '@orbitkit/auth/actions/logout';
-import { Avatar, AvatarFallback, AvatarImage } from '@orbitkit/ui/avatar';
+import { auth } from '@orbitkit/auth'
+import { logout } from '@orbitkit/auth/actions/logout'
+import { Avatar, AvatarFallback, AvatarImage } from '@orbitkit/ui/avatar'
 
-import { ThemeSwitcher } from '@/components/ThemeSwitcher';
-import { api } from '@/lib/trpc/server';
+import { ThemeSwitcher } from '@/components/ThemeSwitcher'
+import { api } from '@/lib/trpc/server'
 
-import { ShowToast } from './show-toast';
-import { UploadExample } from './upload';
+import { ShowToast } from './show-toast'
+import { UploadExample } from './upload'
 
 /**
  * Home page which is protected by authentication
  * @returns Next.js RSC page.
  */
 export default async function Home() {
-  const { user } = await auth();
+  const { user } = await auth()
 
-  if (!user) {
-    redirect('/login');
-  }
+  if (!user) redirect('/login')
 
-  const hello = await api.hello.protected();
+  const hello = await api.hello.protected()
 
   return (
-    <main className="container mx-auto p-6">
-      <div className="flex min-h-[37.8px] items-center justify-between">
+    <main className='container mx-auto p-6'>
+      <div className='flex min-h-[37.8px] items-center justify-between'>
         <h1>Next.js app, your user id is {user.id}</h1>
         <ThemeSwitcher />
       </div>
@@ -39,11 +37,11 @@ export default async function Home() {
         </AvatarFallback>
       </Avatar>
       <form action={logout}>
-        <button type="submit">Logout</button>
+        <button type='submit'>Logout</button>
       </form>
       <ShowToast />
       <UploadExample />
       <p>{hello.message}</p>
     </main>
-  );
+  )
 }
diff --git a/apps/web/src/app/show-toast.tsx b/apps/web/src/app/show-toast.tsx
index 0d229bf9..fb3cd650 100644
--- a/apps/web/src/app/show-toast.tsx
+++ b/apps/web/src/app/show-toast.tsx
@@ -1,22 +1,22 @@
-'use client';
+'use client'
 
-import { Button } from '@orbitkit/ui/button';
-import { useToast } from '@orbitkit/ui/toast';
+import { Button } from '@orbitkit/ui/button'
+import { useToast } from '@orbitkit/ui/toast'
 
 export const ShowToast = () => {
-  const { toast } = useToast();
+  const { toast } = useToast()
 
   return (
     <Button
-      variant="outline"
+      variant='outline'
       onClick={() => {
         toast({
           title: 'Hello, World!',
           description: 'This is a toast message.',
-        });
+        })
       }}
     >
       Show Toast
     </Button>
-  );
-};
+  )
+}
diff --git a/apps/web/src/app/upload.tsx b/apps/web/src/app/upload.tsx
index 9cb87fdf..67236aed 100644
--- a/apps/web/src/app/upload.tsx
+++ b/apps/web/src/app/upload.tsx
@@ -1,20 +1,20 @@
-'use client';
+'use client'
 
-import { UploadButton } from '@/lib/uploadthing';
+import { UploadButton } from '@/lib/uploadthing'
 
 export const UploadExample = () => {
   return (
     <UploadButton
-      endpoint="imageUploader"
+      endpoint='imageUploader'
       onClientUploadComplete={(res) => {
         // Do something with the response
-        console.log('Files: ', res);
-        alert('Upload Completed');
+        console.log('Files: ', res)
+        alert('Upload Completed')
       }}
       onUploadError={(error: Error) => {
         // Do something with the error.
-        alert(`ERROR! ${error.message}`);
+        alert(`ERROR! ${error.message}`)
       }}
     />
-  );
-};
+  )
+}
diff --git a/apps/web/src/components/ThemeSwitcher.tsx b/apps/web/src/components/ThemeSwitcher.tsx
index 5cd794bd..e8f5893e 100644
--- a/apps/web/src/components/ThemeSwitcher.tsx
+++ b/apps/web/src/components/ThemeSwitcher.tsx
@@ -1,31 +1,32 @@
-'use client';
+'use client'
 
-import { useEffect, useState } from 'react';
-import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react'
+
+import { useTheme } from 'next-themes'
 
 export const ThemeSwitcher = () => {
-  const [mounted, setMounted] = useState(false);
-  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false)
+  const { theme, setTheme } = useTheme()
 
   useEffect(() => {
-    setMounted(true);
-  }, []);
+    setMounted(true)
+  }, [])
 
   if (!mounted) {
-    return null;
+    return null
   }
 
   return (
     <select
-      className="rounded-md border-border bg-muted text-sm transition-colors hover:bg-accent"
+      className='rounded-md border-border bg-muted text-sm transition-colors hover:bg-accent'
       value={theme}
       onChange={(e) => {
-        setTheme(e.target.value);
+        setTheme(e.target.value)
       }}
     >
-      <option value="system">System</option>
-      <option value="dark">Dark</option>
-      <option value="light">Light</option>
+      <option value='system'>System</option>
+      <option value='dark'>Dark</option>
+      <option value='light'>Light</option>
     </select>
-  );
-};
+  )
+}
diff --git a/apps/web/src/lib/posthog/client.ts b/apps/web/src/lib/posthog/client.ts
index fb499a03..fa72ecd4 100644
--- a/apps/web/src/lib/posthog/client.ts
+++ b/apps/web/src/lib/posthog/client.ts
@@ -1,5 +1,6 @@
-import { env } from '@orbitkit/env/web/client';
-import { PostHog } from 'posthog-node';
+import { PostHog } from 'posthog-node'
+
+import { env } from '@orbitkit/env/web/client'
 
 /**
  * This component is used to initialize posthog client.
@@ -7,12 +8,12 @@ import { PostHog } from 'posthog-node';
  */
 export default function PostHogClient() {
   if (!env.NEXT_PUBLIC_POSTHOG_KEY || !env.NEXT_PUBLIC_POSTHOG_HOST) {
-    return;
+    return
   }
 
   return new PostHog(env.NEXT_PUBLIC_POSTHOG_KEY, {
     host: env.NEXT_PUBLIC_POSTHOG_HOST,
     flushAt: 1, // Sets how many capture calls we should flush the queue (in one batch).
     flushInterval: 0, // Sets how many milliseconds we should wait before flushing the queue
-  });
+  })
 }
diff --git a/apps/web/src/lib/posthog/react.tsx b/apps/web/src/lib/posthog/react.tsx
index b33ef9d3..7a6398a5 100644
--- a/apps/web/src/lib/posthog/react.tsx
+++ b/apps/web/src/lib/posthog/react.tsx
@@ -1,7 +1,9 @@
-'use client';
-import { env } from '@orbitkit/env/web/client';
-import posthog from 'posthog-js';
-import { PostHogProvider } from 'posthog-js/react';
+'use client'
+
+import posthog from 'posthog-js'
+import { PostHogProvider } from 'posthog-js/react'
+
+import { env } from '@orbitkit/env/web/client'
 
 if (
   typeof window !== 'undefined' &&
@@ -11,7 +13,7 @@ if (
   posthog.init(env.NEXT_PUBLIC_POSTHOG_KEY, {
     api_host: env.NEXT_PUBLIC_POSTHOG_HOST,
     capture_pageview: false, // Disable automatic pageview capture, as we capture manually
-  });
+  })
 }
 
 /**
@@ -23,7 +25,7 @@ if (
 export function PostHogReactProvider({
   children,
 }: {
-  children: React.ReactNode;
+  children: React.ReactNode
 }) {
-  return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
+  return <PostHogProvider client={posthog}>{children}</PostHogProvider>
 }
diff --git a/apps/web/src/lib/posthog/view.tsx b/apps/web/src/lib/posthog/view.tsx
index 5d6e0c0d..c46b2450 100644
--- a/apps/web/src/lib/posthog/view.tsx
+++ b/apps/web/src/lib/posthog/view.tsx
@@ -1,29 +1,32 @@
-'use client';
+'use client'
 
-import { usePathname, useSearchParams } from 'next/navigation';
-import { useEffect } from 'react';
-import { type PostHog, usePostHog } from 'posthog-js/react';
+import { useEffect } from 'react'
+import { usePathname, useSearchParams } from 'next/navigation'
+
+import type { PostHog } from 'posthog-js/react'
+
+import { usePostHog } from 'posthog-js/react'
 
 /**
  * This component is used to capture page views in PostHog.
  * @returns null
  */
 export default function PostHogPageView(): null {
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const posthog = usePostHog() as PostHog | undefined;
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const posthog = usePostHog() as PostHog | undefined
 
   useEffect(() => {
     if (pathname && posthog) {
-      let url = window.origin + pathname;
+      let url = window.origin + pathname
       if (searchParams.toString()) {
-        url = url + `?${searchParams.toString()}`;
+        url = url + `?${searchParams.toString()}`
       }
       posthog.capture('$pageview', {
         $current_url: url,
-      });
+      })
     }
-  }, [pathname, searchParams, posthog]);
+  }, [pathname, searchParams, posthog])
 
-  return null;
+  return null
 }
diff --git a/apps/web/src/lib/trpc/react.tsx b/apps/web/src/lib/trpc/react.tsx
index 47650720..6b2871db 100644
--- a/apps/web/src/lib/trpc/react.tsx
+++ b/apps/web/src/lib/trpc/react.tsx
@@ -1,30 +1,30 @@
-'use client';
+'use client'
 
-import { useState } from 'react';
+import { useState } from 'react'
 
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { loggerLink, unstable_httpBatchStreamLink } from '@trpc/client';
-import { createTRPCReact } from '@trpc/react-query';
-import { type inferRouterInputs, type inferRouterOutputs } from '@trpc/server';
-import superjson from 'superjson';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { loggerLink, unstable_httpBatchStreamLink } from '@trpc/client'
+import { createTRPCReact } from '@trpc/react-query'
+import { type inferRouterInputs, type inferRouterOutputs } from '@trpc/server'
+import superjson from 'superjson'
 
-import { type AppRouter } from '@orbitkit/api';
-import { getBaseUrl } from '@orbitkit/utils/url';
+import { type AppRouter } from '@orbitkit/api'
+import { getBaseUrl } from '@orbitkit/utils/url'
 
-const createQueryClient = () => new QueryClient();
+const createQueryClient = () => new QueryClient()
 
-let clientQueryClientSingleton: QueryClient | undefined = undefined;
+let clientQueryClientSingleton: QueryClient | undefined = undefined
 const getQueryClient = () => {
   if (typeof window === 'undefined') {
-    return createQueryClient();
+    return createQueryClient()
   }
-  return (clientQueryClientSingleton ??= createQueryClient());
-};
+  return (clientQueryClientSingleton ??= createQueryClient())
+}
 
-export const api = createTRPCReact<AppRouter>();
+export const api = createTRPCReact<AppRouter>()
 
-export type RouterInputs = inferRouterInputs<AppRouter>;
-export type RouterOutputs = inferRouterOutputs<AppRouter>;
+export type RouterInputs = inferRouterInputs<AppRouter>
+export type RouterOutputs = inferRouterOutputs<AppRouter>
 
 /**
  * This component is used to initialize the trpc & react-query pairing on the client side.
@@ -33,7 +33,7 @@ export type RouterOutputs = inferRouterOutputs<AppRouter>;
  * @returns react-query and trpc providers wrapper around the children.
  */
 export function TRPCReactProvider(props: { children: React.ReactNode }) {
-  const queryClient = getQueryClient();
+  const queryClient = getQueryClient()
 
   const [trpcClient] = useState(() =>
     api.createClient({
@@ -47,14 +47,14 @@ export function TRPCReactProvider(props: { children: React.ReactNode }) {
           transformer: superjson,
           url: getBaseUrl() + '/api/trpc',
           headers: () => {
-            const headers = new Headers();
-            headers.set('x-trpc-source', 'nextjs-react');
-            return headers;
+            const headers = new Headers()
+            headers.set('x-trpc-source', 'nextjs-react')
+            return headers
           },
         }),
       ],
     }),
-  );
+  )
 
   return (
     <QueryClientProvider client={queryClient}>
@@ -62,5 +62,5 @@ export function TRPCReactProvider(props: { children: React.ReactNode }) {
         {props.children}
       </api.Provider>
     </QueryClientProvider>
-  );
+  )
 }
diff --git a/apps/web/src/lib/trpc/server.ts b/apps/web/src/lib/trpc/server.ts
index 90499670..f39b8495 100644
--- a/apps/web/src/lib/trpc/server.ts
+++ b/apps/web/src/lib/trpc/server.ts
@@ -1,17 +1,17 @@
-import 'server-only';
+import 'server-only'
 
-import { cache } from 'react';
-import { headers } from 'next/headers';
+import { cache } from 'react'
+import { headers } from 'next/headers'
 
-import { createCaller, createTRPCContext } from '@orbitkit/api';
+import { createCaller, createTRPCContext } from '@orbitkit/api'
 
 const createContext = cache(async () => {
-  const heads = new Headers(headers());
-  heads.set('x-trpc-source', 'rsc');
+  const heads = new Headers(headers())
+  heads.set('x-trpc-source', 'rsc')
 
   return createTRPCContext({
     headers: heads,
-  });
-});
+  })
+})
 
-export const api = createCaller(createContext);
+export const api = createCaller(createContext)
diff --git a/apps/web/src/lib/uploadthing.ts b/apps/web/src/lib/uploadthing.ts
index 67cd55ad..90d10759 100644
--- a/apps/web/src/lib/uploadthing.ts
+++ b/apps/web/src/lib/uploadthing.ts
@@ -1,9 +1,9 @@
-import type { OurFileRouter } from '@/app/api/uploadthing/core';
+import type { OurFileRouter } from '@/app/api/uploadthing/core'
 
 import {
   generateUploadButton,
   generateUploadDropzone,
-} from '@uploadthing/react';
+} from '@uploadthing/react'
 
-export const UploadButton = generateUploadButton<OurFileRouter>();
-export const UploadDropzone = generateUploadDropzone<OurFileRouter>();
+export const UploadButton = generateUploadButton<OurFileRouter>()
+export const UploadDropzone = generateUploadDropzone<OurFileRouter>()
diff --git a/apps/web/src/middleware.ts b/apps/web/src/middleware.ts
index 99d1d4a9..0119baaa 100644
--- a/apps/web/src/middleware.ts
+++ b/apps/web/src/middleware.ts
@@ -1,10 +1,10 @@
-import { NextResponse } from 'next/server';
+import { NextResponse } from 'next/server'
 
-import type { NextRequest } from 'next/server';
+import type { NextRequest } from 'next/server'
 
-import { Ratelimit } from '@unkey/ratelimit';
+import { Ratelimit } from '@unkey/ratelimit'
 
-import { env } from '@orbitkit/env/web/server';
+import { env } from '@orbitkit/env/web/server'
 
 const unkey =
   env.UNKEY_ROOT_KEY && env.UNKEY_NAMESPACE
@@ -15,12 +15,12 @@ const unkey =
         duration: '20s',
         async: true,
       })
-    : undefined;
+    : undefined
 
 if (!unkey) {
   console.warn(
     '⚠️  UNKEY_ROOT_KEY or UNKEY_NAMESPACE is not set. Rate limiting will be disabled.',
-  );
+  )
 }
 
 /**
@@ -31,19 +31,19 @@ if (!unkey) {
 export default async function middleware(
   request: NextRequest,
 ): Promise<Response | undefined> {
-  const ip = request.ip ?? '127.0.0.1';
+  const ip = request.ip ?? '127.0.0.1'
 
   if (unkey) {
-    const ratelimit = await unkey.limit(ip);
+    const ratelimit = await unkey.limit(ip)
 
     if (!ratelimit.success) {
-      return NextResponse.redirect(new URL('/blocked'));
+      return NextResponse.redirect(new URL('/blocked'))
     }
   }
 
-  return NextResponse.next();
+  return NextResponse.next()
 }
 
 export const config = {
   matcher: '/((?!api|_next/static|_next/image|favicon.ico|blocked).*)',
-};
+}
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
index 5a20b254..c5a9505e 100644
--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.ts
@@ -1,13 +1,13 @@
-import type { Config } from 'tailwindcss';
+import type { Config } from 'tailwindcss'
 
-import { withUt } from 'uploadthing/tw';
+import { withUt } from 'uploadthing/tw'
 
-import { orbitKitTailwindPreset } from '@orbitkit/tailwind';
+import { orbitKitTailwindPreset } from '@orbitkit/tailwind'
 
 const config: Config = {
   content: ['./src/**/*.{js,ts,jsx,tsx,mdx}', '../../packages/ui/dist/**/*.js'],
   darkMode: 'class',
   presets: [orbitKitTailwindPreset],
-};
+}
 
-export default withUt(config);
+export default withUt(config)
diff --git a/bun.lockb b/bun.lockb
index c62bd52f..f6e5ec52 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/eslint.config.js b/eslint.config.js
index 26d85ca9..cba55c79 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,4 +1,4 @@
-import { configs, defineConfig } from '@orbitkit/eslint';
+import { configs, defineConfig } from '@orbitkit/eslint'
 
 export default defineConfig(
   {
@@ -15,4 +15,4 @@ export default defineConfig(
       },
     },
   },
-);
+)
diff --git a/package.json b/package.json
index 70e35fcf..e583bd27 100644
--- a/package.json
+++ b/package.json
@@ -52,7 +52,7 @@
     "@playwright/test": "^1.44.1",
     "@types/bun": "latest",
     "@types/eslint": "^8.56.10",
-    "@types/node": "^20.14.2",
+    "@types/node": "^20.14.4",
     "@types/yargs": "^17.0.32",
     "commitizen": "^4.3.0",
     "cspell": "^8.8.4",
@@ -64,7 +64,6 @@
     "pkg-types": "^1.1.1",
     "prettier": "^3.3.2",
     "prettier-plugin-astro": "^0.14.0",
-    "prettier-plugin-curly": "^0.2.1",
     "prettier-plugin-packagejson": "^2.5.0",
     "turbo": "^2.0.4",
     "typescript": "^5.4.5",
diff --git a/packages/api/eslint.config.js b/packages/api/eslint.config.js
index 9cf80c4c..f659819d 100644
--- a/packages/api/eslint.config.js
+++ b/packages/api/eslint.config.js
@@ -1,4 +1,4 @@
-import { configs, defineConfig } from '@orbitkit/eslint';
+import { configs, defineConfig } from '@orbitkit/eslint'
 
 export default defineConfig(
   ...configs.base,
@@ -11,4 +11,4 @@ export default defineConfig(
       },
     },
   },
-);
+)
diff --git a/packages/api/src/index.ts b/packages/api/src/index.ts
index e0199ada..655172f4 100644
--- a/packages/api/src/index.ts
+++ b/packages/api/src/index.ts
@@ -1,12 +1,12 @@
-import { helloRouter } from './routers/hello';
-import { createCallerFactory, createRouter } from './trpc';
+import { helloRouter } from './routers/hello'
+import { createCallerFactory, createRouter } from './trpc'
 
 export const appRouter = createRouter({
   hello: helloRouter,
-});
+})
 
-export type AppRouter = typeof appRouter;
+export type AppRouter = typeof appRouter
 
-export const createCaller = createCallerFactory(appRouter);
+export const createCaller = createCallerFactory(appRouter)
 
-export { createTRPCContext } from './trpc';
+export { createTRPCContext } from './trpc'
diff --git a/packages/api/src/routers/hello.ts b/packages/api/src/routers/hello.ts
index ca851c0a..1091cf6e 100644
--- a/packages/api/src/routers/hello.ts
+++ b/packages/api/src/routers/hello.ts
@@ -1,9 +1,9 @@
-import { createRouter, protectedProcedure } from '../trpc';
+import { createRouter, protectedProcedure } from '../trpc'
 
 export const helloRouter = createRouter({
   protected: protectedProcedure.query(({ ctx }) => {
     return {
       message: `Hello, ${ctx.user.name ?? 'world'} from tRPC!`,
-    };
+    }
   }),
-});
+})
diff --git a/packages/api/src/trpc.ts b/packages/api/src/trpc.ts
index 727140c5..00d6c51d 100644
--- a/packages/api/src/trpc.ts
+++ b/packages/api/src/trpc.ts
@@ -1,20 +1,20 @@
-import { initTRPC, TRPCError } from '@trpc/server';
-import superjson from 'superjson';
-import { ZodError } from 'zod';
+import { initTRPC, TRPCError } from '@trpc/server'
+import superjson from 'superjson'
+import { ZodError } from 'zod'
 
-import { auth } from '@orbitkit/auth';
-import { db } from '@orbitkit/db';
+import { auth } from '@orbitkit/auth'
+import { db } from '@orbitkit/db'
 
 export const createTRPCContext = async (opts: { headers: Headers }) => {
-  const { session, user } = await auth();
+  const { session, user } = await auth()
 
   return {
     db,
     session,
     user,
     ...opts,
-  };
-};
+  }
+}
 
 const t = initTRPC.context<typeof createTRPCContext>().create({
   transformer: superjson,
@@ -26,18 +26,18 @@ const t = initTRPC.context<typeof createTRPCContext>().create({
         zodError:
           error.cause instanceof ZodError ? error.cause.flatten() : null,
       },
-    };
+    }
   },
-});
-export const createCallerFactory = t.createCallerFactory;
+})
+export const createCallerFactory = t.createCallerFactory
 
-export const createRouter = t.router;
+export const createRouter = t.router
 
-export const publicProcedure = t.procedure;
+export const publicProcedure = t.procedure
 
 export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
   if (!ctx.session || !ctx.user) {
-    throw new TRPCError({ code: 'UNAUTHORIZED' });
+    throw new TRPCError({ code: 'UNAUTHORIZED' })
   }
 
   return next({
@@ -45,5 +45,5 @@ export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
       session: { ...ctx.session },
       user: { ...ctx.user },
     },
-  });
-});
+  })
+})
diff --git a/packages/auth/eslint.config.js b/packages/auth/eslint.config.js
index 9cf80c4c..f659819d 100644
--- a/packages/auth/eslint.config.js
+++ b/packages/auth/eslint.config.js
@@ -1,4 +1,4 @@
-import { configs, defineConfig } from '@orbitkit/eslint';
+import { configs, defineConfig } from '@orbitkit/eslint'
 
 export default defineConfig(
   ...configs.base,
@@ -11,4 +11,4 @@ export default defineConfig(
       },
     },
   },
-);
+)
diff --git a/packages/auth/src/actions/logout.ts b/packages/auth/src/actions/logout.ts
index aa515f39..0a173813 100644
--- a/packages/auth/src/actions/logout.ts
+++ b/packages/auth/src/actions/logout.ts
@@ -1,32 +1,32 @@
-'use server';
+'use server'
 
-import { cookies } from 'next/headers';
-import { redirect } from 'next/navigation';
+import { cookies } from 'next/headers'
+import { redirect } from 'next/navigation'
 
-import { auth } from '../auth';
-import { lucia } from '../lucia';
+import { auth } from '../auth'
+import { lucia } from '../lucia'
 
 /**
  * This function logs out the user.
  * @returns The response.
  */
 export async function logout() {
-  const { session } = await auth();
+  const { session } = await auth()
   if (!session) {
     return {
       error: 'Unauthorized',
-    };
+    }
   }
 
-  await lucia.invalidateSession(session.id);
+  await lucia.invalidateSession(session.id)
 
-  const sessionCookie = lucia.createBlankSessionCookie();
+  const sessionCookie = lucia.createBlankSessionCookie()
 
   cookies().set(
     sessionCookie.name,
     sessionCookie.value,
     sessionCookie.attributes,
-  );
+  )
 
-  return redirect('/login');
+  return redirect('/login')
 }
diff --git a/packages/auth/src/auth.ts b/packages/auth/src/auth.ts
index e494f5ff..3f32565e 100644
--- a/packages/auth/src/auth.ts
+++ b/packages/auth/src/auth.ts
@@ -1,39 +1,39 @@
-import { cache } from 'react';
-import { cookies } from 'next/headers';
+import { cache } from 'react'
+import { cookies } from 'next/headers'
 
-import { type Session, type User } from 'lucia';
+import { type Session, type User } from 'lucia'
 
-import { lucia } from './lucia';
+import { lucia } from './lucia'
 
 export const uncachedAuth = async (): Promise<
   { user: User; session: Session } | { user: null; session: null }
 > => {
-  const sessionId = cookies().get(lucia.sessionCookieName)?.value ?? null;
+  const sessionId = cookies().get(lucia.sessionCookieName)?.value ?? null
   if (!sessionId) {
-    return { user: null, session: null };
+    return { user: null, session: null }
   }
-  const result = await lucia.validateSession(sessionId);
+  const result = await lucia.validateSession(sessionId)
   try {
     if (result.session?.fresh) {
-      const sessionCookie = lucia.createSessionCookie(result.session.id);
+      const sessionCookie = lucia.createSessionCookie(result.session.id)
       cookies().set(
         sessionCookie.name,
         sessionCookie.value,
         sessionCookie.attributes,
-      );
+      )
     }
     if (!result.session) {
-      const sessionCookie = lucia.createBlankSessionCookie();
+      const sessionCookie = lucia.createBlankSessionCookie()
       cookies().set(
         sessionCookie.name,
         sessionCookie.value,
         sessionCookie.attributes,
-      );
+      )
     }
   } catch {
-    console.error('Failed to set session cookie');
+    console.error('Failed to set session cookie')
   }
-  return result;
-};
+  return result
+}
 
-export const auth = cache(uncachedAuth);
+export const auth = cache(uncachedAuth)
diff --git a/packages/auth/src/index.ts b/packages/auth/src/index.ts
index fc5b1792..6fe12b00 100644
--- a/packages/auth/src/index.ts
+++ b/packages/auth/src/index.ts
@@ -1,2 +1,2 @@
-export * from './lucia';
-export * from './auth';
+export * from './lucia'
+export * from './auth'
diff --git a/packages/auth/src/lucia.ts b/packages/auth/src/lucia.ts
index 1a58c2af..4d41982e 100644
--- a/packages/auth/src/lucia.ts
+++ b/packages/auth/src/lucia.ts
@@ -1,11 +1,11 @@
-import { DrizzlePostgreSQLAdapter } from '@lucia-auth/adapter-drizzle';
-import { Lucia } from 'lucia';
+import { DrizzlePostgreSQLAdapter } from '@lucia-auth/adapter-drizzle'
+import { Lucia } from 'lucia'
 
-import { db } from '@orbitkit/db';
-import { sessionTable, userTable } from '@orbitkit/db/schema';
-import { env } from '@orbitkit/env/web/server';
+import { db } from '@orbitkit/db'
+import { sessionTable, userTable } from '@orbitkit/db/schema'
+import { env } from '@orbitkit/env/web/server'
 
-const adapter = new DrizzlePostgreSQLAdapter(db, sessionTable, userTable);
+const adapter = new DrizzlePostgreSQLAdapter(db, sessionTable, userTable)
 
 export const lucia = new Lucia(adapter, {
   sessionCookie: {
@@ -18,17 +18,17 @@ export const lucia = new Lucia(adapter, {
       name: attributes.name,
       email: attributes.email,
       avatarUrl: attributes.avatarUrl,
-    };
+    }
   },
-});
+})
 
 declare module 'lucia' {
   interface Register {
-    Lucia: typeof lucia;
+    Lucia: typeof lucia
     DatabaseUserAttributes: {
-      name?: string;
-      email: string;
-      avatarUrl?: string;
-    };
+      name?: string
+      email: string
+      avatarUrl?: string
+    }
   }
 }
diff --git a/packages/auth/src/providers/github.ts b/packages/auth/src/providers/github.ts
index 0f11a0c5..8d6fbecd 100644
--- a/packages/auth/src/providers/github.ts
+++ b/packages/auth/src/providers/github.ts
@@ -1,18 +1,18 @@
-import { cookies } from 'next/headers';
+import { cookies } from 'next/headers'
 
-import { generateState, GitHub, OAuth2RequestError } from 'arctic';
-import { generateId } from 'lucia';
+import { generateState, GitHub, OAuth2RequestError } from 'arctic'
+import { generateId } from 'lucia'
 
-import { db } from '@orbitkit/db';
-import { oauthAccountTable, userTable } from '@orbitkit/db/schema';
-import { env } from '@orbitkit/env/web/server';
+import { db } from '@orbitkit/db'
+import { oauthAccountTable, userTable } from '@orbitkit/db/schema'
+import { env } from '@orbitkit/env/web/server'
 
-import { lucia } from '../lucia';
+import { lucia } from '../lucia'
 
 const github =
   env.AUTH_GITHUB_ID !== undefined && env.AUTH_GITHUB_SECRET !== undefined
     ? new GitHub(env.AUTH_GITHUB_ID, env.AUTH_GITHUB_SECRET)
-    : undefined;
+    : undefined
 
 /**
  * This function creates a GitHub authorization URL.
@@ -23,11 +23,11 @@ export async function createGithubAuthorizationURL(): Promise<Response> {
     return new Response(null, {
       status: 404,
       statusText: 'Not Found',
-    });
+    })
   }
 
-  const state = generateState();
-  const url = await github.createAuthorizationURL(state);
+  const state = generateState()
+  const url = await github.createAuthorizationURL(state)
 
   cookies().set('github_oauth_state', state, {
     path: '/',
@@ -35,16 +35,16 @@ export async function createGithubAuthorizationURL(): Promise<Response> {
     httpOnly: true,
     maxAge: 60 * 10,
     sameSite: 'lax',
-  });
+  })
 
-  return Response.redirect(url);
+  return Response.redirect(url)
 }
 
 interface GitHubUser {
-  id: string;
-  email: string;
-  avatar_url: string;
-  name: string;
+  id: string
+  email: string
+  avatar_url: string
+  name: string
 }
 
 /**
@@ -59,27 +59,27 @@ export async function validateGithubCallback(
     return new Response(null, {
       status: 404,
       statusText: 'Not Found',
-    });
+    })
   }
 
-  const url = new URL(request.url);
-  const code = url.searchParams.get('code');
-  const state = url.searchParams.get('state');
-  const storedState = cookies().get('github_oauth_state')?.value ?? null;
+  const url = new URL(request.url)
+  const code = url.searchParams.get('code')
+  const state = url.searchParams.get('state')
+  const storedState = cookies().get('github_oauth_state')?.value ?? null
   if (!code || !state || !storedState || state !== storedState) {
     return new Response(null, {
       status: 400,
-    });
+    })
   }
 
   try {
-    const tokens = await github.validateAuthorizationCode(code);
+    const tokens = await github.validateAuthorizationCode(code)
     const githubUserResponse = await fetch('https://api.github.com/user', {
       headers: {
         Authorization: `Bearer ${tokens.accessToken}`,
       },
-    });
-    const githubUser = (await githubUserResponse.json()) as GitHubUser;
+    })
+    const githubUser = (await githubUserResponse.json()) as GitHubUser
 
     if (!githubUser.email) {
       return new Response(
@@ -87,7 +87,7 @@ export async function validateGithubCallback(
         {
           status: 400,
         },
-      );
+      )
     }
 
     const existingUser = await db.query.oauthAccountTable.findFirst({
@@ -96,59 +96,59 @@ export async function validateGithubCallback(
           eq(table.providerId, 'github'),
           eq(table.providerUserId, githubUser.id),
         ),
-    });
+    })
 
     if (existingUser) {
-      const session = await lucia.createSession(existingUser.userId, {});
-      const sessionCookie = lucia.createSessionCookie(session.id);
+      const session = await lucia.createSession(existingUser.userId, {})
+      const sessionCookie = lucia.createSessionCookie(session.id)
       cookies().set(
         sessionCookie.name,
         sessionCookie.value,
         sessionCookie.attributes,
-      );
+      )
       return new Response(null, {
         status: 302,
         headers: {
           Location: '/',
         },
-      });
+      })
     }
 
-    const userId = generateId(15);
+    const userId = generateId(15)
     await db.insert(userTable).values({
       id: userId,
       email: githubUser.email,
       avatarUrl: githubUser.avatar_url,
       name: githubUser.name,
-    });
+    })
     await db.insert(oauthAccountTable).values({
       providerId: 'github',
       providerUserId: githubUser.id,
       userId,
-    });
-    const session = await lucia.createSession(userId, {});
-    const sessionCookie = lucia.createSessionCookie(session.id);
+    })
+    const session = await lucia.createSession(userId, {})
+    const sessionCookie = lucia.createSessionCookie(session.id)
     cookies().set(
       sessionCookie.name,
       sessionCookie.value,
       sessionCookie.attributes,
-    );
+    )
     return new Response(null, {
       status: 302,
       headers: {
         Location: '/',
       },
-    });
+    })
   } catch (e) {
     // the specific error message depends on the provider
     if (e instanceof OAuth2RequestError) {
       // invalid code
       return new Response(null, {
         status: 400,
-      });
+      })
     }
     return new Response(null, {
       status: 500,
-    });
+    })
   }
 }
diff --git a/packages/auth/src/providers/google.ts b/packages/auth/src/providers/google.ts
index a0151daa..c0b300e8 100644
--- a/packages/auth/src/providers/google.ts
+++ b/packages/auth/src/providers/google.ts
@@ -1,17 +1,17 @@
-import { cookies } from 'next/headers';
+import { cookies } from 'next/headers'
 
-import { generateState, Google, OAuth2RequestError } from 'arctic';
-import { generateId } from 'lucia';
-import { z } from 'zod';
+import { generateState, Google, OAuth2RequestError } from 'arctic'
+import { generateId } from 'lucia'
+import { z } from 'zod'
 
-import { db } from '@orbitkit/db';
-import { oauthAccountTable, userTable } from '@orbitkit/db/schema';
-import { env } from '@orbitkit/env/web/server';
-import { getBaseUrl } from '@orbitkit/utils/url';
+import { db } from '@orbitkit/db'
+import { oauthAccountTable, userTable } from '@orbitkit/db/schema'
+import { env } from '@orbitkit/env/web/server'
+import { getBaseUrl } from '@orbitkit/utils/url'
 
-import { lucia } from '../lucia';
+import { lucia } from '../lucia'
 
-const baseUrl = getBaseUrl();
+const baseUrl = getBaseUrl()
 
 const google =
   env.AUTH_GOOGLE_ID !== undefined &&
@@ -20,7 +20,7 @@ const google =
     env.AUTH_GOOGLE_ID,
     env.AUTH_GOOGLE_SECRET,
     `${baseUrl}/login/google/callback`,
-  );
+  )
 
 /**
  * This function creates a Google authorization URL.
@@ -31,13 +31,13 @@ export async function createGoogleAuthorizationURL(): Promise<Response> {
     return new Response(null, {
       status: 404,
       statusText: 'Not Found',
-    });
+    })
   }
 
-  const state = generateState();
+  const state = generateState()
   const url = await google.createAuthorizationURL(state, env.AUTH_SECRET, {
     scopes: ['profile', 'email'],
-  });
+  })
 
   cookies().set('google_oauth_state', state, {
     path: '/',
@@ -45,9 +45,9 @@ export async function createGoogleAuthorizationURL(): Promise<Response> {
     httpOnly: true,
     maxAge: 60 * 10,
     sameSite: 'lax',
-  });
+  })
 
-  return Response.redirect(url);
+  return Response.redirect(url)
 }
 
 const googleUser = z.object({
@@ -55,7 +55,7 @@ const googleUser = z.object({
   email: z.string(),
   picture: z.string(),
   name: z.string(),
-});
+})
 
 /**
  * This function validates the Google callback.
@@ -69,23 +69,20 @@ export async function validateGoogleCallback(
     return new Response(null, {
       status: 404,
       statusText: 'Not Found',
-    });
+    })
   }
-  const url = new URL(request.url);
-  const code = url.searchParams.get('code');
-  const state = url.searchParams.get('state');
-  const storedState = cookies().get('google_oauth_state')?.value ?? null;
+  const url = new URL(request.url)
+  const code = url.searchParams.get('code')
+  const state = url.searchParams.get('state')
+  const storedState = cookies().get('google_oauth_state')?.value ?? null
   if (!code || !state || !storedState || state !== storedState) {
     return new Response(null, {
       status: 400,
-    });
+    })
   }
 
   try {
-    const tokens = await google.validateAuthorizationCode(
-      code,
-      env.AUTH_SECRET,
-    );
+    const tokens = await google.validateAuthorizationCode(code, env.AUTH_SECRET)
 
     const googleUserResponse = await fetch(
       'https://openidconnect.googleapis.com/v1/userinfo',
@@ -94,75 +91,75 @@ export async function validateGoogleCallback(
           Authorization: `Bearer ${tokens.accessToken}`,
         },
       },
-    );
-    const parsedRes = googleUser.safeParse(await googleUserResponse.json());
+    )
+    const parsedRes = googleUser.safeParse(await googleUserResponse.json())
 
     if (!parsedRes.success) {
       return new Response(null, {
         status: 400,
-      });
+      })
     }
 
-    const { sub, email, picture, name } = parsedRes.data;
+    const { sub, email, picture, name } = parsedRes.data
 
     const existingUser = await db.query.oauthAccountTable.findFirst({
       where: (table, { and, eq }) =>
         and(eq(table.providerId, 'google'), eq(table.providerUserId, sub)),
-    });
+    })
 
     if (existingUser) {
-      const session = await lucia.createSession(existingUser.userId, {});
-      const sessionCookie = lucia.createSessionCookie(session.id);
+      const session = await lucia.createSession(existingUser.userId, {})
+      const sessionCookie = lucia.createSessionCookie(session.id)
       cookies().set(
         sessionCookie.name,
         sessionCookie.value,
         sessionCookie.attributes,
-      );
+      )
       return new Response(null, {
         status: 302,
         headers: {
           Location: '/',
         },
-      });
+      })
     }
 
-    const userId = generateId(15);
+    const userId = generateId(15)
     await db.insert(userTable).values({
       id: userId,
       email,
       avatarUrl: picture,
       name,
-    });
+    })
     await db.insert(oauthAccountTable).values({
       providerId: 'google',
       providerUserId: sub,
       userId,
-    });
+    })
 
-    const session = await lucia.createSession(userId, {});
-    const sessionCookie = lucia.createSessionCookie(session.id);
+    const session = await lucia.createSession(userId, {})
+    const sessionCookie = lucia.createSessionCookie(session.id)
 
     cookies().set(
       sessionCookie.name,
       sessionCookie.value,
       sessionCookie.attributes,
-    );
+    )
 
     return new Response(null, {
       status: 302,
       headers: {
         Location: '/',
       },
-    });
+    })
   } catch (e) {
     if (e instanceof OAuth2RequestError) {
       return new Response(null, {
         status: 400,
-      });
+      })
     }
 
     return new Response(null, {
       status: 500,
-    });
+    })
   }
 }
diff --git a/packages/config/eslint/eslint.config.js b/packages/config/eslint/eslint.config.js
index 9cf80c4c..f659819d 100644
--- a/packages/config/eslint/eslint.config.js
+++ b/packages/config/eslint/eslint.config.js
@@ -1,4 +1,4 @@
-import { configs, defineConfig } from '@orbitkit/eslint';
+import { configs, defineConfig } from '@orbitkit/eslint'
 
 export default defineConfig(
   ...configs.base,
@@ -11,4 +11,4 @@ export default defineConfig(
       },
     },
   },
-);
+)
diff --git a/packages/config/eslint/eslint.d.ts b/packages/config/eslint/eslint.d.ts
index 4459cf40..f789626f 100644
--- a/packages/config/eslint/eslint.d.ts
+++ b/packages/config/eslint/eslint.d.ts
@@ -5,86 +5,86 @@
 
 // From: https://github.com/t3-oss/create-t3-turbo/blob/main/tooling/eslint/types.d.ts
 declare module '@eslint/js' {
-  import type { Linter } from 'eslint';
+  import type { Linter } from 'eslint'
 
   export const configs: {
-    readonly recommended: { readonly rules: Readonly<Linter.RulesRecord> };
-    readonly all: { readonly rules: Readonly<Linter.RulesRecord> };
-  };
+    readonly recommended: { readonly rules: Readonly<Linter.RulesRecord> }
+    readonly all: { readonly rules: Readonly<Linter.RulesRecord> }
+  }
 }
 
 declare module '@eslint-community/eslint-plugin-eslint-comments/configs' {
-  import type { Linter } from 'eslint';
+  import type { Linter } from 'eslint'
 
   export const recommended: {
-    rules: Linter.RulesRecord;
-  };
+    rules: Linter.RulesRecord
+  }
 }
 
 declare module '@eslint/eslintrc' {
-  import type { Linter } from 'eslint';
+  import type { Linter } from 'eslint'
 
   export class FlatCompat {
     constructor({
       baseDirectory,
       resolvePluginsRelativeTo,
     }: {
-      baseDirectory: string;
-      resolvePluginsRelativeTo: string;
-    });
+      baseDirectory: string
+      resolvePluginsRelativeTo: string
+    })
 
     extends(extendsValue: string): Linter.FlatConfig & {
-      [Symbol.iterator]: () => IterableIterator<Linter.FlatConfig>;
-    };
+      [Symbol.iterator]: () => IterableIterator<Linter.FlatConfig>
+    }
 
     config(config: Linter.Config): Linter.FlatConfig & {
-      [Symbol.iterator]: () => IterableIterator<Linter.FlatConfig>;
-    };
+      [Symbol.iterator]: () => IterableIterator<Linter.FlatConfig>
+    }
   }
 }
 
 declare module '@eslint/compat' {
-  import type { Linter } from 'eslint';
-  import type { ConfigWithExtends } from 'typescript-eslint';
+  import type { Linter } from 'eslint'
+  import type { ConfigWithExtends } from 'typescript-eslint'
 
   export const fixupConfigRules: (
     config: string | Linter.FlatConfig,
-  ) => ConfigWithExtends[];
+  ) => ConfigWithExtends[]
 }
 
 declare module 'eslint-plugin-regexp' {
-  import type { Linter } from 'eslint';
-  import type { ConfigWithExtends } from 'typescript-eslint';
+  import type { Linter } from 'eslint'
+  import type { ConfigWithExtends } from 'typescript-eslint'
 
   export const configs: {
     'flat/recommended': {
-      [Symbol.iterator]: () => IterableIterator<ConfigWithExtends>;
-      rules: Linter.RulesRecord;
-    };
+      [Symbol.iterator]: () => IterableIterator<ConfigWithExtends>
+      rules: Linter.RulesRecord
+    }
     'flat/all': {
-      [Symbol.iterator]: () => IterableIterator<ConfigWithExtends>;
-      rules: Linter.RulesRecord;
-    };
-  };
+      [Symbol.iterator]: () => IterableIterator<ConfigWithExtends>
+      rules: Linter.RulesRecord
+    }
+  }
 }
 
 declare module 'eslint-plugin-security' {
-  import type { Linter } from 'eslint';
-  import type { ConfigWithExtends } from 'typescript-eslint';
+  import type { Linter } from 'eslint'
+  import type { ConfigWithExtends } from 'typescript-eslint'
 
   export const configs: {
     recommended: {
-      [Symbol.iterator]: () => IterableIterator<ConfigWithExtends>;
-      rules: Linter.RulesRecord;
-    };
-  };
+      [Symbol.iterator]: () => IterableIterator<ConfigWithExtends>
+      rules: Linter.RulesRecord
+    }
+  }
 }
 
 declare module 'eslint-plugin-turbo' {
-  import type { Linter, Rule } from 'eslint';
+  import type { Linter, Rule } from 'eslint'
 
   export const configs: {
-    recommended: { rules: Linter.RulesRecord };
-  };
-  export const rules: Record<string, Rule.RuleModule>;
+    recommended: { rules: Linter.RulesRecord }
+  }
+  export const rules: Record<string, Rule.RuleModule>
 }
diff --git a/packages/config/eslint/package.json b/packages/config/eslint/package.json
index 4bbf0e7d..5ff8db48 100644
--- a/packages/config/eslint/package.json
+++ b/packages/config/eslint/package.json
@@ -32,14 +32,14 @@
     "eslint-plugin-security": "^3.0.1",
     "eslint-plugin-tailwindcss": "^3.17.3",
     "eslint-plugin-turbo": "^2.0.4",
-    "globals": "^15.5.0",
-    "typescript-eslint": "^7.13.0"
+    "globals": "^15.6.0",
+    "typescript-eslint": "^7.13.1"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.2.4",
     "@orbitkit/tsconfig": "workspace:^",
     "@types/eslint-config-prettier": "^6.11.3",
-    "@typescript-eslint/utils": "^7.13.0",
+    "@typescript-eslint/utils": "^7.13.1",
     "eslint-plugin-storybook": "^0.8.0"
   }
 }
diff --git a/packages/config/eslint/src/configs/base.js b/packages/config/eslint/src/configs/base.js
index 856b3c82..1b2e990a 100644
--- a/packages/config/eslint/src/configs/base.js
+++ b/packages/config/eslint/src/configs/base.js
@@ -1,15 +1,15 @@
-import comments from '@eslint-community/eslint-plugin-eslint-comments/configs';
-import { fixupConfigRules } from '@eslint/compat';
-import js from '@eslint/js';
-import prettierConfig from 'eslint-config-prettier';
-import jsdoc from 'eslint-plugin-jsdoc';
-import * as regexpPlugin from 'eslint-plugin-regexp';
-import pluginSecurity from 'eslint-plugin-security';
-import tseslint from 'typescript-eslint';
-import globals from 'globals';
-import turboPlugin from 'eslint-plugin-turbo';
+import comments from '@eslint-community/eslint-plugin-eslint-comments/configs'
+import { fixupConfigRules } from '@eslint/compat'
+import js from '@eslint/js'
+import prettierConfig from 'eslint-config-prettier'
+import jsdoc from 'eslint-plugin-jsdoc'
+import * as regexpPlugin from 'eslint-plugin-regexp'
+import pluginSecurity from 'eslint-plugin-security'
+import turboPlugin from 'eslint-plugin-turbo'
+import globals from 'globals'
+import tseslint from 'typescript-eslint'
 
-import { compat, defineConfig } from '../utils.js';
+import { compat, defineConfig } from '../utils.js'
 
 export const base = defineConfig(
   {
@@ -90,4 +90,4 @@ export const base = defineConfig(
       ],
     },
   },
-);
+)
diff --git a/packages/config/eslint/src/configs/next.js b/packages/config/eslint/src/configs/next.js
index 9b7d511f..83f5f54c 100644
--- a/packages/config/eslint/src/configs/next.js
+++ b/packages/config/eslint/src/configs/next.js
@@ -1,8 +1,9 @@
-import { fixupConfigRules } from '@eslint/compat';
-import { compat, defineConfig } from '../utils.js';
-import { react } from './react.js';
+import { fixupConfigRules } from '@eslint/compat'
+
+import { compat, defineConfig } from '../utils.js'
+import { react } from './react.js'
 
 export const next = defineConfig(
   ...react,
   ...fixupConfigRules(compat.extends('plugin:@next/next/recommended')),
-);
+)
diff --git a/packages/config/eslint/src/configs/playwright.js b/packages/config/eslint/src/configs/playwright.js
index fd15ba66..7d71035c 100644
--- a/packages/config/eslint/src/configs/playwright.js
+++ b/packages/config/eslint/src/configs/playwright.js
@@ -1,6 +1,6 @@
-import playwrightPlugin from 'eslint-plugin-playwright';
+import playwrightPlugin from 'eslint-plugin-playwright'
 
-import { defineConfig } from '../utils.js';
+import { defineConfig } from '../utils.js'
 
 export const playwright = defineConfig(
   {
@@ -12,4 +12,4 @@ export const playwright = defineConfig(
       // You can override the recommended rules here
     },
   },
-);
+)
diff --git a/packages/config/eslint/src/configs/react.js b/packages/config/eslint/src/configs/react.js
index c0b04bc5..d07a1a56 100644
--- a/packages/config/eslint/src/configs/react.js
+++ b/packages/config/eslint/src/configs/react.js
@@ -1,5 +1,6 @@
-import { fixupConfigRules } from '@eslint/compat';
-import { compat, defineConfig } from '../utils.js';
+import { fixupConfigRules } from '@eslint/compat'
+
+import { compat, defineConfig } from '../utils.js'
 
 export const react = defineConfig(
   ...fixupConfigRules(compat.extends('plugin:react/recommended')),
@@ -17,4 +18,4 @@ export const react = defineConfig(
       'react/prop-types': 'off',
     },
   },
-);
+)
diff --git a/packages/config/eslint/src/configs/storybook.js b/packages/config/eslint/src/configs/storybook.js
index 776fb185..76ec016c 100644
--- a/packages/config/eslint/src/configs/storybook.js
+++ b/packages/config/eslint/src/configs/storybook.js
@@ -1,5 +1,6 @@
-import { fixupConfigRules } from '@eslint/compat';
-import { compat, defineConfig } from '../utils.js';
+import { fixupConfigRules } from '@eslint/compat'
+
+import { compat, defineConfig } from '../utils.js'
 
 export const storybook = defineConfig(
   {
@@ -12,4 +13,4 @@ export const storybook = defineConfig(
     files: ['*.stories.@(ts|tsx|js|jsx|mjs|cjs)'],
     rules: {},
   },
-);
+)
diff --git a/packages/config/eslint/src/index.d.ts b/packages/config/eslint/src/index.d.ts
index 11e3e997..e3f62e02 100644
--- a/packages/config/eslint/src/index.d.ts
+++ b/packages/config/eslint/src/index.d.ts
@@ -1,16 +1,16 @@
 /// <reference types="../eslint.d.ts" />
 
-import type { FlatCompat } from '@eslint/eslintrc';
-import type { FlatConfig } from '@typescript-eslint/utils/ts-eslint';
+import type { FlatCompat } from '@eslint/eslintrc'
+import type { FlatConfig } from '@typescript-eslint/utils/ts-eslint'
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-imports
-export declare const defineConfig: typeof import('typescript-eslint').config;
-export declare const compat: FlatCompat;
+export declare const defineConfig: typeof import('typescript-eslint').config
+export declare const compat: FlatCompat
 
 export declare const configs: {
-  base: FlatConfig.ConfigArray;
-  playwright: FlatConfig.ConfigArray;
-  react: FlatConfig.ConfigArray;
-  next: FlatConfig.ConfigArray;
-  storybook: FlatConfig.ConfigArray;
-};
+  base: FlatConfig.ConfigArray
+  playwright: FlatConfig.ConfigArray
+  react: FlatConfig.ConfigArray
+  next: FlatConfig.ConfigArray
+  storybook: FlatConfig.ConfigArray
+}
diff --git a/packages/config/eslint/src/index.js b/packages/config/eslint/src/index.js
index d0cf8b9c..8223429f 100644
--- a/packages/config/eslint/src/index.js
+++ b/packages/config/eslint/src/index.js
@@ -1,10 +1,10 @@
-import { base } from './configs/base.js';
-import { next } from './configs/next.js';
-import { playwright } from './configs/playwright.js';
-import { react } from './configs/react.js';
-import { storybook } from './configs/storybook.js';
+import { base } from './configs/base.js'
+import { next } from './configs/next.js'
+import { playwright } from './configs/playwright.js'
+import { react } from './configs/react.js'
+import { storybook } from './configs/storybook.js'
 
-export { defineConfig } from './utils.js';
+export { defineConfig } from './utils.js'
 
 /**
  * Note: You MUST import files using the .js extension in this entire package
@@ -16,4 +16,4 @@ export const configs = {
   react,
   next,
   storybook,
-};
+}
diff --git a/packages/config/eslint/src/utils.js b/packages/config/eslint/src/utils.js
index ae62f0b0..fe280f9d 100644
--- a/packages/config/eslint/src/utils.js
+++ b/packages/config/eslint/src/utils.js
@@ -1,15 +1,15 @@
-import path from 'path';
-import { fileURLToPath } from 'url';
+import path from 'path'
+import { fileURLToPath } from 'url'
 
-import { FlatCompat } from '@eslint/eslintrc';
-import tseslint from 'typescript-eslint';
+import { FlatCompat } from '@eslint/eslintrc'
+import tseslint from 'typescript-eslint'
 
-export const defineConfig = tseslint.config;
+export const defineConfig = tseslint.config
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
 
 export const compat = new FlatCompat({
   baseDirectory: __dirname,
   resolvePluginsRelativeTo: __dirname,
-});
+})
diff --git a/packages/config/storybook/eslint.config.js b/packages/config/storybook/eslint.config.js
index 80903ef0..7bf31834 100644
--- a/packages/config/storybook/eslint.config.js
+++ b/packages/config/storybook/eslint.config.js
@@ -1,4 +1,4 @@
-import { configs, defineConfig } from '@orbitkit/eslint';
+import { configs, defineConfig } from '@orbitkit/eslint'
 
 export default defineConfig(
   ...configs.base,
@@ -12,4 +12,4 @@ export default defineConfig(
       },
     },
   },
-);
+)
diff --git a/packages/config/storybook/package.json b/packages/config/storybook/package.json
index ee8815cc..3977ec25 100644
--- a/packages/config/storybook/package.json
+++ b/packages/config/storybook/package.json
@@ -36,21 +36,21 @@
     "@orbitkit/assets": "workspace:^",
     "@orbitkit/utils": "workspace:^",
     "@radix-ui/colors": "^3.0.0",
-    "@storybook/addon-a11y": "^8.1.9",
-    "@storybook/addon-essentials": "^8.1.9",
-    "@storybook/addon-interactions": "^8.1.9",
-    "@storybook/addon-links": "^8.1.9",
-    "@storybook/addon-onboarding": "^8.1.9",
-    "@storybook/addon-themes": "^8.1.9",
-    "@storybook/addon-viewport": "^8.1.9",
-    "@storybook/manager-api": "^8.1.9",
-    "@storybook/react": "^8.1.9",
-    "@storybook/react-vite": "^8.1.9",
-    "@storybook/theming": "^8.1.9",
-    "@storybook/types": "^8.1.9",
+    "@storybook/addon-a11y": "^8.1.10",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-interactions": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/addon-onboarding": "^8.1.10",
+    "@storybook/addon-themes": "^8.1.10",
+    "@storybook/addon-viewport": "^8.1.10",
+    "@storybook/manager-api": "^8.1.10",
+    "@storybook/react": "^8.1.10",
+    "@storybook/react-vite": "^8.1.10",
+    "@storybook/theming": "^8.1.10",
+    "@storybook/types": "^8.1.10",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "storybook": "^8.1.9"
+    "storybook": "^8.1.10"
   },
   "devDependencies": {
     "@orbitkit/eslint": "workspace:^",
diff --git a/packages/config/storybook/src/configs/react-vite.ts b/packages/config/storybook/src/configs/react-vite.ts
index c437679d..06ca3014 100644
--- a/packages/config/storybook/src/configs/react-vite.ts
+++ b/packages/config/storybook/src/configs/react-vite.ts
@@ -1,6 +1,6 @@
-import { type StorybookConfig } from '@storybook/react-vite';
+import { type StorybookConfig } from '@storybook/react-vite'
 
-import { getAbsolutePath } from '@orbitkit/utils/filesystem';
+import { getAbsolutePath } from '@orbitkit/utils/filesystem'
 
 const config = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
@@ -27,6 +27,6 @@ const config = {
   docs: {
     autodocs: 'tag',
   },
-} satisfies StorybookConfig;
+} satisfies StorybookConfig
 
-export default config;
+export default config
diff --git a/packages/config/storybook/src/manager.tsx b/packages/config/storybook/src/manager.tsx
index b9b0af56..ab774377 100644
--- a/packages/config/storybook/src/manager.tsx
+++ b/packages/config/storybook/src/manager.tsx
@@ -1,26 +1,26 @@
-import { useEffect } from 'react';
+import { useEffect } from 'react'
 
-import { addons, types, useGlobals } from '@storybook/manager-api';
+import { addons, types, useGlobals } from '@storybook/manager-api'
 
-import theme from './theme';
+import theme from './theme'
 
 addons.setConfig({
   theme: theme,
-});
+})
 
 const ExampleToolbar = () => {
-  const [globals] = useGlobals();
+  const [globals] = useGlobals()
 
   useEffect(() => {
-    const elements = document.querySelectorAll('.docs-story');
+    const elements = document.querySelectorAll('.docs-story')
 
     elements.forEach((element) => {
-      element.classList.add(globals['theme'] as string);
-    });
-  }, [globals]);
+      element.classList.add(globals['theme'] as string)
+    })
+  }, [globals])
 
-  return null;
-};
+  return null
+}
 
 export const registerAddons = () => {
   addons.register('docs-theme', () => {
@@ -29,6 +29,6 @@ export const registerAddons = () => {
       type: types.TOOL,
       match: ({ viewMode }) => !!viewMode?.match(/^(?:story|docs)$/),
       render: ExampleToolbar,
-    });
-  });
-};
+    })
+  })
+}
diff --git a/packages/config/storybook/src/preview.tsx b/packages/config/storybook/src/preview.tsx
index c398088c..3c112a8d 100644
--- a/packages/config/storybook/src/preview.tsx
+++ b/packages/config/storybook/src/preview.tsx
@@ -1,12 +1,12 @@
-import type { Preview } from '@storybook/react';
+import type { Preview } from '@storybook/react'
 
-import type {} from '@storybook/types';
+import type {} from '@storybook/types'
 
-import { withThemeByClassName } from '@storybook/addon-themes';
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-import { type ReactRenderer } from '@storybook/react';
+import { withThemeByClassName } from '@storybook/addon-themes'
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+import { type ReactRenderer } from '@storybook/react'
 
-import theme from './theme';
+import theme from './theme'
 
 const customViewports = {
   '720p': {
@@ -44,7 +44,7 @@ const customViewports = {
       height: '1080px',
     },
   },
-};
+}
 
 const preview = {
   parameters: {
@@ -74,6 +74,6 @@ const preview = {
       defaultTheme: 'dark',
     }),
   ],
-} satisfies Preview;
+} satisfies Preview
 
-export default preview;
+export default preview
diff --git a/packages/config/storybook/src/theme.ts b/packages/config/storybook/src/theme.ts
index 8f8f5846..dba22b26 100644
--- a/packages/config/storybook/src/theme.ts
+++ b/packages/config/storybook/src/theme.ts
@@ -1,5 +1,5 @@
-import { blueDark, grayDark } from '@radix-ui/colors';
-import { create } from '@storybook/theming/create';
+import { blueDark, grayDark } from '@radix-ui/colors'
+import { create } from '@storybook/theming/create'
 
 export default create({
   base: 'dark',
@@ -25,4 +25,4 @@ export default create({
   inputTextColor: grayDark.gray11,
   textMutedColor: grayDark.gray10,
   textInverseColor: grayDark.gray1,
-});
+})
diff --git a/packages/config/tailwind/eslint.config.js b/packages/config/tailwind/eslint.config.js
index 9cf80c4c..f659819d 100644
--- a/packages/config/tailwind/eslint.config.js
+++ b/packages/config/tailwind/eslint.config.js
@@ -1,4 +1,4 @@
-import { configs, defineConfig } from '@orbitkit/eslint';
+import { configs, defineConfig } from '@orbitkit/eslint'
 
 export default defineConfig(
   ...configs.base,
@@ -11,4 +11,4 @@ export default defineConfig(
       },
     },
   },
-);
+)
diff --git a/packages/config/tailwind/src/preset.ts b/packages/config/tailwind/src/preset.ts
index 9bf248c3..5e0fb7ce 100644
--- a/packages/config/tailwind/src/preset.ts
+++ b/packages/config/tailwind/src/preset.ts
@@ -1,14 +1,14 @@
-import aspectRatio from '@tailwindcss/aspect-ratio';
-import containerQueries from '@tailwindcss/container-queries';
-import forms from '@tailwindcss/forms';
-import typography from '@tailwindcss/typography';
-import animate from 'tailwindcss-animate';
-import { createPlugin } from 'windy-radix-palette';
-import windyTypography from 'windy-radix-typography';
+import aspectRatio from '@tailwindcss/aspect-ratio'
+import containerQueries from '@tailwindcss/container-queries'
+import forms from '@tailwindcss/forms'
+import typography from '@tailwindcss/typography'
+import animate from 'tailwindcss-animate'
+import { createPlugin } from 'windy-radix-palette'
+import windyTypography from 'windy-radix-typography'
 
-import { type Config } from 'tailwindcss';
+import { type Config } from 'tailwindcss'
 
-const colors = createPlugin();
+const colors = createPlugin()
 
 export const orbitKitTailwindPreset: Config = {
   content: ['./src/**/*.{js,jsx,ts,tsx,mdx}'],
@@ -137,4 +137,4 @@ export const orbitKitTailwindPreset: Config = {
       handler: containerQueries.handler,
     },
   ],
-};
+}
diff --git a/packages/config/vite/eslint.config.js b/packages/config/vite/eslint.config.js
index 9cf80c4c..f659819d 100644
--- a/packages/config/vite/eslint.config.js
+++ b/packages/config/vite/eslint.config.js
@@ -1,4 +1,4 @@
-import { configs, defineConfig } from '@orbitkit/eslint';
+import { configs, defineConfig } from '@orbitkit/eslint'
 
 export default defineConfig(
   ...configs.base,
@@ -11,4 +11,4 @@ export default defineConfig(
       },
     },
   },
-);
+)
diff --git a/packages/config/vite/src/build.ts b/packages/config/vite/src/build.ts
index 1903c90c..84793b67 100644
--- a/packages/config/vite/src/build.ts
+++ b/packages/config/vite/src/build.ts
@@ -1,13 +1,12 @@
-import type { LibraryOptions } from 'vite';
-import { defineConfig } from 'vite';
-import createExternal, {
-  type Options as ExternalPluginOptions,
-} from 'vite-plugin-external';
-import dtsPlugin, {
-  type PluginOptions as DtsPluginOptions,
-} from 'vite-plugin-dts';
-import { globbySync } from 'globby';
-import preserveDirectives from 'rollup-plugin-preserve-directives';
+import type { LibraryOptions } from 'vite'
+import type { PluginOptions as DtsPluginOptions } from 'vite-plugin-dts'
+import type { Options as ExternalPluginOptions } from 'vite-plugin-external'
+
+import { globbySync } from 'globby'
+import preserveDirectives from 'rollup-plugin-preserve-directives'
+import { defineConfig } from 'vite'
+import dtsPlugin from 'vite-plugin-dts'
+import createExternal from 'vite-plugin-external'
 
 /**
  * A vite config preset for bundling packages in lib mode.
@@ -23,10 +22,10 @@ export function buildConfig({
   external = {},
 }: {
   lib: LibraryOptions & {
-    entry: string[] | string;
-  };
-  dts?: DtsPluginOptions;
-  external?: ExternalPluginOptions;
+    entry: string[] | string
+  }
+  dts?: DtsPluginOptions
+  external?: ExternalPluginOptions
 }) {
   return defineConfig({
     plugins: [
@@ -60,10 +59,10 @@ export function buildConfig({
         treeshake: true,
         onwarn(warning, defaultHandler) {
           if (warning.code === 'SOURCEMAP_ERROR') {
-            return;
+            return
           }
 
-          defaultHandler(warning);
+          defaultHandler(warning)
         },
       },
       lib: {
@@ -72,5 +71,5 @@ export function buildConfig({
         entry: globbySync(lib.entry),
       },
     },
-  });
+  })
 }
diff --git a/packages/config/vite/src/index.ts b/packages/config/vite/src/index.ts
index 8453be74..02287e3c 100644
--- a/packages/config/vite/src/index.ts
+++ b/packages/config/vite/src/index.ts
@@ -1,3 +1,3 @@
-export * from './mergeConfig.js';
-export * from './build.js';
-export * from './react.js';
+export * from './mergeConfig.js'
+export * from './build.js'
+export * from './react.js'
diff --git a/packages/config/vite/src/mergeConfig.ts b/packages/config/vite/src/mergeConfig.ts
index c30546d6..0f771718 100644
--- a/packages/config/vite/src/mergeConfig.ts
+++ b/packages/config/vite/src/mergeConfig.ts
@@ -1,7 +1,8 @@
-import type { UserConfig } from 'vite';
-import { mergeConfig as viteMergeConfig } from 'vite';
+import type { UserConfig } from 'vite'
+
+import { mergeConfig as viteMergeConfig } from 'vite'
 
 export const mergeConfig = (
   baseConfig: UserConfig,
   overrideConfig: UserConfig,
-) => viteMergeConfig(baseConfig, overrideConfig);
+) => viteMergeConfig(baseConfig, overrideConfig)
diff --git a/packages/config/vite/src/react.ts b/packages/config/vite/src/react.ts
index afcce7de..daf406d1 100644
--- a/packages/config/vite/src/react.ts
+++ b/packages/config/vite/src/react.ts
@@ -1,7 +1,7 @@
-import react from '@vitejs/plugin-react';
-import { defineConfig } from 'vite';
-import tsconfigPaths from 'vite-tsconfig-paths';
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+import tsconfigPaths from 'vite-tsconfig-paths'
 
 export const reactConfig = defineConfig({
   plugins: [react(), tsconfigPaths()],
-});
+})
diff --git a/packages/core/eslint.config.js b/packages/core/eslint.config.js
index 9cf80c4c..f659819d 100644
--- a/packages/core/eslint.config.js
+++ b/packages/core/eslint.config.js
@@ -1,4 +1,4 @@
-import { configs, defineConfig } from '@orbitkit/eslint';
+import { configs, defineConfig } from '@orbitkit/eslint'
 
 export default defineConfig(
   ...configs.base,
@@ -11,4 +11,4 @@ export default defineConfig(
       },
     },
   },
-);
+)
diff --git a/packages/db/drizzle.config.ts b/packages/db/drizzle.config.ts
index ab0aa166..0fb9efff 100644
--- a/packages/db/drizzle.config.ts
+++ b/packages/db/drizzle.config.ts
@@ -1,6 +1,6 @@
-import type { Config } from 'drizzle-kit';
+import type { Config } from 'drizzle-kit'
 
-import { env } from '@orbitkit/env/web/db';
+import { env } from '@orbitkit/env/web/db'
 
 export default {
   dialect: 'postgresql',
@@ -9,4 +9,4 @@ export default {
   dbCredentials: {
     url: env.DATABASE_URL,
   },
-} satisfies Config;
+} satisfies Config
diff --git a/packages/db/eslint.config.js b/packages/db/eslint.config.js
index 9cf80c4c..f659819d 100644
--- a/packages/db/eslint.config.js
+++ b/packages/db/eslint.config.js
@@ -1,4 +1,4 @@
-import { configs, defineConfig } from '@orbitkit/eslint';
+import { configs, defineConfig } from '@orbitkit/eslint'
 
 export default defineConfig(
   ...configs.base,
@@ -11,4 +11,4 @@ export default defineConfig(
       },
     },
   },
-);
+)
diff --git a/packages/db/src/index.ts b/packages/db/src/index.ts
index aa5db82a..4baa79d1 100644
--- a/packages/db/src/index.ts
+++ b/packages/db/src/index.ts
@@ -1,15 +1,15 @@
-import type { NeonQueryFunction } from '@neondatabase/serverless';
+import type { NeonQueryFunction } from '@neondatabase/serverless'
 
-import { neon } from '@neondatabase/serverless';
-import { drizzle } from 'drizzle-orm/neon-http';
+import { neon } from '@neondatabase/serverless'
+import { drizzle } from 'drizzle-orm/neon-http'
 
-import { env } from '@orbitkit/env/web/db';
+import { env } from '@orbitkit/env/web/db'
 
-import * as schema from './schema';
+import * as schema from './schema'
 
-const sql: NeonQueryFunction<boolean, boolean> = neon(env.DATABASE_URL);
+const sql: NeonQueryFunction<boolean, boolean> = neon(env.DATABASE_URL)
 
 export const db = drizzle(sql, {
   schema,
   logger: env.NODE_ENV === 'development',
-});
+})
diff --git a/packages/db/src/schema/index.ts b/packages/db/src/schema/index.ts
index 10b1e40f..70f30670 100644
--- a/packages/db/src/schema/index.ts
+++ b/packages/db/src/schema/index.ts
@@ -1,3 +1,3 @@
-export * from './user';
-export * from './session';
-export * from './oauth';
+export * from './user'
+export * from './session'
+export * from './oauth'
diff --git a/packages/db/src/schema/oauth.ts b/packages/db/src/schema/oauth.ts
index 7ca508cf..a9c44296 100644
--- a/packages/db/src/schema/oauth.ts
+++ b/packages/db/src/schema/oauth.ts
@@ -1,6 +1,6 @@
-import { pgTable, primaryKey, text } from 'drizzle-orm/pg-core';
+import { pgTable, primaryKey, text } from 'drizzle-orm/pg-core'
 
-import { userTable } from '.';
+import { userTable } from '.'
 
 export const oauthAccountTable = pgTable(
   'oauth_account',
@@ -14,4 +14,4 @@ export const oauthAccountTable = pgTable(
   (table) => ({
     pk: primaryKey({ columns: [table.providerId, table.providerUserId] }),
   }),
-);
+)
diff --git a/packages/db/src/schema/session.ts b/packages/db/src/schema/session.ts
index ef9f8a42..8e6fe288 100644
--- a/packages/db/src/schema/session.ts
+++ b/packages/db/src/schema/session.ts
@@ -1,6 +1,6 @@
-import { pgTable, text, timestamp } from 'drizzle-orm/pg-core';
+import { pgTable, text, timestamp } from 'drizzle-orm/pg-core'
 
-import { userTable } from './user';
+import { userTable } from './user'
 
 export const sessionTable = pgTable('session', {
   id: text('id').primaryKey(),
@@ -11,4 +11,4 @@ export const sessionTable = pgTable('session', {
     withTimezone: true,
     mode: 'date',
   }).notNull(),
-});
+})
diff --git a/packages/db/src/schema/user.ts b/packages/db/src/schema/user.ts
index 4583d3ae..c3e20c57 100644
--- a/packages/db/src/schema/user.ts
+++ b/packages/db/src/schema/user.ts
@@ -1,8 +1,8 @@
-import { pgTable, text } from 'drizzle-orm/pg-core';
+import { pgTable, text } from 'drizzle-orm/pg-core'
 
 export const userTable = pgTable('user', {
   id: text('id').primaryKey(),
   name: text('name'),
   email: text('email').notNull(),
   avatarUrl: text('avatar_url'),
-});
+})
diff --git a/packages/env/env.d.ts b/packages/env/env.d.ts
index d5658264..cd46bd44 100644
--- a/packages/env/env.d.ts
+++ b/packages/env/env.d.ts
@@ -1,5 +1,5 @@
 interface ImportMeta {
   env: {
-    SKIP_ENV_VALIDATION: string;
-  };
+    SKIP_ENV_VALIDATION: string
+  }
 }
diff --git a/packages/env/eslint.config.js b/packages/env/eslint.config.js
index ab39d172..01fe7a37 100644
--- a/packages/env/eslint.config.js
+++ b/packages/env/eslint.config.js
@@ -1,4 +1,4 @@
-import { configs, defineConfig } from '@orbitkit/eslint';
+import { configs, defineConfig } from '@orbitkit/eslint'
 
 export default defineConfig(...configs.base, {
   languageOptions: {
@@ -11,4 +11,4 @@ export default defineConfig(...configs.base, {
     // We disable this rule in this package because turbo can't find the turbo.json files of the apps to know that we are actually passing through env vars there.
     'turbo/no-undeclared-env-vars': 'off',
   },
-});
+})
diff --git a/packages/env/src/marketing/index.ts b/packages/env/src/marketing/index.ts
index d69484cf..85d34c29 100644
--- a/packages/env/src/marketing/index.ts
+++ b/packages/env/src/marketing/index.ts
@@ -1,6 +1,7 @@
-import { createEnv } from '@t3-oss/env-core';
-import { z } from 'zod';
-import { sharedEnv } from '../shared';
+import { createEnv } from '@t3-oss/env-core'
+import { z } from 'zod'
+
+import { sharedEnv } from '../shared'
 
 export const env = createEnv({
   extends: [sharedEnv],
@@ -13,4 +14,4 @@ export const env = createEnv({
   runtimeEnv: import.meta.env,
   skipValidation: !!import.meta.env.SKIP_ENV_VALIDATION,
   emptyStringAsUndefined: true,
-});
+})
diff --git a/packages/env/src/shared.ts b/packages/env/src/shared.ts
index a02f3f31..62804eb6 100644
--- a/packages/env/src/shared.ts
+++ b/packages/env/src/shared.ts
@@ -1,6 +1,6 @@
-import { createEnv } from '@t3-oss/env-nextjs';
-import { vercel } from '@t3-oss/env-nextjs/presets';
-import { z } from 'zod';
+import { createEnv } from '@t3-oss/env-nextjs'
+import { vercel } from '@t3-oss/env-nextjs/presets'
+import { z } from 'zod'
 
 export const sharedEnv = createEnv({
   extends: [vercel()],
@@ -10,4 +10,4 @@ export const sharedEnv = createEnv({
   runtimeEnv: {
     NODE_ENV: process.env.NODE_ENV,
   },
-});
+})
diff --git a/packages/env/src/web/client.ts b/packages/env/src/web/client.ts
index 9648956a..02b5e89d 100644
--- a/packages/env/src/web/client.ts
+++ b/packages/env/src/web/client.ts
@@ -1,5 +1,5 @@
-import { createEnv } from '@t3-oss/env-nextjs';
-import { z } from 'zod';
+import { createEnv } from '@t3-oss/env-nextjs'
+import { z } from 'zod'
 
 export const env = createEnv({
   client: {
@@ -12,4 +12,4 @@ export const env = createEnv({
   },
   emptyStringAsUndefined: true,
   skipValidation: !!process.env['SKIP_ENV_VALIDATION'],
-});
+})
diff --git a/packages/env/src/web/db.ts b/packages/env/src/web/db.ts
index b0667f36..fabbf656 100644
--- a/packages/env/src/web/db.ts
+++ b/packages/env/src/web/db.ts
@@ -1,6 +1,7 @@
-import { createEnv } from '@t3-oss/env-nextjs';
-import { z } from 'zod';
-import { sharedEnv } from '../shared';
+import { createEnv } from '@t3-oss/env-nextjs'
+import { z } from 'zod'
+
+import { sharedEnv } from '../shared'
 
 export const env = createEnv({
   extends: [sharedEnv],
@@ -10,4 +11,4 @@ export const env = createEnv({
   experimental__runtimeEnv: {},
   emptyStringAsUndefined: true,
   skipValidation: !!process.env['SKIP_ENV_VALIDATION'],
-});
+})
diff --git a/packages/env/src/web/server.ts b/packages/env/src/web/server.ts
index 238e101a..af210bba 100644
--- a/packages/env/src/web/server.ts
+++ b/packages/env/src/web/server.ts
@@ -1,7 +1,8 @@
-import { createEnv } from '@t3-oss/env-nextjs';
-import { z } from 'zod';
-import { sharedEnv } from '../shared';
-import { env as dbEnv } from './db';
+import { createEnv } from '@t3-oss/env-nextjs'
+import { z } from 'zod'
+
+import { sharedEnv } from '../shared'
+import { env as dbEnv } from './db'
 
 export const env = createEnv({
   extends: [sharedEnv, dbEnv],
@@ -28,4 +29,4 @@ export const env = createEnv({
   },
   emptyStringAsUndefined: true,
   skipValidation: !!process.env['SKIP_ENV_VALIDATION'],
-});
+})
diff --git a/packages/ui/.storybook/main.ts b/packages/ui/.storybook/main.ts
index f51f4c4f..d17d02ed 100644
--- a/packages/ui/.storybook/main.ts
+++ b/packages/ui/.storybook/main.ts
@@ -1,3 +1,3 @@
-import reactConfig from '@orbitkit/storybook/configs/react-vite';
+import reactConfig from '@orbitkit/storybook/configs/react-vite'
 
-export default reactConfig;
+export default reactConfig
diff --git a/packages/ui/.storybook/manager.tsx b/packages/ui/.storybook/manager.tsx
index c8446fa3..17e6468c 100644
--- a/packages/ui/.storybook/manager.tsx
+++ b/packages/ui/.storybook/manager.tsx
@@ -1,5 +1,5 @@
-import '@orbitkit/assets/fonts/stylesheet.css';
+import '@orbitkit/assets/fonts/stylesheet.css'
 
-import { registerAddons } from '@orbitkit/storybook/manager';
+import { registerAddons } from '@orbitkit/storybook/manager'
 
-registerAddons();
+registerAddons()
diff --git a/packages/ui/.storybook/preview.ts b/packages/ui/.storybook/preview.ts
index 454e9ea0..fc003c92 100644
--- a/packages/ui/.storybook/preview.ts
+++ b/packages/ui/.storybook/preview.ts
@@ -1,6 +1,6 @@
-import '@orbitkit/assets/fonts/stylesheet.css';
-import './globals.css';
+import '@orbitkit/assets/fonts/stylesheet.css'
+import './globals.css'
 
-import preview from '@orbitkit/storybook/preview';
+import preview from '@orbitkit/storybook/preview'
 
-export default preview;
+export default preview
diff --git a/packages/ui/eslint.config.js b/packages/ui/eslint.config.js
index 97d7aa81..7bf31834 100644
--- a/packages/ui/eslint.config.js
+++ b/packages/ui/eslint.config.js
@@ -1,4 +1,4 @@
-import { defineConfig, configs } from '@orbitkit/eslint';
+import { configs, defineConfig } from '@orbitkit/eslint'
 
 export default defineConfig(
   ...configs.base,
@@ -12,4 +12,4 @@ export default defineConfig(
       },
     },
   },
-);
+)
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 1f49825e..aab6b772 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -84,8 +84,8 @@
     "@orbitkit/tailwind": "workspace:^",
     "@orbitkit/tsconfig": "workspace:^",
     "@orbitkit/vite": "workspace:^",
-    "@storybook/react": "^8.1.9",
-    "@storybook/test": "^8.1.9",
+    "@storybook/react": "^8.1.10",
+    "@storybook/test": "^8.1.10",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.19",
@@ -93,7 +93,7 @@
     "playwright": "^1.44.1",
     "postcss": "^8.4.38",
     "rollup-plugin-preserve-directives": "^0.4.0",
-    "storybook": "^8.1.9",
+    "storybook": "^8.1.10",
     "tailwindcss": "^3.4.4",
     "vite": "^5.3.1",
     "vite-plugin-dts": "^3.9.1",
diff --git a/packages/ui/postcss.config.cjs b/packages/ui/postcss.config.cjs
index 12a703d9..33ad091d 100644
--- a/packages/ui/postcss.config.cjs
+++ b/packages/ui/postcss.config.cjs
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-};
+}
diff --git a/packages/ui/src/primitives/accordion/accordion.mdx b/packages/ui/src/primitives/accordion/accordion.mdx
index 27431403..408451e5 100644
--- a/packages/ui/src/primitives/accordion/accordion.mdx
+++ b/packages/ui/src/primitives/accordion/accordion.mdx
@@ -1,11 +1,11 @@
-import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks'
 
-import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
-import * as AccordionStories from './accordion.stories';
+import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
+import * as AccordionStories from './accordion.stories'
 
 <Meta of={AccordionStories} />
 
-<RadixPrimitiveDocsButton name="accordion" />
+<RadixPrimitiveDocsButton name='accordion' />
 
 # Accordion
 
@@ -24,7 +24,7 @@ export const importCode = `import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "@orbitkit/ui/accordion";`;
+} from "@orbitkit/ui/accordion";`
 
 export const usageCode = `<Accordion type="single" collapsible>
   <AccordionItem value="item-1">
@@ -33,7 +33,7 @@ export const usageCode = `<Accordion type="single" collapsible>
       Yes. It adheres to the WAI-ARIA design pattern.
     </AccordionContent>
   </AccordionItem>
-</Accordion>`;
+</Accordion>`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
diff --git a/packages/ui/src/primitives/accordion/accordion.stories.tsx b/packages/ui/src/primitives/accordion/accordion.stories.tsx
index 467d4b84..25dcb92c 100644
--- a/packages/ui/src/primitives/accordion/accordion.stories.tsx
+++ b/packages/ui/src/primitives/accordion/accordion.stories.tsx
@@ -1,11 +1,11 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react'
 
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from './';
+} from './'
 
 const meta: Meta<typeof Accordion> = {
   component: Accordion,
@@ -31,11 +31,11 @@ const meta: Meta<typeof Accordion> = {
       ))}
     </Accordion>
   ),
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Accordion>;
+type Story = StoryObj<typeof Accordion>
 
 const items = [
   {
@@ -55,12 +55,12 @@ const items = [
       "Yes. It's animated by default, but you can disable it if you prefer.",
     value: 'item-3',
   },
-];
+]
 
-export const Single: Story = {};
+export const Single: Story = {}
 
 export const Multiple: Story = {
   args: {
     type: 'multiple',
   },
-};
+}
diff --git a/packages/ui/src/primitives/accordion/index.tsx b/packages/ui/src/primitives/accordion/index.tsx
index a56f04b4..6acf1c22 100644
--- a/packages/ui/src/primitives/accordion/index.tsx
+++ b/packages/ui/src/primitives/accordion/index.tsx
@@ -1,13 +1,13 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { ChevronDownIcon } from '@radix-ui/react-icons';
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDownIcon } from '@radix-ui/react-icons'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
-const Accordion = AccordionPrimitive.Root;
+const Accordion = AccordionPrimitive.Root
 
 const AccordionItem = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Item>,
@@ -18,14 +18,14 @@ const AccordionItem = React.forwardRef<
     className={cn('border-b', className)}
     {...props}
   />
-));
-AccordionItem.displayName = 'AccordionItem';
+))
+AccordionItem.displayName = 'AccordionItem'
 
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
+  <AccordionPrimitive.Header className='flex'>
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
@@ -35,11 +35,11 @@ const AccordionTrigger = React.forwardRef<
       {...props}
     >
       {children}
-      <ChevronDownIcon className="size-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+      <ChevronDownIcon className='size-4 shrink-0 text-muted-foreground transition-transform duration-200' />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
-));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
 
 const AccordionContent = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Content>,
@@ -47,12 +47,12 @@ const AccordionContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <AccordionPrimitive.Content
     ref={ref}
-    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    className='overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down'
     {...props}
   >
     <div className={cn('pb-4 pt-0', className)}>{children}</div>
   </AccordionPrimitive.Content>
-));
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/packages/ui/src/primitives/alert-dialog/alert-dialog.mdx b/packages/ui/src/primitives/alert-dialog/alert-dialog.mdx
index 7d55681a..214b5578 100644
--- a/packages/ui/src/primitives/alert-dialog/alert-dialog.mdx
+++ b/packages/ui/src/primitives/alert-dialog/alert-dialog.mdx
@@ -1,11 +1,11 @@
-import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks'
 
-import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
-import * as AlertDialogStories from './alert-dialog.stories';
+import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
+import * as AlertDialogStories from './alert-dialog.stories'
 
 <Meta of={AlertDialogStories} />
 
-<RadixPrimitiveDocsButton name="alert-dialog" />
+<RadixPrimitiveDocsButton name='alert-dialog' />
 
 # Alert Dialog
 
@@ -27,7 +27,7 @@ export const importCode = `import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from "@orbitkit/ui/alert-dialog";`;
+} from "@orbitkit/ui/alert-dialog";`
 
 export const usageCode = `<AlertDialog>
   <AlertDialogTrigger>Open</AlertDialogTrigger>
@@ -44,7 +44,7 @@ export const usageCode = `<AlertDialog>
       <AlertDialogAction>Continue</AlertDialogAction>
     </AlertDialogFooter>
   </AlertDialogContent>
-</AlertDialog>`;
+</AlertDialog>`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
diff --git a/packages/ui/src/primitives/alert-dialog/alert-dialog.stories.tsx b/packages/ui/src/primitives/alert-dialog/alert-dialog.stories.tsx
index aa7f1d65..d7393f06 100644
--- a/packages/ui/src/primitives/alert-dialog/alert-dialog.stories.tsx
+++ b/packages/ui/src/primitives/alert-dialog/alert-dialog.stories.tsx
@@ -1,6 +1,6 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { Button } from '../button';
+import { Button } from '../button'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -11,14 +11,14 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from './';
+} from './'
 
 const meta: Meta<typeof AlertDialog> = {
   component: AlertDialog,
   render: (args) => (
     <AlertDialog {...args}>
       <AlertDialogTrigger asChild>
-        <Button variant="outline">Show Dialog</Button>
+        <Button variant='outline'>Show Dialog</Button>
       </AlertDialogTrigger>
       <AlertDialogContent>
         <AlertDialogHeader>
@@ -35,10 +35,10 @@ const meta: Meta<typeof AlertDialog> = {
       </AlertDialogContent>
     </AlertDialog>
   ),
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof AlertDialog>;
+type Story = StoryObj<typeof AlertDialog>
 
-export const Default: Story = {};
+export const Default: Story = {}
diff --git a/packages/ui/src/primitives/alert-dialog/index.tsx b/packages/ui/src/primitives/alert-dialog/index.tsx
index a76f9293..8637ec58 100644
--- a/packages/ui/src/primitives/alert-dialog/index.tsx
+++ b/packages/ui/src/primitives/alert-dialog/index.tsx
@@ -1,17 +1,17 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
-import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
 
-import { buttonVariants } from '@/primitives/button';
-import { cn } from '@/utils/cn';
+import { buttonVariants } from '@/primitives/button'
+import { cn } from '@/utils/cn'
 
-const AlertDialog = AlertDialogPrimitive.Root;
+const AlertDialog = AlertDialogPrimitive.Root
 
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
 
-const AlertDialogPortal = AlertDialogPrimitive.Portal;
+const AlertDialogPortal = AlertDialogPrimitive.Portal
 
 const AlertDialogOverlay = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
@@ -25,8 +25,8 @@ const AlertDialogOverlay = React.forwardRef<
     {...props}
     ref={ref}
   />
-));
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
 
 const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
@@ -43,8 +43,8 @@ const AlertDialogContent = React.forwardRef<
       {...props}
     />
   </AlertDialogPortal>
-));
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
 
 const AlertDialogHeader = ({
   className,
@@ -57,8 +57,8 @@ const AlertDialogHeader = ({
     )}
     {...props}
   />
-);
-AlertDialogHeader.displayName = 'AlertDialogHeader';
+)
+AlertDialogHeader.displayName = 'AlertDialogHeader'
 
 const AlertDialogFooter = ({
   className,
@@ -71,8 +71,8 @@ const AlertDialogFooter = ({
     )}
     {...props}
   />
-);
-AlertDialogFooter.displayName = 'AlertDialogFooter';
+)
+AlertDialogFooter.displayName = 'AlertDialogFooter'
 
 const AlertDialogTitle = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Title>,
@@ -83,8 +83,8 @@ const AlertDialogTitle = React.forwardRef<
     className={cn('text-lg font-semibold', className)}
     {...props}
   />
-));
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
 
 const AlertDialogDescription = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Description>,
@@ -95,9 +95,9 @@ const AlertDialogDescription = React.forwardRef<
     className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
-));
+))
 AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName;
+  AlertDialogPrimitive.Description.displayName
 
 const AlertDialogAction = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Action>,
@@ -108,8 +108,8 @@ const AlertDialogAction = React.forwardRef<
     className={cn(buttonVariants(), className)}
     {...props}
   />
-));
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
 
 const AlertDialogCancel = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
@@ -124,8 +124,8 @@ const AlertDialogCancel = React.forwardRef<
     )}
     {...props}
   />
-));
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
 
 export {
   AlertDialog,
@@ -139,4 +139,4 @@ export {
   AlertDialogDescription,
   AlertDialogAction,
   AlertDialogCancel,
-};
+}
diff --git a/packages/ui/src/primitives/alert/alert.mdx b/packages/ui/src/primitives/alert/alert.mdx
index ea43d030..19760c31 100644
--- a/packages/ui/src/primitives/alert/alert.mdx
+++ b/packages/ui/src/primitives/alert/alert.mdx
@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks'
 
-import * as AlertStories from './alert.stories';
+import * as AlertStories from './alert.stories'
 
 <Meta of={AlertStories} />
 
@@ -16,7 +16,7 @@ Displays a callout for user attention.
 
 ## Usage
 
-export const importCode = `import { Alert, AlertDescription, AlertTitle } from "@orbitkit/ui/alert";`;
+export const importCode = `import { Alert, AlertDescription, AlertTitle } from "@orbitkit/ui/alert";`
 
 export const exampleCode = `<Alert>
   <Terminal className="h-4 w-4" />
@@ -25,10 +25,10 @@ export const exampleCode = `<Alert>
     You can add components and dependencies to your app using the cli.
   </AlertDescription>
 </Alert>
-`;
+`
 
-<Source code={importCode} language="ts" dark />
-<Source code={exampleCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={exampleCode} language='tsx' dark />
 
 ## Examples
 
diff --git a/packages/ui/src/primitives/alert/alert.stories.tsx b/packages/ui/src/primitives/alert/alert.stories.tsx
index 44c84316..0e1dc195 100644
--- a/packages/ui/src/primitives/alert/alert.stories.tsx
+++ b/packages/ui/src/primitives/alert/alert.stories.tsx
@@ -1,7 +1,7 @@
-import { ExclamationTriangleIcon, RocketIcon } from '@radix-ui/react-icons';
-import { type Meta, type StoryObj } from '@storybook/react';
+import { ExclamationTriangleIcon, RocketIcon } from '@radix-ui/react-icons'
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { Alert, AlertDescription, AlertTitle } from './';
+import { Alert, AlertDescription, AlertTitle } from './'
 
 const meta: Meta<typeof Alert> = {
   component: Alert,
@@ -16,23 +16,23 @@ const meta: Meta<typeof Alert> = {
       },
     },
   },
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Alert>;
+type Story = StoryObj<typeof Alert>
 
 export const Default: Story = {
   render: (args) => (
     <Alert {...args}>
-      <RocketIcon className="size-4" />
+      <RocketIcon className='size-4' />
       <AlertTitle>Heads up!</AlertTitle>
       <AlertDescription>
         You can add components to your app using the cli.
       </AlertDescription>
     </Alert>
   ),
-};
+}
 
 export const Destructive: Story = {
   args: {
@@ -40,11 +40,11 @@ export const Destructive: Story = {
   },
   render: (args) => (
     <Alert {...args}>
-      <ExclamationTriangleIcon className="size-4" />
+      <ExclamationTriangleIcon className='size-4' />
       <AlertTitle>Error</AlertTitle>
       <AlertDescription>
         Your session has expired. Please log in again.
       </AlertDescription>
     </Alert>
   ),
-};
+}
diff --git a/packages/ui/src/primitives/alert/index.tsx b/packages/ui/src/primitives/alert/index.tsx
index 448328f2..354e9721 100644
--- a/packages/ui/src/primitives/alert/index.tsx
+++ b/packages/ui/src/primitives/alert/index.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react';
+import * as React from 'react'
 
-import type { VariantProps } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority'
 
-import { cva } from 'class-variance-authority';
+import { cva } from 'class-variance-authority'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
 const alertVariants = cva(
   'relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
@@ -20,7 +20,7 @@ const alertVariants = cva(
       variant: 'default',
     },
   },
-);
+)
 
 const Alert = React.forwardRef<
   HTMLDivElement,
@@ -28,12 +28,12 @@ const Alert = React.forwardRef<
 >(({ className, variant, ...props }, ref) => (
   <div
     ref={ref}
-    role="alert"
+    role='alert'
     className={cn(alertVariants({ variant }), className)}
     {...props}
   />
-));
-Alert.displayName = 'Alert';
+))
+Alert.displayName = 'Alert'
 
 const AlertTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -46,8 +46,8 @@ const AlertTitle = React.forwardRef<
   >
     {children}
   </h5>
-));
-AlertTitle.displayName = 'AlertTitle';
+))
+AlertTitle.displayName = 'AlertTitle'
 
 const AlertDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -58,7 +58,7 @@ const AlertDescription = React.forwardRef<
     className={cn('text-sm [&_p]:leading-relaxed', className)}
     {...props}
   />
-));
-AlertDescription.displayName = 'AlertDescription';
+))
+AlertDescription.displayName = 'AlertDescription'
 
-export { Alert, AlertTitle, AlertDescription };
+export { Alert, AlertTitle, AlertDescription }
diff --git a/packages/ui/src/primitives/aspect-ratio/aspect-ratio.mdx b/packages/ui/src/primitives/aspect-ratio/aspect-ratio.mdx
index ab46f867..f1b0326b 100644
--- a/packages/ui/src/primitives/aspect-ratio/aspect-ratio.mdx
+++ b/packages/ui/src/primitives/aspect-ratio/aspect-ratio.mdx
@@ -1,11 +1,11 @@
-import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks'
 
-import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
-import * as AspectRatioStories from './aspect-ratio.stories';
+import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
+import * as AspectRatioStories from './aspect-ratio.stories'
 
 <Meta of={AspectRatioStories} />
 
-<RadixPrimitiveDocsButton name="aspect-ratio" />
+<RadixPrimitiveDocsButton name='aspect-ratio' />
 
 # Aspect ratio
 
@@ -27,7 +27,7 @@ export const exampleCode = `<div className="w-[450px]">
   <AspectRatio ratio={16 / 9}>
     <Image src="..." alt="Image" className="rounded-md object-cover" />
   </AspectRatio>
-</div>`;
+</div>`
 
-<Source code={importCode} language="ts" dark />
-<Source code={exampleCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={exampleCode} language='tsx' dark />
diff --git a/packages/ui/src/primitives/aspect-ratio/aspect-ratio.stories.tsx b/packages/ui/src/primitives/aspect-ratio/aspect-ratio.stories.tsx
index d87dccfb..26cbaa2d 100644
--- a/packages/ui/src/primitives/aspect-ratio/aspect-ratio.stories.tsx
+++ b/packages/ui/src/primitives/aspect-ratio/aspect-ratio.stories.tsx
@@ -1,28 +1,28 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { AspectRatio } from './';
+import { AspectRatio } from './'
 
 const meta: Meta<typeof AspectRatio> = {
   component: AspectRatio,
   args: {
     ratio: 16 / 9,
   },
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof AspectRatio>;
+type Story = StoryObj<typeof AspectRatio>
 
 export const Default: Story = {
   render: (args) => (
-    <div className="w-[400px]">
-      <AspectRatio {...args} className="bg-muted">
+    <div className='w-[400px]'>
+      <AspectRatio {...args} className='bg-muted'>
         <img
-          src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80"
-          alt="By Drew Beamer"
-          className="rounded-md object-cover"
+          src='https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80'
+          alt='By Drew Beamer'
+          className='rounded-md object-cover'
         />
       </AspectRatio>
     </div>
   ),
-};
+}
diff --git a/packages/ui/src/primitives/aspect-ratio/index.tsx b/packages/ui/src/primitives/aspect-ratio/index.tsx
index aaabffbc..794c6f4c 100644
--- a/packages/ui/src/primitives/aspect-ratio/index.tsx
+++ b/packages/ui/src/primitives/aspect-ratio/index.tsx
@@ -1,7 +1,7 @@
-'use client';
+'use client'
 
-import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'
 
-const AspectRatio = AspectRatioPrimitive.Root;
+const AspectRatio = AspectRatioPrimitive.Root
 
-export { AspectRatio };
+export { AspectRatio }
diff --git a/packages/ui/src/primitives/avatar/avatar.mdx b/packages/ui/src/primitives/avatar/avatar.mdx
index 0d732622..50ba506b 100644
--- a/packages/ui/src/primitives/avatar/avatar.mdx
+++ b/packages/ui/src/primitives/avatar/avatar.mdx
@@ -1,11 +1,11 @@
-import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks'
 
-import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
-import * as AvatarStories from './avatar.stories';
+import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
+import * as AvatarStories from './avatar.stories'
 
 <Meta of={AvatarStories} />
 
-<RadixPrimitiveDocsButton name="avatar" />
+<RadixPrimitiveDocsButton name='avatar' />
 
 # Avatar
 
@@ -25,16 +25,16 @@ An image element with a fallback for representing the user.
 
 ## Usage
 
-export const importCode = `import { Avatar, AvatarFallback, AvatarImage } from '@orbitkit/ui/avatar';`;
+export const importCode = `import { Avatar, AvatarFallback, AvatarImage } from '@orbitkit/ui/avatar';`
 
-<Source code={importCode} language="ts" dark />
+<Source code={importCode} language='ts' dark />
 
 export const usageCode = `<Avatar>
   <AvatarImage src="https://github.com/shadcn.png" />
   <AvatarFallback>CN</AvatarFallback>
-</Avatar>`;
+</Avatar>`
 
-<Source code={usageCode} language="tsx" dark />
+<Source code={usageCode} language='tsx' dark />
 
 <Canvas of={AvatarStories.Default} />
 <Canvas of={AvatarStories.Fallback} />
diff --git a/packages/ui/src/primitives/avatar/avatar.stories.tsx b/packages/ui/src/primitives/avatar/avatar.stories.tsx
index 6beb5cc4..98fedef8 100644
--- a/packages/ui/src/primitives/avatar/avatar.stories.tsx
+++ b/packages/ui/src/primitives/avatar/avatar.stories.tsx
@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react'
 
-import { Avatar, AvatarFallback, AvatarImage } from './';
+import { Avatar, AvatarFallback, AvatarImage } from './'
 
 const meta: Meta<typeof AvatarImage> = {
   component: AvatarImage,
@@ -14,15 +14,15 @@ const meta: Meta<typeof AvatarImage> = {
       <AvatarFallback>CN</AvatarFallback>
     </Avatar>
   ),
-};
+}
 
-export default meta;
-type Story = StoryObj<typeof AvatarImage>;
+export default meta
+type Story = StoryObj<typeof AvatarImage>
 
-export const Default: Story = {};
+export const Default: Story = {}
 
 export const Fallback: Story = {
   args: {
     src: '',
   },
-};
+}
diff --git a/packages/ui/src/primitives/avatar/index.tsx b/packages/ui/src/primitives/avatar/index.tsx
index a0d057b9..22a1d8be 100644
--- a/packages/ui/src/primitives/avatar/index.tsx
+++ b/packages/ui/src/primitives/avatar/index.tsx
@@ -1,10 +1,10 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
@@ -18,8 +18,8 @@ const Avatar = React.forwardRef<
     )}
     {...props}
   />
-));
-Avatar.displayName = AvatarPrimitive.Root.displayName;
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
 
 const AvatarImage = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Image>,
@@ -30,8 +30,8 @@ const AvatarImage = React.forwardRef<
     className={cn('aspect-[1_/_1] size-full', className)}
     {...props}
   />
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
 
 const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
@@ -45,7 +45,7 @@ const AvatarFallback = React.forwardRef<
     )}
     {...props}
   />
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
 
-export { Avatar, AvatarImage, AvatarFallback };
+export { Avatar, AvatarImage, AvatarFallback }
diff --git a/packages/ui/src/primitives/badge/badge.mdx b/packages/ui/src/primitives/badge/badge.mdx
index 2f3cab23..b63eb89d 100644
--- a/packages/ui/src/primitives/badge/badge.mdx
+++ b/packages/ui/src/primitives/badge/badge.mdx
@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks'
 
-import * as BadgeStories from './badge.stories';
+import * as BadgeStories from './badge.stories'
 
 <Meta of={BadgeStories} />
 
@@ -16,23 +16,23 @@ Displays a badge or a component that looks like a badge.
 
 ## Usage
 
-export const importCode = `import { Badge } from "@orbitkit/ui/badge";`;
+export const importCode = `import { Badge } from "@orbitkit/ui/badge";`
 
-export const usageCode = `<Badge variant="outline">Badge</Badge>`;
+export const usageCode = `<Badge variant="outline">Badge</Badge>`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
 
 ## Helper
 
 You can use the `badgeVariants` helper to create a link that looks like a badge.
 
-export const helperImport = `import { badgeVariants } from "@orbitkit/ui/badge";`;
+export const helperImport = `import { badgeVariants } from "@orbitkit/ui/badge";`
 
-export const helperUsage = `<Link className={badgeVariants({ variant: "outline" })}>Badge</Link>`;
+export const helperUsage = `<Link className={badgeVariants({ variant: "outline" })}>Badge</Link>`
 
-<Source code={helperImport} language="ts" dark />
-<Source code={helperUsage} language="tsx" dark />
+<Source code={helperImport} language='ts' dark />
+<Source code={helperUsage} language='tsx' dark />
 
 ## Examples
 
diff --git a/packages/ui/src/primitives/badge/badge.stories.tsx b/packages/ui/src/primitives/badge/badge.stories.tsx
index b5707844..03d0351c 100644
--- a/packages/ui/src/primitives/badge/badge.stories.tsx
+++ b/packages/ui/src/primitives/badge/badge.stories.tsx
@@ -1,6 +1,6 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { Badge } from './';
+import { Badge } from './'
 
 const meta: Meta<typeof Badge> = {
   component: Badge,
@@ -14,25 +14,25 @@ const meta: Meta<typeof Badge> = {
       control: { type: 'select' },
     },
   },
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Badge>;
+type Story = StoryObj<typeof Badge>
 
-export const Default: Story = {};
+export const Default: Story = {}
 export const Secondary: Story = {
   args: {
     variant: 'secondary',
   },
-};
+}
 export const Destructive: Story = {
   args: {
     variant: 'destructive',
   },
-};
+}
 export const Outline: Story = {
   args: {
     variant: 'outline',
   },
-};
+}
diff --git a/packages/ui/src/primitives/badge/index.tsx b/packages/ui/src/primitives/badge/index.tsx
index 34145bb3..01aac3de 100644
--- a/packages/ui/src/primitives/badge/index.tsx
+++ b/packages/ui/src/primitives/badge/index.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react';
+import * as React from 'react'
 
-import type { VariantProps } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority'
 
-import { cva } from 'class-variance-authority';
+import { cva } from 'class-variance-authority'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
 const badgeVariants = cva(
   'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
@@ -24,7 +24,7 @@ const badgeVariants = cva(
       variant: 'default',
     },
   },
-);
+)
 
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -40,7 +40,7 @@ export interface BadgeProps
 function Badge({ className, variant, ...props }: BadgeProps) {
   return (
     <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
+  )
 }
 
-export { Badge, badgeVariants };
+export { Badge, badgeVariants }
diff --git a/packages/ui/src/primitives/breadcrumb/breadcrumb.mdx b/packages/ui/src/primitives/breadcrumb/breadcrumb.mdx
index ffc14d61..65e8f688 100644
--- a/packages/ui/src/primitives/breadcrumb/breadcrumb.mdx
+++ b/packages/ui/src/primitives/breadcrumb/breadcrumb.mdx
@@ -1,6 +1,6 @@
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks'
 
-import * as BreadcrumbStories from './breadcrumb.stories';
+import * as BreadcrumbStories from './breadcrumb.stories'
 
 <Meta of={BreadcrumbStories} />
 
@@ -21,7 +21,7 @@ export const importCode = `import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from "@orbitkit/ui/breadcrumb";`;
+} from "@orbitkit/ui/breadcrumb";`
 
 export const usageCode = `<Breadcrumb>
   <BreadcrumbList>
@@ -38,10 +38,10 @@ export const usageCode = `<Breadcrumb>
     </BreadcrumbItem>
   </BreadcrumbList>
 </Breadcrumb>
-`;
+`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
 
 ## Examples
 
diff --git a/packages/ui/src/primitives/breadcrumb/breadcrumb.stories.tsx b/packages/ui/src/primitives/breadcrumb/breadcrumb.stories.tsx
index 0a0d1051..215ddde8 100644
--- a/packages/ui/src/primitives/breadcrumb/breadcrumb.stories.tsx
+++ b/packages/ui/src/primitives/breadcrumb/breadcrumb.stories.tsx
@@ -1,12 +1,12 @@
-import { ChevronDownIcon, SlashIcon } from '@radix-ui/react-icons';
-import { type Meta, type StoryObj } from '@storybook/react';
+import { ChevronDownIcon, SlashIcon } from '@radix-ui/react-icons'
+import { type Meta, type StoryObj } from '@storybook/react'
 
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/primitives/dropdown-menu';
+} from '@/primitives/dropdown-menu'
 
 import {
   Breadcrumb,
@@ -16,7 +16,7 @@ import {
   BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-} from '.';
+} from '.'
 
 const items = [
   {
@@ -27,7 +27,7 @@ const items = [
     label: 'Components',
     href: '/components',
   },
-];
+]
 
 const meta: Meta<typeof Breadcrumb> = {
   component: Breadcrumb,
@@ -48,13 +48,13 @@ const meta: Meta<typeof Breadcrumb> = {
       </BreadcrumbList>
     </Breadcrumb>
   ),
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Breadcrumb>;
+type Story = StoryObj<typeof Breadcrumb>
 
-export const Default: Story = {};
+export const Default: Story = {}
 
 export const CustomSeparator: Story = {
   render: (args) => (
@@ -76,25 +76,25 @@ export const CustomSeparator: Story = {
       </BreadcrumbList>
     </Breadcrumb>
   ),
-};
+}
 
 export const Dropdown: Story = {
   render: (args) => (
     <Breadcrumb {...args}>
       <BreadcrumbList>
         <BreadcrumbItem>
-          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+          <BreadcrumbLink href='/'>Home</BreadcrumbLink>
         </BreadcrumbItem>
         <BreadcrumbSeparator>
           <SlashIcon />
         </BreadcrumbSeparator>
         <BreadcrumbItem>
           <DropdownMenu>
-            <DropdownMenuTrigger className="flex items-center gap-1">
+            <DropdownMenuTrigger className='flex items-center gap-1'>
               Components
               <ChevronDownIcon />
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="start">
+            <DropdownMenuContent align='start'>
               <DropdownMenuItem>Documentation</DropdownMenuItem>
               <DropdownMenuItem>Themes</DropdownMenuItem>
               <DropdownMenuItem>GitHub</DropdownMenuItem>
@@ -110,7 +110,7 @@ export const Dropdown: Story = {
       </BreadcrumbList>
     </Breadcrumb>
   ),
-};
+}
 
 export const Collapsed: Story = {
   render: (args) => (
@@ -134,4 +134,4 @@ export const Collapsed: Story = {
       </BreadcrumbList>
     </Breadcrumb>
   ),
-};
+}
diff --git a/packages/ui/src/primitives/breadcrumb/index.tsx b/packages/ui/src/primitives/breadcrumb/index.tsx
index 7e936fdc..01df9842 100644
--- a/packages/ui/src/primitives/breadcrumb/index.tsx
+++ b/packages/ui/src/primitives/breadcrumb/index.tsx
@@ -1,15 +1,15 @@
-import * as React from 'react';
+import * as React from 'react'
 
-import { ChevronRightIcon, DotsHorizontalIcon } from '@radix-ui/react-icons';
-import { Slot } from '@radix-ui/react-slot';
+import { ChevronRightIcon, DotsHorizontalIcon } from '@radix-ui/react-icons'
+import { Slot } from '@radix-ui/react-slot'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
 const Breadcrumb = React.forwardRef<
   HTMLElement,
   React.ComponentPropsWithoutRef<'nav'>
->(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
-Breadcrumb.displayName = 'Breadcrumb';
+>(({ ...props }, ref) => <nav ref={ref} aria-label='breadcrumb' {...props} />)
+Breadcrumb.displayName = 'Breadcrumb'
 
 const BreadcrumbList = React.forwardRef<
   HTMLOListElement,
@@ -23,8 +23,8 @@ const BreadcrumbList = React.forwardRef<
     )}
     {...props}
   />
-));
-BreadcrumbList.displayName = 'BreadcrumbList';
+))
+BreadcrumbList.displayName = 'BreadcrumbList'
 
 const BreadcrumbItem = React.forwardRef<
   HTMLLIElement,
@@ -35,16 +35,16 @@ const BreadcrumbItem = React.forwardRef<
     className={cn('inline-flex items-center gap-1.5', className)}
     {...props}
   />
-));
-BreadcrumbItem.displayName = 'BreadcrumbItem';
+))
+BreadcrumbItem.displayName = 'BreadcrumbItem'
 
 const BreadcrumbLink = React.forwardRef<
   HTMLAnchorElement,
   React.ComponentPropsWithoutRef<'a'> & {
-    asChild?: boolean;
+    asChild?: boolean
   }
 >(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? Slot : 'a';
+  const Comp = asChild ? Slot : 'a'
 
   return (
     <Comp
@@ -52,9 +52,9 @@ const BreadcrumbLink = React.forwardRef<
       className={cn('transition-colors hover:text-foreground', className)}
       {...props}
     />
-  );
-});
-BreadcrumbLink.displayName = 'BreadcrumbLink';
+  )
+})
+BreadcrumbLink.displayName = 'BreadcrumbLink'
 
 const BreadcrumbPage = React.forwardRef<
   HTMLSpanElement,
@@ -62,14 +62,14 @@ const BreadcrumbPage = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <span
     ref={ref}
-    role="link"
-    aria-disabled="true"
-    aria-current="page"
+    role='link'
+    aria-disabled='true'
+    aria-current='page'
     className={cn('font-normal text-foreground', className)}
     {...props}
   />
-));
-BreadcrumbPage.displayName = 'BreadcrumbPage';
+))
+BreadcrumbPage.displayName = 'BreadcrumbPage'
 
 const BreadcrumbSeparator = ({
   children,
@@ -77,31 +77,31 @@ const BreadcrumbSeparator = ({
   ...props
 }: React.ComponentProps<'li'>) => (
   <li
-    role="presentation"
-    aria-hidden="true"
+    role='presentation'
+    aria-hidden='true'
     className={cn('[&>svg]:size-3.5', className)}
     {...props}
   >
     {children ?? <ChevronRightIcon />}
   </li>
-);
-BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
+)
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator'
 
 const BreadcrumbEllipsis = ({
   className,
   ...props
 }: React.ComponentProps<'span'>) => (
   <span
-    role="presentation"
-    aria-hidden="true"
+    role='presentation'
+    aria-hidden='true'
     className={cn('flex size-9 items-center justify-center', className)}
     {...props}
   >
-    <DotsHorizontalIcon className="size-4" />
-    <span className="sr-only">More</span>
+    <DotsHorizontalIcon className='size-4' />
+    <span className='sr-only'>More</span>
   </span>
-);
-BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';
+)
+BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'
 
 export {
   Breadcrumb,
@@ -111,4 +111,4 @@ export {
   BreadcrumbPage,
   BreadcrumbSeparator,
   BreadcrumbEllipsis,
-};
+}
diff --git a/packages/ui/src/primitives/button/button.mdx b/packages/ui/src/primitives/button/button.mdx
index a707d5b3..70634421 100644
--- a/packages/ui/src/primitives/button/button.mdx
+++ b/packages/ui/src/primitives/button/button.mdx
@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks'
 
-import * as ButtonStories from './button.stories';
+import * as ButtonStories from './button.stories'
 
 <Meta of={ButtonStories} />
 
@@ -16,32 +16,32 @@ Displays a button or a component that looks like a button.
 
 ## Usage
 
-export const importCode = `import { Button } from "@orbitkit/ui/button";`;
+export const importCode = `import { Button } from "@orbitkit/ui/button";`
 
-export const usageCode = `<Button variant="outline">Button</Button>`;
+export const usageCode = `<Button variant="outline">Button</Button>`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
 
 ## Helper
 
 You can use the `buttonVariants` helper to create a link that looks like a button.
 
-export const linkImportCode = `import { buttonVariants } from "@orbitkit/ui/button";`;
+export const linkImportCode = `import { buttonVariants } from "@orbitkit/ui/button";`
 
-<Source code={linkImportCode} language="ts" dark />
+<Source code={linkImportCode} language='ts' dark />
 
-export const linkUsageCode = `<Link className={buttonVariants({ variant: "outline" })}>Click here</Link>`;
+export const linkUsageCode = `<Link className={buttonVariants({ variant: "outline" })}>Click here</Link>`
 
-<Source code={linkUsageCode} language="tsx" dark />
+<Source code={linkUsageCode} language='tsx' dark />
 
 Alternatively, you can set the `asChild` parameter and nest the link component.
 
 export const asChildCode = `<Button asChild>
   <Link href="/login">Login</Link>
-</Button>`;
+</Button>`
 
-<Source code={asChildCode} language="tsx" dark />
+<Source code={asChildCode} language='tsx' dark />
 
 ## Examples
 
diff --git a/packages/ui/src/primitives/button/button.stories.tsx b/packages/ui/src/primitives/button/button.stories.tsx
index bf833d5b..0f2921de 100644
--- a/packages/ui/src/primitives/button/button.stories.tsx
+++ b/packages/ui/src/primitives/button/button.stories.tsx
@@ -2,10 +2,10 @@ import {
   ChevronRightIcon,
   EnvelopeOpenIcon,
   ReloadIcon,
-} from '@radix-ui/react-icons';
-import { type Meta, type StoryObj } from '@storybook/react';
+} from '@radix-ui/react-icons'
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { Button } from './';
+import { Button } from './'
 
 const meta: Meta<typeof Button> = {
   component: Button,
@@ -35,18 +35,18 @@ const meta: Meta<typeof Button> = {
       control: { type: 'select' },
     },
   },
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Button>;
+type Story = StoryObj<typeof Button>
 
-export const Primary: Story = {};
-export const Secondary: Story = { args: { variant: 'secondary' } };
-export const Destructive: Story = { args: { variant: 'destructive' } };
-export const Outline: Story = { args: { variant: 'outline' } };
-export const Ghost: Story = { args: { variant: 'ghost' } };
-export const Link: Story = { args: { variant: 'link' } };
+export const Primary: Story = {}
+export const Secondary: Story = { args: { variant: 'secondary' } }
+export const Destructive: Story = { args: { variant: 'destructive' } }
+export const Outline: Story = { args: { variant: 'outline' } }
+export const Ghost: Story = { args: { variant: 'ghost' } }
+export const Link: Story = { args: { variant: 'link' } }
 
 export const Icon: Story = {
   args: {
@@ -54,27 +54,27 @@ export const Icon: Story = {
     size: 'icon',
     children: (
       <>
-        <ChevronRightIcon className="size-4" />
+        <ChevronRightIcon className='size-4' />
       </>
     ),
   },
   argTypes: {
     children: { control: { disable: true } },
   },
-};
+}
 
 export const WithIcon: Story = {
   args: {
     children: (
       <>
-        <EnvelopeOpenIcon className="mr-2 size-4" /> Login with Email
+        <EnvelopeOpenIcon className='mr-2 size-4' /> Login with Email
       </>
     ),
   },
   argTypes: {
     children: { control: { disable: true } },
   },
-};
+}
 
 export const Loading: Story = {
   args: {
@@ -82,7 +82,7 @@ export const Loading: Story = {
     disabled: true,
     children: (
       <>
-        <ReloadIcon className="mr-2 size-4 animate-spin" />
+        <ReloadIcon className='mr-2 size-4 animate-spin' />
         Please wait
       </>
     ),
@@ -90,4 +90,4 @@ export const Loading: Story = {
   argTypes: {
     children: { control: { disable: true } },
   },
-};
+}
diff --git a/packages/ui/src/primitives/button/index.tsx b/packages/ui/src/primitives/button/index.tsx
index 255f7fb8..c2503628 100644
--- a/packages/ui/src/primitives/button/index.tsx
+++ b/packages/ui/src/primitives/button/index.tsx
@@ -1,11 +1,11 @@
-import * as React from 'react';
+import * as React from 'react'
 
-import type { VariantProps } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority'
 
-import { Slot } from '@radix-ui/react-slot';
-import { cva } from 'class-variance-authority';
+import { Slot } from '@radix-ui/react-slot'
+import { cva } from 'class-variance-authority'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
 const buttonVariants = cva(
   'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
@@ -34,26 +34,26 @@ const buttonVariants = cva(
       size: 'default',
     },
   },
-);
+)
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
+  asChild?: boolean
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button';
+    const Comp = asChild ? Slot : 'button'
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    );
+    )
   },
-);
-Button.displayName = 'Button';
+)
+Button.displayName = 'Button'
 
-export { Button, buttonVariants };
+export { Button, buttonVariants }
diff --git a/packages/ui/src/primitives/calendar/calendar.mdx b/packages/ui/src/primitives/calendar/calendar.mdx
index 1416affe..ebf8ad92 100644
--- a/packages/ui/src/primitives/calendar/calendar.mdx
+++ b/packages/ui/src/primitives/calendar/calendar.mdx
@@ -1,11 +1,11 @@
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks'
 
-import { PrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
-import * as CalendarStories from './calendar.stories';
+import { PrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
+import * as CalendarStories from './calendar.stories'
 
 <Meta of={CalendarStories} />
 
-<PrimitiveDocsButton docsUrl="https://react-day-picker.js.org" />
+<PrimitiveDocsButton docsUrl='https://react-day-picker.js.org' />
 
 # Calendar
 
@@ -17,20 +17,20 @@ A date field component that allows users to enter and edit date.
 
 ## Usage
 
-export const importCode = `import { Calendar } from "@orbitkit/ui/calendar";`;
+export const importCode = `import { Calendar } from "@orbitkit/ui/calendar";`
 
 export const usageCode = `const [date, setDate] = React.useState<Date | undefined>(new Date())
 
 <Calendar
-  mode="single"
+  mode='single'
   selected={date}
   onSelect={setDate}
-  className="rounded-md border"
+  className='rounded-md border'
 />
 `;
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
 
 See the [React DayPicker](https://react-day-picker.js.org/) documentation for more information.
 
diff --git a/packages/ui/src/primitives/calendar/calendar.stories.tsx b/packages/ui/src/primitives/calendar/calendar.stories.tsx
index bfe2dcaf..4c1d4ae7 100644
--- a/packages/ui/src/primitives/calendar/calendar.stories.tsx
+++ b/packages/ui/src/primitives/calendar/calendar.stories.tsx
@@ -1,48 +1,49 @@
-import type { ComponentProps } from 'react';
-import { useState } from 'react';
+import { useState } from 'react'
 
-import { CalendarIcon } from '@radix-ui/react-icons';
-import { type Meta, type StoryObj } from '@storybook/react';
-import { addDays, format } from 'date-fns';
-import { type DateRange } from 'react-day-picker';
+import type { ComponentProps } from 'react'
 
-import { Button } from '@/primitives/button';
-import { Popover, PopoverContent, PopoverTrigger } from '@/primitives/popover';
-import { cn } from '@/utils/cn';
+import { CalendarIcon } from '@radix-ui/react-icons'
+import { type Meta, type StoryObj } from '@storybook/react'
+import { addDays, format } from 'date-fns'
+import { type DateRange } from 'react-day-picker'
 
-import { Calendar } from '.';
+import { Button } from '@/primitives/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/primitives/popover'
+import { cn } from '@/utils/cn'
+
+import { Calendar } from '.'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '../select';
+} from '../select'
 
 const meta: Meta<typeof Calendar> = {
   component: Calendar,
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Calendar>;
+type Story = StoryObj<typeof Calendar>
 
 const DefaultCalendarExample = (props: ComponentProps<typeof Calendar>) => {
-  const [date, setDate] = useState<Date | undefined>(new Date());
+  const [date, setDate] = useState<Date | undefined>(new Date())
 
   return (
     <Calendar
       {...props}
-      mode="single"
+      mode='single'
       selected={date}
       onSelect={setDate}
-      className="rounded-md border shadow"
+      className='rounded-md border shadow'
     />
-  );
-};
+  )
+}
 
 const DatePickerExample = (props: ComponentProps<typeof Calendar>) => {
-  const [date, setDate] = useState<Date>();
+  const [date, setDate] = useState<Date>()
 
   return (
     <Popover>
@@ -54,42 +55,42 @@ const DatePickerExample = (props: ComponentProps<typeof Calendar>) => {
             !date && 'text-muted-foreground',
           )}
         >
-          <CalendarIcon className="mr-2 size-4" />
+          <CalendarIcon className='mr-2 size-4' />
           {date ? format(date, 'PPP') : <span>Pick a date</span>}
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-auto p-0" align="start">
+      <PopoverContent className='w-auto p-0' align='start'>
         <Calendar
           {...props}
-          mode="single"
+          mode='single'
           selected={date}
           onSelect={setDate}
           initialFocus
         />
       </PopoverContent>
     </Popover>
-  );
-};
+  )
+}
 
 const DateRangePickerExample = (props: ComponentProps<typeof Calendar>) => {
   const [date, setDate] = useState<DateRange | undefined>({
     from: new Date(2022, 0, 20),
     to: addDays(new Date(2022, 0, 20), 20),
-  });
+  })
 
   return (
-    <div className="grid gap-2">
+    <div className='grid gap-2'>
       <Popover>
         <PopoverTrigger asChild>
           <Button
-            id="date"
+            id='date'
             variant={'outline'}
             className={cn(
               'w-[300px] justify-start text-left font-normal',
               !date && 'text-muted-foreground',
             )}
           >
-            <CalendarIcon className="mr-2 size-4" />
+            <CalendarIcon className='mr-2 size-4' />
             {date?.from ? (
               date.to ? (
                 <>
@@ -104,11 +105,11 @@ const DateRangePickerExample = (props: ComponentProps<typeof Calendar>) => {
             )}
           </Button>
         </PopoverTrigger>
-        <PopoverContent className="w-auto p-0" align="start">
+        <PopoverContent className='w-auto p-0' align='start'>
           <Calendar
             {...props}
             initialFocus
-            mode="range"
+            mode='range'
             defaultMonth={date?.from ?? new Date()}
             selected={date}
             onSelect={setDate}
@@ -117,11 +118,11 @@ const DateRangePickerExample = (props: ComponentProps<typeof Calendar>) => {
         </PopoverContent>
       </Popover>
     </div>
-  );
-};
+  )
+}
 
 const WithPresetsExample = (props: ComponentProps<typeof Calendar>) => {
-  const [date, setDate] = useState<Date>();
+  const [date, setDate] = useState<Date>()
 
   return (
     <Popover>
@@ -133,54 +134,54 @@ const WithPresetsExample = (props: ComponentProps<typeof Calendar>) => {
             !date && 'text-muted-foreground',
           )}
         >
-          <CalendarIcon className="mr-2 size-4" />
+          <CalendarIcon className='mr-2 size-4' />
           {date ? format(date, 'PPP') : <span>Pick a date</span>}
         </Button>
       </PopoverTrigger>
       <PopoverContent
-        align="start"
-        className="flex w-auto flex-col space-y-2 p-2"
+        align='start'
+        className='flex w-auto flex-col space-y-2 p-2'
       >
         <Select
           onValueChange={(value) => {
-            setDate(addDays(new Date(), parseInt(value)));
+            setDate(addDays(new Date(), parseInt(value)))
           }}
         >
           <SelectTrigger>
-            <SelectValue placeholder="Select" />
+            <SelectValue placeholder='Select' />
           </SelectTrigger>
-          <SelectContent position="popper">
-            <SelectItem value="0">Today</SelectItem>
-            <SelectItem value="1">Tomorrow</SelectItem>
-            <SelectItem value="3">In 3 days</SelectItem>
-            <SelectItem value="7">In a week</SelectItem>
+          <SelectContent position='popper'>
+            <SelectItem value='0'>Today</SelectItem>
+            <SelectItem value='1'>Tomorrow</SelectItem>
+            <SelectItem value='3'>In 3 days</SelectItem>
+            <SelectItem value='7'>In a week</SelectItem>
           </SelectContent>
         </Select>
-        <div className="rounded-md border">
+        <div className='rounded-md border'>
           <Calendar
             {...props}
-            mode="single"
+            mode='single'
             selected={date}
             onSelect={setDate}
           />
         </div>
       </PopoverContent>
     </Popover>
-  );
-};
+  )
+}
 
 export const Default: Story = {
   render: (args) => <DefaultCalendarExample {...args} />,
-};
+}
 
 export const DatePicker: Story = {
   render: (args) => <DatePickerExample {...args} />,
-};
+}
 
 export const DateRangePicker: Story = {
   render: (args) => <DateRangePickerExample {...args} />,
-};
+}
 
 export const WithPresets: Story = {
   render: (args) => <WithPresetsExample {...args} />,
-};
+}
diff --git a/packages/ui/src/primitives/calendar/index.tsx b/packages/ui/src/primitives/calendar/index.tsx
index e19bbb33..b1b464df 100644
--- a/packages/ui/src/primitives/calendar/index.tsx
+++ b/packages/ui/src/primitives/calendar/index.tsx
@@ -1,14 +1,14 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
-import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons';
-import { DayPicker } from 'react-day-picker';
+import { ChevronLeftIcon, ChevronRightIcon } from '@radix-ui/react-icons'
+import { DayPicker } from 'react-day-picker'
 
-import { buttonVariants } from '@/primitives/button';
-import { cn } from '@/utils/cn';
+import { buttonVariants } from '@/primitives/button'
+import { cn } from '@/utils/cn'
 
-export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
 
 /**
  * A calendar component that uses the `react-day-picker` library.
@@ -69,13 +69,13 @@ function Calendar({
         ...classNames,
       }}
       components={{
-        IconLeft: () => <ChevronLeftIcon className="size-4" />,
-        IconRight: () => <ChevronRightIcon className="size-4" />,
+        IconLeft: () => <ChevronLeftIcon className='size-4' />,
+        IconRight: () => <ChevronRightIcon className='size-4' />,
       }}
       {...props}
     />
-  );
+  )
 }
-Calendar.displayName = 'Calendar';
+Calendar.displayName = 'Calendar'
 
-export { Calendar };
+export { Calendar }
diff --git a/packages/ui/src/primitives/card/card.mdx b/packages/ui/src/primitives/card/card.mdx
index deb23e93..e6662212 100644
--- a/packages/ui/src/primitives/card/card.mdx
+++ b/packages/ui/src/primitives/card/card.mdx
@@ -1,7 +1,7 @@
-import { ExternalLinkIcon } from '@radix-ui/react-icons';
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { ExternalLinkIcon } from '@radix-ui/react-icons'
+import { Canvas, Meta, Source } from '@storybook/blocks'
 
-import * as CardStories from './card.stories';
+import * as CardStories from './card.stories'
 
 <Meta of={CardStories} />
 
@@ -22,7 +22,7 @@ export const importCode = `import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from "@orbitkit/ui/card"`;
+} from "@orbitkit/ui/card"`
 
 export const usageCode = `<Card>
   <CardHeader>
@@ -36,10 +36,10 @@ export const usageCode = `<Card>
     <p>Card Footer</p>
   </CardFooter>
 </Card>
-`;
+`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
 
 ## Examples
 
diff --git a/packages/ui/src/primitives/card/card.stories.tsx b/packages/ui/src/primitives/card/card.stories.tsx
index e7df22b9..8ad20a83 100644
--- a/packages/ui/src/primitives/card/card.stories.tsx
+++ b/packages/ui/src/primitives/card/card.stories.tsx
@@ -1,7 +1,7 @@
-import { BellIcon, CheckIcon } from '@radix-ui/react-icons';
-import { type Meta, type StoryObj } from '@storybook/react';
+import { BellIcon, CheckIcon } from '@radix-ui/react-icons'
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { Button } from '@/primitives/button';
+import { Button } from '@/primitives/button'
 import {
   Card,
   CardContent,
@@ -9,17 +9,17 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from '@/primitives/card';
-import { Switch } from '@/primitives/switch';
-import { cn } from '@/utils/cn';
+} from '@/primitives/card'
+import { Switch } from '@/primitives/switch'
+import { cn } from '@/utils/cn'
 
 const meta: Meta<typeof Card> = {
   component: Card,
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Card>;
+type Story = StoryObj<typeof Card>
 
 const notifications = [
   {
@@ -34,7 +34,7 @@ const notifications = [
     title: 'Your subscription is expiring soon!',
     description: '2 hours ago',
   },
-];
+]
 
 export const Default: Story = {
   render: (args) => (
@@ -43,14 +43,14 @@ export const Default: Story = {
         <CardTitle>Notifications</CardTitle>
         <CardDescription>You have 3 unread messages.</CardDescription>
       </CardHeader>
-      <CardContent className="grid gap-4">
-        <div className=" flex items-center space-x-4 rounded-md border p-4">
+      <CardContent className='grid gap-4'>
+        <div className=' flex items-center space-x-4 rounded-md border p-4'>
           <BellIcon />
-          <div className="flex-1 space-y-1">
-            <p className="text-sm font-medium leading-none">
+          <div className='flex-1 space-y-1'>
+            <p className='text-sm font-medium leading-none'>
               Push Notifications
             </p>
-            <p className="text-sm text-muted-foreground">
+            <p className='text-sm text-muted-foreground'>
               Send notifications to device.
             </p>
           </div>
@@ -60,14 +60,14 @@ export const Default: Story = {
           {notifications.map((notification, index) => (
             <div
               key={index}
-              className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
+              className='mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0'
             >
-              <span className="flex size-2 translate-y-1 rounded-full bg-sky-500" />
-              <div className="space-y-1">
-                <p className="text-sm font-medium leading-none">
+              <span className='flex size-2 translate-y-1 rounded-full bg-sky-500' />
+              <div className='space-y-1'>
+                <p className='text-sm font-medium leading-none'>
                   {notification.title}
                 </p>
-                <p className="text-sm text-muted-foreground">
+                <p className='text-sm text-muted-foreground'>
                   {notification.description}
                 </p>
               </div>
@@ -76,10 +76,10 @@ export const Default: Story = {
         </div>
       </CardContent>
       <CardFooter>
-        <Button className="w-full">
-          <CheckIcon className="mr-2 size-4" /> Mark all as read
+        <Button className='w-full'>
+          <CheckIcon className='mr-2 size-4' /> Mark all as read
         </Button>
       </CardFooter>
     </Card>
   ),
-};
+}
diff --git a/packages/ui/src/primitives/card/index.tsx b/packages/ui/src/primitives/card/index.tsx
index 98a7208d..cc002590 100644
--- a/packages/ui/src/primitives/card/index.tsx
+++ b/packages/ui/src/primitives/card/index.tsx
@@ -1,6 +1,6 @@
-import * as React from 'react';
+import * as React from 'react'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -14,8 +14,8 @@ const Card = React.forwardRef<
     )}
     {...props}
   />
-));
-Card.displayName = 'CardHeader';
+))
+Card.displayName = 'CardHeader'
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
@@ -26,8 +26,8 @@ const CardHeader = React.forwardRef<
     className={cn('flex flex-col space-y-1.5 p-6', className)}
     {...props}
   />
-));
-CardHeader.displayName = 'CardHeader';
+))
+CardHeader.displayName = 'CardHeader'
 
 const CardTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -43,8 +43,8 @@ const CardTitle = React.forwardRef<
   >
     {children}
   </h3>
-));
-CardTitle.displayName = 'CardTitle';
+))
+CardTitle.displayName = 'CardTitle'
 
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -55,16 +55,16 @@ const CardDescription = React.forwardRef<
     className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
-));
-CardDescription.displayName = 'CardDescription';
+))
+CardDescription.displayName = 'CardDescription'
 
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
-));
-CardContent.displayName = 'CardContent';
+))
+CardContent.displayName = 'CardContent'
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
@@ -75,14 +75,7 @@ const CardFooter = React.forwardRef<
     className={cn('flex items-center p-6 pt-0', className)}
     {...props}
   />
-));
-CardFooter.displayName = 'CardFooter';
+))
+CardFooter.displayName = 'CardFooter'
 
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardDescription,
-  CardContent,
-};
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
diff --git a/packages/ui/src/primitives/carousel/carousel.stories.tsx b/packages/ui/src/primitives/carousel/carousel.stories.tsx
index 45e5b172..b7ad4c69 100644
--- a/packages/ui/src/primitives/carousel/carousel.stories.tsx
+++ b/packages/ui/src/primitives/carousel/carousel.stories.tsx
@@ -1,12 +1,12 @@
-import type { ComponentProps } from 'react';
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react'
 
-import type { CarouselApi } from '.';
+import type { ComponentProps } from 'react'
+import type { CarouselApi } from '.'
 
-import { type Meta, type StoryObj } from '@storybook/react';
-import AutoplayPlugin from 'embla-carousel-autoplay';
+import { type Meta, type StoryObj } from '@storybook/react'
+import AutoplayPlugin from 'embla-carousel-autoplay'
 
-import { Card, CardContent } from '@/primitives/card';
+import { Card, CardContent } from '@/primitives/card'
 
 import {
   Carousel,
@@ -14,27 +14,27 @@ import {
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
-} from '.';
+} from '.'
 
 const meta: Meta<typeof Carousel> = {
   component: Carousel,
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Carousel>;
+type Story = StoryObj<typeof Carousel>
 
 export const Default: Story = {
   render: (args) => (
-    <div className="flex justify-center">
-      <Carousel {...args} className="w-full max-w-xs">
+    <div className='flex justify-center'>
+      <Carousel {...args} className='w-full max-w-xs'>
         <CarouselContent>
           {Array.from({ length: 5 }).map((_, index) => (
             <CarouselItem key={index}>
-              <div className="p-1">
+              <div className='p-1'>
                 <Card>
-                  <CardContent className="flex aspect-[1_/_1] items-center justify-center p-6">
-                    <span className="text-4xl font-semibold">{index + 1}</span>
+                  <CardContent className='flex aspect-[1_/_1] items-center justify-center p-6'>
+                    <span className='text-4xl font-semibold'>{index + 1}</span>
                   </CardContent>
                 </Card>
               </div>
@@ -46,25 +46,25 @@ export const Default: Story = {
       </Carousel>
     </div>
   ),
-};
+}
 
 export const Sizes: Story = {
   render: (args) => (
-    <div className="flex justify-center">
+    <div className='flex justify-center'>
       <Carousel
         {...args}
         opts={{
           align: 'start',
         }}
-        className="w-full max-w-sm"
+        className='w-full max-w-sm'
       >
         <CarouselContent>
           {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
-              <div className="p-1">
+            <CarouselItem key={index} className='md:basis-1/2 lg:basis-1/3'>
+              <div className='p-1'>
                 <Card>
-                  <CardContent className="flex aspect-[1_/_1] items-center justify-center p-6">
-                    <span className="text-3xl font-semibold">{index + 1}</span>
+                  <CardContent className='flex aspect-[1_/_1] items-center justify-center p-6'>
+                    <span className='text-3xl font-semibold'>{index + 1}</span>
                   </CardContent>
                 </Card>
               </div>
@@ -76,22 +76,22 @@ export const Sizes: Story = {
       </Carousel>
     </div>
   ),
-};
+}
 
 export const Spacing: Story = {
   render: (args) => (
-    <div className="flex justify-center">
-      <Carousel {...args} className="w-full max-w-sm">
-        <CarouselContent className="-ml-1">
+    <div className='flex justify-center'>
+      <Carousel {...args} className='w-full max-w-sm'>
+        <CarouselContent className='-ml-1'>
           {Array.from({ length: 5 }).map((_, index) => (
             <CarouselItem
               key={index}
-              className="pl-1 md:basis-1/2 lg:basis-1/3"
+              className='pl-1 md:basis-1/2 lg:basis-1/3'
             >
-              <div className="p-1">
+              <div className='p-1'>
                 <Card>
-                  <CardContent className="flex aspect-[1_/_1] items-center justify-center p-6">
-                    <span className="text-2xl font-semibold">{index + 1}</span>
+                  <CardContent className='flex aspect-[1_/_1] items-center justify-center p-6'>
+                    <span className='text-2xl font-semibold'>{index + 1}</span>
                   </CardContent>
                 </Card>
               </div>
@@ -103,26 +103,26 @@ export const Spacing: Story = {
       </Carousel>
     </div>
   ),
-};
+}
 
 export const Orientation: Story = {
   render: (args) => (
-    <div className="flex justify-center pt-12">
+    <div className='flex justify-center pt-12'>
       <Carousel
         {...args}
         opts={{
           align: 'start',
         }}
-        orientation="vertical"
-        className="w-full max-w-xs"
+        orientation='vertical'
+        className='w-full max-w-xs'
       >
-        <CarouselContent className="-mt-1 h-[200px]">
+        <CarouselContent className='-mt-1 h-[200px]'>
           {Array.from({ length: 5 }).map((_, index) => (
-            <CarouselItem key={index} className="pt-1 md:basis-1/2">
-              <div className="p-1">
+            <CarouselItem key={index} className='pt-1 md:basis-1/2'>
+              <div className='p-1'>
                 <Card>
-                  <CardContent className="flex items-center justify-center p-6">
-                    <span className="text-3xl font-semibold">{index + 1}</span>
+                  <CardContent className='flex items-center justify-center p-6'>
+                    <span className='text-3xl font-semibold'>{index + 1}</span>
                   </CardContent>
                 </Card>
               </div>
@@ -134,36 +134,36 @@ export const Orientation: Story = {
       </Carousel>
     </div>
   ),
-};
+}
 
 const WithSlideNumberExample = (props: ComponentProps<typeof Carousel>) => {
-  const [api, setApi] = useState<CarouselApi>();
-  const [current, setCurrent] = useState(0);
-  const [count, setCount] = useState(0);
+  const [api, setApi] = useState<CarouselApi>()
+  const [current, setCurrent] = useState(0)
+  const [count, setCount] = useState(0)
 
   useEffect(() => {
     if (!api) {
-      return;
+      return
     }
 
-    setCount(api.scrollSnapList().length);
-    setCurrent(api.selectedScrollSnap() + 1);
+    setCount(api.scrollSnapList().length)
+    setCurrent(api.selectedScrollSnap() + 1)
 
     api.on('select', () => {
-      setCurrent(api.selectedScrollSnap() + 1);
-    });
-  }, [api]);
+      setCurrent(api.selectedScrollSnap() + 1)
+    })
+  }, [api])
 
   return (
     <div>
-      <div className="flex justify-center">
-        <Carousel {...props} setApi={setApi} className="w-full max-w-xs">
+      <div className='flex justify-center'>
+        <Carousel {...props} setApi={setApi} className='w-full max-w-xs'>
           <CarouselContent>
             {Array.from({ length: 5 }).map((_, index) => (
               <CarouselItem key={index}>
                 <Card>
-                  <CardContent className="flex aspect-[1_/_1] items-center justify-center p-6">
-                    <span className="text-4xl font-semibold">{index + 1}</span>
+                  <CardContent className='flex aspect-[1_/_1] items-center justify-center p-6'>
+                    <span className='text-4xl font-semibold'>{index + 1}</span>
                   </CardContent>
                 </Card>
               </CarouselItem>
@@ -173,32 +173,32 @@ const WithSlideNumberExample = (props: ComponentProps<typeof Carousel>) => {
           <CarouselNext />
         </Carousel>
       </div>
-      <div className="py-2 text-center text-sm text-muted-foreground">
+      <div className='py-2 text-center text-sm text-muted-foreground'>
         Slide {current} of {count}
       </div>
     </div>
-  );
-};
+  )
+}
 
 export const WithSlideNumber: Story = {
   render: (args) => <WithSlideNumberExample {...args} />,
-};
+}
 
 export const Autoplay: Story = {
   render: (args) => (
-    <div className="flex justify-center">
+    <div className='flex justify-center'>
       <Carousel
         {...args}
         plugins={[AutoplayPlugin({ delay: 2000, stopOnInteraction: true })]}
-        className="w-full max-w-xs"
+        className='w-full max-w-xs'
       >
         <CarouselContent>
           {Array.from({ length: 5 }).map((_, index) => (
             <CarouselItem key={index}>
-              <div className="p-1">
+              <div className='p-1'>
                 <Card>
-                  <CardContent className="flex aspect-[1_/_1] items-center justify-center p-6">
-                    <span className="text-4xl font-semibold">{index + 1}</span>
+                  <CardContent className='flex aspect-[1_/_1] items-center justify-center p-6'>
+                    <span className='text-4xl font-semibold'>{index + 1}</span>
                   </CardContent>
                 </Card>
               </div>
@@ -210,4 +210,4 @@ export const Autoplay: Story = {
       </Carousel>
     </div>
   ),
-};
+}
diff --git a/packages/ui/src/primitives/carousel/index.tsx b/packages/ui/src/primitives/carousel/index.tsx
index 92c09cbe..d3100c1d 100644
--- a/packages/ui/src/primitives/carousel/index.tsx
+++ b/packages/ui/src/primitives/carousel/index.tsx
@@ -1,50 +1,50 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
-import type { UseEmblaCarouselType } from 'embla-carousel-react';
+import type { UseEmblaCarouselType } from 'embla-carousel-react'
 
-import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons';
-import useEmblaCarousel from 'embla-carousel-react';
+import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons'
+import useEmblaCarousel from 'embla-carousel-react'
 
-import { Button } from '@/primitives/button';
-import { cn } from '@/utils/cn';
+import { Button } from '@/primitives/button'
+import { cn } from '@/utils/cn'
 
-type CarouselApi = UseEmblaCarouselType[1];
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
-type CarouselOptions = UseCarouselParameters[0];
-type CarouselPlugin = UseCarouselParameters[1];
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
 
 interface CarouselProps {
-  opts?: CarouselOptions;
-  plugins?: CarouselPlugin;
-  orientation?: 'horizontal' | 'vertical';
-  setApi?: (api: CarouselApi) => void;
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: 'horizontal' | 'vertical'
+  setApi?: (api: CarouselApi) => void
 }
 
 type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
-  api: ReturnType<typeof useEmblaCarousel>[1];
-  scrollPrev: () => void;
-  scrollNext: () => void;
-  canScrollPrev: boolean;
-  canScrollNext: boolean;
-} & CarouselProps;
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
 
-const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
 
 /**
  * This hook returns the carousel context.
  * @returns The carousel context.
  */
 function useCarousel() {
-  const context = React.useContext(CarouselContext);
+  const context = React.useContext(CarouselContext)
 
   if (!context) {
-    throw new Error('useCarousel must be used within a <Carousel />');
+    throw new Error('useCarousel must be used within a <Carousel />')
   }
 
-  return context;
+  return context
 }
 
 const Carousel = React.forwardRef<
@@ -69,61 +69,61 @@ const Carousel = React.forwardRef<
         axis: orientation === 'horizontal' ? 'x' : 'y',
       },
       plugins,
-    );
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-    const [canScrollNext, setCanScrollNext] = React.useState(false);
+    )
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
 
     const onSelect = React.useCallback((api: CarouselApi) => {
       if (!api) {
-        return;
+        return
       }
 
-      setCanScrollPrev(api.canScrollPrev());
-      setCanScrollNext(api.canScrollNext());
-    }, []);
+      setCanScrollPrev(api.canScrollPrev())
+      setCanScrollNext(api.canScrollNext())
+    }, [])
 
     const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev();
-    }, [api]);
+      api?.scrollPrev()
+    }, [api])
 
     const scrollNext = React.useCallback(() => {
-      api?.scrollNext();
-    }, [api]);
+      api?.scrollNext()
+    }, [api])
 
     const handleKeyDown = React.useCallback(
       (event: React.KeyboardEvent<HTMLDivElement>) => {
         if (event.key === 'ArrowLeft') {
-          event.preventDefault();
-          scrollPrev();
+          event.preventDefault()
+          scrollPrev()
         } else if (event.key === 'ArrowRight') {
-          event.preventDefault();
-          scrollNext();
+          event.preventDefault()
+          scrollNext()
         }
       },
       [scrollPrev, scrollNext],
-    );
+    )
 
     React.useEffect(() => {
       if (!api || !setApi) {
-        return;
+        return
       }
 
-      setApi(api);
-    }, [api, setApi]);
+      setApi(api)
+    }, [api, setApi])
 
     React.useEffect(() => {
       if (!api) {
-        return;
+        return
       }
 
-      onSelect(api);
-      api.on('reInit', onSelect);
-      api.on('select', onSelect);
+      onSelect(api)
+      api.on('reInit', onSelect)
+      api.on('select', onSelect)
 
       return () => {
-        api.off('select', onSelect);
-      };
-    }, [api, onSelect]);
+        api.off('select', onSelect)
+      }
+    }, [api, onSelect])
 
     return (
       <CarouselContext.Provider
@@ -147,26 +147,26 @@ const Carousel = React.forwardRef<
           ref={ref}
           onKeyDownCapture={handleKeyDown}
           className={cn('relative', className)}
-          role="region"
-          aria-roledescription="carousel"
+          role='region'
+          aria-roledescription='carousel'
           {...props}
         >
           {children}
         </div>
       </CarouselContext.Provider>
-    );
+    )
   },
-);
-Carousel.displayName = 'Carousel';
+)
+Carousel.displayName = 'Carousel'
 
 const CarouselContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel();
+  const { carouselRef, orientation } = useCarousel()
 
   return (
-    <div ref={carouselRef} className="overflow-hidden">
+    <div ref={carouselRef} className='overflow-hidden'>
       <div
         ref={ref}
         className={cn(
@@ -177,21 +177,21 @@ const CarouselContent = React.forwardRef<
         {...props}
       />
     </div>
-  );
-});
-CarouselContent.displayName = 'CarouselContent';
+  )
+})
+CarouselContent.displayName = 'CarouselContent'
 
 const CarouselItem = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel();
+  const { orientation } = useCarousel()
 
   return (
     <div
       ref={ref}
-      role="group"
-      aria-roledescription="slide"
+      role='group'
+      aria-roledescription='slide'
       className={cn(
         'min-w-0 shrink-0 grow-0 basis-full',
         orientation === 'horizontal' ? 'pl-4' : 'pt-4',
@@ -199,15 +199,15 @@ const CarouselItem = React.forwardRef<
       )}
       {...props}
     />
-  );
-});
-CarouselItem.displayName = 'CarouselItem';
+  )
+})
+CarouselItem.displayName = 'CarouselItem'
 
 const CarouselPrevious = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<typeof Button>
 >(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
 
   return (
     <Button
@@ -225,18 +225,18 @@ const CarouselPrevious = React.forwardRef<
       onClick={scrollPrev}
       {...props}
     >
-      <ArrowLeftIcon className="size-4" />
-      <span className="sr-only">Previous slide</span>
+      <ArrowLeftIcon className='size-4' />
+      <span className='sr-only'>Previous slide</span>
     </Button>
-  );
-});
-CarouselPrevious.displayName = 'CarouselPrevious';
+  )
+})
+CarouselPrevious.displayName = 'CarouselPrevious'
 
 const CarouselNext = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<typeof Button>
 >(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel();
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
 
   return (
     <Button
@@ -254,12 +254,12 @@ const CarouselNext = React.forwardRef<
       onClick={scrollNext}
       {...props}
     >
-      <ArrowRightIcon className="size-4" />
-      <span className="sr-only">Next slide</span>
+      <ArrowRightIcon className='size-4' />
+      <span className='sr-only'>Next slide</span>
     </Button>
-  );
-});
-CarouselNext.displayName = 'CarouselNext';
+  )
+})
+CarouselNext.displayName = 'CarouselNext'
 
 export {
   type CarouselApi,
@@ -268,4 +268,4 @@ export {
   CarouselItem,
   CarouselPrevious,
   CarouselNext,
-};
+}
diff --git a/packages/ui/src/primitives/checkbox/checkbox.mdx b/packages/ui/src/primitives/checkbox/checkbox.mdx
index f8ee9c6a..a664ec06 100644
--- a/packages/ui/src/primitives/checkbox/checkbox.mdx
+++ b/packages/ui/src/primitives/checkbox/checkbox.mdx
@@ -1,11 +1,11 @@
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks'
 
-import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
-import * as CheckboxStories from './checkbox.stories';
+import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
+import * as CheckboxStories from './checkbox.stories'
 
 <Meta of={CheckboxStories} />
 
-<RadixPrimitiveDocsButton name="checkbox" />
+<RadixPrimitiveDocsButton name='checkbox' />
 
 # Checkbox
 
@@ -17,12 +17,12 @@ A control that allows the user to toggle between checked and not checked.
 
 ## Usage
 
-export const importCode = `import { Checkbox } from "@orbitkit/ui/checkbox";`;
+export const importCode = `import { Checkbox } from "@orbitkit/ui/checkbox";`
 
-export const usageCode = `<Checkbox />`;
+export const usageCode = `<Checkbox />`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
 
 ## Examples
 
diff --git a/packages/ui/src/primitives/checkbox/checkbox.stories.tsx b/packages/ui/src/primitives/checkbox/checkbox.stories.tsx
index 8de5e78b..8925ac6c 100644
--- a/packages/ui/src/primitives/checkbox/checkbox.stories.tsx
+++ b/packages/ui/src/primitives/checkbox/checkbox.stories.tsx
@@ -1,8 +1,8 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { Checkbox } from '.';
-import { Label } from '../label';
-import { Typography } from '../typography';
+import { Checkbox } from '.'
+import { Label } from '../label'
+import { Typography } from '../typography'
 
 const meta: Meta<typeof Checkbox> = {
   component: Checkbox,
@@ -18,35 +18,35 @@ const meta: Meta<typeof Checkbox> = {
     },
   },
   render: (args) => (
-    <div className="flex items-center space-x-2">
+    <div className='flex items-center space-x-2'>
       <Checkbox {...args} />
       <Label htmlFor={args.id}>Accept terms and conditions</Label>
     </div>
   ),
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Checkbox>;
+type Story = StoryObj<typeof Checkbox>
 
-export const Default: Story = {};
+export const Default: Story = {}
 
 export const WithText: Story = {
   render: (args) => (
-    <div className="flex items-start space-x-2">
+    <div className='flex items-start space-x-2'>
       <Checkbox {...args} />
-      <div className="grid gap-1.5 leading-none">
+      <div className='grid gap-1.5 leading-none'>
         <Label htmlFor={args.id}>Accept terms and conditions</Label>
-        <Typography variant="muted">
+        <Typography variant='muted'>
           You agree to our Terms of Service and Privacy Policy.
         </Typography>
       </div>
     </div>
   ),
-};
+}
 
 export const Disabled: Story = {
   args: {
     disabled: true,
   },
-};
+}
diff --git a/packages/ui/src/primitives/checkbox/index.tsx b/packages/ui/src/primitives/checkbox/index.tsx
index 0dc35e8e..4eef73b7 100644
--- a/packages/ui/src/primitives/checkbox/index.tsx
+++ b/packages/ui/src/primitives/checkbox/index.tsx
@@ -1,11 +1,11 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { CheckIcon } from '@radix-ui/react-icons';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import { CheckIcon } from '@radix-ui/react-icons'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
@@ -22,10 +22,10 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn('flex items-center justify-center text-current')}
     >
-      <CheckIcon className="size-4" />
+      <CheckIcon className='size-4' />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
 
-export { Checkbox };
+export { Checkbox }
diff --git a/packages/ui/src/primitives/collapsible/collapsible.mdx b/packages/ui/src/primitives/collapsible/collapsible.mdx
index 1bb52894..ebc43971 100644
--- a/packages/ui/src/primitives/collapsible/collapsible.mdx
+++ b/packages/ui/src/primitives/collapsible/collapsible.mdx
@@ -1,11 +1,11 @@
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks'
 
-import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
-import * as CollapsibleStories from './collapsible.stories';
+import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
+import * as CollapsibleStories from './collapsible.stories'
 
 <Meta of={CollapsibleStories} />
 
-<RadixPrimitiveDocsButton name="collapsible" />
+<RadixPrimitiveDocsButton name='collapsible' />
 
 # Collapsible
 
@@ -21,7 +21,7 @@ export const importCode = `import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from "@orbitkit/ui/collapsible";`;
+} from "@orbitkit/ui/collapsible";`
 
 export const usageCode = `<Collapsible>
   <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
@@ -29,7 +29,7 @@ export const usageCode = `<Collapsible>
     Yes. Free to use for personal and commercial projects. No attribution
     required.
   </CollapsibleContent>
-</Collapsible>`;
+</Collapsible>`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
diff --git a/packages/ui/src/primitives/collapsible/collapsible.stories.tsx b/packages/ui/src/primitives/collapsible/collapsible.stories.tsx
index 6030177c..3daf3395 100644
--- a/packages/ui/src/primitives/collapsible/collapsible.stories.tsx
+++ b/packages/ui/src/primitives/collapsible/collapsible.stories.tsx
@@ -1,43 +1,43 @@
-import { CaretSortIcon } from '@radix-ui/react-icons';
-import { type Meta, type StoryObj } from '@storybook/react';
+import { CaretSortIcon } from '@radix-ui/react-icons'
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { Button } from '@/primitives/button';
+import { Button } from '@/primitives/button'
 
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '.';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '.'
 
 const meta: Meta<typeof Collapsible> = {
   component: Collapsible,
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Collapsible>;
+type Story = StoryObj<typeof Collapsible>
 
 export const Default: Story = {
   render: (args) => (
-    <Collapsible {...args} className="w-[350px] space-y-2">
-      <div className="flex items-center justify-between space-x-4 px-4">
-        <h4 className="text-sm font-semibold">
+    <Collapsible {...args} className='w-[350px] space-y-2'>
+      <div className='flex items-center justify-between space-x-4 px-4'>
+        <h4 className='text-sm font-semibold'>
           @peduarte starred 3 repositories
         </h4>
         <CollapsibleTrigger asChild>
-          <Button variant="ghost" size="sm">
-            <CaretSortIcon className="size-4" />
-            <span className="sr-only">Toggle</span>
+          <Button variant='ghost' size='sm'>
+            <CaretSortIcon className='size-4' />
+            <span className='sr-only'>Toggle</span>
           </Button>
         </CollapsibleTrigger>
       </div>
-      <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+      <div className='rounded-md border px-4 py-2 font-mono text-sm shadow-sm'>
         @radix-ui/primitives
       </div>
-      <CollapsibleContent className="space-y-2">
-        <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+      <CollapsibleContent className='space-y-2'>
+        <div className='rounded-md border px-4 py-2 font-mono text-sm shadow-sm'>
           @radix-ui/colors
         </div>
-        <div className="rounded-md border px-4 py-2 font-mono text-sm shadow-sm">
+        <div className='rounded-md border px-4 py-2 font-mono text-sm shadow-sm'>
           @stitches/react
         </div>
       </CollapsibleContent>
     </Collapsible>
   ),
-};
+}
diff --git a/packages/ui/src/primitives/collapsible/index.tsx b/packages/ui/src/primitives/collapsible/index.tsx
index 86ab87d8..1bbaed5a 100644
--- a/packages/ui/src/primitives/collapsible/index.tsx
+++ b/packages/ui/src/primitives/collapsible/index.tsx
@@ -1,11 +1,11 @@
-'use client';
+'use client'
 
-import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
 
-const Collapsible = CollapsiblePrimitive.Root;
+const Collapsible = CollapsiblePrimitive.Root
 
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
 
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
 
-export { Collapsible, CollapsibleTrigger, CollapsibleContent };
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/packages/ui/src/primitives/command/command.mdx b/packages/ui/src/primitives/command/command.mdx
index b3c3c800..ed97ebfd 100644
--- a/packages/ui/src/primitives/command/command.mdx
+++ b/packages/ui/src/primitives/command/command.mdx
@@ -1,11 +1,11 @@
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks'
 
-import { PrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
-import * as CommandStories from './command.stories';
+import { PrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
+import * as CommandStories from './command.stories'
 
 <Meta of={CommandStories} />
 
-<PrimitiveDocsButton docsUrl="https://cmdk.paco.me/" />
+<PrimitiveDocsButton docsUrl='https://cmdk.paco.me/' />
 
 # Command
 
@@ -31,7 +31,7 @@ export const importCode = `import {
   CommandList,
   CommandSeparator,
   CommandShortcut,
-} from "@orbitkit/ui/command";`;
+} from "@orbitkit/ui/command";`
 
 export const usageCode = `<Command>
   <CommandInput placeholder="Type a command or search..." />
@@ -49,10 +49,10 @@ export const usageCode = `<Command>
       <CommandItem>Settings</CommandItem>
     </CommandGroup>
   </CommandList>
-</Command>`;
+</Command>`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
 
 ## Examples
 
diff --git a/packages/ui/src/primitives/command/command.stories.tsx b/packages/ui/src/primitives/command/command.stories.tsx
index 8d7fe28d..1dc0daa0 100644
--- a/packages/ui/src/primitives/command/command.stories.tsx
+++ b/packages/ui/src/primitives/command/command.stories.tsx
@@ -1,5 +1,6 @@
-import type { ComponentProps } from 'react';
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react'
+
+import type { ComponentProps } from 'react'
 
 import {
   CalendarIcon,
@@ -8,8 +9,8 @@ import {
   GearIcon,
   PersonIcon,
   RocketIcon,
-} from '@radix-ui/react-icons';
-import { type Meta, type StoryObj } from '@storybook/react';
+} from '@radix-ui/react-icons'
+import { type Meta, type StoryObj } from '@storybook/react'
 
 import {
   Command,
@@ -21,23 +22,23 @@ import {
   CommandList,
   CommandSeparator,
   CommandShortcut,
-} from '.';
+} from '.'
 
 const meta: Meta<typeof Command> = {
   component: Command,
   render: (args) => (
-    <div className="mx-auto max-w-md pt-6">
-      <Command {...args} className="rounded-lg border shadow-md">
-        <CommandInput placeholder="Type a command or search..." />
+    <div className='mx-auto max-w-md pt-6'>
+      <Command {...args} className='rounded-lg border shadow-md'>
+        <CommandInput placeholder='Type a command or search...' />
         <CommandList>
           <CommandEmpty>No results found.</CommandEmpty>
-          <CommandGroup heading="Suggestions">
+          <CommandGroup heading='Suggestions'>
             <CommandItem>Calendar</CommandItem>
             <CommandItem>Search Emoji</CommandItem>
             <CommandItem>Calculator</CommandItem>
           </CommandGroup>
           <CommandSeparator />
-          <CommandGroup heading="Settings">
+          <CommandGroup heading='Settings'>
             <CommandItem>Profile</CommandItem>
             <CommandItem>Billing</CommandItem>
             <CommandItem>Settings</CommandItem>
@@ -46,70 +47,70 @@ const meta: Meta<typeof Command> = {
       </Command>
     </div>
   ),
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Command>;
+type Story = StoryObj<typeof Command>
 
-export const Default: Story = {};
+export const Default: Story = {}
 
 const DialogExample = (props: ComponentProps<typeof CommandDialog>) => {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(false)
 
   useEffect(() => {
     const down = (e: KeyboardEvent) => {
       if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault();
-        setOpen((open) => !open);
+        e.preventDefault()
+        setOpen((open) => !open)
       }
-    };
-    document.addEventListener('keydown', down);
+    }
+    document.addEventListener('keydown', down)
     return () => {
-      document.removeEventListener('keydown', down);
-    };
-  }, []);
+      document.removeEventListener('keydown', down)
+    }
+  }, [])
 
   return (
     <>
-      <p className="text-sm text-muted-foreground">
+      <p className='text-sm text-muted-foreground'>
         Press{' '}
-        <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
-          <span className="text-xs">⌘</span>K
+        <kbd className='pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100'>
+          <span className='text-xs'>⌘</span>K
         </kbd>
       </p>
       <CommandDialog {...props} open={open} onOpenChange={setOpen}>
-        <CommandInput placeholder="Type a command or search..." />
+        <CommandInput placeholder='Type a command or search...' />
         <CommandList>
           <CommandEmpty>No results found.</CommandEmpty>
-          <CommandGroup heading="Suggestions">
+          <CommandGroup heading='Suggestions'>
             <CommandItem>
-              <CalendarIcon className="mr-2 size-4" />
+              <CalendarIcon className='mr-2 size-4' />
               <span>Calendar</span>
             </CommandItem>
             <CommandItem>
-              <FaceIcon className="mr-2 size-4" />
+              <FaceIcon className='mr-2 size-4' />
               <span>Search Emoji</span>
             </CommandItem>
             <CommandItem>
-              <RocketIcon className="mr-2 size-4" />
+              <RocketIcon className='mr-2 size-4' />
               <span>Launch</span>
             </CommandItem>
           </CommandGroup>
           <CommandSeparator />
-          <CommandGroup heading="Settings">
+          <CommandGroup heading='Settings'>
             <CommandItem>
-              <PersonIcon className="mr-2 size-4" />
+              <PersonIcon className='mr-2 size-4' />
               <span>Profile</span>
               <CommandShortcut>⌘P</CommandShortcut>
             </CommandItem>
             <CommandItem>
-              <EnvelopeClosedIcon className="mr-2 size-4" />
+              <EnvelopeClosedIcon className='mr-2 size-4' />
               <span>Mail</span>
               <CommandShortcut>⌘B</CommandShortcut>
             </CommandItem>
             <CommandItem>
-              <GearIcon className="mr-2 size-4" />
+              <GearIcon className='mr-2 size-4' />
               <span>Settings</span>
               <CommandShortcut>⌘S</CommandShortcut>
             </CommandItem>
@@ -117,9 +118,9 @@ const DialogExample = (props: ComponentProps<typeof CommandDialog>) => {
         </CommandList>
       </CommandDialog>
     </>
-  );
-};
+  )
+}
 
 export const Dialog: Story = {
   render: (args) => <DialogExample {...args} />,
-};
+}
diff --git a/packages/ui/src/primitives/command/index.tsx b/packages/ui/src/primitives/command/index.tsx
index c5190926..3722b35f 100644
--- a/packages/ui/src/primitives/command/index.tsx
+++ b/packages/ui/src/primitives/command/index.tsx
@@ -1,13 +1,13 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
-import { type DialogProps } from '@radix-ui/react-dialog';
-import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
-import { Command as CommandPrimitive } from 'cmdk';
+import { type DialogProps } from '@radix-ui/react-dialog'
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons'
+import { Command as CommandPrimitive } from 'cmdk'
 
-import { Dialog, DialogContent } from '@/primitives/dialog';
-import { cn } from '@/utils/cn';
+import { Dialog, DialogContent } from '@/primitives/dialog'
+import { cn } from '@/utils/cn'
 
 const Command = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive>,
@@ -21,27 +21,27 @@ const Command = React.forwardRef<
     )}
     {...props}
   />
-));
-Command.displayName = CommandPrimitive.displayName;
+))
+Command.displayName = CommandPrimitive.displayName
 
-type CommandDialogProps = DialogProps;
+type CommandDialogProps = DialogProps
 
 const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0">
+      <DialogContent className='overflow-hidden p-0'>
         <Command>{children}</Command>
       </DialogContent>
     </Dialog>
-  );
-};
+  )
+}
 
 const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3">
-    <MagnifyingGlassIcon className="mr-2 size-4 shrink-0 opacity-50" />
+  <div className='flex items-center border-b px-3'>
+    <MagnifyingGlassIcon className='mr-2 size-4 shrink-0 opacity-50' />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
@@ -51,9 +51,9 @@ const CommandInput = React.forwardRef<
       {...props}
     />
   </div>
-));
+))
 
-CommandInput.displayName = CommandPrimitive.Input.displayName;
+CommandInput.displayName = CommandPrimitive.Input.displayName
 
 const CommandList = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.List>,
@@ -64,9 +64,9 @@ const CommandList = React.forwardRef<
     className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
     {...props}
   />
-));
+))
 
-CommandList.displayName = CommandPrimitive.List.displayName;
+CommandList.displayName = CommandPrimitive.List.displayName
 
 const CommandEmpty = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Empty>,
@@ -74,12 +74,12 @@ const CommandEmpty = React.forwardRef<
 >((props, ref) => (
   <CommandPrimitive.Empty
     ref={ref}
-    className="py-6 text-center text-sm"
+    className='py-6 text-center text-sm'
     {...props}
   />
-));
+))
 
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
 
 const CommandGroup = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Group>,
@@ -93,9 +93,9 @@ const CommandGroup = React.forwardRef<
     )}
     {...props}
   />
-));
+))
 
-CommandGroup.displayName = CommandPrimitive.Group.displayName;
+CommandGroup.displayName = CommandPrimitive.Group.displayName
 
 const CommandSeparator = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Separator>,
@@ -106,8 +106,8 @@ const CommandSeparator = React.forwardRef<
     className={cn('-mx-1 h-px bg-border', className)}
     {...props}
   />
-));
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
 
 const CommandItem = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Item>,
@@ -121,9 +121,9 @@ const CommandItem = React.forwardRef<
     )}
     {...props}
   />
-));
+))
 
-CommandItem.displayName = CommandPrimitive.Item.displayName;
+CommandItem.displayName = CommandPrimitive.Item.displayName
 
 const CommandShortcut = ({
   className,
@@ -137,9 +137,9 @@ const CommandShortcut = ({
       )}
       {...props}
     />
-  );
-};
-CommandShortcut.displayName = 'CommandShortcut';
+  )
+}
+CommandShortcut.displayName = 'CommandShortcut'
 
 export {
   Command,
@@ -151,4 +151,4 @@ export {
   CommandItem,
   CommandShortcut,
   CommandSeparator,
-};
+}
diff --git a/packages/ui/src/primitives/context-menu/context-menu.mdx b/packages/ui/src/primitives/context-menu/context-menu.mdx
index f5c89862..d639bb13 100644
--- a/packages/ui/src/primitives/context-menu/context-menu.mdx
+++ b/packages/ui/src/primitives/context-menu/context-menu.mdx
@@ -1,11 +1,11 @@
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks'
 
-import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
-import * as ContextMenuStories from './context-menu.stories';
+import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
+import * as ContextMenuStories from './context-menu.stories'
 
 <Meta of={ContextMenuStories} />
 
-<RadixPrimitiveDocsButton name="context-menu" />
+<RadixPrimitiveDocsButton name='context-menu' />
 
 # Context Menu
 
@@ -22,7 +22,7 @@ export const importCode = `import {
   ContextMenuContent,
   ContextMenuItem,
   ContextMenuTrigger,
-} from "@orbitkit/ui/context-menu";`;
+} from "@orbitkit/ui/context-menu";`
 
 export const usageCode = `<ContextMenu>
   <ContextMenuTrigger>Right click</ContextMenuTrigger>
@@ -32,7 +32,7 @@ export const usageCode = `<ContextMenu>
     <ContextMenuItem>Team</ContextMenuItem>
     <ContextMenuItem>Subscription</ContextMenuItem>
   </ContextMenuContent>
-</ContextMenu>`;
+</ContextMenu>`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
diff --git a/packages/ui/src/primitives/context-menu/context-menu.stories.tsx b/packages/ui/src/primitives/context-menu/context-menu.stories.tsx
index 2b791dad..0ccef3a9 100644
--- a/packages/ui/src/primitives/context-menu/context-menu.stories.tsx
+++ b/packages/ui/src/primitives/context-menu/context-menu.stories.tsx
@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react'
 
 import {
   ContextMenu,
@@ -14,23 +14,23 @@ import {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
-} from '.';
+} from '.'
 
 const meta: Meta<typeof ContextMenu> = {
   component: ContextMenu,
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof ContextMenu>;
+type Story = StoryObj<typeof ContextMenu>
 
 export const Default: Story = {
   render: (args) => (
     <ContextMenu {...args}>
-      <ContextMenuTrigger className="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
+      <ContextMenuTrigger className='flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm'>
         Right click here
       </ContextMenuTrigger>
-      <ContextMenuContent className="w-64">
+      <ContextMenuContent className='w-64'>
         <ContextMenuItem inset>
           Back
           <ContextMenuShortcut>⌘[</ContextMenuShortcut>
@@ -45,7 +45,7 @@ export const Default: Story = {
         </ContextMenuItem>
         <ContextMenuSub>
           <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
-          <ContextMenuSubContent className="w-48">
+          <ContextMenuSubContent className='w-48'>
             <ContextMenuItem>
               Save Page As...
               <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
@@ -63,15 +63,15 @@ export const Default: Story = {
         </ContextMenuCheckboxItem>
         <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
         <ContextMenuSeparator />
-        <ContextMenuRadioGroup value="pedro">
+        <ContextMenuRadioGroup value='pedro'>
           <ContextMenuLabel inset>People</ContextMenuLabel>
           <ContextMenuSeparator />
-          <ContextMenuRadioItem value="pedro">
+          <ContextMenuRadioItem value='pedro'>
             Pedro Duarte
           </ContextMenuRadioItem>
-          <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
+          <ContextMenuRadioItem value='colm'>Colm Tuite</ContextMenuRadioItem>
         </ContextMenuRadioGroup>
       </ContextMenuContent>
     </ContextMenu>
   ),
-};
+}
diff --git a/packages/ui/src/primitives/context-menu/index.tsx b/packages/ui/src/primitives/context-menu/index.tsx
index f9e15515..e09aabe3 100644
--- a/packages/ui/src/primitives/context-menu/index.tsx
+++ b/packages/ui/src/primitives/context-menu/index.tsx
@@ -1,32 +1,32 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
-import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu'
 import {
   CheckIcon,
   ChevronRightIcon,
   DotFilledIcon,
-} from '@radix-ui/react-icons';
+} from '@radix-ui/react-icons'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
-const ContextMenu = ContextMenuPrimitive.Root;
+const ContextMenu = ContextMenuPrimitive.Root
 
-const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
 
-const ContextMenuGroup = ContextMenuPrimitive.Group;
+const ContextMenuGroup = ContextMenuPrimitive.Group
 
-const ContextMenuPortal = ContextMenuPrimitive.Portal;
+const ContextMenuPortal = ContextMenuPrimitive.Portal
 
-const ContextMenuSub = ContextMenuPrimitive.Sub;
+const ContextMenuSub = ContextMenuPrimitive.Sub
 
-const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
 
 const ContextMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
+    inset?: boolean
   }
 >(({ className, inset, children, ...props }, ref) => (
   <ContextMenuPrimitive.SubTrigger
@@ -39,10 +39,10 @@ const ContextMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRightIcon className="ml-auto size-4" />
+    <ChevronRightIcon className='ml-auto size-4' />
   </ContextMenuPrimitive.SubTrigger>
-));
-ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
 
 const ContextMenuSubContent = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
@@ -56,8 +56,8 @@ const ContextMenuSubContent = React.forwardRef<
     )}
     {...props}
   />
-));
-ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
 
 const ContextMenuContent = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Content>,
@@ -73,13 +73,13 @@ const ContextMenuContent = React.forwardRef<
       {...props}
     />
   </ContextMenuPrimitive.Portal>
-));
-ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
 
 const ContextMenuItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
-    inset?: boolean;
+    inset?: boolean
   }
 >(({ className, inset, ...props }, ref) => (
   <ContextMenuPrimitive.Item
@@ -91,8 +91,8 @@ const ContextMenuItem = React.forwardRef<
     )}
     {...props}
   />
-));
-ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
 
 const ContextMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
@@ -107,16 +107,16 @@ const ContextMenuCheckboxItem = React.forwardRef<
     checked={checked ?? false}
     {...props}
   >
-    <span className="absolute left-2 flex size-3.5 items-center justify-center">
+    <span className='absolute left-2 flex size-3.5 items-center justify-center'>
       <ContextMenuPrimitive.ItemIndicator>
-        <CheckIcon className="size-4" />
+        <CheckIcon className='size-4' />
       </ContextMenuPrimitive.ItemIndicator>
     </span>
     {children}
   </ContextMenuPrimitive.CheckboxItem>
-));
+))
 ContextMenuCheckboxItem.displayName =
-  ContextMenuPrimitive.CheckboxItem.displayName;
+  ContextMenuPrimitive.CheckboxItem.displayName
 
 const ContextMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
@@ -130,20 +130,20 @@ const ContextMenuRadioItem = React.forwardRef<
     )}
     {...props}
   >
-    <span className="absolute left-2 flex size-3.5 items-center justify-center">
+    <span className='absolute left-2 flex size-3.5 items-center justify-center'>
       <ContextMenuPrimitive.ItemIndicator>
-        <DotFilledIcon className="size-4 fill-current" />
+        <DotFilledIcon className='size-4 fill-current' />
       </ContextMenuPrimitive.ItemIndicator>
     </span>
     {children}
   </ContextMenuPrimitive.RadioItem>
-));
-ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
 
 const ContextMenuLabel = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
-    inset?: boolean;
+    inset?: boolean
   }
 >(({ className, inset, ...props }, ref) => (
   <ContextMenuPrimitive.Label
@@ -155,8 +155,8 @@ const ContextMenuLabel = React.forwardRef<
     )}
     {...props}
   />
-));
-ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
 
 const ContextMenuSeparator = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Separator>,
@@ -167,8 +167,8 @@ const ContextMenuSeparator = React.forwardRef<
     className={cn('-mx-1 my-1 h-px bg-border', className)}
     {...props}
   />
-));
-ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
 
 const ContextMenuShortcut = ({
   className,
@@ -182,9 +182,9 @@ const ContextMenuShortcut = ({
       )}
       {...props}
     />
-  );
-};
-ContextMenuShortcut.displayName = 'ContextMenuShortcut';
+  )
+}
+ContextMenuShortcut.displayName = 'ContextMenuShortcut'
 
 export {
   ContextMenu,
@@ -202,4 +202,4 @@ export {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuRadioGroup,
-};
+}
diff --git a/packages/ui/src/primitives/dialog/dialog.mdx b/packages/ui/src/primitives/dialog/dialog.mdx
index d6544ee8..b6c0cde5 100644
--- a/packages/ui/src/primitives/dialog/dialog.mdx
+++ b/packages/ui/src/primitives/dialog/dialog.mdx
@@ -1,11 +1,11 @@
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks'
 
-import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
-import * as DialogStories from './dialog.stories';
+import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
+import * as DialogStories from './dialog.stories'
 
 <Meta of={DialogStories} />
 
-<RadixPrimitiveDocsButton name="dialog" />
+<RadixPrimitiveDocsButton name='dialog' />
 
 # Dialog
 
@@ -24,7 +24,7 @@ export const importCode = `import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@orbitkit/ui/dialog";`;
+} from "@orbitkit/ui/dialog";`
 
 export const usageCode = `<Dialog>
   <DialogTrigger>Open</DialogTrigger>
@@ -37,10 +37,10 @@ export const usageCode = `<Dialog>
       </DialogDescription>
     </DialogHeader>
   </DialogContent>
-</Dialog>`;
+</Dialog>`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
 
 ## Examples
 
diff --git a/packages/ui/src/primitives/dialog/dialog.stories.tsx b/packages/ui/src/primitives/dialog/dialog.stories.tsx
index c8bcf1f1..87282432 100644
--- a/packages/ui/src/primitives/dialog/dialog.stories.tsx
+++ b/packages/ui/src/primitives/dialog/dialog.stories.tsx
@@ -1,9 +1,9 @@
-import { CopyIcon } from '@radix-ui/react-icons';
-import { type Meta, type StoryObj } from '@storybook/react';
+import { CopyIcon } from '@radix-ui/react-icons'
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { Button } from '@/primitives/button';
-import { Input } from '@/primitives/input';
-import { Label } from '@/primitives/label';
+import { Button } from '@/primitives/button'
+import { Input } from '@/primitives/input'
+import { Label } from '@/primitives/label'
 
 import {
   Dialog,
@@ -14,82 +14,82 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from '.';
+} from '.'
 
 const meta: Meta<typeof Dialog> = {
   component: Dialog,
   render: (args) => (
     <Dialog {...args}>
       <DialogTrigger asChild>
-        <Button variant="outline">Edit Profile</Button>
+        <Button variant='outline'>Edit Profile</Button>
       </DialogTrigger>
-      <DialogContent className="sm:max-w-[425px]">
+      <DialogContent className='sm:max-w-[425px]'>
         <DialogHeader>
           <DialogTitle>Edit profile</DialogTitle>
           <DialogDescription>
             Make changes to your profile here. Click save when you&apos;re done.
           </DialogDescription>
         </DialogHeader>
-        <div className="grid gap-4 py-4">
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="name" className="text-right">
+        <div className='grid gap-4 py-4'>
+          <div className='grid grid-cols-4 items-center gap-4'>
+            <Label htmlFor='name' className='text-right'>
               Name
             </Label>
-            <Input id="name" value="Pedro Duarte" className="col-span-3" />
+            <Input id='name' value='Pedro Duarte' className='col-span-3' />
           </div>
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="username" className="text-right">
+          <div className='grid grid-cols-4 items-center gap-4'>
+            <Label htmlFor='username' className='text-right'>
               Username
             </Label>
-            <Input id="username" value="@peduarte" className="col-span-3" />
+            <Input id='username' value='@peduarte' className='col-span-3' />
           </div>
         </div>
         <DialogFooter>
-          <Button type="submit">Save changes</Button>
+          <Button type='submit'>Save changes</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
   ),
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Dialog>;
+type Story = StoryObj<typeof Dialog>
 
-export const Default: Story = {};
+export const Default: Story = {}
 
 export const CustomCloseButton: Story = {
   render: (args) => (
     <Dialog {...args}>
       <DialogTrigger asChild>
-        <Button variant="outline">Share</Button>
+        <Button variant='outline'>Share</Button>
       </DialogTrigger>
-      <DialogContent className="sm:max-w-md">
+      <DialogContent className='sm:max-w-md'>
         <DialogHeader>
           <DialogTitle>Share link</DialogTitle>
           <DialogDescription>
             Anyone who has this link will be able to view this.
           </DialogDescription>
         </DialogHeader>
-        <div className="flex items-center space-x-2">
-          <div className="grid flex-1 gap-2">
-            <Label htmlFor="link" className="sr-only">
+        <div className='flex items-center space-x-2'>
+          <div className='grid flex-1 gap-2'>
+            <Label htmlFor='link' className='sr-only'>
               Link
             </Label>
             <Input
-              id="link"
-              defaultValue="https://ui.shadcn.com/docs/installation"
+              id='link'
+              defaultValue='https://ui.shadcn.com/docs/installation'
               readOnly
             />
           </div>
-          <Button type="submit" size="sm" className="px-3">
-            <span className="sr-only">Copy</span>
-            <CopyIcon className="size-4" />
+          <Button type='submit' size='sm' className='px-3'>
+            <span className='sr-only'>Copy</span>
+            <CopyIcon className='size-4' />
           </Button>
         </div>
-        <DialogFooter className="sm:justify-start">
+        <DialogFooter className='sm:justify-start'>
           <DialogClose asChild>
-            <Button type="button" variant="outline">
+            <Button type='button' variant='outline'>
               Close
             </Button>
           </DialogClose>
@@ -97,4 +97,4 @@ export const CustomCloseButton: Story = {
       </DialogContent>
     </Dialog>
   ),
-};
+}
diff --git a/packages/ui/src/primitives/dialog/index.tsx b/packages/ui/src/primitives/dialog/index.tsx
index 8c9aa97e..133fd262 100644
--- a/packages/ui/src/primitives/dialog/index.tsx
+++ b/packages/ui/src/primitives/dialog/index.tsx
@@ -1,19 +1,19 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { Cross2Icon } from '@radix-ui/react-icons';
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { Cross2Icon } from '@radix-ui/react-icons'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
-const Dialog = DialogPrimitive.Root;
+const Dialog = DialogPrimitive.Root
 
-const DialogTrigger = DialogPrimitive.Trigger;
+const DialogTrigger = DialogPrimitive.Trigger
 
-const DialogPortal = DialogPrimitive.Portal;
+const DialogPortal = DialogPrimitive.Portal
 
-const DialogClose = DialogPrimitive.Close;
+const DialogClose = DialogPrimitive.Close
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -27,8 +27,8 @@ const DialogOverlay = React.forwardRef<
     )}
     {...props}
   />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
@@ -45,14 +45,14 @@ const DialogContent = React.forwardRef<
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-3 top-3 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <Cross2Icon className="size-4" />
-        <span className="sr-only">Close</span>
+      <DialogPrimitive.Close className='absolute right-3 top-3 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground'>
+        <Cross2Icon className='size-4' />
+        <span className='sr-only'>Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
 
 const DialogHeader = ({
   className,
@@ -65,8 +65,8 @@ const DialogHeader = ({
     )}
     {...props}
   />
-);
-DialogHeader.displayName = 'DialogHeader';
+)
+DialogHeader.displayName = 'DialogHeader'
 
 const DialogFooter = ({
   className,
@@ -79,8 +79,8 @@ const DialogFooter = ({
     )}
     {...props}
   />
-);
-DialogFooter.displayName = 'DialogFooter';
+)
+DialogFooter.displayName = 'DialogFooter'
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -94,8 +94,8 @@ const DialogTitle = React.forwardRef<
     )}
     {...props}
   />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -106,8 +106,8 @@ const DialogDescription = React.forwardRef<
     className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
 
 export {
   Dialog,
@@ -120,4 +120,4 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
-};
+}
diff --git a/packages/ui/src/primitives/drawer/drawer.mdx b/packages/ui/src/primitives/drawer/drawer.mdx
index 67708fb3..19a0f791 100644
--- a/packages/ui/src/primitives/drawer/drawer.mdx
+++ b/packages/ui/src/primitives/drawer/drawer.mdx
@@ -1,11 +1,11 @@
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks'
 
-import { PrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
-import * as DrawerStories from './drawer.stories';
+import { PrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
+import * as DrawerStories from './drawer.stories'
 
 <Meta of={DrawerStories} />
 
-<PrimitiveDocsButton docsUrl="https://github.com/emilkowalski/vaul" />
+<PrimitiveDocsButton docsUrl='https://github.com/emilkowalski/vaul' />
 
 # Drawer
 
@@ -26,7 +26,7 @@ export const importCode = `import {
   DrawerHeader,
   DrawerTitle,
   DrawerTrigger,
-} from "@orbitkit/ui/drawer";`;
+} from "@orbitkit/ui/drawer";`
 
 export const usageCode = `<Drawer>
   <DrawerTrigger>Open</DrawerTrigger>
@@ -42,7 +42,7 @@ export const usageCode = `<Drawer>
       </DrawerClose>
     </DrawerFooter>
   </DrawerContent>
-</Drawer>`;
+</Drawer>`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
diff --git a/packages/ui/src/primitives/drawer/drawer.stories.tsx b/packages/ui/src/primitives/drawer/drawer.stories.tsx
index c17386a1..d20d5243 100644
--- a/packages/ui/src/primitives/drawer/drawer.stories.tsx
+++ b/packages/ui/src/primitives/drawer/drawer.stories.tsx
@@ -1,6 +1,6 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { Button } from '@/primitives/button';
+import { Button } from '@/primitives/button'
 
 import {
   Drawer,
@@ -11,7 +11,7 @@ import {
   DrawerHeader,
   DrawerTitle,
   DrawerTrigger,
-} from '.';
+} from '.'
 
 const meta: Meta<typeof Drawer> = {
   component: Drawer,
@@ -26,16 +26,16 @@ const meta: Meta<typeof Drawer> = {
         <DrawerFooter>
           <Button>Submit</Button>
           <DrawerClose asChild>
-            <Button variant="outline">Cancel</Button>
+            <Button variant='outline'>Cancel</Button>
           </DrawerClose>
         </DrawerFooter>
       </DrawerContent>
     </Drawer>
   ),
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Drawer>;
+type Story = StoryObj<typeof Drawer>
 
-export const Default: Story = {};
+export const Default: Story = {}
diff --git a/packages/ui/src/primitives/drawer/index.tsx b/packages/ui/src/primitives/drawer/index.tsx
index df1a4496..4223f6bb 100644
--- a/packages/ui/src/primitives/drawer/index.tsx
+++ b/packages/ui/src/primitives/drawer/index.tsx
@@ -1,12 +1,12 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
-import { Drawer as DrawerPrimitive } from 'vaul';
+import { Drawer as DrawerPrimitive } from 'vaul'
 
-import type {} from '@radix-ui/react-dialog';
+import type {} from '@radix-ui/react-dialog'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
 const Drawer = ({
   shouldScaleBackground = true,
@@ -16,14 +16,14 @@ const Drawer = ({
     shouldScaleBackground={shouldScaleBackground}
     {...props}
   />
-);
-Drawer.displayName = 'Drawer';
+)
+Drawer.displayName = 'Drawer'
 
-const DrawerTrigger = DrawerPrimitive.Trigger;
+const DrawerTrigger = DrawerPrimitive.Trigger
 
-const DrawerPortal = DrawerPrimitive.Portal;
+const DrawerPortal = DrawerPrimitive.Portal
 
-const DrawerClose = DrawerPrimitive.Close;
+const DrawerClose = DrawerPrimitive.Close
 
 const DrawerOverlay = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Overlay>,
@@ -34,8 +34,8 @@ const DrawerOverlay = React.forwardRef<
     className={cn('fixed inset-0 z-50 bg-black/80', className)}
     {...props}
   />
-));
-DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
 
 const DrawerContent = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Content>,
@@ -51,12 +51,12 @@ const DrawerContent = React.forwardRef<
       )}
       {...props}
     >
-      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      <div className='mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted' />
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>
-));
-DrawerContent.displayName = 'DrawerContent';
+))
+DrawerContent.displayName = 'DrawerContent'
 
 const DrawerHeader = ({
   className,
@@ -66,8 +66,8 @@ const DrawerHeader = ({
     className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)}
     {...props}
   />
-);
-DrawerHeader.displayName = 'DrawerHeader';
+)
+DrawerHeader.displayName = 'DrawerHeader'
 
 const DrawerFooter = ({
   className,
@@ -77,8 +77,8 @@ const DrawerFooter = ({
     className={cn('mt-auto flex flex-col gap-2 p-4', className)}
     {...props}
   />
-);
-DrawerFooter.displayName = 'DrawerFooter';
+)
+DrawerFooter.displayName = 'DrawerFooter'
 
 const DrawerTitle = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Title>,
@@ -92,8 +92,8 @@ const DrawerTitle = React.forwardRef<
     )}
     {...props}
   />
-));
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
 
 const DrawerDescription = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Description>,
@@ -104,8 +104,8 @@ const DrawerDescription = React.forwardRef<
     className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
-));
-DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
 
 export {
   Drawer,
@@ -118,4 +118,4 @@ export {
   DrawerFooter,
   DrawerTitle,
   DrawerDescription,
-};
+}
diff --git a/packages/ui/src/primitives/dropdown-menu/dropdown-menu.mdx b/packages/ui/src/primitives/dropdown-menu/dropdown-menu.mdx
index d66377c3..452baaef 100644
--- a/packages/ui/src/primitives/dropdown-menu/dropdown-menu.mdx
+++ b/packages/ui/src/primitives/dropdown-menu/dropdown-menu.mdx
@@ -1,11 +1,11 @@
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks'
 
-import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
-import * as DropdownMenuStories from './dropdown-menu.stories';
+import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
+import * as DropdownMenuStories from './dropdown-menu.stories'
 
 <Meta of={DropdownMenuStories} />
 
-<RadixPrimitiveDocsButton name="dropdown-menu" />
+<RadixPrimitiveDocsButton name='dropdown-menu' />
 
 # Dropdown Menu
 
@@ -24,7 +24,7 @@ export const importCode = `import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@orbitkit/ui/dropdown-menu";`;
+} from "@orbitkit/ui/dropdown-menu";`
 
 export const usageCode = `<DropdownMenu>
   <DropdownMenuTrigger>Open</DropdownMenuTrigger>
@@ -36,10 +36,10 @@ export const usageCode = `<DropdownMenu>
     <DropdownMenuItem>Team</DropdownMenuItem>
     <DropdownMenuItem>Subscription</DropdownMenuItem>
   </DropdownMenuContent>
-</DropdownMenu>`;
+</DropdownMenu>`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
 
 ## Examples
 
diff --git a/packages/ui/src/primitives/dropdown-menu/dropdown-menu.stories.tsx b/packages/ui/src/primitives/dropdown-menu/dropdown-menu.stories.tsx
index f899b59a..11904a5d 100644
--- a/packages/ui/src/primitives/dropdown-menu/dropdown-menu.stories.tsx
+++ b/packages/ui/src/primitives/dropdown-menu/dropdown-menu.stories.tsx
@@ -1,8 +1,9 @@
-import type { ComponentProps } from 'react';
-import { useState } from 'react';
+import { useState } from 'react'
 
-import { type DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu';
-import { type Meta, type StoryObj } from '@storybook/react';
+import type { ComponentProps } from 'react'
+
+import { type DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu'
+import { type Meta, type StoryObj } from '@storybook/react'
 
 import {
   DropdownMenu,
@@ -20,17 +21,17 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from '.';
-import { Button } from '../button';
+} from '.'
+import { Button } from '../button'
 
 const meta: Meta<typeof DropdownMenu> = {
   component: DropdownMenu,
   render: (args) => (
     <DropdownMenu {...args}>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline">Open</Button>
+        <Button variant='outline'>Open</Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56">
+      <DropdownMenuContent className='w-56'>
         <DropdownMenuLabel>My Account</DropdownMenuLabel>
         <DropdownMenuSeparator />
         <DropdownMenuGroup>
@@ -82,27 +83,27 @@ const meta: Meta<typeof DropdownMenu> = {
       </DropdownMenuContent>
     </DropdownMenu>
   ),
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof DropdownMenu>;
+type Story = StoryObj<typeof DropdownMenu>
 
-export const Default: Story = {};
+export const Default: Story = {}
 
-type Checked = DropdownMenuCheckboxItemProps['checked'];
+type Checked = DropdownMenuCheckboxItemProps['checked']
 
 const CheckboxesExample = (props: ComponentProps<typeof DropdownMenu>) => {
-  const [showStatusBar, setShowStatusBar] = useState<Checked>(true);
-  const [showActivityBar, setShowActivityBar] = useState<Checked>(false);
-  const [showPanel, setShowPanel] = useState<Checked>(false);
+  const [showStatusBar, setShowStatusBar] = useState<Checked>(true)
+  const [showActivityBar, setShowActivityBar] = useState<Checked>(false)
+  const [showPanel, setShowPanel] = useState<Checked>(false)
 
   return (
     <DropdownMenu {...props}>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline">Open</Button>
+        <Button variant='outline'>Open</Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56">
+      <DropdownMenuContent className='w-56'>
         <DropdownMenuLabel>Appearance</DropdownMenuLabel>
         <DropdownMenuSeparator />
         <DropdownMenuCheckboxItem
@@ -126,34 +127,34 @@ const CheckboxesExample = (props: ComponentProps<typeof DropdownMenu>) => {
         </DropdownMenuCheckboxItem>
       </DropdownMenuContent>
     </DropdownMenu>
-  );
-};
+  )
+}
 
 export const Checkboxes: Story = {
   render: (args) => <CheckboxesExample {...args} />,
-};
+}
 
 const RadioGroupExample = (props: ComponentProps<typeof DropdownMenu>) => {
-  const [position, setPosition] = useState('bottom');
+  const [position, setPosition] = useState('bottom')
 
   return (
     <DropdownMenu {...props}>
       <DropdownMenuTrigger asChild>
-        <Button variant="outline">Open</Button>
+        <Button variant='outline'>Open</Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="w-56">
+      <DropdownMenuContent className='w-56'>
         <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
         <DropdownMenuSeparator />
         <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
-          <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
-          <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
-          <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value='top'>Top</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value='bottom'>Bottom</DropdownMenuRadioItem>
+          <DropdownMenuRadioItem value='right'>Right</DropdownMenuRadioItem>
         </DropdownMenuRadioGroup>
       </DropdownMenuContent>
     </DropdownMenu>
-  );
-};
+  )
+}
 
 export const RadioGroup: Story = {
   render: (args) => <RadioGroupExample {...args} />,
-};
+}
diff --git a/packages/ui/src/primitives/dropdown-menu/index.tsx b/packages/ui/src/primitives/dropdown-menu/index.tsx
index 9441efac..8b6dc6a2 100644
--- a/packages/ui/src/primitives/dropdown-menu/index.tsx
+++ b/packages/ui/src/primitives/dropdown-menu/index.tsx
@@ -1,32 +1,32 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import {
   CheckIcon,
   ChevronRightIcon,
   DotFilledIcon,
-} from '@radix-ui/react-icons';
+} from '@radix-ui/react-icons'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
-const DropdownMenu = DropdownMenuPrimitive.Root;
+const DropdownMenu = DropdownMenuPrimitive.Root
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
+    inset?: boolean
   }
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
@@ -39,11 +39,11 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRightIcon className="ml-auto size-4" />
+    <ChevronRightIcon className='ml-auto size-4' />
   </DropdownMenuPrimitive.SubTrigger>
-));
+))
 DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName;
+  DropdownMenuPrimitive.SubTrigger.displayName
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -57,9 +57,9 @@ const DropdownMenuSubContent = React.forwardRef<
     )}
     {...props}
   />
-));
+))
 DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName;
+  DropdownMenuPrimitive.SubContent.displayName
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -77,13 +77,13 @@ const DropdownMenuContent = React.forwardRef<
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
+    inset?: boolean
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
@@ -95,8 +95,8 @@ const DropdownMenuItem = React.forwardRef<
     )}
     {...props}
   />
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@@ -111,16 +111,16 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex size-3.5 items-center justify-center">
+    <span className='absolute left-2 flex size-3.5 items-center justify-center'>
       <DropdownMenuPrimitive.ItemIndicator>
-        <CheckIcon className="size-4" />
+        <CheckIcon className='size-4' />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-));
+))
 DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName;
+  DropdownMenuPrimitive.CheckboxItem.displayName
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -134,20 +134,20 @@ const DropdownMenuRadioItem = React.forwardRef<
     )}
     {...props}
   >
-    <span className="absolute left-2 flex size-3.5 items-center justify-center">
+    <span className='absolute left-2 flex size-3.5 items-center justify-center'>
       <DropdownMenuPrimitive.ItemIndicator>
-        <DotFilledIcon className="size-4 fill-current" />
+        <DotFilledIcon className='size-4 fill-current' />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
 
 const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
+    inset?: boolean
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
@@ -159,8 +159,8 @@ const DropdownMenuLabel = React.forwardRef<
     )}
     {...props}
   />
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
 
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@@ -171,8 +171,8 @@ const DropdownMenuSeparator = React.forwardRef<
     className={cn('-mx-1 my-1 h-px bg-muted', className)}
     {...props}
   />
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
 
 const DropdownMenuShortcut = ({
   className,
@@ -183,9 +183,9 @@ const DropdownMenuShortcut = ({
       className={cn('ml-auto text-xs tracking-widest opacity-60', className)}
       {...props}
     />
-  );
-};
-DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+  )
+}
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
 
 export {
   DropdownMenu,
@@ -203,4 +203,4 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuRadioGroup,
-};
+}
diff --git a/packages/ui/src/primitives/form/form.stories.tsx b/packages/ui/src/primitives/form/form.stories.tsx
index 21e2ad8e..3b256fe1 100644
--- a/packages/ui/src/primitives/form/form.stories.tsx
+++ b/packages/ui/src/primitives/form/form.stories.tsx
@@ -1,13 +1,14 @@
-import type { ComponentProps } from 'react';
-import { useState } from 'react';
+import { useState } from 'react'
 
-import { zodResolver } from '@hookform/resolvers/zod';
-import { type Meta, type StoryObj } from '@storybook/react';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
+import type { ComponentProps } from 'react'
 
-import { Button } from '@/primitives/button';
-import { Input } from '@/primitives/input';
+import { zodResolver } from '@hookform/resolvers/zod'
+import { type Meta, type StoryObj } from '@storybook/react'
+import { useForm } from 'react-hook-form'
+import { z } from 'zod'
+
+import { Button } from '@/primitives/button'
+import { Input } from '@/primitives/input'
 
 import {
   Form,
@@ -17,42 +18,42 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from '.';
-import { Typography } from '../typography';
+} from '.'
+import { Typography } from '../typography'
 
 const formSchema = z.object({
   username: z.string().min(2).max(50),
-});
+})
 
 const FormExample = (props: ComponentProps<typeof Form>) => {
-  const [username, setUsername] = useState('');
+  const [username, setUsername] = useState('')
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
       username: '',
     },
-  });
+  })
 
   /**
    * Handles the form submission.
    * @param values The form values.
    */
   function onSubmit(values: z.infer<typeof formSchema>) {
-    console.log(values);
-    setUsername(values.username);
+    console.log(values)
+    setUsername(values.username)
   }
 
   return (
     <Form {...props} {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+      <form onSubmit={form.handleSubmit(onSubmit)} className='space-y-8'>
         <FormField
           control={form.control}
-          name="username"
+          name='username'
           render={({ field }) => (
             <FormItem>
               <FormLabel>Username</FormLabel>
               <FormControl>
-                <Input placeholder="shadcn" {...field} />
+                <Input placeholder='shadcn' {...field} />
               </FormControl>
               <FormDescription>
                 This is your public display name.
@@ -61,26 +62,26 @@ const FormExample = (props: ComponentProps<typeof Form>) => {
             </FormItem>
           )}
         />
-        <Button type="submit">Submit</Button>
+        <Button type='submit'>Submit</Button>
       </form>
       {username && (
-        <Typography variant="muted" className="mt-6">
+        <Typography variant='muted' className='mt-6'>
           You have submitted: {username}
         </Typography>
       )}
     </Form>
-  );
-};
+  )
+}
 
 const meta: Meta<typeof Form> = {
   component: Form,
   render: (args) => {
-    return <FormExample {...args} />;
+    return <FormExample {...args} />
   },
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Form>;
+type Story = StoryObj<typeof Form>
 
-export const Default: Story = {};
+export const Default: Story = {}
diff --git a/packages/ui/src/primitives/form/index.tsx b/packages/ui/src/primitives/form/index.tsx
index 8ea9cccf..47227b91 100644
--- a/packages/ui/src/primitives/form/index.tsx
+++ b/packages/ui/src/primitives/form/index.tsx
@@ -1,28 +1,28 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
-import type * as LabelPrimitive from '@radix-ui/react-label';
-import type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
+import type * as LabelPrimitive from '@radix-ui/react-label'
+import type { ControllerProps, FieldPath, FieldValues } from 'react-hook-form'
 
-import { Slot } from '@radix-ui/react-slot';
-import { Controller, FormProvider, useFormContext } from 'react-hook-form';
+import { Slot } from '@radix-ui/react-slot'
+import { Controller, FormProvider, useFormContext } from 'react-hook-form'
 
-import { Label } from '@/primitives/label';
-import { cn } from '@/utils/cn';
+import { Label } from '@/primitives/label'
+import { cn } from '@/utils/cn'
 
-const Form = FormProvider;
+const Form = FormProvider
 
 interface FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > {
-  name: TName;
+  name: TName
 }
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
   {} as FormFieldContextValue,
-);
+)
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
@@ -34,22 +34,22 @@ const FormField = <
     <FormFieldContext.Provider value={{ name: props.name }}>
       <Controller {...props} />
     </FormFieldContext.Provider>
-  );
-};
+  )
+}
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext();
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
 
-  const fieldState = getFieldState(fieldContext.name, formState);
+  const fieldState = getFieldState(fieldContext.name, formState)
 
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   if (!fieldContext) {
-    throw new Error('useFormField should be used within <FormField>');
+    throw new Error('useFormField should be used within <FormField>')
   }
 
-  const { id } = itemContext;
+  const { id } = itemContext
 
   return {
     id,
@@ -58,36 +58,36 @@ const useFormField = () => {
     formDescriptionId: `${id}-form-item-description`,
     formMessageId: `${id}-form-item-message`,
     ...fieldState,
-  };
-};
+  }
+}
 
 interface FormItemContextValue {
-  id: string;
+  id: string
 }
 
 const FormItemContext = React.createContext<FormItemContextValue>(
   {} as FormItemContextValue,
-);
+)
 
 const FormItem = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const id = React.useId();
+  const id = React.useId()
 
   return (
     <FormItemContext.Provider value={{ id }}>
       <div ref={ref} className={cn('space-y-2', className)} {...props} />
     </FormItemContext.Provider>
-  );
-});
-FormItem.displayName = 'FormItem';
+  )
+})
+FormItem.displayName = 'FormItem'
 
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField();
+  const { error, formItemId } = useFormField()
 
   return (
     <Label
@@ -96,16 +96,15 @@ const FormLabel = React.forwardRef<
       htmlFor={formItemId}
       {...props}
     />
-  );
-});
-FormLabel.displayName = 'FormLabel';
+  )
+})
+FormLabel.displayName = 'FormLabel'
 
 const FormControl = React.forwardRef<
   React.ElementRef<typeof Slot>,
   React.ComponentPropsWithoutRef<typeof Slot>
 >(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } =
-    useFormField();
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
 
   return (
     <Slot
@@ -117,15 +116,15 @@ const FormControl = React.forwardRef<
       aria-invalid={!!error}
       {...props}
     />
-  );
-});
-FormControl.displayName = 'FormControl';
+  )
+})
+FormControl.displayName = 'FormControl'
 
 const FormDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField();
+  const { formDescriptionId } = useFormField()
 
   return (
     <p
@@ -134,19 +133,19 @@ const FormDescription = React.forwardRef<
       className={cn('text-[0.8rem] text-muted-foreground', className)}
       {...props}
     />
-  );
-});
-FormDescription.displayName = 'FormDescription';
+  )
+})
+FormDescription.displayName = 'FormDescription'
 
 const FormMessage = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error.message) : children;
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error.message) : children
 
   if (!body) {
-    return null;
+    return null
   }
 
   return (
@@ -158,9 +157,9 @@ const FormMessage = React.forwardRef<
     >
       {body}
     </p>
-  );
-});
-FormMessage.displayName = 'FormMessage';
+  )
+})
+FormMessage.displayName = 'FormMessage'
 
 export {
   useFormField,
@@ -171,4 +170,4 @@ export {
   FormDescription,
   FormMessage,
   FormField,
-};
+}
diff --git a/packages/ui/src/primitives/hover-card/hover-card.mdx b/packages/ui/src/primitives/hover-card/hover-card.mdx
index 803e06c8..6ce28bcc 100644
--- a/packages/ui/src/primitives/hover-card/hover-card.mdx
+++ b/packages/ui/src/primitives/hover-card/hover-card.mdx
@@ -1,11 +1,11 @@
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks'
 
-import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
-import * as HoverCardStories from './hover-card.stories';
+import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
+import * as HoverCardStories from './hover-card.stories'
 
 <Meta of={HoverCardStories} />
 
-<RadixPrimitiveDocsButton name="hover-card" />
+<RadixPrimitiveDocsButton name='hover-card' />
 
 # Hover Card
 
@@ -21,14 +21,14 @@ export const importCode = `import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
-} from "@orbitkit/ui/hover-card";`;
+} from "@orbitkit/ui/hover-card";`
 
 export const usageCode = `<HoverCard>
   <HoverCardTrigger>Hover</HoverCardTrigger>
   <HoverCardContent>
     The React Framework - created and maintained by @vercel.
   </HoverCardContent>
-</HoverCard>`;
+</HoverCard>`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
diff --git a/packages/ui/src/primitives/hover-card/hover-card.stories.tsx b/packages/ui/src/primitives/hover-card/hover-card.stories.tsx
index fd956e3d..2823f6ba 100644
--- a/packages/ui/src/primitives/hover-card/hover-card.stories.tsx
+++ b/packages/ui/src/primitives/hover-card/hover-card.stories.tsx
@@ -1,39 +1,39 @@
-import { CalendarIcon } from '@radix-ui/react-icons';
-import { type Meta, type StoryObj } from '@storybook/react';
+import { CalendarIcon } from '@radix-ui/react-icons'
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { Avatar, AvatarFallback, AvatarImage } from '@/primitives/avatar';
-import { Button } from '@/primitives/button';
+import { Avatar, AvatarFallback, AvatarImage } from '@/primitives/avatar'
+import { Button } from '@/primitives/button'
 
-import { HoverCard, HoverCardContent, HoverCardTrigger } from '.';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '.'
 
 const meta: Meta<typeof HoverCard> = {
   component: HoverCard,
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof HoverCard>;
+type Story = StoryObj<typeof HoverCard>
 
 export const Default: Story = {
   render: (args) => (
     <HoverCard {...args}>
       <HoverCardTrigger asChild>
-        <Button variant="link">@nextjs</Button>
+        <Button variant='link'>@nextjs</Button>
       </HoverCardTrigger>
-      <HoverCardContent className="w-80">
-        <div className="flex justify-between space-x-4">
+      <HoverCardContent className='w-80'>
+        <div className='flex justify-between space-x-4'>
           <Avatar>
-            <AvatarImage src="https://github.com/vercel.png" />
+            <AvatarImage src='https://github.com/vercel.png' />
             <AvatarFallback>VC</AvatarFallback>
           </Avatar>
-          <div className="space-y-1">
-            <h4 className="text-sm font-semibold">@nextjs</h4>
-            <p className="text-sm">
+          <div className='space-y-1'>
+            <h4 className='text-sm font-semibold'>@nextjs</h4>
+            <p className='text-sm'>
               The React Framework - created and maintained by @vercel.
             </p>
-            <div className="flex items-center pt-2">
-              <CalendarIcon className="mr-2 size-4 opacity-70" />{' '}
-              <span className="text-xs text-muted-foreground">
+            <div className='flex items-center pt-2'>
+              <CalendarIcon className='mr-2 size-4 opacity-70' />{' '}
+              <span className='text-xs text-muted-foreground'>
                 Joined December 2021
               </span>
             </div>
@@ -42,4 +42,4 @@ export const Default: Story = {
       </HoverCardContent>
     </HoverCard>
   ),
-};
+}
diff --git a/packages/ui/src/primitives/hover-card/index.tsx b/packages/ui/src/primitives/hover-card/index.tsx
index c5b40973..b74aafed 100644
--- a/packages/ui/src/primitives/hover-card/index.tsx
+++ b/packages/ui/src/primitives/hover-card/index.tsx
@@ -1,14 +1,14 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
-import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
-const HoverCard = HoverCardPrimitive.Root;
+const HoverCard = HoverCardPrimitive.Root
 
-const HoverCardTrigger = HoverCardPrimitive.Trigger;
+const HoverCardTrigger = HoverCardPrimitive.Trigger
 
 const HoverCardContent = React.forwardRef<
   React.ElementRef<typeof HoverCardPrimitive.Content>,
@@ -24,7 +24,7 @@ const HoverCardContent = React.forwardRef<
     )}
     {...props}
   />
-));
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
 
-export { HoverCard, HoverCardTrigger, HoverCardContent };
+export { HoverCard, HoverCardTrigger, HoverCardContent }
diff --git a/packages/ui/src/primitives/input-otp/index.tsx b/packages/ui/src/primitives/input-otp/index.tsx
index 60807dac..a9d1372a 100644
--- a/packages/ui/src/primitives/input-otp/index.tsx
+++ b/packages/ui/src/primitives/input-otp/index.tsx
@@ -1,13 +1,13 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
-import type { SlotProps } from 'input-otp';
+import type { SlotProps } from 'input-otp'
 
-import { DashIcon } from '@radix-ui/react-icons';
-import { OTPInput } from 'input-otp';
+import { DashIcon } from '@radix-ui/react-icons'
+import { OTPInput } from 'input-otp'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
 const InputOTP = React.forwardRef<
   React.ElementRef<typeof OTPInput>,
@@ -18,16 +18,16 @@ const InputOTP = React.forwardRef<
     containerClassName={cn('flex items-center gap-2', className)}
     {...props}
   />
-));
-InputOTP.displayName = 'InputOTP';
+))
+InputOTP.displayName = 'InputOTP'
 
 const InputOTPGroup = React.forwardRef<
   React.ElementRef<'div'>,
   React.ComponentPropsWithoutRef<'div'>
 >(({ className, ...props }, ref) => (
   <div ref={ref} className={cn('flex items-center', className)} {...props} />
-));
-InputOTPGroup.displayName = 'InputOTPGroup';
+))
+InputOTPGroup.displayName = 'InputOTPGroup'
 
 const InputOTPSlot = React.forwardRef<
   React.ElementRef<'div'>,
@@ -45,23 +45,23 @@ const InputOTPSlot = React.forwardRef<
     >
       {char}
       {hasFakeCaret && (
-        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        <div className='pointer-events-none absolute inset-0 flex items-center justify-center'>
+          <div className='h-4 w-px animate-caret-blink bg-foreground duration-1000' />
         </div>
       )}
     </div>
-  );
-});
-InputOTPSlot.displayName = 'InputOTPSlot';
+  )
+})
+InputOTPSlot.displayName = 'InputOTPSlot'
 
 const InputOTPSeparator = React.forwardRef<
   React.ElementRef<'div'>,
   React.ComponentPropsWithoutRef<'div'>
 >(({ ...props }, ref) => (
-  <div ref={ref} role="separator" {...props}>
+  <div ref={ref} role='separator' {...props}>
     <DashIcon />
   </div>
-));
-InputOTPSeparator.displayName = 'InputOTPSeparator';
+))
+InputOTPSeparator.displayName = 'InputOTPSeparator'
 
-export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
diff --git a/packages/ui/src/primitives/input-otp/input-otp.mdx b/packages/ui/src/primitives/input-otp/input-otp.mdx
index 070ab505..c499b5d1 100644
--- a/packages/ui/src/primitives/input-otp/input-otp.mdx
+++ b/packages/ui/src/primitives/input-otp/input-otp.mdx
@@ -1,11 +1,11 @@
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks'
 
-import { PrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
-import * as InputOTPStories from './input-otp.stories';
+import { PrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
+import * as InputOTPStories from './input-otp.stories'
 
 <Meta of={InputOTPStories} />
 
-<PrimitiveDocsButton docsUrl="https://input-otp.rodz.dev/" />
+<PrimitiveDocsButton docsUrl='https://input-otp.rodz.dev/' />
 
 # Input OTP
 
@@ -22,7 +22,7 @@ export const importCode = `import {
   InputOTPGroup,
   InputOTPSeparator,
   InputOTPSlot,
-} from "@orbitkit/ui/input-otp";`;
+} from "@orbitkit/ui/input-otp";`
 
 export const usageCode = `<InputOTP
   maxLength={6}
@@ -41,10 +41,10 @@ export const usageCode = `<InputOTP
       </InputOTPGroup>
     </>
   )}
-/>`;
+/>`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
 
 ## Examples
 
diff --git a/packages/ui/src/primitives/input-otp/input-otp.stories.tsx b/packages/ui/src/primitives/input-otp/input-otp.stories.tsx
index 2bc18cb5..28009369 100644
--- a/packages/ui/src/primitives/input-otp/input-otp.stories.tsx
+++ b/packages/ui/src/primitives/input-otp/input-otp.stories.tsx
@@ -1,7 +1,7 @@
-import { type Meta, type StoryObj } from '@storybook/react';
-import { REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp';
+import { type Meta, type StoryObj } from '@storybook/react'
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp'
 
-import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '.';
+import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '.'
 
 const meta: Meta<typeof InputOTP> = {
   component: InputOTP,
@@ -23,16 +23,16 @@ const meta: Meta<typeof InputOTP> = {
       </>
     ),
   },
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof InputOTP>;
+type Story = StoryObj<typeof InputOTP>
 
-export const Default: Story = {};
+export const Default: Story = {}
 
 export const Pattern: Story = {
   args: {
     pattern: REGEXP_ONLY_DIGITS_AND_CHARS,
   },
-};
+}
diff --git a/packages/ui/src/primitives/input/index.tsx b/packages/ui/src/primitives/input/index.tsx
index d6edab20..5b83ccad 100644
--- a/packages/ui/src/primitives/input/index.tsx
+++ b/packages/ui/src/primitives/input/index.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
+import * as React from 'react'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {
@@ -16,9 +16,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         ref={ref}
         {...props}
       />
-    );
+    )
   },
-);
-Input.displayName = 'Input';
+)
+Input.displayName = 'Input'
 
-export { Input };
+export { Input }
diff --git a/packages/ui/src/primitives/input/input.mdx b/packages/ui/src/primitives/input/input.mdx
index fc86e0c3..27631d65 100644
--- a/packages/ui/src/primitives/input/input.mdx
+++ b/packages/ui/src/primitives/input/input.mdx
@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks'
 
-import * as InputStories from './input.stories';
+import * as InputStories from './input.stories'
 
 <Meta of={InputStories} />
 
@@ -16,12 +16,12 @@ Displays a form input field or a component that looks like an input field.
 
 ## Usage
 
-export const importCode = `import { Input } from "@orbitkit/ui/input";`;
+export const importCode = `import { Input } from "@orbitkit/ui/input";`
 
-export const usageCode = `<Input />`;
+export const usageCode = `<Input />`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
 
 ## Examples
 
diff --git a/packages/ui/src/primitives/input/input.stories.tsx b/packages/ui/src/primitives/input/input.stories.tsx
index 4a621eaf..054d4c81 100644
--- a/packages/ui/src/primitives/input/input.stories.tsx
+++ b/packages/ui/src/primitives/input/input.stories.tsx
@@ -1,8 +1,8 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { Button } from '../button';
-import { Label } from '../label';
-import { Input } from './';
+import { Button } from '../button'
+import { Label } from '../label'
+import { Input } from './'
 
 const meta: Meta<typeof Input> = {
   component: Input,
@@ -10,31 +10,31 @@ const meta: Meta<typeof Input> = {
     type: 'email',
     placeholder: 'Email',
   },
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Input>;
+type Story = StoryObj<typeof Input>
 
-export const Default: Story = {};
+export const Default: Story = {}
 export const File: Story = {
   args: {
     id: 'picture',
     type: 'file',
   },
   render: (args) => (
-    <div className="grid w-full max-w-sm items-center gap-1.5">
-      <Label htmlFor="picture">Picture</Label>
+    <div className='grid w-full max-w-sm items-center gap-1.5'>
+      <Label htmlFor='picture'>Picture</Label>
       <Input {...args} />
     </div>
   ),
-};
+}
 
 export const Disabled: Story = {
   args: {
     disabled: true,
   },
-};
+}
 
 export const WithLabel: Story = {
   args: {
@@ -42,18 +42,18 @@ export const WithLabel: Story = {
     placeholder: 'johndoe@example.com',
   },
   render: (args) => (
-    <div className="grid w-full max-w-sm items-center gap-1.5">
-      <Label htmlFor="email">Email address</Label>
+    <div className='grid w-full max-w-sm items-center gap-1.5'>
+      <Label htmlFor='email'>Email address</Label>
       <Input {...args} />
     </div>
   ),
-};
+}
 
 export const WithButton: Story = {
   render: (args) => (
-    <div className="flex w-full max-w-sm items-center space-x-2">
+    <div className='flex w-full max-w-sm items-center space-x-2'>
       <Input {...args} />
-      <Button type="submit">Subscribe</Button>
+      <Button type='submit'>Subscribe</Button>
     </div>
   ),
-};
+}
diff --git a/packages/ui/src/primitives/label/index.tsx b/packages/ui/src/primitives/label/index.tsx
index aa43dc8b..c585567c 100644
--- a/packages/ui/src/primitives/label/index.tsx
+++ b/packages/ui/src/primitives/label/index.tsx
@@ -1,17 +1,17 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
-import type { VariantProps } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority'
 
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { cva } from 'class-variance-authority';
+import * as LabelPrimitive from '@radix-ui/react-label'
+import { cva } from 'class-variance-authority'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
 const labelVariants = cva(
   'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
-);
+)
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
@@ -23,7 +23,7 @@ const Label = React.forwardRef<
     className={cn(labelVariants(), className)}
     {...props}
   />
-));
-Label.displayName = LabelPrimitive.Root.displayName;
+))
+Label.displayName = LabelPrimitive.Root.displayName
 
-export { Label };
+export { Label }
diff --git a/packages/ui/src/primitives/label/label.mdx b/packages/ui/src/primitives/label/label.mdx
index 4dceddd7..b1a35e9e 100644
--- a/packages/ui/src/primitives/label/label.mdx
+++ b/packages/ui/src/primitives/label/label.mdx
@@ -1,11 +1,11 @@
-import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks'
 
-import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
-import * as LabelStories from './label.stories';
+import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
+import * as LabelStories from './label.stories'
 
 <Meta of={LabelStories} />
 
-<RadixPrimitiveDocsButton name="label" />
+<RadixPrimitiveDocsButton name='label' />
 
 # Label
 
@@ -19,9 +19,9 @@ Renders an accessible label associated with controls.
 
 ## Usage
 
-export const importCode = `import { Label } from "@orbitkit/ui/label";`;
+export const importCode = `import { Label } from "@orbitkit/ui/label";`
 
-export const usageCode = `<Label htmlFor="email">Your email address</Label>`;
+export const usageCode = `<Label htmlFor="email">Your email address</Label>`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
diff --git a/packages/ui/src/primitives/label/label.stories.tsx b/packages/ui/src/primitives/label/label.stories.tsx
index 4972124d..5cd95dbd 100644
--- a/packages/ui/src/primitives/label/label.stories.tsx
+++ b/packages/ui/src/primitives/label/label.stories.tsx
@@ -1,16 +1,16 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { Label } from './';
+import { Label } from './'
 
 const meta: Meta<typeof Label> = {
   component: Label,
   args: {
     children: 'Label',
   },
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Label>;
+type Story = StoryObj<typeof Label>
 
-export const Default: Story = {};
+export const Default: Story = {}
diff --git a/packages/ui/src/primitives/menubar/index.tsx b/packages/ui/src/primitives/menubar/index.tsx
index a4c13cc2..4a0f00d7 100644
--- a/packages/ui/src/primitives/menubar/index.tsx
+++ b/packages/ui/src/primitives/menubar/index.tsx
@@ -1,25 +1,25 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
 import {
   CheckIcon,
   ChevronRightIcon,
   DotFilledIcon,
-} from '@radix-ui/react-icons';
-import * as MenubarPrimitive from '@radix-ui/react-menubar';
+} from '@radix-ui/react-icons'
+import * as MenubarPrimitive from '@radix-ui/react-menubar'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
-const MenubarMenu = MenubarPrimitive.Menu;
+const MenubarMenu = MenubarPrimitive.Menu
 
-const MenubarGroup = MenubarPrimitive.Group;
+const MenubarGroup = MenubarPrimitive.Group
 
-const MenubarPortal = MenubarPrimitive.Portal;
+const MenubarPortal = MenubarPrimitive.Portal
 
-const MenubarSub = MenubarPrimitive.Sub;
+const MenubarSub = MenubarPrimitive.Sub
 
-const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup
 
 const Menubar = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Root>,
@@ -33,8 +33,8 @@ const Menubar = React.forwardRef<
     )}
     {...props}
   />
-));
-Menubar.displayName = MenubarPrimitive.Root.displayName;
+))
+Menubar.displayName = MenubarPrimitive.Root.displayName
 
 const MenubarTrigger = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Trigger>,
@@ -48,13 +48,13 @@ const MenubarTrigger = React.forwardRef<
     )}
     {...props}
   />
-));
-MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
+))
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
 
 const MenubarSubTrigger = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
-    inset?: boolean;
+    inset?: boolean
   }
 >(({ className, inset, children, ...props }, ref) => (
   <MenubarPrimitive.SubTrigger
@@ -67,10 +67,10 @@ const MenubarSubTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <ChevronRightIcon className="ml-auto size-4" />
+    <ChevronRightIcon className='ml-auto size-4' />
   </MenubarPrimitive.SubTrigger>
-));
-MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+))
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
 
 const MenubarSubContent = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.SubContent>,
@@ -84,8 +84,8 @@ const MenubarSubContent = React.forwardRef<
     )}
     {...props}
   />
-));
-MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+))
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
 
 const MenubarContent = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Content>,
@@ -109,13 +109,13 @@ const MenubarContent = React.forwardRef<
       />
     </MenubarPrimitive.Portal>
   ),
-);
-MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+)
+MenubarContent.displayName = MenubarPrimitive.Content.displayName
 
 const MenubarItem = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
-    inset?: boolean;
+    inset?: boolean
   }
 >(({ className, inset, ...props }, ref) => (
   <MenubarPrimitive.Item
@@ -127,8 +127,8 @@ const MenubarItem = React.forwardRef<
     )}
     {...props}
   />
-));
-MenubarItem.displayName = MenubarPrimitive.Item.displayName;
+))
+MenubarItem.displayName = MenubarPrimitive.Item.displayName
 
 const MenubarCheckboxItem = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
@@ -143,15 +143,15 @@ const MenubarCheckboxItem = React.forwardRef<
     checked={checked ?? false}
     {...props}
   >
-    <span className="absolute left-2 flex size-3.5 items-center justify-center">
+    <span className='absolute left-2 flex size-3.5 items-center justify-center'>
       <MenubarPrimitive.ItemIndicator>
-        <CheckIcon className="size-4" />
+        <CheckIcon className='size-4' />
       </MenubarPrimitive.ItemIndicator>
     </span>
     {children}
   </MenubarPrimitive.CheckboxItem>
-));
-MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+))
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
 
 const MenubarRadioItem = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.RadioItem>,
@@ -165,20 +165,20 @@ const MenubarRadioItem = React.forwardRef<
     )}
     {...props}
   >
-    <span className="absolute left-2 flex size-3.5 items-center justify-center">
+    <span className='absolute left-2 flex size-3.5 items-center justify-center'>
       <MenubarPrimitive.ItemIndicator>
-        <DotFilledIcon className="size-4 fill-current" />
+        <DotFilledIcon className='size-4 fill-current' />
       </MenubarPrimitive.ItemIndicator>
     </span>
     {children}
   </MenubarPrimitive.RadioItem>
-));
-MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+))
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
 
 const MenubarLabel = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
-    inset?: boolean;
+    inset?: boolean
   }
 >(({ className, inset, ...props }, ref) => (
   <MenubarPrimitive.Label
@@ -190,8 +190,8 @@ const MenubarLabel = React.forwardRef<
     )}
     {...props}
   />
-));
-MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
+))
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName
 
 const MenubarSeparator = React.forwardRef<
   React.ElementRef<typeof MenubarPrimitive.Separator>,
@@ -202,8 +202,8 @@ const MenubarSeparator = React.forwardRef<
     className={cn('-mx-1 my-1 h-px bg-muted', className)}
     {...props}
   />
-));
-MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
+))
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
 
 const MenubarShortcut = ({
   className,
@@ -217,9 +217,9 @@ const MenubarShortcut = ({
       )}
       {...props}
     />
-  );
-};
-MenubarShortcut.displayname = 'MenubarShortcut';
+  )
+}
+MenubarShortcut.displayname = 'MenubarShortcut'
 
 export {
   Menubar,
@@ -238,4 +238,4 @@ export {
   MenubarGroup,
   MenubarSub,
   MenubarShortcut,
-};
+}
diff --git a/packages/ui/src/primitives/menubar/menubar.mdx b/packages/ui/src/primitives/menubar/menubar.mdx
index d5a6c70e..7a501e4b 100644
--- a/packages/ui/src/primitives/menubar/menubar.mdx
+++ b/packages/ui/src/primitives/menubar/menubar.mdx
@@ -1,11 +1,11 @@
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks'
 
-import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
-import * as MenubarStories from './menubar.stories';
+import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
+import * as MenubarStories from './menubar.stories'
 
 <Meta of={MenubarStories} />
 
-<RadixPrimitiveDocsButton name="menubar" />
+<RadixPrimitiveDocsButton name='menubar' />
 
 # Menubar
 
@@ -25,7 +25,7 @@ export const importCode = `import {
   MenubarSeparator,
   MenubarShortcut,
   MenubarTrigger,
-} from "@orbitkit/ui/menubar";`;
+} from "@orbitkit/ui/menubar";`
 
 export const usageCode = `<Menubar>
   <MenubarMenu>
@@ -41,7 +41,7 @@ export const usageCode = `<Menubar>
       <MenubarItem>Print</MenubarItem>
     </MenubarContent>
   </MenubarMenu>
-</Menubar>`;
+</Menubar>`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
diff --git a/packages/ui/src/primitives/menubar/menubar.stories.tsx b/packages/ui/src/primitives/menubar/menubar.stories.tsx
index 7f6ad27b..58c74271 100644
--- a/packages/ui/src/primitives/menubar/menubar.stories.tsx
+++ b/packages/ui/src/primitives/menubar/menubar.stories.tsx
@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react'
 
 import {
   Menubar,
@@ -8,7 +8,7 @@ import {
   MenubarSeparator,
   MenubarShortcut,
   MenubarTrigger,
-} from '.';
+} from '.'
 
 const meta: Meta<typeof Menubar> = {
   component: Menubar,
@@ -29,10 +29,10 @@ const meta: Meta<typeof Menubar> = {
       </MenubarMenu>
     </Menubar>
   ),
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Menubar>;
+type Story = StoryObj<typeof Menubar>
 
-export const Default: Story = {};
+export const Default: Story = {}
diff --git a/packages/ui/src/primitives/navigation-menu/index.tsx b/packages/ui/src/primitives/navigation-menu/index.tsx
index 7b2dbd60..c6eea70c 100644
--- a/packages/ui/src/primitives/navigation-menu/index.tsx
+++ b/packages/ui/src/primitives/navigation-menu/index.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react';
+import * as React from 'react'
 
-import { ChevronDownIcon } from '@radix-ui/react-icons';
-import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
-import { cva } from 'class-variance-authority';
+import { ChevronDownIcon } from '@radix-ui/react-icons'
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'
+import { cva } from 'class-variance-authority'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
 const NavigationMenu = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Root>,
@@ -21,8 +21,8 @@ const NavigationMenu = React.forwardRef<
     {children}
     <NavigationMenuViewport />
   </NavigationMenuPrimitive.Root>
-));
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
 
 const NavigationMenuList = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.List>,
@@ -36,14 +36,14 @@ const NavigationMenuList = React.forwardRef<
     )}
     {...props}
   />
-));
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
 
-const NavigationMenuItem = NavigationMenuPrimitive.Item;
+const NavigationMenuItem = NavigationMenuPrimitive.Item
 
 const navigationMenuTriggerStyle = cva(
   'data-[active]:bg-accent/50 data-[state=open]:bg-accent/50 group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50',
-);
+)
 
 const NavigationMenuTrigger = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
@@ -56,12 +56,12 @@ const NavigationMenuTrigger = React.forwardRef<
   >
     {children}{' '}
     <ChevronDownIcon
-      className="relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
-      aria-hidden="true"
+      className='relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180'
+      aria-hidden='true'
     />
   </NavigationMenuPrimitive.Trigger>
-));
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
 
 const NavigationMenuContent = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Content>,
@@ -75,10 +75,10 @@ const NavigationMenuContent = React.forwardRef<
     )}
     {...props}
   />
-));
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
 
-const NavigationMenuLink = NavigationMenuPrimitive.Link;
+const NavigationMenuLink = NavigationMenuPrimitive.Link
 
 const NavigationMenuViewport = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
@@ -94,9 +94,9 @@ const NavigationMenuViewport = React.forwardRef<
       {...props}
     />
   </div>
-));
+))
 NavigationMenuViewport.displayName =
-  NavigationMenuPrimitive.Viewport.displayName;
+  NavigationMenuPrimitive.Viewport.displayName
 
 const NavigationMenuIndicator = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
@@ -110,11 +110,11 @@ const NavigationMenuIndicator = React.forwardRef<
     )}
     {...props}
   >
-    <div className="relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+    <div className='relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border shadow-md' />
   </NavigationMenuPrimitive.Indicator>
-));
+))
 NavigationMenuIndicator.displayName =
-  NavigationMenuPrimitive.Indicator.displayName;
+  NavigationMenuPrimitive.Indicator.displayName
 
 export {
   navigationMenuTriggerStyle,
@@ -126,4 +126,4 @@ export {
   NavigationMenuLink,
   NavigationMenuIndicator,
   NavigationMenuViewport,
-};
+}
diff --git a/packages/ui/src/primitives/navigation-menu/navigation-menu.mdx b/packages/ui/src/primitives/navigation-menu/navigation-menu.mdx
index 89ae3e29..e2a178e9 100644
--- a/packages/ui/src/primitives/navigation-menu/navigation-menu.mdx
+++ b/packages/ui/src/primitives/navigation-menu/navigation-menu.mdx
@@ -1,11 +1,11 @@
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks'
 
-import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
-import * as NavigationMenuStories from './navigation-menu.stories.tsx';
+import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
+import * as NavigationMenuStories from './navigation-menu.stories.tsx'
 
 <Meta of={NavigationMenuStories} />
 
-<RadixPrimitiveDocsButton name="navigation-menu" />
+<RadixPrimitiveDocsButton name='navigation-menu' />
 
 # Navigation Menu
 
@@ -26,7 +26,7 @@ export const importCode = `import {
   NavigationMenuList,
   NavigationMenuTrigger,
   NavigationMenuViewport,
-} from "@orbitkit/ui/navigation-menu";`;
+} from "@orbitkit/ui/navigation-menu";`
 
 export const usageCode = `<NavigationMenu>
   <NavigationMenuList>
@@ -37,7 +37,7 @@ export const usageCode = `<NavigationMenu>
       </NavigationMenuContent>
     </NavigationMenuItem>
   </NavigationMenuList>
-</NavigationMenu>`;
+</NavigationMenu>`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
diff --git a/packages/ui/src/primitives/navigation-menu/navigation-menu.stories.tsx b/packages/ui/src/primitives/navigation-menu/navigation-menu.stories.tsx
index 296f7428..3b9bdf77 100644
--- a/packages/ui/src/primitives/navigation-menu/navigation-menu.stories.tsx
+++ b/packages/ui/src/primitives/navigation-menu/navigation-menu.stories.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
+import * as React from 'react'
 
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
 import {
   NavigationMenu,
@@ -12,7 +12,7 @@ import {
   NavigationMenuList,
   NavigationMenuTrigger,
   navigationMenuTriggerStyle,
-} from '.';
+} from '.'
 
 const ListItem = React.forwardRef<
   React.ElementRef<'a'>,
@@ -29,16 +29,16 @@ const ListItem = React.forwardRef<
           )}
           {...props}
         >
-          <div className="text-sm font-medium leading-none">{title}</div>
-          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+          <div className='text-sm font-medium leading-none'>{title}</div>
+          <p className='line-clamp-2 text-sm leading-snug text-muted-foreground'>
             {children}
           </p>
         </a>
       </NavigationMenuLink>
     </li>
-  );
-});
-ListItem.displayName = 'ListItem';
+  )
+})
+ListItem.displayName = 'ListItem'
 
 const components: { title: string; href: string; description: string }[] = [
   {
@@ -76,41 +76,41 @@ const components: { title: string; href: string; description: string }[] = [
     description:
       'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',
   },
-];
+]
 
 const meta: Meta<typeof NavigationMenu> = {
   component: NavigationMenu,
   render: (args) => (
-    <div className="container mx-auto flex justify-center">
+    <div className='container mx-auto flex justify-center'>
       <NavigationMenu {...args}>
         <NavigationMenuList>
           <NavigationMenuItem>
             <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
             <NavigationMenuContent>
-              <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
-                <li className="row-span-3">
+              <ul className='grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]'>
+                <li className='row-span-3'>
                   <NavigationMenuLink asChild>
                     <a
-                      className="flex size-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-gray-2 to-gray-4 p-6 no-underline outline-none focus:shadow-md"
-                      href="/"
+                      className='flex size-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-gray-2 to-gray-4 p-6 no-underline outline-none focus:shadow-md'
+                      href='/'
                     >
-                      <div className="mb-2 mt-4 text-lg font-medium">
+                      <div className='mb-2 mt-4 text-lg font-medium'>
                         shadcn/ui
                       </div>
-                      <p className="text-sm leading-tight text-muted-foreground">
+                      <p className='text-sm leading-tight text-muted-foreground'>
                         Beautifully designed components built with Radix UI and
                         Tailwind CSS.
                       </p>
                     </a>
                   </NavigationMenuLink>
                 </li>
-                <ListItem href="/docs" title="Introduction">
+                <ListItem href='/docs' title='Introduction'>
                   Re-usable components built using Radix UI and Tailwind CSS.
                 </ListItem>
-                <ListItem href="/docs/installation" title="Installation">
+                <ListItem href='/docs/installation' title='Installation'>
                   How to install dependencies and structure your app.
                 </ListItem>
-                <ListItem href="/docs/primitives/typography" title="Typography">
+                <ListItem href='/docs/primitives/typography' title='Typography'>
                   Styles for headings, paragraphs, lists...etc
                 </ListItem>
               </ul>
@@ -119,7 +119,7 @@ const meta: Meta<typeof NavigationMenu> = {
           <NavigationMenuItem>
             <NavigationMenuTrigger>Components</NavigationMenuTrigger>
             <NavigationMenuContent>
-              <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+              <ul className='grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] '>
                 {components.map((component) => (
                   <ListItem
                     key={component.title}
@@ -133,7 +133,7 @@ const meta: Meta<typeof NavigationMenu> = {
             </NavigationMenuContent>
           </NavigationMenuItem>
           <NavigationMenuItem>
-            <a href="/docs">
+            <a href='/docs'>
               <NavigationMenuLink className={navigationMenuTriggerStyle()}>
                 Documentation
               </NavigationMenuLink>
@@ -143,10 +143,10 @@ const meta: Meta<typeof NavigationMenu> = {
       </NavigationMenu>
     </div>
   ),
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof NavigationMenu>;
+type Story = StoryObj<typeof NavigationMenu>
 
-export const Default: Story = {};
+export const Default: Story = {}
diff --git a/packages/ui/src/primitives/pagination/index.tsx b/packages/ui/src/primitives/pagination/index.tsx
index 8495f2c2..fd716c53 100644
--- a/packages/ui/src/primitives/pagination/index.tsx
+++ b/packages/ui/src/primitives/pagination/index.tsx
@@ -1,25 +1,25 @@
-import * as React from 'react';
+import * as React from 'react'
 
-import type { ButtonProps } from '@/primitives/button';
+import type { ButtonProps } from '@/primitives/button'
 
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
   DotsHorizontalIcon,
-} from '@radix-ui/react-icons';
+} from '@radix-ui/react-icons'
 
-import { buttonVariants } from '@/primitives/button';
-import { cn } from '@/utils/cn';
+import { buttonVariants } from '@/primitives/button'
+import { cn } from '@/utils/cn'
 
 const Pagination = ({ className, ...props }: React.ComponentProps<'nav'>) => (
   <nav
-    role="navigation"
-    aria-label="pagination"
+    role='navigation'
+    aria-label='pagination'
     className={cn('mx-auto flex w-full justify-center', className)}
     {...props}
   />
-);
-Pagination.displayName = 'Pagination';
+)
+Pagination.displayName = 'Pagination'
 
 const PaginationContent = React.forwardRef<
   HTMLUListElement,
@@ -30,19 +30,19 @@ const PaginationContent = React.forwardRef<
     className={cn('flex flex-row items-center gap-1', className)}
     {...props}
   />
-));
-PaginationContent.displayName = 'PaginationContent';
+))
+PaginationContent.displayName = 'PaginationContent'
 
 const PaginationItem = React.forwardRef<
   HTMLLIElement,
   React.ComponentProps<'li'>
->(({ ...props }, ref) => <li ref={ref} {...props} />);
-PaginationItem.displayName = 'PaginationItem';
+>(({ ...props }, ref) => <li ref={ref} {...props} />)
+PaginationItem.displayName = 'PaginationItem'
 
 type PaginationLinkProps = {
-  isActive?: boolean;
+  isActive?: boolean
 } & Pick<ButtonProps, 'size'> &
-  React.ComponentProps<'a'>;
+  React.ComponentProps<'a'>
 
 const PaginationLink = ({
   className,
@@ -64,40 +64,40 @@ const PaginationLink = ({
   >
     {children}
   </a>
-);
-PaginationLink.displayName = 'PaginationLink';
+)
+PaginationLink.displayName = 'PaginationLink'
 
 const PaginationPrevious = ({
   className,
   ...props
 }: React.ComponentProps<typeof PaginationLink>) => (
   <PaginationLink
-    aria-label="Go to previous page"
-    size="default"
+    aria-label='Go to previous page'
+    size='default'
     className={cn('gap-1 pl-2.5', className)}
     {...props}
   >
-    <ChevronLeftIcon className="size-4" />
+    <ChevronLeftIcon className='size-4' />
     <span>Previous</span>
   </PaginationLink>
-);
-PaginationPrevious.displayName = 'PaginationPrevious';
+)
+PaginationPrevious.displayName = 'PaginationPrevious'
 
 const PaginationNext = ({
   className,
   ...props
 }: React.ComponentProps<typeof PaginationLink>) => (
   <PaginationLink
-    aria-label="Go to next page"
-    size="default"
+    aria-label='Go to next page'
+    size='default'
     className={cn('gap-1 pr-2.5', className)}
     {...props}
   >
     <span>Next</span>
-    <ChevronRightIcon className="size-4" />
+    <ChevronRightIcon className='size-4' />
   </PaginationLink>
-);
-PaginationNext.displayName = 'PaginationNext';
+)
+PaginationNext.displayName = 'PaginationNext'
 
 const PaginationEllipsis = ({
   className,
@@ -108,11 +108,11 @@ const PaginationEllipsis = ({
     className={cn('flex size-9 items-center justify-center', className)}
     {...props}
   >
-    <DotsHorizontalIcon className="size-4" />
-    <span className="sr-only">More pages</span>
+    <DotsHorizontalIcon className='size-4' />
+    <span className='sr-only'>More pages</span>
   </span>
-);
-PaginationEllipsis.displayName = 'PaginationEllipsis';
+)
+PaginationEllipsis.displayName = 'PaginationEllipsis'
 
 export {
   Pagination,
@@ -122,4 +122,4 @@ export {
   PaginationPrevious,
   PaginationNext,
   PaginationEllipsis,
-};
+}
diff --git a/packages/ui/src/primitives/pagination/pagination.mdx b/packages/ui/src/primitives/pagination/pagination.mdx
index 8030a5f6..694bbbf7 100644
--- a/packages/ui/src/primitives/pagination/pagination.mdx
+++ b/packages/ui/src/primitives/pagination/pagination.mdx
@@ -1,6 +1,6 @@
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks'
 
-import * as PaginationStories from './pagination.stories';
+import * as PaginationStories from './pagination.stories'
 
 <Meta of={PaginationStories} />
 
@@ -22,7 +22,7 @@ export const importCode = `import {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
-} from "@orbitkit/ui/pagination";`;
+} from "@orbitkit/ui/pagination";`
 
 export const usageCode = `<Pagination>
   <PaginationContent>
@@ -40,7 +40,7 @@ export const usageCode = `<Pagination>
     </PaginationItem>
   </PaginationContent>
 </Pagination>
-`;
+`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
diff --git a/packages/ui/src/primitives/pagination/pagination.stories.tsx b/packages/ui/src/primitives/pagination/pagination.stories.tsx
index e1a45f2b..b0b46c65 100644
--- a/packages/ui/src/primitives/pagination/pagination.stories.tsx
+++ b/packages/ui/src/primitives/pagination/pagination.stories.tsx
@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react'
 
 import {
   Pagination,
@@ -8,7 +8,7 @@ import {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
-} from '.';
+} from '.'
 
 const meta: Meta<typeof Pagination> = {
   component: Pagination,
@@ -16,32 +16,32 @@ const meta: Meta<typeof Pagination> = {
     <Pagination {...args}>
       <PaginationContent>
         <PaginationItem>
-          <PaginationPrevious href="#" />
+          <PaginationPrevious href='#' />
         </PaginationItem>
         <PaginationItem>
-          <PaginationLink href="#">1</PaginationLink>
+          <PaginationLink href='#'>1</PaginationLink>
         </PaginationItem>
         <PaginationItem>
-          <PaginationLink href="#" isActive>
+          <PaginationLink href='#' isActive>
             2
           </PaginationLink>
         </PaginationItem>
         <PaginationItem>
-          <PaginationLink href="#">3</PaginationLink>
+          <PaginationLink href='#'>3</PaginationLink>
         </PaginationItem>
         <PaginationItem>
           <PaginationEllipsis />
         </PaginationItem>
         <PaginationItem>
-          <PaginationNext href="#" />
+          <PaginationNext href='#' />
         </PaginationItem>
       </PaginationContent>
     </Pagination>
   ),
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Pagination>;
+type Story = StoryObj<typeof Pagination>
 
-export const Default: Story = {};
+export const Default: Story = {}
diff --git a/packages/ui/src/primitives/popover/index.tsx b/packages/ui/src/primitives/popover/index.tsx
index 6d3b8e15..92f16f09 100644
--- a/packages/ui/src/primitives/popover/index.tsx
+++ b/packages/ui/src/primitives/popover/index.tsx
@@ -1,16 +1,16 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
-import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as PopoverPrimitive from '@radix-ui/react-popover'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
-const Popover = PopoverPrimitive.Root;
+const Popover = PopoverPrimitive.Root
 
-const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverTrigger = PopoverPrimitive.Trigger
 
-const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverAnchor = PopoverPrimitive.Anchor
 
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
@@ -28,7 +28,7 @@ const PopoverContent = React.forwardRef<
       {...props}
     />
   </PopoverPrimitive.Portal>
-));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
diff --git a/packages/ui/src/primitives/popover/popover.mdx b/packages/ui/src/primitives/popover/popover.mdx
index b8ca3058..af7312ac 100644
--- a/packages/ui/src/primitives/popover/popover.mdx
+++ b/packages/ui/src/primitives/popover/popover.mdx
@@ -1,11 +1,11 @@
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks'
 
-import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
-import * as PopoverStories from './popover.stories';
+import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
+import * as PopoverStories from './popover.stories'
 
 <Meta of={PopoverStories} />
 
-<RadixPrimitiveDocsButton name="popover" />
+<RadixPrimitiveDocsButton name='popover' />
 
 # Popover
 
@@ -21,12 +21,12 @@ export const importCode = `import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@orbitkit/ui/popover";`;
+} from "@orbitkit/ui/popover";`
 
 export const usageCode = `<Popover>
   <PopoverTrigger>Open</PopoverTrigger>
   <PopoverContent>Place content for the popover here.</PopoverContent>
-</Popover>`;
+</Popover>`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
diff --git a/packages/ui/src/primitives/popover/popover.stories.tsx b/packages/ui/src/primitives/popover/popover.stories.tsx
index 82d38d3c..48fda975 100644
--- a/packages/ui/src/primitives/popover/popover.stories.tsx
+++ b/packages/ui/src/primitives/popover/popover.stories.tsx
@@ -1,10 +1,10 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { Button } from '@/primitives/button';
-import { Input } from '@/primitives/input';
-import { Label } from '@/primitives/label';
+import { Button } from '@/primitives/button'
+import { Input } from '@/primitives/input'
+import { Label } from '@/primitives/label'
 
-import { Popover, PopoverContent, PopoverTrigger } from '.';
+import { Popover, PopoverContent, PopoverTrigger } from '.'
 
 const meta: Meta<typeof PopoverContent> = {
   component: PopoverContent,
@@ -19,18 +19,18 @@ const meta: Meta<typeof PopoverContent> = {
   render: (args) => (
     <Popover>
       <PopoverTrigger asChild>
-        <Button variant="outline">Open</Button>
+        <Button variant='outline'>Open</Button>
       </PopoverTrigger>
       <PopoverContent {...args} />
     </Popover>
   ),
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Popover>;
+type Story = StoryObj<typeof Popover>
 
-export const Default: Story = {};
+export const Default: Story = {}
 
 export const Example: Story = {
   argTypes: {
@@ -41,47 +41,47 @@ export const Example: Story = {
   render: (args) => (
     <Popover>
       <PopoverTrigger asChild>
-        <Button variant="outline">Open popover</Button>
+        <Button variant='outline'>Open popover</Button>
       </PopoverTrigger>
-      <PopoverContent className="w-80" {...args}>
-        <div className="grid gap-4">
-          <div className="space-y-2">
-            <h4 className="font-medium leading-none">Dimensions</h4>
-            <p className="text-sm text-muted-foreground">
+      <PopoverContent className='w-80' {...args}>
+        <div className='grid gap-4'>
+          <div className='space-y-2'>
+            <h4 className='font-medium leading-none'>Dimensions</h4>
+            <p className='text-sm text-muted-foreground'>
               Set the dimensions for the layer.
             </p>
           </div>
-          <div className="grid gap-2">
-            <div className="grid grid-cols-3 items-center gap-4">
-              <Label htmlFor="width">Width</Label>
+          <div className='grid gap-2'>
+            <div className='grid grid-cols-3 items-center gap-4'>
+              <Label htmlFor='width'>Width</Label>
               <Input
-                id="width"
-                defaultValue="100%"
-                className="col-span-2 h-8"
+                id='width'
+                defaultValue='100%'
+                className='col-span-2 h-8'
               />
             </div>
-            <div className="grid grid-cols-3 items-center gap-4">
-              <Label htmlFor="maxWidth">Max. width</Label>
+            <div className='grid grid-cols-3 items-center gap-4'>
+              <Label htmlFor='maxWidth'>Max. width</Label>
               <Input
-                id="maxWidth"
-                defaultValue="300px"
-                className="col-span-2 h-8"
+                id='maxWidth'
+                defaultValue='300px'
+                className='col-span-2 h-8'
               />
             </div>
-            <div className="grid grid-cols-3 items-center gap-4">
-              <Label htmlFor="height">Height</Label>
+            <div className='grid grid-cols-3 items-center gap-4'>
+              <Label htmlFor='height'>Height</Label>
               <Input
-                id="height"
-                defaultValue="25px"
-                className="col-span-2 h-8"
+                id='height'
+                defaultValue='25px'
+                className='col-span-2 h-8'
               />
             </div>
-            <div className="grid grid-cols-3 items-center gap-4">
-              <Label htmlFor="maxHeight">Max. height</Label>
+            <div className='grid grid-cols-3 items-center gap-4'>
+              <Label htmlFor='maxHeight'>Max. height</Label>
               <Input
-                id="maxHeight"
-                defaultValue="none"
-                className="col-span-2 h-8"
+                id='maxHeight'
+                defaultValue='none'
+                className='col-span-2 h-8'
               />
             </div>
           </div>
@@ -89,4 +89,4 @@ export const Example: Story = {
       </PopoverContent>
     </Popover>
   ),
-};
+}
diff --git a/packages/ui/src/primitives/progress/index.tsx b/packages/ui/src/primitives/progress/index.tsx
index 5d035f37..5ac7e5ab 100644
--- a/packages/ui/src/primitives/progress/index.tsx
+++ b/packages/ui/src/primitives/progress/index.tsx
@@ -1,10 +1,10 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
-import * as ProgressPrimitive from '@radix-ui/react-progress';
+import * as ProgressPrimitive from '@radix-ui/react-progress'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
 const Progress = React.forwardRef<
   React.ElementRef<typeof ProgressPrimitive.Root>,
@@ -19,11 +19,11 @@ const Progress = React.forwardRef<
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="size-full flex-1 bg-primary transition-all"
+      className='size-full flex-1 bg-primary transition-all'
       style={{ transform: `translateX(-${String(100 - (value ?? 0))}%)` }}
     />
   </ProgressPrimitive.Root>
-));
-Progress.displayName = ProgressPrimitive.Root.displayName;
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
 
-export { Progress };
+export { Progress }
diff --git a/packages/ui/src/primitives/progress/progress.mdx b/packages/ui/src/primitives/progress/progress.mdx
index 862020f0..1aa758bf 100644
--- a/packages/ui/src/primitives/progress/progress.mdx
+++ b/packages/ui/src/primitives/progress/progress.mdx
@@ -1,11 +1,11 @@
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks'
 
-import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
-import * as ProgressStories from './progress.stories';
+import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
+import * as ProgressStories from './progress.stories'
 
 <Meta of={ProgressStories} />
 
-<RadixPrimitiveDocsButton name="progress" />
+<RadixPrimitiveDocsButton name='progress' />
 
 # Progress
 
@@ -17,9 +17,9 @@ Displays an indicator showing the completion progress of a task, typically displ
 
 ## Usage
 
-export const importCode = `import { Progress } from "@orbitkit/ui/progress";`;
+export const importCode = `import { Progress } from "@orbitkit/ui/progress";`
 
-export const usageCode = `<Progress value={33} />`;
+export const usageCode = `<Progress value={33} />`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
diff --git a/packages/ui/src/primitives/progress/progress.stories.tsx b/packages/ui/src/primitives/progress/progress.stories.tsx
index 88fcce4a..790e75e9 100644
--- a/packages/ui/src/primitives/progress/progress.stories.tsx
+++ b/packages/ui/src/primitives/progress/progress.stories.tsx
@@ -1,16 +1,16 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { Progress } from '.';
+import { Progress } from '.'
 
 const meta: Meta<typeof Progress> = {
   component: Progress,
   args: {
     value: 66,
   },
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Progress>;
+type Story = StoryObj<typeof Progress>
 
-export const Default: Story = {};
+export const Default: Story = {}
diff --git a/packages/ui/src/primitives/radio-group/index.tsx b/packages/ui/src/primitives/radio-group/index.tsx
index 482f7153..634a3864 100644
--- a/packages/ui/src/primitives/radio-group/index.tsx
+++ b/packages/ui/src/primitives/radio-group/index.tsx
@@ -1,11 +1,11 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
-import { CheckIcon } from '@radix-ui/react-icons';
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { CheckIcon } from '@radix-ui/react-icons'
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
 const RadioGroup = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Root>,
@@ -17,9 +17,9 @@ const RadioGroup = React.forwardRef<
       {...props}
       ref={ref}
     />
-  );
-});
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
 
 const RadioGroupItem = React.forwardRef<
   React.ElementRef<typeof RadioGroupPrimitive.Item>,
@@ -34,12 +34,12 @@ const RadioGroupItem = React.forwardRef<
       )}
       {...props}
     >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <CheckIcon className="size-3.5 fill-primary" />
+      <RadioGroupPrimitive.Indicator className='flex items-center justify-center'>
+        <CheckIcon className='size-3.5 fill-primary' />
       </RadioGroupPrimitive.Indicator>
     </RadioGroupPrimitive.Item>
-  );
-});
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
 
-export { RadioGroup, RadioGroupItem };
+export { RadioGroup, RadioGroupItem }
diff --git a/packages/ui/src/primitives/radio-group/radio-group.mdx b/packages/ui/src/primitives/radio-group/radio-group.mdx
index e18d51dc..e6bc7ac2 100644
--- a/packages/ui/src/primitives/radio-group/radio-group.mdx
+++ b/packages/ui/src/primitives/radio-group/radio-group.mdx
@@ -1,11 +1,11 @@
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks'
 
-import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
-import * as RadioGroupStories from './radio-group.stories';
+import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
+import * as RadioGroupStories from './radio-group.stories'
 
 <Meta of={RadioGroupStories} />
 
-<RadixPrimitiveDocsButton name="radio-group" />
+<RadixPrimitiveDocsButton name='radio-group' />
 
 # Radio Group
 
@@ -18,7 +18,7 @@ A set of checkable buttons—known as radio buttons—where no more than one of
 ## Usage
 
 export const importCode = `import { RadioGroup, RadioGroupItem } from "@orbitkit/ui/radio-group";
-import { Label } from "@orbitkit/ui/label";`;
+import { Label } from "@orbitkit/ui/label";`
 
 export const usageCode = `<RadioGroup defaultValue="option-one">
   <div className="flex items-center space-x-2">
@@ -29,7 +29,7 @@ export const usageCode = `<RadioGroup defaultValue="option-one">
     <RadioGroupItem value="option-two" id="option-two" />
     <Label htmlFor="option-two">Option Two</Label>
   </div>
-</RadioGroup>`;
+</RadioGroup>`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
diff --git a/packages/ui/src/primitives/radio-group/radio-group.stories.tsx b/packages/ui/src/primitives/radio-group/radio-group.stories.tsx
index f4de02b7..c1baae5c 100644
--- a/packages/ui/src/primitives/radio-group/radio-group.stories.tsx
+++ b/packages/ui/src/primitives/radio-group/radio-group.stories.tsx
@@ -1,16 +1,16 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { Label } from '@/primitives/label';
+import { Label } from '@/primitives/label'
 
-import { RadioGroup, RadioGroupItem } from '.';
+import { RadioGroup, RadioGroupItem } from '.'
 
 const meta: Meta<typeof RadioGroup> = {
   component: RadioGroup,
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof RadioGroup>;
+type Story = StoryObj<typeof RadioGroup>
 
 export const Default: Story = {
   args: {
@@ -18,14 +18,14 @@ export const Default: Story = {
   },
   render: (args) => (
     <RadioGroup {...args}>
-      <div className="flex items-center space-x-2">
-        <RadioGroupItem value="option-one" id="option-one" />
-        <Label htmlFor="option-one">Option One</Label>
+      <div className='flex items-center space-x-2'>
+        <RadioGroupItem value='option-one' id='option-one' />
+        <Label htmlFor='option-one'>Option One</Label>
       </div>
-      <div className="flex items-center space-x-2">
-        <RadioGroupItem value="option-two" id="option-two" />
-        <Label htmlFor="option-two">Option Two</Label>
+      <div className='flex items-center space-x-2'>
+        <RadioGroupItem value='option-two' id='option-two' />
+        <Label htmlFor='option-two'>Option Two</Label>
       </div>
     </RadioGroup>
   ),
-};
+}
diff --git a/packages/ui/src/primitives/resizable/index.tsx b/packages/ui/src/primitives/resizable/index.tsx
index 3131d21a..6e6fd540 100644
--- a/packages/ui/src/primitives/resizable/index.tsx
+++ b/packages/ui/src/primitives/resizable/index.tsx
@@ -1,9 +1,9 @@
-'use client';
+'use client'
 
-import { DragHandleDots2Icon } from '@radix-ui/react-icons';
-import * as ResizablePrimitive from 'react-resizable-panels';
+import { DragHandleDots2Icon } from '@radix-ui/react-icons'
+import * as ResizablePrimitive from 'react-resizable-panels'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
 const ResizablePanelGroup = ({
   className,
@@ -16,16 +16,16 @@ const ResizablePanelGroup = ({
     )}
     {...props}
   />
-);
+)
 
-const ResizablePanel = ResizablePrimitive.Panel;
+const ResizablePanel = ResizablePrimitive.Panel
 
 const ResizableHandle = ({
   withHandle,
   className,
   ...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean;
+  withHandle?: boolean
 }) => (
   <ResizablePrimitive.PanelResizeHandle
     className={cn(
@@ -35,11 +35,11 @@ const ResizableHandle = ({
     {...props}
   >
     {withHandle && (
-      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
-        <DragHandleDots2Icon className="size-2.5" />
+      <div className='z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border'>
+        <DragHandleDots2Icon className='size-2.5' />
       </div>
     )}
   </ResizablePrimitive.PanelResizeHandle>
-);
+)
 
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
diff --git a/packages/ui/src/primitives/resizable/resizable.mdx b/packages/ui/src/primitives/resizable/resizable.mdx
index 5e0ec9c4..ebe72559 100644
--- a/packages/ui/src/primitives/resizable/resizable.mdx
+++ b/packages/ui/src/primitives/resizable/resizable.mdx
@@ -1,13 +1,13 @@
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks'
 
-import { PrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
-import * as ResizableStories from './resizable.stories';
+import { PrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
+import * as ResizableStories from './resizable.stories'
 
 <Meta of={ResizableStories} />
 
 <PrimitiveDocsButton
-  docsUrl="https://github.com/bvaughn/react-resizable-panels"
-  apiReferenceUrl="https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels"
+  docsUrl='https://github.com/bvaughn/react-resizable-panels'
+  apiReferenceUrl='https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels'
 />
 
 # Resizable
@@ -28,16 +28,16 @@ export const importCode = `import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
-} from "@orbitkit/ui/resizable";`;
+} from "@orbitkit/ui/resizable";`
 
 export const usageCode = `<ResizablePanelGroup direction="horizontal">
   <ResizablePanel>One</ResizablePanel>
   <ResizableHandle />
   <ResizablePanel>Two</ResizablePanel>
-</ResizablePanelGroup>`;
+</ResizablePanelGroup>`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
 
 ## Examples
 
@@ -64,7 +64,7 @@ export default function Example() {
 }
 `;
 
-<Source code={verticalCode} language="tsx" dark />
+<Source code={verticalCode} language='tsx' dark />
 
 ### Handle
 
@@ -88,4 +88,4 @@ export default function Example() {
   );
 }`
 
-<Source code={withHandleCode} language="tsx" dark />
+<Source code={withHandleCode} language='tsx' dark />
diff --git a/packages/ui/src/primitives/resizable/resizable.stories.tsx b/packages/ui/src/primitives/resizable/resizable.stories.tsx
index fe064478..8c014ae3 100644
--- a/packages/ui/src/primitives/resizable/resizable.stories.tsx
+++ b/packages/ui/src/primitives/resizable/resizable.stories.tsx
@@ -1,86 +1,86 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '.';
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '.'
 
 const meta: Meta<typeof ResizablePanelGroup> = {
   component: ResizablePanelGroup,
   render: (args) => (
     <ResizablePanelGroup
       {...args}
-      direction="horizontal"
-      className="max-w-md rounded-lg border"
+      direction='horizontal'
+      className='max-w-md rounded-lg border'
     >
       <ResizablePanel defaultSize={50}>
-        <div className="flex h-[200px] items-center justify-center p-6">
-          <span className="font-semibold">One</span>
+        <div className='flex h-[200px] items-center justify-center p-6'>
+          <span className='font-semibold'>One</span>
         </div>
       </ResizablePanel>
       <ResizableHandle />
       <ResizablePanel defaultSize={50}>
-        <ResizablePanelGroup direction="vertical">
+        <ResizablePanelGroup direction='vertical'>
           <ResizablePanel defaultSize={25}>
-            <div className="flex h-full items-center justify-center p-6">
-              <span className="font-semibold">Two</span>
+            <div className='flex h-full items-center justify-center p-6'>
+              <span className='font-semibold'>Two</span>
             </div>
           </ResizablePanel>
           <ResizableHandle />
           <ResizablePanel defaultSize={75}>
-            <div className="flex h-full items-center justify-center p-6">
-              <span className="font-semibold">Three</span>
+            <div className='flex h-full items-center justify-center p-6'>
+              <span className='font-semibold'>Three</span>
             </div>
           </ResizablePanel>
         </ResizablePanelGroup>
       </ResizablePanel>
     </ResizablePanelGroup>
   ),
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof ResizablePanelGroup>;
+type Story = StoryObj<typeof ResizablePanelGroup>
 
-export const Default: Story = {};
+export const Default: Story = {}
 
 export const Vertical: Story = {
   render: (args) => (
     <ResizablePanelGroup
       {...args}
-      direction="vertical"
-      className="min-h-[200px] max-w-md rounded-lg border"
+      direction='vertical'
+      className='min-h-[200px] max-w-md rounded-lg border'
     >
       <ResizablePanel defaultSize={25}>
-        <div className="flex h-full items-center justify-center p-6">
-          <span className="font-semibold">Header</span>
+        <div className='flex h-full items-center justify-center p-6'>
+          <span className='font-semibold'>Header</span>
         </div>
       </ResizablePanel>
       <ResizableHandle />
       <ResizablePanel defaultSize={75}>
-        <div className="flex h-full items-center justify-center p-6">
-          <span className="font-semibold">Content</span>
+        <div className='flex h-full items-center justify-center p-6'>
+          <span className='font-semibold'>Content</span>
         </div>
       </ResizablePanel>
     </ResizablePanelGroup>
   ),
-};
+}
 
 export const WithHandle: Story = {
   render: (args) => (
     <ResizablePanelGroup
       {...args}
-      direction="horizontal"
-      className="min-h-[200px] max-w-md rounded-lg border"
+      direction='horizontal'
+      className='min-h-[200px] max-w-md rounded-lg border'
     >
       <ResizablePanel defaultSize={25}>
-        <div className="flex h-full items-center justify-center p-6">
-          <span className="font-semibold">Sidebar</span>
+        <div className='flex h-full items-center justify-center p-6'>
+          <span className='font-semibold'>Sidebar</span>
         </div>
       </ResizablePanel>
       <ResizableHandle withHandle />
       <ResizablePanel defaultSize={75}>
-        <div className="flex h-full items-center justify-center p-6">
-          <span className="font-semibold">Content</span>
+        <div className='flex h-full items-center justify-center p-6'>
+          <span className='font-semibold'>Content</span>
         </div>
       </ResizablePanel>
     </ResizablePanelGroup>
   ),
-};
+}
diff --git a/packages/ui/src/primitives/scroll-area/index.tsx b/packages/ui/src/primitives/scroll-area/index.tsx
index bc86601b..bbb54de1 100644
--- a/packages/ui/src/primitives/scroll-area/index.tsx
+++ b/packages/ui/src/primitives/scroll-area/index.tsx
@@ -1,10 +1,10 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
@@ -15,14 +15,14 @@ const ScrollArea = React.forwardRef<
     className={cn('relative overflow-hidden', className)}
     {...props}
   >
-    <ScrollAreaPrimitive.Viewport className="size-full rounded-[inherit]">
+    <ScrollAreaPrimitive.Viewport className='size-full rounded-[inherit]'>
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
 
 const ScrollBar = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
@@ -41,9 +41,9 @@ const ScrollBar = React.forwardRef<
     )}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+    <ScrollAreaPrimitive.ScrollAreaThumb className='relative flex-1 rounded-full bg-border' />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
 
-export { ScrollArea, ScrollBar };
+export { ScrollArea, ScrollBar }
diff --git a/packages/ui/src/primitives/scroll-area/scroll-area.mdx b/packages/ui/src/primitives/scroll-area/scroll-area.mdx
index 4d349ecc..f22848d5 100644
--- a/packages/ui/src/primitives/scroll-area/scroll-area.mdx
+++ b/packages/ui/src/primitives/scroll-area/scroll-area.mdx
@@ -1,11 +1,11 @@
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks'
 
-import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
-import * as ScrollAreaStories from './scroll-area.stories';
+import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
+import * as ScrollAreaStories from './scroll-area.stories'
 
 <Meta of={ScrollAreaStories} />
 
-<RadixPrimitiveDocsButton name="scroll-area" />
+<RadixPrimitiveDocsButton name='scroll-area' />
 
 # Scroll Area
 
@@ -17,7 +17,7 @@ Augments native scroll functionality for custom, cross-browser styling.
 
 ## Usage
 
-export const importCode = `import { ScrollArea } from "@orbitkit/ui/scroll-area";`;
+export const importCode = `import { ScrollArea } from "@orbitkit/ui/scroll-area";`
 
 export const usageCode = `<ScrollArea className="h-[200px] w-[350px] rounded-md border p-4">
   Jokester began sneaking into the castle in the middle of the night and leaving
@@ -26,10 +26,10 @@ export const usageCode = `<ScrollArea className="h-[200px] w-[350px] rounded-md
   then, one day, the people of the kingdom discovered that the jokes left by
   Jokester were so funny that they couldn't help but laugh. And once they
   started laughing, they couldn't stop.
-</ScrollArea>`;
+</ScrollArea>`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
 
 ## Examples
 
diff --git a/packages/ui/src/primitives/scroll-area/scroll-area.stories.tsx b/packages/ui/src/primitives/scroll-area/scroll-area.stories.tsx
index 644be07d..336bf161 100644
--- a/packages/ui/src/primitives/scroll-area/scroll-area.stories.tsx
+++ b/packages/ui/src/primitives/scroll-area/scroll-area.stories.tsx
@@ -1,45 +1,45 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { Separator } from '@/primitives/separator';
+import { Separator } from '@/primitives/separator'
 
-import { ScrollArea, ScrollBar } from '.';
+import { ScrollArea, ScrollBar } from '.'
 
 const meta: Meta<typeof ScrollArea> = {
   component: ScrollArea,
   argTypes: {
     asChild: { control: { disable: true } },
   },
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof ScrollArea>;
+type Story = StoryObj<typeof ScrollArea>
 
 const tags = Array.from({ length: 50 }).map(
   (_, i, a) => `v1.2.0-beta.${String(a.length - i)}`,
-);
+)
 
 export const Default: Story = {
   render: (args) => (
-    <ScrollArea {...args} className="h-72 w-48 rounded-md border">
-      <div className="p-4">
-        <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
+    <ScrollArea {...args} className='h-72 w-48 rounded-md border'>
+      <div className='p-4'>
+        <h4 className='mb-4 text-sm font-medium leading-none'>Tags</h4>
         {tags.map((tag) => (
           <>
-            <div key={tag} className="text-sm">
+            <div key={tag} className='text-sm'>
               {tag}
             </div>
-            <Separator className="my-2" />
+            <Separator className='my-2' />
           </>
         ))}
       </div>
     </ScrollArea>
   ),
-};
+}
 
 interface Artwork {
-  artist: string;
-  art: string;
+  artist: string
+  art: string
 }
 
 const works: Artwork[] = [
@@ -55,33 +55,33 @@ const works: Artwork[] = [
     artist: 'Vladimir Malyavko',
     art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',
   },
-];
+]
 
 export const HorizontalScrolling: Story = {
   render: (args) => (
-    <ScrollArea {...args} className="w-96 whitespace-nowrap rounded-md border">
-      <div className="flex w-max space-x-4 p-4">
+    <ScrollArea {...args} className='w-96 whitespace-nowrap rounded-md border'>
+      <div className='flex w-max space-x-4 p-4'>
         {works.map((artwork) => (
-          <figure key={artwork.artist} className="shrink-0">
-            <div className="overflow-hidden rounded-md">
+          <figure key={artwork.artist} className='shrink-0'>
+            <div className='overflow-hidden rounded-md'>
               <img
                 src={artwork.art}
                 alt={`By ${artwork.artist}`}
-                className="aspect-[3/4] size-fit object-cover"
+                className='aspect-[3/4] size-fit object-cover'
                 width={300}
                 height={400}
               />
             </div>
-            <figcaption className="pt-2 text-xs text-gray-11">
+            <figcaption className='pt-2 text-xs text-gray-11'>
               Photo by{' '}
-              <span className="font-semibold text-foreground">
+              <span className='font-semibold text-foreground'>
                 {artwork.artist}
               </span>
             </figcaption>
           </figure>
         ))}
       </div>
-      <ScrollBar orientation="horizontal" />
+      <ScrollBar orientation='horizontal' />
     </ScrollArea>
   ),
-};
+}
diff --git a/packages/ui/src/primitives/select/index.tsx b/packages/ui/src/primitives/select/index.tsx
index d7cbd103..b15ff018 100644
--- a/packages/ui/src/primitives/select/index.tsx
+++ b/packages/ui/src/primitives/select/index.tsx
@@ -1,22 +1,22 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
 import {
   CaretSortIcon,
   CheckIcon,
   ChevronDownIcon,
   ChevronUpIcon,
-} from '@radix-ui/react-icons';
-import * as SelectPrimitive from '@radix-ui/react-select';
+} from '@radix-ui/react-icons'
+import * as SelectPrimitive from '@radix-ui/react-select'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
-const Select = SelectPrimitive.Root;
+const Select = SelectPrimitive.Root
 
-const SelectGroup = SelectPrimitive.Group;
+const SelectGroup = SelectPrimitive.Group
 
-const SelectValue = SelectPrimitive.Value;
+const SelectValue = SelectPrimitive.Value
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
@@ -32,11 +32,11 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <CaretSortIcon className="size-4 opacity-50" />
+      <CaretSortIcon className='size-4 opacity-50' />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 
 const SelectScrollUpButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
@@ -52,8 +52,8 @@ const SelectScrollUpButton = React.forwardRef<
   >
     <ChevronUpIcon />
   </SelectPrimitive.ScrollUpButton>
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
 
 const SelectScrollDownButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
@@ -69,9 +69,9 @@ const SelectScrollDownButton = React.forwardRef<
   >
     <ChevronDownIcon />
   </SelectPrimitive.ScrollDownButton>
-));
+))
 SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName;
+  SelectPrimitive.ScrollDownButton.displayName
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
@@ -102,8 +102,8 @@ const SelectContent = React.forwardRef<
       <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
 
 const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
@@ -114,8 +114,8 @@ const SelectLabel = React.forwardRef<
     className={cn('px-2 py-1.5 text-sm font-semibold', className)}
     {...props}
   />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
 
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
@@ -129,15 +129,15 @@ const SelectItem = React.forwardRef<
     )}
     {...props}
   >
-    <span className="absolute right-2 flex size-3.5 items-center justify-center">
+    <span className='absolute right-2 flex size-3.5 items-center justify-center'>
       <SelectPrimitive.ItemIndicator>
-        <CheckIcon className="size-4" />
+        <CheckIcon className='size-4' />
       </SelectPrimitive.ItemIndicator>
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
 
 const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
@@ -148,8 +148,8 @@ const SelectSeparator = React.forwardRef<
     className={cn('-mx-1 my-1 h-px bg-muted', className)}
     {...props}
   />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
 
 export {
   Select,
@@ -162,4 +162,4 @@ export {
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,
-};
+}
diff --git a/packages/ui/src/primitives/select/select.mdx b/packages/ui/src/primitives/select/select.mdx
index 2fb7c92d..e27de3fb 100644
--- a/packages/ui/src/primitives/select/select.mdx
+++ b/packages/ui/src/primitives/select/select.mdx
@@ -1,13 +1,13 @@
-import { ExternalLinkIcon } from '@radix-ui/react-icons';
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { ExternalLinkIcon } from '@radix-ui/react-icons'
+import { Canvas, Meta, Source } from '@storybook/blocks'
 
-import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
+import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
 
-import * as SelectStories from './select.stories';
+import * as SelectStories from './select.stories'
 
 <Meta of={SelectStories} />
 
-<RadixPrimitiveDocsButton name="select" />
+<RadixPrimitiveDocsButton name='select' />
 
 # Select
 
@@ -25,7 +25,7 @@ export const importCode = `import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@orbitkit/ui/select";`;
+} from "@orbitkit/ui/select";`
 
 export const usageCode = `<Select>
   <SelectTrigger className="w-[180px]">
@@ -36,10 +36,10 @@ export const usageCode = `<Select>
     <SelectItem value="dark">Dark</SelectItem>
     <SelectItem value="system">System</SelectItem>
   </SelectContent>
-</Select>`;
+</Select>`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
 
 ## Examples
 
diff --git a/packages/ui/src/primitives/select/select.stories.tsx b/packages/ui/src/primitives/select/select.stories.tsx
index 65dad6a2..27eabf1a 100644
--- a/packages/ui/src/primitives/select/select.stories.tsx
+++ b/packages/ui/src/primitives/select/select.stories.tsx
@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react'
 
 import {
   Select,
@@ -8,96 +8,96 @@ import {
   SelectLabel,
   SelectTrigger,
   SelectValue,
-} from '.';
+} from '.'
 
 const meta: Meta<typeof Select> = {
   component: Select,
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Select>;
+type Story = StoryObj<typeof Select>
 
 export const Default: Story = {
   render: (args) => (
     <Select {...args}>
-      <SelectTrigger className="w-[180px]">
-        <SelectValue placeholder="Select a fruit" />
+      <SelectTrigger className='w-[180px]'>
+        <SelectValue placeholder='Select a fruit' />
       </SelectTrigger>
       <SelectContent>
         <SelectGroup>
           <SelectLabel>Fruits</SelectLabel>
-          <SelectItem value="apple">Apple</SelectItem>
-          <SelectItem value="banana">Banana</SelectItem>
-          <SelectItem value="blueberry">Blueberry</SelectItem>
-          <SelectItem value="grapes">Grapes</SelectItem>
-          <SelectItem value="pineapple">Pineapple</SelectItem>
+          <SelectItem value='apple'>Apple</SelectItem>
+          <SelectItem value='banana'>Banana</SelectItem>
+          <SelectItem value='blueberry'>Blueberry</SelectItem>
+          <SelectItem value='grapes'>Grapes</SelectItem>
+          <SelectItem value='pineapple'>Pineapple</SelectItem>
         </SelectGroup>
       </SelectContent>
     </Select>
   ),
-};
+}
 
 export const Scrollable: Story = {
   render: (args) => (
     <Select {...args}>
-      <SelectTrigger className="w-[280px]">
-        <SelectValue placeholder="Select a timezone" />
+      <SelectTrigger className='w-[280px]'>
+        <SelectValue placeholder='Select a timezone' />
       </SelectTrigger>
       <SelectContent>
         <SelectGroup>
           <SelectLabel>North America</SelectLabel>
-          <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>
-          <SelectItem value="cst">Central Standard Time (CST)</SelectItem>
-          <SelectItem value="mst">Mountain Standard Time (MST)</SelectItem>
-          <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>
-          <SelectItem value="akst">Alaska Standard Time (AKST)</SelectItem>
-          <SelectItem value="hst">Hawaii Standard Time (HST)</SelectItem>
+          <SelectItem value='est'>Eastern Standard Time (EST)</SelectItem>
+          <SelectItem value='cst'>Central Standard Time (CST)</SelectItem>
+          <SelectItem value='mst'>Mountain Standard Time (MST)</SelectItem>
+          <SelectItem value='pst'>Pacific Standard Time (PST)</SelectItem>
+          <SelectItem value='akst'>Alaska Standard Time (AKST)</SelectItem>
+          <SelectItem value='hst'>Hawaii Standard Time (HST)</SelectItem>
         </SelectGroup>
         <SelectGroup>
           <SelectLabel>Europe & Africa</SelectLabel>
-          <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
-          <SelectItem value="cet">Central European Time (CET)</SelectItem>
-          <SelectItem value="eet">Eastern European Time (EET)</SelectItem>
-          <SelectItem value="west">
+          <SelectItem value='gmt'>Greenwich Mean Time (GMT)</SelectItem>
+          <SelectItem value='cet'>Central European Time (CET)</SelectItem>
+          <SelectItem value='eet'>Eastern European Time (EET)</SelectItem>
+          <SelectItem value='west'>
             Western European Summer Time (WEST)
           </SelectItem>
-          <SelectItem value="cat">Central Africa Time (CAT)</SelectItem>
-          <SelectItem value="eat">East Africa Time (EAT)</SelectItem>
+          <SelectItem value='cat'>Central Africa Time (CAT)</SelectItem>
+          <SelectItem value='eat'>East Africa Time (EAT)</SelectItem>
         </SelectGroup>
         <SelectGroup>
           <SelectLabel>Asia</SelectLabel>
-          <SelectItem value="msk">Moscow Time (MSK)</SelectItem>
-          <SelectItem value="ist">India Standard Time (IST)</SelectItem>
-          <SelectItem value="cst_china">China Standard Time (CST)</SelectItem>
-          <SelectItem value="jst">Japan Standard Time (JST)</SelectItem>
-          <SelectItem value="kst">Korea Standard Time (KST)</SelectItem>
-          <SelectItem value="ist_indonesia">
+          <SelectItem value='msk'>Moscow Time (MSK)</SelectItem>
+          <SelectItem value='ist'>India Standard Time (IST)</SelectItem>
+          <SelectItem value='cst_china'>China Standard Time (CST)</SelectItem>
+          <SelectItem value='jst'>Japan Standard Time (JST)</SelectItem>
+          <SelectItem value='kst'>Korea Standard Time (KST)</SelectItem>
+          <SelectItem value='ist_indonesia'>
             Indonesia Central Standard Time (WITA)
           </SelectItem>
         </SelectGroup>
         <SelectGroup>
           <SelectLabel>Australia & Pacific</SelectLabel>
-          <SelectItem value="awst">
+          <SelectItem value='awst'>
             Australian Western Standard Time (AWST)
           </SelectItem>
-          <SelectItem value="acst">
+          <SelectItem value='acst'>
             Australian Central Standard Time (ACST)
           </SelectItem>
-          <SelectItem value="aest">
+          <SelectItem value='aest'>
             Australian Eastern Standard Time (AEST)
           </SelectItem>
-          <SelectItem value="nzst">New Zealand Standard Time (NZST)</SelectItem>
-          <SelectItem value="fjt">Fiji Time (FJT)</SelectItem>
+          <SelectItem value='nzst'>New Zealand Standard Time (NZST)</SelectItem>
+          <SelectItem value='fjt'>Fiji Time (FJT)</SelectItem>
         </SelectGroup>
         <SelectGroup>
           <SelectLabel>South America</SelectLabel>
-          <SelectItem value="art">Argentina Time (ART)</SelectItem>
-          <SelectItem value="bot">Bolivia Time (BOT)</SelectItem>
-          <SelectItem value="brt">Brasilia Time (BRT)</SelectItem>
-          <SelectItem value="clt">Chile Standard Time (CLT)</SelectItem>
+          <SelectItem value='art'>Argentina Time (ART)</SelectItem>
+          <SelectItem value='bot'>Bolivia Time (BOT)</SelectItem>
+          <SelectItem value='brt'>Brasilia Time (BRT)</SelectItem>
+          <SelectItem value='clt'>Chile Standard Time (CLT)</SelectItem>
         </SelectGroup>
       </SelectContent>
     </Select>
   ),
-};
+}
diff --git a/packages/ui/src/primitives/separator/index.tsx b/packages/ui/src/primitives/separator/index.tsx
index b2e54892..28b1111f 100644
--- a/packages/ui/src/primitives/separator/index.tsx
+++ b/packages/ui/src/primitives/separator/index.tsx
@@ -1,10 +1,10 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
@@ -26,7 +26,7 @@ const Separator = React.forwardRef<
       {...props}
     />
   ),
-);
-Separator.displayName = SeparatorPrimitive.Root.displayName;
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
 
-export { Separator };
+export { Separator }
diff --git a/packages/ui/src/primitives/separator/separator.mdx b/packages/ui/src/primitives/separator/separator.mdx
index fb5fe5c1..397095bf 100644
--- a/packages/ui/src/primitives/separator/separator.mdx
+++ b/packages/ui/src/primitives/separator/separator.mdx
@@ -1,11 +1,11 @@
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks'
 
-import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
-import * as SeparatorStories from './separator.stories';
+import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
+import * as SeparatorStories from './separator.stories'
 
 <Meta of={SeparatorStories} />
 
-<RadixPrimitiveDocsButton name="separator" />
+<RadixPrimitiveDocsButton name='separator' />
 
 # Separator
 
@@ -17,9 +17,9 @@ Visually or semantically separates content.
 
 ## Usage
 
-export const importCode = `import { Separator } from "@orbitkit/ui/separator";`;
+export const importCode = `import { Separator } from "@orbitkit/ui/separator";`
 
-export const usageCode = `<Separator />`;
+export const usageCode = `<Separator />`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
diff --git a/packages/ui/src/primitives/separator/separator.stories.tsx b/packages/ui/src/primitives/separator/separator.stories.tsx
index 5eec2329..5cf3398b 100644
--- a/packages/ui/src/primitives/separator/separator.stories.tsx
+++ b/packages/ui/src/primitives/separator/separator.stories.tsx
@@ -1,31 +1,31 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { Separator } from '.';
+import { Separator } from '.'
 
 const meta: Meta<typeof Separator> = {
   component: Separator,
   render: (args) => (
     <div>
-      <div className="space-y-1">
-        <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
-        <p className="text-sm text-muted-foreground">
+      <div className='space-y-1'>
+        <h4 className='text-sm font-medium leading-none'>Radix Primitives</h4>
+        <p className='text-sm text-muted-foreground'>
           An open-source UI component library.
         </p>
       </div>
-      <Separator {...args} className="my-4" />
-      <div className="flex h-5 items-center space-x-4 text-sm">
+      <Separator {...args} className='my-4' />
+      <div className='flex h-5 items-center space-x-4 text-sm'>
         <div>Blog</div>
-        <Separator orientation="vertical" />
+        <Separator orientation='vertical' />
         <div>Docs</div>
-        <Separator orientation="vertical" />
+        <Separator orientation='vertical' />
         <div>Source</div>
       </div>
     </div>
   ),
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Separator>;
+type Story = StoryObj<typeof Separator>
 
-export const Default: Story = {};
+export const Default: Story = {}
diff --git a/packages/ui/src/primitives/sheet/index.tsx b/packages/ui/src/primitives/sheet/index.tsx
index e2ddc60e..75c3031b 100644
--- a/packages/ui/src/primitives/sheet/index.tsx
+++ b/packages/ui/src/primitives/sheet/index.tsx
@@ -1,22 +1,22 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
-import type { VariantProps } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority'
 
-import * as SheetPrimitive from '@radix-ui/react-dialog';
-import { Cross2Icon } from '@radix-ui/react-icons';
-import { cva } from 'class-variance-authority';
+import * as SheetPrimitive from '@radix-ui/react-dialog'
+import { Cross2Icon } from '@radix-ui/react-icons'
+import { cva } from 'class-variance-authority'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
-const Sheet = SheetPrimitive.Root;
+const Sheet = SheetPrimitive.Root
 
-const SheetTrigger = SheetPrimitive.Trigger;
+const SheetTrigger = SheetPrimitive.Trigger
 
-const SheetClose = SheetPrimitive.Close;
+const SheetClose = SheetPrimitive.Close
 
-const SheetPortal = SheetPrimitive.Portal;
+const SheetPortal = SheetPrimitive.Portal
 
 const SheetOverlay = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Overlay>,
@@ -30,8 +30,8 @@ const SheetOverlay = React.forwardRef<
     {...props}
     ref={ref}
   />
-));
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
 const sheetVariants = cva(
   'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out',
@@ -50,7 +50,7 @@ const sheetVariants = cva(
       side: 'right',
     },
   },
-);
+)
 
 interface SheetContentProps
   extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
@@ -68,14 +68,14 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <Cross2Icon className="size-4" />
-        <span className="sr-only">Close</span>
+      <SheetPrimitive.Close className='absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary'>
+        <Cross2Icon className='size-4' />
+        <span className='sr-only'>Close</span>
       </SheetPrimitive.Close>
     </SheetPrimitive.Content>
   </SheetPortal>
-));
-SheetContent.displayName = SheetPrimitive.Content.displayName;
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
 
 const SheetHeader = ({
   className,
@@ -88,8 +88,8 @@ const SheetHeader = ({
     )}
     {...props}
   />
-);
-SheetHeader.displayName = 'SheetHeader';
+)
+SheetHeader.displayName = 'SheetHeader'
 
 const SheetFooter = ({
   className,
@@ -102,8 +102,8 @@ const SheetFooter = ({
     )}
     {...props}
   />
-);
-SheetFooter.displayName = 'SheetFooter';
+)
+SheetFooter.displayName = 'SheetFooter'
 
 const SheetTitle = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Title>,
@@ -114,8 +114,8 @@ const SheetTitle = React.forwardRef<
     className={cn('text-lg font-semibold text-foreground', className)}
     {...props}
   />
-));
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
 
 const SheetDescription = React.forwardRef<
   React.ElementRef<typeof SheetPrimitive.Description>,
@@ -126,8 +126,8 @@ const SheetDescription = React.forwardRef<
     className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
-));
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
 
 export {
   Sheet,
@@ -140,4 +140,4 @@ export {
   SheetFooter,
   SheetTitle,
   SheetDescription,
-};
+}
diff --git a/packages/ui/src/primitives/sheet/sheet.mdx b/packages/ui/src/primitives/sheet/sheet.mdx
index 0dffee11..c6ad7640 100644
--- a/packages/ui/src/primitives/sheet/sheet.mdx
+++ b/packages/ui/src/primitives/sheet/sheet.mdx
@@ -1,11 +1,11 @@
-import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks'
 
-import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
-import * as SheetStories from './sheet.stories';
+import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
+import * as SheetStories from './sheet.stories'
 
 <Meta of={SheetStories} />
 
-<RadixPrimitiveDocsButton name="dialog" />
+<RadixPrimitiveDocsButton name='dialog' />
 
 # Sheet
 
@@ -24,7 +24,7 @@ export const importCode = `import {
   SheetHeader,
   SheetTitle,
   SheetTrigger,
-} from "@orbitkit/ui/sheet";`;
+} from "@orbitkit/ui/sheet";`
 
 export const usageCode = `<Sheet>
   <SheetTrigger>Open</SheetTrigger>
@@ -38,10 +38,10 @@ export const usageCode = `<Sheet>
     </SheetHeader>
   </SheetContent>
 </Sheet>
-`;
+`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
 
 ## Examples
 
diff --git a/packages/ui/src/primitives/sheet/sheet.stories.tsx b/packages/ui/src/primitives/sheet/sheet.stories.tsx
index bb700cbb..49984271 100644
--- a/packages/ui/src/primitives/sheet/sheet.stories.tsx
+++ b/packages/ui/src/primitives/sheet/sheet.stories.tsx
@@ -1,8 +1,8 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { Button } from '@/primitives/button';
-import { Input } from '@/primitives/input';
-import { Label } from '@/primitives/label';
+import { Button } from '@/primitives/button'
+import { Input } from '@/primitives/input'
+import { Label } from '@/primitives/label'
 
 import {
   Sheet,
@@ -13,7 +13,7 @@ import {
   SheetHeader,
   SheetTitle,
   SheetTrigger,
-} from '.';
+} from '.'
 
 const meta: Meta<typeof SheetContent> = {
   component: SheetContent,
@@ -26,17 +26,17 @@ const meta: Meta<typeof SheetContent> = {
       control: { type: 'select' },
     },
   },
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof SheetContent>;
+type Story = StoryObj<typeof SheetContent>
 
 export const Default: Story = {
   render: (args) => (
     <Sheet>
       <SheetTrigger asChild>
-        <Button variant="outline">Open</Button>
+        <Button variant='outline'>Open</Button>
       </SheetTrigger>
       <SheetContent {...args}>
         <SheetHeader>
@@ -45,26 +45,26 @@ export const Default: Story = {
             Make changes to your profile here. Click save when you&apos;re done.
           </SheetDescription>
         </SheetHeader>
-        <div className="grid gap-4 py-4">
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="name" className="text-right">
+        <div className='grid gap-4 py-4'>
+          <div className='grid grid-cols-4 items-center gap-4'>
+            <Label htmlFor='name' className='text-right'>
               Name
             </Label>
-            <Input id="name" value="Pedro Duarte" className="col-span-3" />
+            <Input id='name' value='Pedro Duarte' className='col-span-3' />
           </div>
-          <div className="grid grid-cols-4 items-center gap-4">
-            <Label htmlFor="username" className="text-right">
+          <div className='grid grid-cols-4 items-center gap-4'>
+            <Label htmlFor='username' className='text-right'>
               Username
             </Label>
-            <Input id="username" value="@peduarte" className="col-span-3" />
+            <Input id='username' value='@peduarte' className='col-span-3' />
           </div>
         </div>
         <SheetFooter>
           <SheetClose asChild>
-            <Button type="submit">Save changes</Button>
+            <Button type='submit'>Save changes</Button>
           </SheetClose>
         </SheetFooter>
       </SheetContent>
     </Sheet>
   ),
-};
+}
diff --git a/packages/ui/src/primitives/skeleton/index.tsx b/packages/ui/src/primitives/skeleton/index.tsx
index 5a3cc914..a60e7ff1 100644
--- a/packages/ui/src/primitives/skeleton/index.tsx
+++ b/packages/ui/src/primitives/skeleton/index.tsx
@@ -1,4 +1,4 @@
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
 /**
  * A primitive component that renders a skeleton.
@@ -15,7 +15,7 @@ function Skeleton({
       className={cn('animate-pulse rounded-md bg-accent', className)}
       {...props}
     />
-  );
+  )
 }
 
-export { Skeleton };
+export { Skeleton }
diff --git a/packages/ui/src/primitives/skeleton/skeleton.mdx b/packages/ui/src/primitives/skeleton/skeleton.mdx
index a67c4033..ea74fd4e 100644
--- a/packages/ui/src/primitives/skeleton/skeleton.mdx
+++ b/packages/ui/src/primitives/skeleton/skeleton.mdx
@@ -1,6 +1,6 @@
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks'
 
-import * as SkeletonStories from './skeleton.stories';
+import * as SkeletonStories from './skeleton.stories'
 
 <Meta of={SkeletonStories} />
 
@@ -14,12 +14,12 @@ Use to show a placeholder while content is loading.
 
 ## Usage
 
-export const importCode = `import { Skeleton } from "@orbitkit/ui/skeleton";`;
+export const importCode = `import { Skeleton } from "@orbitkit/ui/skeleton";`
 
-export const usageCode = `<Skeleton className="w-[100px] h-[20px] rounded-full" />`;
+export const usageCode = `<Skeleton className="w-[100px] h-[20px] rounded-full" />`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
 
 ## Examples
 
diff --git a/packages/ui/src/primitives/skeleton/skeleton.stories.tsx b/packages/ui/src/primitives/skeleton/skeleton.stories.tsx
index 15f4045d..e5439cdf 100644
--- a/packages/ui/src/primitives/skeleton/skeleton.stories.tsx
+++ b/packages/ui/src/primitives/skeleton/skeleton.stories.tsx
@@ -1,34 +1,34 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { Skeleton } from '.';
+import { Skeleton } from '.'
 
 const meta: Meta<typeof Skeleton> = {
   component: Skeleton,
   render: (args) => (
-    <div className="flex items-center space-x-4">
-      <Skeleton {...args} className="size-12 rounded-full" />
-      <div className="space-y-2">
-        <Skeleton className="h-4 w-[250px]" />
-        <Skeleton className="h-4 w-[200px]" />
+    <div className='flex items-center space-x-4'>
+      <Skeleton {...args} className='size-12 rounded-full' />
+      <div className='space-y-2'>
+        <Skeleton className='h-4 w-[250px]' />
+        <Skeleton className='h-4 w-[200px]' />
       </div>
     </div>
   ),
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Skeleton>;
+type Story = StoryObj<typeof Skeleton>
 
-export const Default: Story = {};
+export const Default: Story = {}
 
 export const Card: Story = {
   render: (args) => (
-    <div className="flex flex-col space-y-3">
-      <Skeleton {...args} className="h-[125px] w-[250px] rounded-xl" />
-      <div className="space-y-2">
-        <Skeleton className="h-4 w-[250px]" />
-        <Skeleton className="h-4 w-[200px]" />
+    <div className='flex flex-col space-y-3'>
+      <Skeleton {...args} className='h-[125px] w-[250px] rounded-xl' />
+      <div className='space-y-2'>
+        <Skeleton className='h-4 w-[250px]' />
+        <Skeleton className='h-4 w-[200px]' />
       </div>
     </div>
   ),
-};
+}
diff --git a/packages/ui/src/primitives/slider/index.tsx b/packages/ui/src/primitives/slider/index.tsx
index 308648cd..c9b5dfba 100644
--- a/packages/ui/src/primitives/slider/index.tsx
+++ b/packages/ui/src/primitives/slider/index.tsx
@@ -1,10 +1,10 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
-import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as SliderPrimitive from '@radix-ui/react-slider'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
 const Slider = React.forwardRef<
   React.ElementRef<typeof SliderPrimitive.Root>,
@@ -18,12 +18,12 @@ const Slider = React.forwardRef<
     )}
     {...props}
   >
-    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary-3">
-      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    <SliderPrimitive.Track className='relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary-3'>
+      <SliderPrimitive.Range className='absolute h-full bg-primary' />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block size-4 rounded-full border border-primary-6 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+    <SliderPrimitive.Thumb className='block size-4 rounded-full border border-primary-6 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50' />
   </SliderPrimitive.Root>
-));
-Slider.displayName = SliderPrimitive.Root.displayName;
+))
+Slider.displayName = SliderPrimitive.Root.displayName
 
-export { Slider };
+export { Slider }
diff --git a/packages/ui/src/primitives/slider/slider.mdx b/packages/ui/src/primitives/slider/slider.mdx
index 9a6409c5..797051f9 100644
--- a/packages/ui/src/primitives/slider/slider.mdx
+++ b/packages/ui/src/primitives/slider/slider.mdx
@@ -1,11 +1,11 @@
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks'
 
-import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
-import * as SliderStories from './slider.stories';
+import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
+import * as SliderStories from './slider.stories'
 
 <Meta of={SliderStories} />
 
-<RadixPrimitiveDocsButton name="slider" />
+<RadixPrimitiveDocsButton name='slider' />
 
 # Slider
 
@@ -17,9 +17,9 @@ An input where the user selects a value from within a given range.
 
 ## Usage
 
-export const importCode = `import { Slider } from "@orbitkit/ui/slider";`;
+export const importCode = `import { Slider } from "@orbitkit/ui/slider";`
 
-export const usageCode = `<Slider defaultValue={[33]} max={100} step={1} />`;
+export const usageCode = `<Slider defaultValue={[33]} max={100} step={1} />`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
diff --git a/packages/ui/src/primitives/slider/slider.stories.tsx b/packages/ui/src/primitives/slider/slider.stories.tsx
index 8c50b8a6..c42a551f 100644
--- a/packages/ui/src/primitives/slider/slider.stories.tsx
+++ b/packages/ui/src/primitives/slider/slider.stories.tsx
@@ -1,6 +1,6 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { Slider } from '.';
+import { Slider } from '.'
 
 const meta: Meta<typeof Slider> = {
   component: Slider,
@@ -9,10 +9,10 @@ const meta: Meta<typeof Slider> = {
     max: 100,
     step: 1,
   },
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Slider>;
+type Story = StoryObj<typeof Slider>
 
-export const Default: Story = {};
+export const Default: Story = {}
diff --git a/packages/ui/src/primitives/switch/index.tsx b/packages/ui/src/primitives/switch/index.tsx
index eff72748..baa3e8e6 100644
--- a/packages/ui/src/primitives/switch/index.tsx
+++ b/packages/ui/src/primitives/switch/index.tsx
@@ -1,10 +1,10 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
-import * as SwitchPrimitives from '@radix-ui/react-switch';
+import * as SwitchPrimitives from '@radix-ui/react-switch'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
@@ -24,7 +24,7 @@ const Switch = React.forwardRef<
       )}
     />
   </SwitchPrimitives.Root>
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
 
-export { Switch };
+export { Switch }
diff --git a/packages/ui/src/primitives/switch/switch.mdx b/packages/ui/src/primitives/switch/switch.mdx
index 69f96598..85bb73a2 100644
--- a/packages/ui/src/primitives/switch/switch.mdx
+++ b/packages/ui/src/primitives/switch/switch.mdx
@@ -1,13 +1,13 @@
-import { ExternalLinkIcon } from '@radix-ui/react-icons';
-import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
+import { ExternalLinkIcon } from '@radix-ui/react-icons'
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks'
 
-import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
+import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
 
-import * as SwitchStories from './switch.stories';
+import * as SwitchStories from './switch.stories'
 
 <Meta of={SwitchStories} />
 
-<RadixPrimitiveDocsButton name="switch" />
+<RadixPrimitiveDocsButton name='switch' />
 
 # Switch
 
@@ -21,12 +21,12 @@ A control that allows the user to toggle between checked and not checked.
 
 ## Usage
 
-export const importCode = `import { Switch } from "@orbitkit/ui/switch";`;
+export const importCode = `import { Switch } from "@orbitkit/ui/switch";`
 
-export const usageCode = `<Switch />`;
+export const usageCode = `<Switch />`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
 
 ## Examples
 
diff --git a/packages/ui/src/primitives/switch/switch.stories.tsx b/packages/ui/src/primitives/switch/switch.stories.tsx
index 66bbede8..b9e4f9bb 100644
--- a/packages/ui/src/primitives/switch/switch.stories.tsx
+++ b/packages/ui/src/primitives/switch/switch.stories.tsx
@@ -1,25 +1,25 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { Label } from '@/primitives/label';
+import { Label } from '@/primitives/label'
 
-import { Switch } from '.';
+import { Switch } from '.'
 
 const meta: Meta<typeof Switch> = {
   component: Switch,
   args: {
     id: 'switch',
   },
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Switch>;
+type Story = StoryObj<typeof Switch>
 
 export const Default: Story = {
   render: (args) => (
-    <div className="flex items-center space-x-2">
+    <div className='flex items-center space-x-2'>
       <Switch {...args} />
-      <Label htmlFor="airplane-mode">Airplane Mode</Label>
+      <Label htmlFor='airplane-mode'>Airplane Mode</Label>
     </div>
   ),
-};
+}
diff --git a/packages/ui/src/primitives/table/index.tsx b/packages/ui/src/primitives/table/index.tsx
index 8c0ad61e..ff3d9722 100644
--- a/packages/ui/src/primitives/table/index.tsx
+++ b/packages/ui/src/primitives/table/index.tsx
@@ -1,28 +1,28 @@
-import * as React from 'react';
+import * as React from 'react'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
 const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
+  <div className='relative w-full overflow-auto'>
     <table
       ref={ref}
       className={cn('w-full caption-bottom text-sm', className)}
       {...props}
     />
   </div>
-));
-Table.displayName = 'Table';
+))
+Table.displayName = 'Table'
 
 const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
   <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
-));
-TableHeader.displayName = 'TableHeader';
+))
+TableHeader.displayName = 'TableHeader'
 
 const TableBody = React.forwardRef<
   HTMLTableSectionElement,
@@ -33,8 +33,8 @@ const TableBody = React.forwardRef<
     className={cn('[&_tr:last-child]:border-0', className)}
     {...props}
   />
-));
-TableBody.displayName = 'TableBody';
+))
+TableBody.displayName = 'TableBody'
 
 const TableFooter = React.forwardRef<
   HTMLTableSectionElement,
@@ -48,8 +48,8 @@ const TableFooter = React.forwardRef<
     )}
     {...props}
   />
-));
-TableFooter.displayName = 'TableFooter';
+))
+TableFooter.displayName = 'TableFooter'
 
 const TableRow = React.forwardRef<
   HTMLTableRowElement,
@@ -63,8 +63,8 @@ const TableRow = React.forwardRef<
     )}
     {...props}
   />
-));
-TableRow.displayName = 'TableRow';
+))
+TableRow.displayName = 'TableRow'
 
 const TableHead = React.forwardRef<
   HTMLTableCellElement,
@@ -78,8 +78,8 @@ const TableHead = React.forwardRef<
     )}
     {...props}
   />
-));
-TableHead.displayName = 'TableHead';
+))
+TableHead.displayName = 'TableHead'
 
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
@@ -93,8 +93,8 @@ const TableCell = React.forwardRef<
     )}
     {...props}
   />
-));
-TableCell.displayName = 'TableCell';
+))
+TableCell.displayName = 'TableCell'
 
 const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
@@ -105,8 +105,8 @@ const TableCaption = React.forwardRef<
     className={cn('mt-4 text-sm text-muted-foreground', className)}
     {...props}
   />
-));
-TableCaption.displayName = 'TableCaption';
+))
+TableCaption.displayName = 'TableCaption'
 
 export {
   Table,
@@ -117,4 +117,4 @@ export {
   TableRow,
   TableCell,
   TableCaption,
-};
+}
diff --git a/packages/ui/src/primitives/table/table.mdx b/packages/ui/src/primitives/table/table.mdx
index f52aa91a..be9e1f59 100644
--- a/packages/ui/src/primitives/table/table.mdx
+++ b/packages/ui/src/primitives/table/table.mdx
@@ -1,6 +1,6 @@
-import { Canvas, Meta, Source } from '@storybook/blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks'
 
-import * as TableStories from './table.stories';
+import * as TableStories from './table.stories'
 
 <Meta of={TableStories} />
 
@@ -22,7 +22,7 @@ export const importCode = `import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@orbitkit/ui/table";`;
+} from "@orbitkit/ui/table";`
 
 export const usageCode = `<Table>
   <TableCaption>A list of your recent invoices.</TableCaption>
@@ -43,7 +43,7 @@ export const usageCode = `<Table>
     </TableRow>
   </TableBody>
 </Table>
-`;
+`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
diff --git a/packages/ui/src/primitives/table/table.stories.tsx b/packages/ui/src/primitives/table/table.stories.tsx
index 18228c32..9c7f0ac9 100644
--- a/packages/ui/src/primitives/table/table.stories.tsx
+++ b/packages/ui/src/primitives/table/table.stories.tsx
@@ -1,4 +1,4 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react'
 
 import {
   Table,
@@ -9,7 +9,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '.';
+} from '.'
 
 const invoices = [
   {
@@ -54,7 +54,7 @@ const invoices = [
     totalAmount: '$300.00',
     paymentMethod: 'Credit Card',
   },
-];
+]
 
 const meta: Meta<typeof Table> = {
   component: Table,
@@ -63,34 +63,34 @@ const meta: Meta<typeof Table> = {
       <TableCaption>A list of your recent invoices.</TableCaption>
       <TableHeader>
         <TableRow>
-          <TableHead className="w-[100px]">Invoice</TableHead>
+          <TableHead className='w-[100px]'>Invoice</TableHead>
           <TableHead>Status</TableHead>
           <TableHead>Method</TableHead>
-          <TableHead className="text-right">Amount</TableHead>
+          <TableHead className='text-right'>Amount</TableHead>
         </TableRow>
       </TableHeader>
       <TableBody>
         {invoices.map((invoice) => (
           <TableRow key={invoice.invoice}>
-            <TableCell className="font-medium">{invoice.invoice}</TableCell>
+            <TableCell className='font-medium'>{invoice.invoice}</TableCell>
             <TableCell>{invoice.paymentStatus}</TableCell>
             <TableCell>{invoice.paymentMethod}</TableCell>
-            <TableCell className="text-right">{invoice.totalAmount}</TableCell>
+            <TableCell className='text-right'>{invoice.totalAmount}</TableCell>
           </TableRow>
         ))}
       </TableBody>
       <TableFooter>
         <TableRow>
           <TableCell colSpan={3}>Total</TableCell>
-          <TableCell className="text-right">$2,500.00</TableCell>
+          <TableCell className='text-right'>$2,500.00</TableCell>
         </TableRow>
       </TableFooter>
     </Table>
   ),
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Table>;
+type Story = StoryObj<typeof Table>
 
-export const Default: Story = {};
+export const Default: Story = {}
diff --git a/packages/ui/src/primitives/textarea/index.tsx b/packages/ui/src/primitives/textarea/index.tsx
index 7adaaad9..bd473476 100644
--- a/packages/ui/src/primitives/textarea/index.tsx
+++ b/packages/ui/src/primitives/textarea/index.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
+import * as React from 'react'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
-export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => {
@@ -15,9 +15,9 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         ref={ref}
         {...props}
       />
-    );
+    )
   },
-);
-Textarea.displayName = 'Textarea';
+)
+Textarea.displayName = 'Textarea'
 
-export { Textarea };
+export { Textarea }
diff --git a/packages/ui/src/primitives/textarea/textarea.mdx b/packages/ui/src/primitives/textarea/textarea.mdx
index 07e1458f..9e1a68d9 100644
--- a/packages/ui/src/primitives/textarea/textarea.mdx
+++ b/packages/ui/src/primitives/textarea/textarea.mdx
@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks'
 
-import * as TextAreaStories from './textarea.stories';
+import * as TextAreaStories from './textarea.stories'
 
 <Meta of={TextAreaStories} />
 
@@ -16,12 +16,12 @@ Displays a form textarea or a component that looks like a textarea.
 
 ## Usage
 
-export const importCode = `import { Textarea } from "@orbitkit/ui/textarea";`;
+export const importCode = `import { Textarea } from "@orbitkit/ui/textarea";`
 
-export const usageCode = `<Textarea />`;
+export const usageCode = `<Textarea />`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
 
 ## Examples
 
diff --git a/packages/ui/src/primitives/textarea/textarea.stories.tsx b/packages/ui/src/primitives/textarea/textarea.stories.tsx
index a186c4eb..72e855fd 100644
--- a/packages/ui/src/primitives/textarea/textarea.stories.tsx
+++ b/packages/ui/src/primitives/textarea/textarea.stories.tsx
@@ -1,9 +1,9 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { Textarea } from '.';
-import { Button } from '../button';
-import { Label } from '../label';
-import { Typography } from '../typography';
+import { Textarea } from '.'
+import { Button } from '../button'
+import { Label } from '../label'
+import { Typography } from '../typography'
 
 const meta: Meta<typeof Textarea> = {
   component: Textarea,
@@ -11,46 +11,46 @@ const meta: Meta<typeof Textarea> = {
     placeholder: 'Type your message here.',
     disabled: false,
   },
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Textarea>;
+type Story = StoryObj<typeof Textarea>
 
-export const Default: Story = {};
-export const Disabled: Story = { args: { disabled: true } };
+export const Default: Story = {}
+export const Disabled: Story = { args: { disabled: true } }
 export const WithLabel: Story = {
   args: {
     id: 'message',
   },
   render: (args) => (
-    <div className="grid w-full gap-1.5">
+    <div className='grid w-full gap-1.5'>
       <Label htmlFor={args.id}>Your Message</Label>
       <Textarea {...args} />
     </div>
   ),
-};
+}
 
 export const WithText: Story = {
   args: {
     id: 'message',
   },
   render: (args) => (
-    <div className="grid w-full gap-1.5">
+    <div className='grid w-full gap-1.5'>
       <Label htmlFor={args.id}>Your Message</Label>
       <Textarea {...args} />
-      <Typography variant="muted">
+      <Typography variant='muted'>
         Your message will be copied to the support team.
       </Typography>
     </div>
   ),
-};
+}
 
 export const WithButton: Story = {
   render: (args) => (
-    <div className="grid w-full gap-2">
+    <div className='grid w-full gap-2'>
       <Textarea {...args} />
       <Button>Send message</Button>
     </div>
   ),
-};
+}
diff --git a/packages/ui/src/primitives/toast/index.tsx b/packages/ui/src/primitives/toast/index.tsx
index 5cc7b9a5..14e91fc7 100644
--- a/packages/ui/src/primitives/toast/index.tsx
+++ b/packages/ui/src/primitives/toast/index.tsx
@@ -1,5 +1,5 @@
-'use client';
+'use client'
 
-export * from './toaster';
-export * from './toast';
-export * from './use-toast';
+export * from './toaster'
+export * from './toast'
+export * from './use-toast'
diff --git a/packages/ui/src/primitives/toast/toast.stories.tsx b/packages/ui/src/primitives/toast/toast.stories.tsx
index e8c21660..620dff08 100644
--- a/packages/ui/src/primitives/toast/toast.stories.tsx
+++ b/packages/ui/src/primitives/toast/toast.stories.tsx
@@ -1,29 +1,29 @@
-import { type FC } from 'react';
+import { type FC } from 'react'
 
-import type { ToastArgs } from './use-toast';
+import type { ToastArgs } from './use-toast'
 
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { Button } from '@/primitives/button';
+import { Button } from '@/primitives/button'
 
-import { ToastAction } from './toast';
-import { Toaster } from './toaster';
-import { useToast } from './use-toast';
+import { ToastAction } from './toast'
+import { Toaster } from './toaster'
+import { useToast } from './use-toast'
 
 const ToastDemo: FC<ToastArgs> = (props) => {
-  const { toast } = useToast();
+  const { toast } = useToast()
 
   return (
     <Button
-      variant="outline"
+      variant='outline'
       onClick={() => {
-        toast(props);
+        toast(props)
       }}
     >
       Show Toast
     </Button>
-  );
-};
+  )
+}
 
 const meta: Meta<typeof ToastDemo> = {
   component: ToastDemo,
@@ -45,41 +45,41 @@ const meta: Meta<typeof ToastDemo> = {
       <Toaster />
     </div>
   ),
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof ToastDemo>;
+type Story = StoryObj<typeof ToastDemo>
 
-export const Default: Story = {};
+export const Default: Story = {}
 
 export const Simple: Story = {
   args: {
     title: '',
     description: 'Your message has been sent.',
   },
-};
+}
 
 export const WithTitle: Story = {
   args: {
     title: 'Uh oh! Something went wrong.',
     description: 'There was a problem with your request.',
   },
-};
+}
 
 export const WithAction: Story = {
   args: {
     title: 'Uh oh! Something went wrong.',
     description: 'There was a problem with your request.',
-    action: <ToastAction altText="Try again">Try again</ToastAction>,
+    action: <ToastAction altText='Try again'>Try again</ToastAction>,
   },
-};
+}
 
 export const Destructive: Story = {
   args: {
     variant: 'destructive',
     title: 'Uh oh! Something went wrong.',
     description: 'There was a problem with your request.',
-    action: <ToastAction altText="Try again">Try again</ToastAction>,
+    action: <ToastAction altText='Try again'>Try again</ToastAction>,
   },
-};
+}
diff --git a/packages/ui/src/primitives/toast/toast.tsx b/packages/ui/src/primitives/toast/toast.tsx
index 928873ad..cab81539 100644
--- a/packages/ui/src/primitives/toast/toast.tsx
+++ b/packages/ui/src/primitives/toast/toast.tsx
@@ -1,16 +1,16 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
-import type { VariantProps } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority'
 
-import { Cross2Icon } from '@radix-ui/react-icons';
-import * as ToastPrimitives from '@radix-ui/react-toast';
-import { cva } from 'class-variance-authority';
+import { Cross2Icon } from '@radix-ui/react-icons'
+import * as ToastPrimitives from '@radix-ui/react-toast'
+import { cva } from 'class-variance-authority'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
-const ToastProvider = ToastPrimitives.Provider;
+const ToastProvider = ToastPrimitives.Provider
 
 const ToastViewport = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Viewport>,
@@ -24,8 +24,8 @@ const ToastViewport = React.forwardRef<
     )}
     {...props}
   />
-));
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 // eslint-disable-next-line tailwindcss/no-custom-classname
 const toastVariants = cva(
@@ -42,7 +42,7 @@ const toastVariants = cva(
       variant: 'default',
     },
   },
-);
+)
 
 const Toast = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Root>,
@@ -55,9 +55,9 @@ const Toast = React.forwardRef<
       className={cn(toastVariants({ variant }), className)}
       {...props}
     />
-  );
-});
-Toast.displayName = ToastPrimitives.Root.displayName;
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
 
 const ToastAction = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Action>,
@@ -71,8 +71,8 @@ const ToastAction = React.forwardRef<
     )}
     {...props}
   />
-));
-ToastAction.displayName = ToastPrimitives.Action.displayName;
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
 
 const ToastClose = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Close>,
@@ -84,13 +84,13 @@ const ToastClose = React.forwardRef<
       'absolute right-1 top-1 rounded-md p-1 text-gray-6 opacity-0 transition-colors hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-destructive-6 group-[.destructive]:hover:text-destructive-12 group-[.destructive]:focus:ring-destructive-12 group-[.destructive]:focus:ring-offset-destructive-10',
       className,
     )}
-    toast-close=""
+    toast-close=''
     {...props}
   >
-    <Cross2Icon className="size-4" />
+    <Cross2Icon className='size-4' />
   </ToastPrimitives.Close>
-));
-ToastClose.displayName = ToastPrimitives.Close.displayName;
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
 
 const ToastTitle = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Title>,
@@ -101,8 +101,8 @@ const ToastTitle = React.forwardRef<
     className={cn('text-sm font-semibold [&+div]:text-xs', className)}
     {...props}
   />
-));
-ToastTitle.displayName = ToastPrimitives.Title.displayName;
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
 
 const ToastDescription = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Description>,
@@ -116,12 +116,12 @@ const ToastDescription = React.forwardRef<
     )}
     {...props}
   />
-));
-ToastDescription.displayName = ToastPrimitives.Description.displayName;
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
 
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
 
-type ToastActionElement = React.ReactElement<typeof ToastAction>;
+type ToastActionElement = React.ReactElement<typeof ToastAction>
 
 export {
   type ToastProps,
@@ -133,4 +133,4 @@ export {
   ToastDescription,
   ToastClose,
   ToastAction,
-};
+}
diff --git a/packages/ui/src/primitives/toast/toaster.tsx b/packages/ui/src/primitives/toast/toaster.tsx
index 9f40ca26..5829faa8 100644
--- a/packages/ui/src/primitives/toast/toaster.tsx
+++ b/packages/ui/src/primitives/toast/toaster.tsx
@@ -1,4 +1,4 @@
-'use client';
+'use client'
 
 import {
   Toast,
@@ -7,22 +7,22 @@ import {
   ToastProvider,
   ToastTitle,
   ToastViewport,
-} from './toast';
-import { useToast } from './use-toast';
+} from './toast'
+import { useToast } from './use-toast'
 
 /**
  * A toast provider that renders toasts.
  * @returns The rendered toasts.
  */
 export function Toaster() {
-  const { toasts } = useToast();
+  const { toasts } = useToast()
 
   return (
     <ToastProvider>
       {toasts.map(function ({ id, title, description, action, ...props }) {
         return (
           <Toast key={id} {...props}>
-            <div className="grid gap-1">
+            <div className='grid gap-1'>
               {title && <ToastTitle>{title}</ToastTitle>}
               {description && (
                 <ToastDescription>{description}</ToastDescription>
@@ -31,9 +31,9 @@ export function Toaster() {
             {action}
             <ToastClose />
           </Toast>
-        );
+        )
       })}
       <ToastViewport />
     </ToastProvider>
-  );
+  )
 }
diff --git a/packages/ui/src/primitives/toast/use-toast.tsx b/packages/ui/src/primitives/toast/use-toast.tsx
index d098f2e2..a23ae8c2 100644
--- a/packages/ui/src/primitives/toast/use-toast.tsx
+++ b/packages/ui/src/primitives/toast/use-toast.tsx
@@ -1,78 +1,78 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
-import type { ToastActionElement, ToastProps } from './toast';
+import type { ToastActionElement, ToastProps } from './toast'
 
-const TOAST_LIMIT = 1;
-const TOAST_REMOVE_DELAY = 1000000;
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
 
 type ToasterToast = ToastProps & {
-  id: string;
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  action?: ToastActionElement;
-};
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
 
 const actionTypes = {
   ADD_TOAST: 'ADD_TOAST',
   UPDATE_TOAST: 'UPDATE_TOAST',
   DISMISS_TOAST: 'DISMISS_TOAST',
   REMOVE_TOAST: 'REMOVE_TOAST',
-} as const;
+} as const
 
-let count = 0;
+let count = 0
 
 /**
  * This function generates a unique id for a toast.
  * @returns  A unique id for a toast.
  */
 function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER;
-  return count.toString();
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
 }
 
-type ActionType = typeof actionTypes;
+type ActionType = typeof actionTypes
 
 type Action =
   | {
-      type: ActionType['ADD_TOAST'];
-      toast: ToasterToast;
+      type: ActionType['ADD_TOAST']
+      toast: ToasterToast
     }
   | {
-      type: ActionType['UPDATE_TOAST'];
-      toast: Partial<ToasterToast>;
+      type: ActionType['UPDATE_TOAST']
+      toast: Partial<ToasterToast>
     }
   | {
-      type: ActionType['DISMISS_TOAST'];
-      toastId?: ToasterToast['id'] | undefined;
+      type: ActionType['DISMISS_TOAST']
+      toastId?: ToasterToast['id'] | undefined
     }
   | {
-      type: ActionType['REMOVE_TOAST'];
-      toastId?: ToasterToast['id'] | undefined;
-    };
+      type: ActionType['REMOVE_TOAST']
+      toastId?: ToasterToast['id'] | undefined
+    }
 
 interface State {
-  toasts: ToasterToast[];
+  toasts: ToasterToast[]
 }
 
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
 
 const addToRemoveQueue = (toastId: string) => {
   if (toastTimeouts.has(toastId)) {
-    return;
+    return
   }
 
   const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId);
+    toastTimeouts.delete(toastId)
     dispatch({
       type: 'REMOVE_TOAST',
       toastId: toastId,
-    });
-  }, TOAST_REMOVE_DELAY);
+    })
+  }, TOAST_REMOVE_DELAY)
 
-  toastTimeouts.set(toastId, timeout);
-};
+  toastTimeouts.set(toastId, timeout)
+}
 
 export const reducer = (state: State, action: Action): State => {
   switch (action.type) {
@@ -80,7 +80,7 @@ export const reducer = (state: State, action: Action): State => {
       return {
         ...state,
         toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      };
+      }
 
     case 'UPDATE_TOAST':
       return {
@@ -88,19 +88,19 @@ export const reducer = (state: State, action: Action): State => {
         toasts: state.toasts.map((t) =>
           t.id === action.toast.id ? { ...t, ...action.toast } : t,
         ),
-      };
+      }
 
     case 'DISMISS_TOAST': {
-      const { toastId } = action;
+      const { toastId } = action
 
       // ! Side effects ! - This could be extracted into a dismissToast() action,
       // but I'll keep it here for simplicity
       if (toastId) {
-        addToRemoveQueue(toastId);
+        addToRemoveQueue(toastId)
       } else {
         state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id);
-        });
+          addToRemoveQueue(toast.id)
+        })
       }
 
       return {
@@ -113,38 +113,38 @@ export const reducer = (state: State, action: Action): State => {
               }
             : t,
         ),
-      };
+      }
     }
     case 'REMOVE_TOAST':
       if (action.toastId === undefined) {
         return {
           ...state,
           toasts: [],
-        };
+        }
       }
       return {
         ...state,
         toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      };
+      }
   }
-};
+}
 
-const listeners: ((state: State) => void)[] = [];
+const listeners: ((state: State) => void)[] = []
 
-let memoryState: State = { toasts: [] };
+let memoryState: State = { toasts: [] }
 
 /**
  * Dispatches an action to the toast reducer and notifies all listeners.
  * @param action The action to dispatch.
  */
 function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action);
+  memoryState = reducer(memoryState, action)
   listeners.forEach((listener) => {
-    listener(memoryState);
-  });
+    listener(memoryState)
+  })
 }
 
-export type ToastArgs = Omit<ToasterToast, 'id'>;
+export type ToastArgs = Omit<ToasterToast, 'id'>
 
 /**
  * A function that creates and displays a toast.
@@ -152,17 +152,17 @@ export type ToastArgs = Omit<ToasterToast, 'id'>;
  * @returns An object with the id of the toast and functions to dismiss or update the toast.
  */
 function toast({ ...props }: ToastArgs) {
-  const id = genId();
+  const id = genId()
 
   const update = (props: ToasterToast) => {
     dispatch({
       type: 'UPDATE_TOAST',
       toast: { ...props, id },
-    });
-  };
+    })
+  }
   const dismiss = () => {
-    dispatch({ type: 'DISMISS_TOAST', toastId: id });
-  };
+    dispatch({ type: 'DISMISS_TOAST', toastId: id })
+  }
 
   dispatch({
     type: 'ADD_TOAST',
@@ -172,17 +172,17 @@ function toast({ ...props }: ToastArgs) {
       open: true,
       onOpenChange: (open) => {
         if (!open) {
-          dismiss();
+          dismiss()
         }
       },
     },
-  });
+  })
 
   return {
     id: id,
     dismiss,
     update,
-  };
+  }
 }
 
 /**
@@ -190,25 +190,25 @@ function toast({ ...props }: ToastArgs) {
  * @returns The current state of the toasts, the toast function and a dismiss function.
  */
 function useToast() {
-  const [state, setState] = React.useState<State>(memoryState);
+  const [state, setState] = React.useState<State>(memoryState)
 
   React.useEffect(() => {
-    listeners.push(setState);
+    listeners.push(setState)
     return () => {
-      const index = listeners.indexOf(setState);
+      const index = listeners.indexOf(setState)
       if (index > -1) {
-        listeners.splice(index, 1);
+        listeners.splice(index, 1)
       }
-    };
-  }, [state]);
+    }
+  }, [state])
 
   return {
     ...state,
     toast,
     dismiss: (toastId?: string) => {
-      dispatch({ type: 'DISMISS_TOAST', toastId });
+      dispatch({ type: 'DISMISS_TOAST', toastId })
     },
-  };
+  }
 }
 
-export { useToast, toast };
+export { useToast, toast }
diff --git a/packages/ui/src/primitives/toggle-group/index.tsx b/packages/ui/src/primitives/toggle-group/index.tsx
index 2b4a0532..362eedc2 100644
--- a/packages/ui/src/primitives/toggle-group/index.tsx
+++ b/packages/ui/src/primitives/toggle-group/index.tsx
@@ -1,20 +1,20 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
-import { type VariantProps } from 'class-variance-authority';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'
+import { type VariantProps } from 'class-variance-authority'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
-import { toggleVariants } from '../toggle';
+import { toggleVariants } from '../toggle'
 
 const ToggleGroupContext = React.createContext<
   VariantProps<typeof toggleVariants>
 >({
   size: 'default',
   variant: 'default',
-});
+})
 
 const ToggleGroup = React.forwardRef<
   React.ElementRef<typeof ToggleGroupPrimitive.Root>,
@@ -30,16 +30,16 @@ const ToggleGroup = React.forwardRef<
       {children}
     </ToggleGroupContext.Provider>
   </ToggleGroupPrimitive.Root>
-));
+))
 
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
 
 const ToggleGroupItem = React.forwardRef<
   React.ElementRef<typeof ToggleGroupPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
     VariantProps<typeof toggleVariants>
 >(({ className, children, variant, size, ...props }, ref) => {
-  const context = React.useContext(ToggleGroupContext);
+  const context = React.useContext(ToggleGroupContext)
 
   return (
     <ToggleGroupPrimitive.Item
@@ -55,9 +55,9 @@ const ToggleGroupItem = React.forwardRef<
     >
       {children}
     </ToggleGroupPrimitive.Item>
-  );
-});
+  )
+})
 
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
 
-export { ToggleGroup, ToggleGroupItem };
+export { ToggleGroup, ToggleGroupItem }
diff --git a/packages/ui/src/primitives/toggle-group/toggle-group.mdx b/packages/ui/src/primitives/toggle-group/toggle-group.mdx
index 49d2ef12..4decff07 100644
--- a/packages/ui/src/primitives/toggle-group/toggle-group.mdx
+++ b/packages/ui/src/primitives/toggle-group/toggle-group.mdx
@@ -1,11 +1,11 @@
-import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks'
 
-import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
-import * as ToggleGroupStories from './toggle-group.stories';
+import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
+import * as ToggleGroupStories from './toggle-group.stories'
 
 <Meta of={ToggleGroupStories} />
 
-<RadixPrimitiveDocsButton name="toggle-group" />
+<RadixPrimitiveDocsButton name='toggle-group' />
 
 # Toggle Group
 
@@ -19,17 +19,17 @@ A set of two-state buttons that can be toggled on or off.
 
 ## Usage
 
-export const importCode = `import { ToggleGroup, ToggleGroupItem } from "@orbitkit/ui/toggle-group"`;
+export const importCode = `import { ToggleGroup, ToggleGroupItem } from "@orbitkit/ui/toggle-group"`
 
 export const usageCode = `<ToggleGroup type="single">
   <ToggleGroupItem value="a">A</ToggleGroupItem>
   <ToggleGroupItem value="b">B</ToggleGroupItem>
   <ToggleGroupItem value="c">C</ToggleGroupItem>
 </ToggleGroup>
-`;
+`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
 
 ## Examples
 
diff --git a/packages/ui/src/primitives/toggle-group/toggle-group.stories.tsx b/packages/ui/src/primitives/toggle-group/toggle-group.stories.tsx
index 3117444c..6c75be20 100644
--- a/packages/ui/src/primitives/toggle-group/toggle-group.stories.tsx
+++ b/packages/ui/src/primitives/toggle-group/toggle-group.stories.tsx
@@ -2,28 +2,28 @@ import {
   FontBoldIcon,
   FontItalicIcon,
   UnderlineIcon,
-} from '@radix-ui/react-icons';
-import { type Meta, type StoryObj } from '@storybook/react';
+} from '@radix-ui/react-icons'
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { ToggleGroup, ToggleGroupItem } from '.';
+import { ToggleGroup, ToggleGroupItem } from '.'
 
 const items = [
   {
     value: 'bold',
     'aria-label': 'Toggle bold',
-    children: <FontBoldIcon className="size-4" />,
+    children: <FontBoldIcon className='size-4' />,
   },
   {
     value: 'italic',
     'aria-label': 'Toggle italic',
-    children: <FontItalicIcon className="size-4" />,
+    children: <FontItalicIcon className='size-4' />,
   },
   {
     value: 'strikethrough',
     'aria-label': 'Toggle strikethrough',
-    children: <UnderlineIcon className="size-4" />,
+    children: <UnderlineIcon className='size-4' />,
   },
-];
+]
 
 const meta: Meta<typeof ToggleGroup> = {
   component: ToggleGroup,
@@ -54,15 +54,15 @@ const meta: Meta<typeof ToggleGroup> = {
       ))}
     </ToggleGroup>
   ),
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof ToggleGroup>;
+type Story = StoryObj<typeof ToggleGroup>
 
-export const Default: Story = {};
-export const Outline: Story = { args: { variant: 'outline' } };
-export const Single: Story = { args: { type: 'single' } };
-export const Small: Story = { args: { size: 'sm' } };
-export const Large: Story = { args: { size: 'lg' } };
-export const Disabled: Story = { args: { disabled: true } };
+export const Default: Story = {}
+export const Outline: Story = { args: { variant: 'outline' } }
+export const Single: Story = { args: { type: 'single' } }
+export const Small: Story = { args: { size: 'sm' } }
+export const Large: Story = { args: { size: 'lg' } }
+export const Disabled: Story = { args: { disabled: true } }
diff --git a/packages/ui/src/primitives/toggle/index.tsx b/packages/ui/src/primitives/toggle/index.tsx
index 172ce489..a30443ba 100644
--- a/packages/ui/src/primitives/toggle/index.tsx
+++ b/packages/ui/src/primitives/toggle/index.tsx
@@ -1,13 +1,13 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
-import type { VariantProps } from 'class-variance-authority';
+import type { VariantProps } from 'class-variance-authority'
 
-import * as TogglePrimitive from '@radix-ui/react-toggle';
-import { cva } from 'class-variance-authority';
+import * as TogglePrimitive from '@radix-ui/react-toggle'
+import { cva } from 'class-variance-authority'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
 const toggleVariants = cva(
   'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
@@ -29,7 +29,7 @@ const toggleVariants = cva(
       size: 'default',
     },
   },
-);
+)
 
 const Toggle = React.forwardRef<
   React.ElementRef<typeof TogglePrimitive.Root>,
@@ -41,8 +41,8 @@ const Toggle = React.forwardRef<
     className={cn(toggleVariants({ variant, size, className }))}
     {...props}
   />
-));
+))
 
-Toggle.displayName = TogglePrimitive.Root.displayName;
+Toggle.displayName = TogglePrimitive.Root.displayName
 
-export { Toggle, toggleVariants };
+export { Toggle, toggleVariants }
diff --git a/packages/ui/src/primitives/toggle/toggle.mdx b/packages/ui/src/primitives/toggle/toggle.mdx
index ecaf1341..cd135bc3 100644
--- a/packages/ui/src/primitives/toggle/toggle.mdx
+++ b/packages/ui/src/primitives/toggle/toggle.mdx
@@ -1,11 +1,11 @@
-import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks'
 
-import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
-import * as ToggleStories from './toggle.stories';
+import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
+import * as ToggleStories from './toggle.stories'
 
 <Meta of={ToggleStories} />
 
-<RadixPrimitiveDocsButton name="toggle" />
+<RadixPrimitiveDocsButton name='toggle' />
 
 # Toggle
 
@@ -19,12 +19,12 @@ A two-state button that can be either on or off.
 
 ## Usage
 
-export const importCode = `import { Toggle } from "@orbitkit/ui/toggle";`;
+export const importCode = `import { Toggle } from "@orbitkit/ui/toggle";`
 
-export const usageCode = `<Toggle>Toggle</Toggle>`;
+export const usageCode = `<Toggle>Toggle</Toggle>`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
 
 ## Examples
 
diff --git a/packages/ui/src/primitives/toggle/toggle.stories.tsx b/packages/ui/src/primitives/toggle/toggle.stories.tsx
index c6c11598..83bcbcda 100644
--- a/packages/ui/src/primitives/toggle/toggle.stories.tsx
+++ b/packages/ui/src/primitives/toggle/toggle.stories.tsx
@@ -1,13 +1,13 @@
-import { FontBoldIcon, FontItalicIcon } from '@radix-ui/react-icons';
-import { type Meta, type StoryObj } from '@storybook/react';
+import { FontBoldIcon, FontItalicIcon } from '@radix-ui/react-icons'
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { Toggle } from '.';
+import { Toggle } from '.'
 
 const meta: Meta<typeof Toggle> = {
   component: Toggle,
   args: {
     'aria-label': 'Toggle bold',
-    children: <FontBoldIcon className="size-4" />,
+    children: <FontBoldIcon className='size-4' />,
     size: 'default',
     variant: 'default',
   },
@@ -23,24 +23,24 @@ const meta: Meta<typeof Toggle> = {
       control: { type: 'select' },
     },
   },
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof Toggle>;
+type Story = StoryObj<typeof Toggle>
 
-export const Default: Story = {};
-export const Outline: Story = { args: { variant: 'outline' } };
+export const Default: Story = {}
+export const Outline: Story = { args: { variant: 'outline' } }
 export const WithText: Story = {
   args: {
     children: (
       <>
-        <FontItalicIcon className="mr-2 size-4" />
+        <FontItalicIcon className='mr-2 size-4' />
         Italic
       </>
     ),
   },
-};
-export const Small: Story = { args: { size: 'sm' } };
-export const Large: Story = { args: { size: 'lg' } };
-export const Disabled: Story = { args: { disabled: true } };
+}
+export const Small: Story = { args: { size: 'sm' } }
+export const Large: Story = { args: { size: 'lg' } }
+export const Disabled: Story = { args: { disabled: true } }
diff --git a/packages/ui/src/primitives/tooltip/index.tsx b/packages/ui/src/primitives/tooltip/index.tsx
index d2271541..a4829573 100644
--- a/packages/ui/src/primitives/tooltip/index.tsx
+++ b/packages/ui/src/primitives/tooltip/index.tsx
@@ -1,16 +1,16 @@
-'use client';
+'use client'
 
-import * as React from 'react';
+import * as React from 'react'
 
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
-const TooltipProvider = TooltipPrimitive.Provider;
+const TooltipProvider = TooltipPrimitive.Provider
 
-const Tooltip = TooltipPrimitive.Root;
+const Tooltip = TooltipPrimitive.Root
 
-const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipTrigger = TooltipPrimitive.Trigger
 
 const TooltipContent = React.forwardRef<
   React.ElementRef<typeof TooltipPrimitive.Content>,
@@ -25,7 +25,7 @@ const TooltipContent = React.forwardRef<
     )}
     {...props}
   />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/packages/ui/src/primitives/tooltip/tooltip.mdx b/packages/ui/src/primitives/tooltip/tooltip.mdx
index 96a2e4ef..fc5f9935 100644
--- a/packages/ui/src/primitives/tooltip/tooltip.mdx
+++ b/packages/ui/src/primitives/tooltip/tooltip.mdx
@@ -1,11 +1,11 @@
-import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks'
 
-import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button';
-import * as TooltipStories from './tooltip.stories';
+import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
+import * as TooltipStories from './tooltip.stories'
 
 <Meta of={TooltipStories} />
 
-<RadixPrimitiveDocsButton name="tooltip" />
+<RadixPrimitiveDocsButton name='tooltip' />
 
 # Tooltip
 
@@ -24,7 +24,7 @@ export const importCode = `import {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "@orbitkit/ui/tooltip";`;
+} from "@orbitkit/ui/tooltip";`
 
 export const usageCode = `<TooltipProvider>
   <Tooltip>
@@ -33,7 +33,7 @@ export const usageCode = `<TooltipProvider>
       <p>Add to library</p>
     </TooltipContent>
   </Tooltip>
-</TooltipProvider>`;
+</TooltipProvider>`
 
-<Source code={importCode} language="ts" dark />
-<Source code={usageCode} language="tsx" dark />
+<Source code={importCode} language='ts' dark />
+<Source code={usageCode} language='tsx' dark />
diff --git a/packages/ui/src/primitives/tooltip/tooltip.stories.tsx b/packages/ui/src/primitives/tooltip/tooltip.stories.tsx
index 5a8e81ba..c3a24622 100644
--- a/packages/ui/src/primitives/tooltip/tooltip.stories.tsx
+++ b/packages/ui/src/primitives/tooltip/tooltip.stories.tsx
@@ -1,7 +1,7 @@
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react'
 
-import { Button } from '../button';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './';
+import { Button } from '../button'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './'
 
 const meta: Meta<typeof TooltipContent> = {
   component: TooltipContent,
@@ -12,16 +12,16 @@ const meta: Meta<typeof TooltipContent> = {
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger asChild>
-          <Button variant="outline">Hover</Button>
+          <Button variant='outline'>Hover</Button>
         </TooltipTrigger>
         <TooltipContent {...args} />
       </Tooltip>
     </TooltipProvider>
   ),
-};
+}
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof TooltipContent>;
+type Story = StoryObj<typeof TooltipContent>
 
-export const Default: Story = {};
+export const Default: Story = {}
diff --git a/packages/ui/src/primitives/typography/index.tsx b/packages/ui/src/primitives/typography/index.tsx
index b7347970..4ae2ae67 100644
--- a/packages/ui/src/primitives/typography/index.tsx
+++ b/packages/ui/src/primitives/typography/index.tsx
@@ -1,9 +1,9 @@
-import type { VariantProps } from 'class-variance-authority';
-import type { FC, PropsWithChildren } from 'react';
+import type { VariantProps } from 'class-variance-authority'
+import type { FC, PropsWithChildren } from 'react'
 
-import { cva } from 'class-variance-authority';
+import { cva } from 'class-variance-authority'
 
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils/cn'
 
 const typographyStyles = cva([], {
   variants: {
@@ -26,12 +26,12 @@ const typographyStyles = cva([], {
   defaultVariants: {
     variant: 'p',
   },
-});
+})
 
 type TypographyProps = VariantProps<typeof typographyStyles> & {
-  as?: keyof JSX.IntrinsicElements;
-  className?: string;
-};
+  as?: keyof JSX.IntrinsicElements
+  className?: string
+}
 
 export const Typography: FC<PropsWithChildren<TypographyProps>> = ({
   as,
@@ -40,12 +40,12 @@ export const Typography: FC<PropsWithChildren<TypographyProps>> = ({
   children,
 }) => {
   if (as) {
-    const Component = as;
+    const Component = as
     return (
       <Component className={cn(typographyStyles({ variant }), className)}>
         {children}
       </Component>
-    );
+    )
   }
 
   const Component =
@@ -53,11 +53,11 @@ export const Typography: FC<PropsWithChildren<TypographyProps>> = ({
       ? 'div'
       : variant === 'lead' || variant === 'muted'
         ? 'p'
-        : variant ?? 'p';
+        : variant ?? 'p'
 
   return (
     <Component className={cn(typographyStyles({ variant }), className)}>
       {children}
     </Component>
-  );
-};
+  )
+}
diff --git a/packages/ui/src/primitives/typography/typography.mdx b/packages/ui/src/primitives/typography/typography.mdx
index de767789..934744e5 100644
--- a/packages/ui/src/primitives/typography/typography.mdx
+++ b/packages/ui/src/primitives/typography/typography.mdx
@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta, Source } from '@storybook/blocks';
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks'
 
-import * as TypographyStories from './typography.stories';
+import * as TypographyStories from './typography.stories'
 
 <Meta of={TypographyStories} />
 
diff --git a/packages/ui/src/primitives/typography/typography.stories.tsx b/packages/ui/src/primitives/typography/typography.stories.tsx
index 420f3073..33619741 100644
--- a/packages/ui/src/primitives/typography/typography.stories.tsx
+++ b/packages/ui/src/primitives/typography/typography.stories.tsx
@@ -1,7 +1,7 @@
-import { type Meta, type StoryObj } from '@storybook/react';
-import { expect, within } from '@storybook/test';
+import { type Meta, type StoryObj } from '@storybook/react'
+import { expect, within } from '@storybook/test'
 
-import { Typography } from './';
+import { Typography } from './'
 
 const meta: Meta<typeof Typography> = {
   component: Typography,
@@ -18,55 +18,55 @@ const meta: Meta<typeof Typography> = {
     },
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
+    const canvas = within(canvasElement)
     await expect(
       canvas.getByText('The big brown fox jumps over the lazy dog.'),
-    ).toBeInTheDocument();
+    ).toBeInTheDocument()
   },
-};
+}
 
-export default meta;
-type Story = StoryObj<typeof Typography>;
+export default meta
+type Story = StoryObj<typeof Typography>
 
 export const H1: Story = {
   name: 'Heading1',
   args: {
     variant: 'h1',
   },
-};
+}
 
 export const H2: Story = {
   name: 'Heading2',
   args: {
     variant: 'h2',
   },
-};
+}
 
 export const H3: Story = {
   name: 'Heading3',
   args: {
     variant: 'h3',
   },
-};
+}
 
 export const H4: Story = {
   name: 'Heading4',
   args: {
     variant: 'h4',
   },
-};
+}
 
 export const P: Story = {
   args: {
     variant: 'p',
   },
-};
+}
 
 export const Blockquote: Story = {
   args: {
     variant: 'blockquote',
   },
-};
+}
 
 export const Ul: Story = {
   args: {
@@ -80,10 +80,10 @@ export const Ul: Story = {
     ),
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await expect(canvas.getByText('One')).toBeInTheDocument();
+    const canvas = within(canvasElement)
+    await expect(canvas.getByText('One')).toBeInTheDocument()
   },
-};
+}
 
 export const Ol: Story = {
   args: {
@@ -97,10 +97,10 @@ export const Ol: Story = {
     ),
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await expect(canvas.getByText('One')).toBeInTheDocument();
+    const canvas = within(canvasElement)
+    await expect(canvas.getByText('One')).toBeInTheDocument()
   },
-};
+}
 
 export const Code: Story = {
   args: {
@@ -108,33 +108,33 @@ export const Code: Story = {
     children: 'console.log("Hello, World!");',
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
+    const canvas = within(canvasElement)
     await expect(
       canvas.getByText('console.log("Hello, World!");'),
-    ).toBeInTheDocument();
+    ).toBeInTheDocument()
   },
-};
+}
 
 export const Lead: Story = {
   args: {
     variant: 'lead',
   },
-};
+}
 
 export const Large: Story = {
   args: {
     variant: 'large',
   },
-};
+}
 
 export const Small: Story = {
   args: {
     variant: 'small',
   },
-};
+}
 
 export const Muted: Story = {
   args: {
     variant: 'muted',
   },
-};
+}
diff --git a/packages/ui/src/storybook-utils/primitive-docs-button.tsx b/packages/ui/src/storybook-utils/primitive-docs-button.tsx
index d0dba558..d0f82cbd 100644
--- a/packages/ui/src/storybook-utils/primitive-docs-button.tsx
+++ b/packages/ui/src/storybook-utils/primitive-docs-button.tsx
@@ -1,6 +1,6 @@
-import { ExternalLinkIcon } from '@radix-ui/react-icons';
+import { ExternalLinkIcon } from '@radix-ui/react-icons'
 
-import { Button } from '../primitives/button';
+import { Button } from '../primitives/button'
 
 /**
  * This component is used inside storybook mdx files to render a button that links to the Radix docs of the primitive.
@@ -10,27 +10,27 @@ import { Button } from '../primitives/button';
  */
 export function RadixPrimitiveDocsButton({ name }: { name: string }) {
   return (
-    <div className="dark !mb-6 flex gap-4">
-      <Button variant="outline" size="sm" asChild>
+    <div className='dark !mb-6 flex gap-4'>
+      <Button variant='outline' size='sm' asChild>
         <a
           href={`https://www.radix-ui.com/docs/primitives/components/${name}`}
-          className="!text-sm !text-gray-11"
+          className='!text-sm !text-gray-11'
         >
-          <ExternalLinkIcon className="mr-2 size-3" />
+          <ExternalLinkIcon className='mr-2 size-3' />
           Docs
         </a>
       </Button>
-      <Button variant="outline" size="sm" asChild>
+      <Button variant='outline' size='sm' asChild>
         <a
           href={`https://www.radix-ui.com/docs/primitives/components/${name}#api-reference`}
-          className="!text-sm !text-gray-11"
+          className='!text-sm !text-gray-11'
         >
-          <ExternalLinkIcon className="mr-2 size-3" />
+          <ExternalLinkIcon className='mr-2 size-3' />
           API Reference
         </a>
       </Button>
     </div>
-  );
+  )
 }
 
 /**
@@ -44,25 +44,25 @@ export function PrimitiveDocsButton({
   docsUrl,
   apiReferenceUrl,
 }: {
-  docsUrl: string;
-  apiReferenceUrl?: string;
+  docsUrl: string
+  apiReferenceUrl?: string
 }) {
   return (
-    <div className="dark !mb-6 flex gap-4">
-      <Button variant="outline" size="sm" asChild>
-        <a href={docsUrl} className="!text-sm !text-gray-11">
-          <ExternalLinkIcon className="mr-2 size-3" />
+    <div className='dark !mb-6 flex gap-4'>
+      <Button variant='outline' size='sm' asChild>
+        <a href={docsUrl} className='!text-sm !text-gray-11'>
+          <ExternalLinkIcon className='mr-2 size-3' />
           Docs
         </a>
       </Button>
       {apiReferenceUrl && (
-        <Button variant="outline" size="sm" asChild>
-          <a href={apiReferenceUrl} className="!text-sm !text-gray-11">
-            <ExternalLinkIcon className="mr-2 size-3" />
+        <Button variant='outline' size='sm' asChild>
+          <a href={apiReferenceUrl} className='!text-sm !text-gray-11'>
+            <ExternalLinkIcon className='mr-2 size-3' />
             API Reference
           </a>
         </Button>
       )}
     </div>
-  );
+  )
 }
diff --git a/packages/ui/src/utils/cn.ts b/packages/ui/src/utils/cn.ts
index 412183eb..824b53c9 100644
--- a/packages/ui/src/utils/cn.ts
+++ b/packages/ui/src/utils/cn.ts
@@ -1,7 +1,7 @@
-import type { ClassValue } from 'clsx';
+import type { ClassValue } from 'clsx'
 
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
 
 /**
  * This function merges tailwind class names using a combination of clsx and tailwind-merge.
@@ -9,5 +9,5 @@ import { twMerge } from 'tailwind-merge';
  * @returns the merged class names as a string
  */
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
+  return twMerge(clsx(inputs))
 }
diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts
index 9fc1de20..6389e217 100644
--- a/packages/ui/tailwind.config.ts
+++ b/packages/ui/tailwind.config.ts
@@ -1,11 +1,11 @@
-import type { Config } from 'tailwindcss';
+import type { Config } from 'tailwindcss'
 
-import { orbitKitTailwindPreset } from '@orbitkit/tailwind';
+import { orbitKitTailwindPreset } from '@orbitkit/tailwind'
 
 const config: Config = {
   content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
   darkMode: 'class',
   presets: [orbitKitTailwindPreset],
-};
+}
 
-export default config;
+export default config
diff --git a/packages/ui/vite.config.ts b/packages/ui/vite.config.ts
index a840e13e..3561207a 100644
--- a/packages/ui/vite.config.ts
+++ b/packages/ui/vite.config.ts
@@ -1,6 +1,6 @@
-import { reactConfig, buildConfig, mergeConfig } from '@orbitkit/vite';
+import { buildConfig, mergeConfig, reactConfig } from '@orbitkit/vite'
 
-import pkg from './package.json';
+import pkg from './package.json'
 
 export default mergeConfig(
   // Vite config to support React.
@@ -19,4 +19,4 @@ export default mergeConfig(
       exclude: ['src/storybook-utils', '**/*.stories.tsx'],
     },
   }),
-);
+)
diff --git a/packages/utils/eslint.config.js b/packages/utils/eslint.config.js
index 9cf80c4c..f659819d 100644
--- a/packages/utils/eslint.config.js
+++ b/packages/utils/eslint.config.js
@@ -1,4 +1,4 @@
-import { configs, defineConfig } from '@orbitkit/eslint';
+import { configs, defineConfig } from '@orbitkit/eslint'
 
 export default defineConfig(
   ...configs.base,
@@ -11,4 +11,4 @@ export default defineConfig(
       },
     },
   },
-);
+)
diff --git a/packages/utils/src/filesystem.ts b/packages/utils/src/filesystem.ts
index 6a5dcf7d..4359859f 100644
--- a/packages/utils/src/filesystem.ts
+++ b/packages/utils/src/filesystem.ts
@@ -1,4 +1,4 @@
-import { dirname, join } from 'path';
+import { dirname, join } from 'path'
 
 /**
  * This function is used to resolve the absolute path of a package. It is needed
@@ -7,5 +7,5 @@ import { dirname, join } from 'path';
  * @returns The absolute path of the package.
  */
 export function getAbsolutePath(value: string) {
-  return dirname(require.resolve(join(value, 'package.json')));
+  return dirname(require.resolve(join(value, 'package.json')))
 }
diff --git a/packages/utils/src/url.ts b/packages/utils/src/url.ts
index 6a01a3de..cb01f716 100644
--- a/packages/utils/src/url.ts
+++ b/packages/utils/src/url.ts
@@ -4,11 +4,11 @@
  */
 export function getBaseUrl() {
   if (typeof window !== 'undefined') {
-    return window.location.origin;
+    return window.location.origin
   }
 
   if (process.env['VERCEL_URL']) {
-    return `https://${process.env['VERCEL_URL']}`;
+    return `https://${process.env['VERCEL_URL']}`
   }
-  return `http://localhost:${String(process.env['PORT'] ?? 3000)}`;
+  return `http://localhost:${String(process.env['PORT'] ?? 3000)}`
 }
diff --git a/prettier.config.js b/prettier.config.js
index 4f80206e..f7042f8f 100644
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,13 +1,14 @@
 /** @type {import('@ianvs/prettier-plugin-sort-imports').PrettierConfig} */
 const config = {
-  semi: true,
+  semi: false,
   singleQuote: true,
   trailingComma: 'all',
+  arrowParens: 'always',
+  jsxSingleQuote: true,
   printWidth: 80,
   plugins: [
     '@ianvs/prettier-plugin-sort-imports',
     'prettier-plugin-packagejson',
-    'prettier-plugin-curly',
     'prettier-plugin-astro',
   ],
   overrides: [
@@ -21,7 +22,7 @@ const config = {
   importOrder: [
     '',
     '^react$',
-    '^next(-[^/]+)?(/.*)?$',
+    '^next(/.*)?$',
     '',
     '<TYPES>',
     '<TYPES>^[.]',
@@ -40,6 +41,6 @@ const config = {
     '.css$',
   ],
   importOrderTypeScriptVersion: '5.4.5',
-};
+}
 
-export default config;
+export default config
diff --git a/scripts/update-workspace.ts b/scripts/update-workspace.ts
index 09ac80b0..362cf814 100644
--- a/scripts/update-workspace.ts
+++ b/scripts/update-workspace.ts
@@ -1,15 +1,15 @@
-import { $ } from 'bun';
-import type { PackageJson } from 'pkg-types';
+import type { PackageJson } from 'pkg-types'
 
-import yargs from 'yargs';
-import { hideBin } from 'yargs/helpers';
+import { $ } from 'bun'
+import yargs from 'yargs'
+import { hideBin } from 'yargs/helpers'
 
 import {
   replaceInFile,
   traverseDirectory,
   updateNamespaceInPrettierConfig,
   updateWorkspacePackages,
-} from './utils';
+} from './utils'
 
 // ------------------------------------------------------------------
 
@@ -51,17 +51,17 @@ const argv = yargs(hideBin(process.argv))
     demandOption: false,
     description: 'Include the root package.json',
   })
-  .parseSync();
+  .parseSync()
 
-const newLicense = argv.license;
-const newAuthor = argv.author;
-const newVersion = argv.ver;
-const newNamespace = argv.namespace;
-const excludePackages = argv.exclude ?? [];
-const includeRoot = argv['include-root'];
+const newLicense = argv.license
+const newAuthor = argv.author
+const newVersion = argv.ver
+const newNamespace = argv.namespace
+const excludePackages = argv.exclude ?? []
+const includeRoot = argv['include-root']
 
 // Record to store updated package names
-const updatedPackages: Record<string, string> = {};
+const updatedPackages: Record<string, string> = {}
 
 const ignoredFolders = [
   'node_modules',
@@ -70,8 +70,8 @@ const ignoredFolders = [
   'dist',
   'build',
   '.git',
-];
-const ignoredFiles = ['package.json', 'bun.lockb'];
+]
+const ignoredFiles = ['package.json', 'bun.lockb']
 
 // ------------------------------------------------------------------
 
@@ -86,12 +86,12 @@ function updateVersion(packageJson: PackageJson): PackageJson {
     !newVersion ||
     (packageJson.name && excludePackages.includes(packageJson.name))
   ) {
-    return packageJson;
+    return packageJson
   }
 
-  packageJson.version = newVersion;
-  console.log(`Updated version of ${String(packageJson.name)}`);
-  return packageJson;
+  packageJson.version = newVersion
+  console.log(`Updated version of ${String(packageJson.name)}`)
+  return packageJson
 }
 
 // ------------------------------------------------------------------
@@ -107,33 +107,33 @@ function updatePackageName(
   fullPath: string,
 ): PackageJson {
   if (!newNamespace) {
-    return packageJson;
+    return packageJson
   }
 
   if (packageJson.name) {
     // Skip updating excluded packages
     if (excludePackages.includes(packageJson.name)) {
-      return packageJson;
+      return packageJson
     }
 
     // Update the name
-    const parts = packageJson.name.split('/');
+    const parts = packageJson.name.split('/')
 
     if (parts.length === 2) {
       // Update the name
-      parts[0] = newNamespace;
-      const newPackageName = parts.join('/');
-      updatedPackages[packageJson.name] = newPackageName;
-      packageJson.name = newPackageName;
+      parts[0] = newNamespace
+      const newPackageName = parts.join('/')
+      updatedPackages[packageJson.name] = newPackageName
+      packageJson.name = newPackageName
 
-      console.log(`Updated name in ${fullPath} to ${packageJson.name}`);
+      console.log(`Updated name in ${fullPath} to ${packageJson.name}`)
     } else if (fullPath === process.cwd()) {
       // Update the root package.json name
-      packageJson.name = newNamespace.replace('@', '');
-      console.log(`Updated name in ${fullPath} to ${packageJson.name}`);
+      packageJson.name = newNamespace.replace('@', '')
+      console.log(`Updated name in ${fullPath} to ${packageJson.name}`)
     }
   }
-  return packageJson;
+  return packageJson
 }
 
 // ------------------------------------------------------------------
@@ -145,16 +145,16 @@ function updatePackageName(
  */
 function updateAuthor(packageJson: PackageJson): PackageJson {
   if (!newAuthor) {
-    return packageJson;
+    return packageJson
   }
   // Skip updating excluded packages
   if (packageJson.name && excludePackages.includes(packageJson.name)) {
-    return packageJson;
+    return packageJson
   }
 
-  packageJson.author = newAuthor;
-  console.log(`Updated author of ${String(packageJson.name)}`);
-  return packageJson;
+  packageJson.author = newAuthor
+  console.log(`Updated author of ${String(packageJson.name)}`)
+  return packageJson
 }
 
 // ------------------------------------------------------------------
@@ -166,17 +166,17 @@ function updateAuthor(packageJson: PackageJson): PackageJson {
  */
 function updateLicense(packageJson: PackageJson): PackageJson {
   if (!newLicense) {
-    return packageJson;
+    return packageJson
   }
 
   // Skip updating excluded packages
   if (packageJson.name && excludePackages.includes(packageJson.name)) {
-    return packageJson;
+    return packageJson
   }
 
-  packageJson.license = newLicense;
-  console.log(`Updated license for ${String(packageJson.name)}`);
-  return packageJson;
+  packageJson.license = newLicense
+  console.log(`Updated license for ${String(packageJson.name)}`)
+  return packageJson
 }
 
 // ------------------------------------------------------------------
@@ -191,12 +191,12 @@ function updatePackageJsonDetails(
   packageJson: PackageJson,
   fullPath: string,
 ): PackageJson {
-  packageJson = updatePackageName(packageJson, fullPath);
-  packageJson = updateVersion(packageJson);
-  packageJson = updateAuthor(packageJson);
-  packageJson = updateLicense(packageJson);
+  packageJson = updatePackageName(packageJson, fullPath)
+  packageJson = updateVersion(packageJson)
+  packageJson = updateAuthor(packageJson)
+  packageJson = updateLicense(packageJson)
 
-  return packageJson;
+  return packageJson
 }
 
 // ------------------------------------------------------------------
@@ -207,10 +207,10 @@ function updatePackageJsonDetails(
  * @returns updated package.json
  */
 function updateDependencies(packageJson: PackageJson): PackageJson {
-  packageJson.dependencies = renameDependencies(packageJson.dependencies);
-  packageJson.devDependencies = renameDependencies(packageJson.devDependencies);
+  packageJson.dependencies = renameDependencies(packageJson.dependencies)
+  packageJson.devDependencies = renameDependencies(packageJson.devDependencies)
 
-  return packageJson;
+  return packageJson
 }
 
 // ------------------------------------------------------------------
@@ -224,22 +224,22 @@ function renameDependencies(
   dependencies: Record<string, string> | undefined,
 ): Record<string, string> {
   if (!dependencies) {
-    return {};
+    return {}
   }
 
   /* eslint-disable security/detect-object-injection */
   for (const [name, version] of Object.entries(dependencies)) {
-    const dependency = updatedPackages[name];
+    const dependency = updatedPackages[name]
     if (dependency && dependency !== name) {
-      dependencies[dependency] = version;
+      dependencies[dependency] = version
       // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-      delete dependencies[name];
-      console.log(`Updated dependency from ${name} to ${dependency}`);
+      delete dependencies[name]
+      console.log(`Updated dependency from ${name} to ${dependency}`)
     }
   }
   /* eslint-enable security/detect-object-injection */
 
-  return dependencies;
+  return dependencies
 }
 
 // ------------------------------------------------------------------
@@ -249,20 +249,20 @@ function renameDependencies(
  */
 async function findAndReplacePackageNames() {
   if (!newNamespace) {
-    return;
+    return
   }
 
-  console.log('🗂️ Finding and replacing package names in all files...');
+  console.log('🗂️ Finding and replacing package names in all files...')
   await traverseDirectory(
     process.cwd(),
     async (fullPath) => {
       // for each updated package, make sure the file is updated where they are referenced
-      await replaceInFile(fullPath, updatedPackages, ignoredFiles);
+      await replaceInFile(fullPath, updatedPackages, ignoredFiles)
     },
     ignoredFolders,
-  );
+  )
 
-  await updateNamespaceInPrettierConfig(process.cwd(), newNamespace);
+  await updateNamespaceInPrettierConfig(process.cwd(), newNamespace)
 }
 
 // ------------------------------------------------------------------
@@ -272,20 +272,20 @@ await updateWorkspacePackages(
   process.cwd(),
   updatePackageJsonDetails,
   includeRoot,
-);
+)
 
 if (newNamespace) {
   // Update dependencies
-  console.log('🔄 Updating dependencies...');
-  await updateWorkspacePackages(process.cwd(), updateDependencies, includeRoot);
+  console.log('🔄 Updating dependencies...')
+  await updateWorkspacePackages(process.cwd(), updateDependencies, includeRoot)
 
   // Find and replace package names in all files
-  await findAndReplacePackageNames();
+  await findAndReplacePackageNames()
 
   // Done
-  await $`bun format && bun turbo clean && bun install`;
+  await $`bun format && bun turbo clean && bun install`
 
   console.log(
     '🎉 Done! Workspace namespaces have successfully been updated. You may wish to reload your IDE, to remove any errors.',
-  );
+  )
 }
diff --git a/scripts/utils.ts b/scripts/utils.ts
index 80f5c1d5..1fe58770 100644
--- a/scripts/utils.ts
+++ b/scripts/utils.ts
@@ -1,9 +1,10 @@
 /* eslint-disable security/detect-non-literal-fs-filename */
-import type { PackageJson } from 'pkg-types';
 
-import * as fs from 'fs';
-import * as fsPromise from 'fs/promises';
-import * as path from 'path';
+import type { PackageJson } from 'pkg-types'
+
+import * as fs from 'fs'
+import * as fsPromise from 'fs/promises'
+import * as path from 'path'
 
 // ------------------------------------------------------------------
 
@@ -13,11 +14,11 @@ import * as path from 'path';
  * @returns the root package.json in the workspace.
  */
 export function getRootPackageJson(cwd: string): PackageJson {
-  const rootPackageJsonPath = path.resolve(cwd, 'package.json');
+  const rootPackageJsonPath = path.resolve(cwd, 'package.json')
   const rootPackageJson = JSON.parse(
     fs.readFileSync(rootPackageJsonPath, 'utf-8'),
-  ) as PackageJson;
-  return rootPackageJson;
+  ) as PackageJson
+  return rootPackageJson
 }
 
 // ------------------------------------------------------------------
@@ -28,19 +29,19 @@ export function getRootPackageJson(cwd: string): PackageJson {
  * @returns an array of all workspace package paths.
  */
 export function getWorkspacePackagePaths(workspaces: string[]): string[] {
-  const workspacePackagePaths: string[] = [];
+  const workspacePackagePaths: string[] = []
 
   workspaces.forEach((workspacePattern) => {
-    const workspaceDirs = workspacePattern.replace(/\/\*$/, '');
-    const absolutePath = path.resolve(process.cwd(), workspaceDirs);
+    const workspaceDirs = workspacePattern.replace(/\/\*$/, '')
+    const absolutePath = path.resolve(process.cwd(), workspaceDirs)
     const packages = fs
       .readdirSync(absolutePath)
       .map((pkgDir) => path.join(workspaceDirs, pkgDir))
-      .filter((pkgPath) => fs.existsSync(path.join(pkgPath, 'package.json'))); // Filter only directories with package.json
-    workspacePackagePaths.push(...packages);
-  });
+      .filter((pkgPath) => fs.existsSync(path.join(pkgPath, 'package.json'))) // Filter only directories with package.json
+    workspacePackagePaths.push(...packages)
+  })
 
-  return workspacePackagePaths;
+  return workspacePackagePaths
 }
 
 // ------------------------------------------------------------------
@@ -53,15 +54,15 @@ export function getWorkspacePackagePaths(workspaces: string[]): string[] {
 export function getPackageNamesFromPaths(packagePaths: string[]): string[] {
   const packageNames = packagePaths
     .map((pkgPath) => {
-      const packageJsonPath = path.join(pkgPath, 'package.json');
+      const packageJsonPath = path.join(pkgPath, 'package.json')
       const packageJson = JSON.parse(
         fs.readFileSync(packageJsonPath, 'utf-8'),
-      ) as PackageJson;
-      return packageJson.name;
+      ) as PackageJson
+      return packageJson.name
     })
-    .filter((name): name is string => !!name); // Filter out undefined names
+    .filter((name): name is string => !!name) // Filter out undefined names
 
-  return packageNames;
+  return packageNames
 }
 
 // ------------------------------------------------------------------
@@ -72,20 +73,20 @@ export function getPackageNamesFromPaths(packagePaths: string[]): string[] {
  * @returns an array of all workspace package names
  */
 export function getWorkspacePackageNames(cwd: string): string[] {
-  const rootPackageJson = getRootPackageJson(cwd);
+  const rootPackageJson = getRootPackageJson(cwd)
   if (!rootPackageJson.workspaces) {
-    throw new Error('No workspaces defined in the root package.json');
+    throw new Error('No workspaces defined in the root package.json')
   }
 
   const workspacePackagePaths = getWorkspacePackagePaths(
     rootPackageJson.workspaces,
-  );
-  const packageNames = getPackageNamesFromPaths(workspacePackagePaths);
+  )
+  const packageNames = getPackageNamesFromPaths(workspacePackagePaths)
 
   return [
     ...packageNames,
     ...(rootPackageJson.name ? [rootPackageJson.name] : []),
-  ];
+  ]
 }
 
 // ------------------------------------------------------------------
@@ -104,35 +105,35 @@ export async function updateWorkspacePackages(
   ) => PackageJson | Promise<PackageJson>,
   includeRoot = false,
 ): Promise<void> {
-  const rootPackageJson = getRootPackageJson(cwd);
+  const rootPackageJson = getRootPackageJson(cwd)
 
   if (!rootPackageJson.workspaces) {
-    throw new Error('No workspaces defined in the root package.json');
+    throw new Error('No workspaces defined in the root package.json')
   }
 
   const workspacePackagePaths = getWorkspacePackagePaths(
     rootPackageJson.workspaces,
-  );
+  )
 
   if (includeRoot) {
-    workspacePackagePaths.push(cwd);
+    workspacePackagePaths.push(cwd)
   }
 
   await Promise.all(
     workspacePackagePaths.map(async (pkgPath) => {
-      const packageJsonPath = path.join(pkgPath, 'package.json');
+      const packageJsonPath = path.join(pkgPath, 'package.json')
       const packageJsonContent = await fsPromise.readFile(
         packageJsonPath,
         'utf-8',
-      );
-      const packageJson = JSON.parse(packageJsonContent) as PackageJson;
-      const updatedPackageJson = await update(packageJson, pkgPath);
+      )
+      const packageJson = JSON.parse(packageJsonContent) as PackageJson
+      const updatedPackageJson = await update(packageJson, pkgPath)
       await fsPromise.writeFile(
         packageJsonPath,
         JSON.stringify(updatedPackageJson, null, 2) + '\n',
-      );
+      )
     }),
-  );
+  )
 }
 
 // ------------------------------------------------------------------
@@ -149,22 +150,22 @@ export async function replaceInFile(
   ignoredFiles: string[] = [],
 ): Promise<void> {
   if (ignoredFiles.includes(path.basename(filePath))) {
-    return;
+    return
   }
 
   try {
-    let data = await fsPromise.readFile(filePath, 'utf8');
+    let data = await fsPromise.readFile(filePath, 'utf8')
 
     for (const [search, replace] of Object.entries(searchReplace)) {
       // eslint-disable-next-line security/detect-non-literal-regexp
-      const regex = new RegExp(search, 'g');
-      data = data.replace(regex, replace);
+      const regex = new RegExp(search, 'g')
+      data = data.replace(regex, replace)
     }
 
-    await fsPromise.writeFile(filePath, data, 'utf8');
-    console.log(`Successfully updated ${filePath}`);
+    await fsPromise.writeFile(filePath, data, 'utf8')
+    console.log(`Successfully updated ${filePath}`)
   } catch (err) {
-    console.error(`Error processing file ${filePath}:`, err);
+    console.error(`Error processing file ${filePath}:`, err)
   }
 }
 
@@ -182,22 +183,22 @@ export async function traverseDirectory(
   ignoredFolders: string[] = [],
 ): Promise<void> {
   try {
-    const files = await fsPromise.readdir(directory);
+    const files = await fsPromise.readdir(directory)
 
     for (const file of files) {
-      const fullPath = path.join(directory, file);
-      const stats = await fsPromise.stat(fullPath);
+      const fullPath = path.join(directory, file)
+      const stats = await fsPromise.stat(fullPath)
 
       if (stats.isDirectory()) {
         if (!ignoredFolders.includes(file)) {
-          await traverseDirectory(fullPath, callback, ignoredFolders);
+          await traverseDirectory(fullPath, callback, ignoredFolders)
         }
       } else if (stats.isFile()) {
-        await callback(fullPath);
+        await callback(fullPath)
       }
     }
   } catch (err) {
-    console.error(`Error processing directory ${directory}:`, err);
+    console.error(`Error processing directory ${directory}:`, err)
   }
 }
 
@@ -212,44 +213,44 @@ export async function updateNamespaceInPrettierConfig(
   cwd: string,
   newNamespace: string,
 ): Promise<void> {
-  const filePath = path.join(cwd, 'prettier.config.js');
+  const filePath = path.join(cwd, 'prettier.config.js')
 
   try {
-    const data = await fsPromise.readFile(filePath, 'utf8');
+    const data = await fsPromise.readFile(filePath, 'utf8')
 
     // Extract importOrder array content
-    const importOrderStart = data.indexOf('importOrder: [');
-    const importOrderEnd = data.indexOf('],', importOrderStart);
+    const importOrderStart = data.indexOf('importOrder: [')
+    const importOrderEnd = data.indexOf('],', importOrderStart)
     if (importOrderStart === -1 || importOrderEnd === -1) {
-      console.error('importOrder array not found in file');
-      return;
+      console.error('importOrder array not found in file')
+      return
     }
 
-    const beforeImportOrder = data.substring(0, importOrderStart);
+    const beforeImportOrder = data.substring(0, importOrderStart)
     const importOrderContent = data.substring(
       importOrderStart,
       importOrderEnd + 2,
-    ); // Include '],'
-    const afterImportOrder = data.substring(importOrderEnd + 2);
+    ) // Include '],'
+    const afterImportOrder = data.substring(importOrderEnd + 2)
 
-    const searchPattern = /'\^@\w+\/\(\.\*\)\$'/g;
+    const searchPattern = /'\^@\w+\/\(\.\*\)\$'/g
 
     // Replace within importOrder array content
     const updatedImportOrderContent = importOrderContent.replace(
       searchPattern,
       (match) => {
-        return match.replace(/@\w+\//, `${newNamespace}/`);
+        return match.replace(/@\w+\//, `${newNamespace}/`)
       },
-    );
+    )
 
     // Reconstruct the file content
     const updatedData =
-      beforeImportOrder + updatedImportOrderContent + afterImportOrder;
+      beforeImportOrder + updatedImportOrderContent + afterImportOrder
 
-    await fsPromise.writeFile(filePath, updatedData, 'utf8');
-    console.log(`Successfully updated ${filePath}`);
+    await fsPromise.writeFile(filePath, updatedData, 'utf8')
+    console.log(`Successfully updated ${filePath}`)
   } catch (err) {
-    console.error(`Error processing file ${filePath}:`, err);
+    console.error(`Error processing file ${filePath}:`, err)
   }
 }