Update dependencies + Improve layout

apps/website/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code-blocks/website",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -15,39 +15,39 @@
     "check:registry": "tsx ./src/components/registry/check-registry.ts"
   },
   "dependencies": {
-    "@base-ui/react": "1.2.0",
-    "@react-symbols/icons": "1.3.0",
+    "@base-ui/react": "1.4.1",
+    "@react-symbols/icons": "1.3.1",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "cmdk": "1.1.1",
-    "lucide-react": "0.577.0",
-    "motion": "12.35.2",
-    "next": "16.1.6",
+    "lucide-react": "1.14.0",
+    "motion": "12.38.0",
+    "next": "16.2.6",
     "next-themes": "0.4.6",
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
-    "react-hotkeys-hook": "5.2.4",
-    "shadcn": "4.0.5",
+    "react": "19.2.6",
+    "react-dom": "19.2.6",
+    "react-hotkeys-hook": "5.3.2",
+    "shadcn": "4.7.0",
     "swr": "2.4.1",
-    "tailwind-merge": "3.5.0",
-    "zod": "4.3.6",
-    "zustand": "5.0.11"
+    "tailwind-merge": "3.6.0",
+    "zod": "4.4.3",
+    "zustand": "5.0.13"
   },
   "devDependencies": {
     "@code-blocks/eslint": "workspace:*",
     "@code-blocks/registry": "workspace:*",
     "@content-collections/cli": "0.1.9",
-    "@content-collections/core": "0.14.2",
+    "@content-collections/core": "0.15.0",
     "@content-collections/mdx": "0.2.2",
     "@content-collections/next": "0.2.11",
     "@shikijs/langs": "4.0.2",
     "@shikijs/rehype": "4.0.2",
     "@shikijs/themes": "4.0.2",
     "@shikijs/transformers": "4.0.2",
-    "@tailwindcss/postcss": "4.2.1",
+    "@tailwindcss/postcss": "4.3.0",
     "@tailwindcss/typography": "0.5.19",
     "@types/mdx": "2.0.13",
-    "@types/node": "22.19.15",
+    "@types/node": "22.19.19",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "chalk": "5.6.2",
@@ -58,8 +58,8 @@
     "rehype-slug": "6.0.0",
     "remark-gfm": "4.0.1",
     "shiki": "4.0.2",
-    "sugar-high": "0.9.5",
-    "tailwindcss": "4.2.1",
+    "sugar-high": "1.1.0",
+    "tailwindcss": "4.3.0",
     "tsx": "4.21.0",
     "tw-animate-css": "1.4.0",
     "typescript": "5.9.3",

apps/website/src/components/code-block/blocks/multi-tabs.tsx

@@ -74,7 +74,7 @@ body {
 
 const CopyWithTabsCode = () => {
   return (
-    <Tabs className="w-full gap-1">
+    <Tabs className="w-full gap-1" defaultValue={Code[0].title}>
       <CodeBlock>
         <CodeBlockHeader>
           <div className="flex items-center space-x-1">

apps/website/src/components/docs/component-preview.tsx

@@ -48,7 +48,7 @@ const ComponentPreview = ({ component, children }: ComponentPreviewProps) => {
               fallback={
                 <div className="flex flex-col items-center justify-center text-sm text-neutral-700 dark:text-neutral-300">
                   <LoaderIcon size={14} className="animate-spin" />
-                  <span>Preparing...</span>
+                  <span>Preparing…</span>
                 </div>
               }
             >

apps/website/src/components/docs/prerequisites-cards.tsx

@@ -11,6 +11,7 @@ import {
   Shiki,
   SugarHigh,
   Vite,
+  TanStack
 } from "@/components/ui/svgs";
 
 const cardStyles = cn(
@@ -32,13 +33,18 @@ const ReactFrameworks = [
     icon: Nextjs,
     url: "https://nextjs.org/",
   },
+  {
+    name: "TanStack Start",
+    icon: TanStack,
+    url: "https://tanstack.com/start/latest/docs/framework/react/getting-started#use-the-cli",
+  },
   {
     name: "Astro",
     icon: Astro,
     url: "https://docs.astro.build/en/guides/integrations-guide/react/",
   },
   {
-    name: "React-Router",
+    name: "React Router",
     icon: ReactRouter,
     url: "https://reactrouter.com/",
   },
@@ -59,9 +65,9 @@ const Highlights = [
 
 const CreateReactApp = () => {
   return (
-    <div className="grid grid-cols-2 gap-4 md:grid-cols-6">
+    <div className="grid grid-cols-2 gap-4 md:grid-cols-5">
       {ReactFrameworks.map(({ name, icon: Icon, url }) => (
-        <ExternalLink key={name} href={url} className={cn(cardStyles)}>
+        <ExternalLink key={name} href={url} className={cn(cardStyles, "w-full")}>
           <ArrowUpRightIcon
             size={14}
             className="absolute top-2 right-2 text-neutral-500 transition-colors group-hover:text-black dark:group-hover:text-white"

apps/website/src/components/docs/sidebar-links.tsx

@@ -62,7 +62,7 @@ const SidebarSection = ({ data, pathname }: SidebarSectionProps) => (
 const SidebarLinks = () => {
   const pathname = usePathname();
   return (
-    <nav className="flex flex-1 flex-col space-y-6 pb-6">
+    <nav className="flex flex-1 flex-col gap-y-6 pb-6">
       <SidebarSection data={GettingStartedData} pathname={pathname} />
       <SidebarSection data={ReactComponentsData} pathname={pathname} />
       <SidebarSection data={ShikiData} pathname={pathname} />

apps/website/src/components/get-started-link.tsx

@@ -8,8 +8,8 @@ import { ChevronRightIcon } from "lucide-react";
 import { buttonVariants } from "@/components/ui/button";
 
 const GetStartedLink = () => {
-  const navigate = useRouter();
-  useHotkeys("c", () => navigate.push("/docs"));
+  const { push } = useRouter();
+  useHotkeys("c", () => push("/docs"));
   return (
     <Link
       href="/docs/getting-started/prerequisites"

apps/website/src/components/header.tsx

@@ -27,8 +27,8 @@ const Header = ({ layout }: HeaderProps) => {
         <Link
           href="/"
           className={cn(
-            "flex items-center gap-2",
-            "font-semibold tracking-tight transition-colors md:text-xl",
+            "flex items-center gap-2.5",
+            "font-semibold tracking-tight transition-colors md:text-lg",
             "hover:text-neutral-700 dark:hover:text-neutral-300",
           )}
         >

apps/website/src/components/theme-toggle.tsx

@@ -17,13 +17,13 @@ import { useHotkeys } from "react-hotkeys-hook";
 
 const ThemeToggle = () => {
   const { setTheme } = useTheme();
-  useHotkeys("t", () =>
+  useHotkeys("d", () =>
     setTheme((prev) => (prev === "light" ? "dark" : "light")),
   );
   return (
     <DropdownMenu>
       <DropdownMenuTrigger
-        title="Toggle theme (t)"
+        title="Toggle theme (d)"
         className={buttonVariants({ variant: "ghost", size: "icon" })}
       >
         <SunIcon
@@ -34,11 +34,11 @@ const ThemeToggle = () => {
           size={20}
           className="absolute scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0"
         />
-        <span className="sr-only">Toggle theme (t)</span>
+        <span className="sr-only">Toggle theme (d)</span>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
         <DropdownMenuGroup>
-          <DropdownMenuLabel>Theme (press t)</DropdownMenuLabel>
+          <DropdownMenuLabel>Theme (press d)</DropdownMenuLabel>
           <DropdownMenuSeparator />
           <DropdownMenuItem onClick={() => setTheme("light")}>
             <SunIcon size={14} />

apps/website/src/components/ui/svgs/index.tsx

@@ -10,4 +10,5 @@ export * from "./twitter";
 export * from "./vite";
 export * from "./radix-ui";
 export * from "./base-ui";
+export * from "./tanstack";
 export * from "./motion";