docs/package.json

@@ -18,7 +18,7 @@
     "axios": "^1.8.3",
     "lucide-react": "^0.477.0",
     "motion": "^12.4.10",
-    "rasengan": "1.0.0-beta.61",
+    "rasengan": "workspace:^",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tailwind-merge": "^3.0.2",

docs/src/app/_404.tsx

@@ -0,0 +1,16 @@
+import Button from '@/components/atoms/buttons/button';
+import { Link } from 'rasengan';
+
+export default function NotFound() {
+  return (
+    <section className="flex flex-col items-center justify-center h-screen">
+      <h1 className="text-4xl mb-4 font-lexend-bold">Oops</h1>
+      <h2 className="text-2xl">404 - Page Not Found</h2>
+      <Link to="/">
+        <Button className="bg-primary text-primary-foreground mt-4 text-sm">
+          Back to Home
+        </Button>
+      </Link>
+    </section>
+  );
+}

docs/src/app/app.layout.tsx

@@ -1,18 +1,32 @@
-import React, { useEffect } from 'react';
-import { Outlet, LayoutComponent, Link } from 'rasengan';
+import { useEffect } from 'react';
+import { Outlet, LayoutComponent, Link, useLocation } from 'rasengan';
 import { useTheme } from '@rasenganjs/theme';
 import { twMerge } from 'tailwind-merge';
 import { useNavigationStore } from '@/store/navigation';
 import { motion, AnimatePresence } from 'motion/react';
 import { NavigationData } from '@/data/docs';
 import { X } from 'lucide-react';
 import ThemeButton from '@/components/atoms/buttons/theme-button';
-import Footer from '@/components/layout/footer';
 
 const AppLayout: LayoutComponent = () => {
   const { isDark } = useTheme();
   const { isOpen, toggle } = useNavigationStore();
 
+  const location = useLocation();
+  const pathname = location.pathname;
+
+  // Scroll to the top on route change
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    console.log('scroll to top');
+
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  }, [pathname]);
+
   return (
     <section
       className={twMerge(

docs/src/app/app.router.ts

@@ -2,11 +2,13 @@ import { RouterComponent, defineRouter } from 'rasengan';
 import RootRouter from '@/app/root/root.router';
 import AppLayout from '@/app/app.layout';
 import DocsRouter from '@/app/docs/docs.router';
+import NotFound from './_404';
 
 class AppRouter extends RouterComponent {}
 
 export default defineRouter({
   imports: [RootRouter, DocsRouter],
   layout: AppLayout,
   pages: [],
+  notFoundComponent: NotFound,
 })(AppRouter);

docs/src/app/docs/pages/home/api/api.group.ts

@@ -0,0 +1,19 @@
+import { defineRoutesGroup } from 'rasengan';
+import componentsGroup from './components/components.group';
+import functionsGroup from './functions/functions.group';
+import conventionsGroup from './conventions/conventions.group';
+import RasenganConfigPage from './rasengan-config.page.mdx';
+import CreateRasenganCliPage from './create-rasengan-cli.page.mdx';
+import RasenganCliPage from './rasengan-cli.page.mdx';
+
+export default defineRoutesGroup({
+  path: '/api-reference',
+  children: [
+    componentsGroup,
+    functionsGroup,
+    conventionsGroup,
+    RasenganConfigPage,
+    CreateRasenganCliPage,
+    RasenganCliPage,
+  ],
+});

docs/src/app/docs/pages/home/api/components/component.page.mdx

@@ -0,0 +1,67 @@
+---
+path: component
+metadata:
+  title: Component
+  description: Component
+toc: true
+---
+
+import Pagination from '@/components/molecules/pagination';
+import { Link } from "rasengan";
+import StepItem from '@/components/molecules/step-item';
+import Tabs from '@/components/molecules/tab';
+
+<span className="text-[12px] font-mono-regular text-foreground/60">
+  API REFERENCE
+</span>
+# Component
+
+The `Component` React component is the main component provided by Rasengan.js to setting up all the routing system based on the `AppRouter` that it receives as a prop.
+
+This component is used inside the `main.tsx` file (the entry point of the application) to set up the routing system.
+
+## Usage
+
+<Tabs tabs={[{ title: 'TypeScript' }, { title: 'JavaScript' }]} activeIndex={0}>
+  <Tabs.Item>
+    ```tsx title="main.tsx" {5} showLineNumbers /Component/
+    import { type AppProps } from "rasengan";
+    import AppRouter from "@/app/app.router";
+
+    export default function App({ Component, children }: AppProps) {
+      return <Component router={AppRouter}>{children}</Component>;
+    }
+    ```
+  </Tabs.Item>
+  <Tabs.Item>
+    ```jsx title="main.jsx" {4} showLineNumbers /Component/
+    import AppRouter from "@/app/app.router";
+
+    export default function App({ Component, children }) {
+      return <Component router={AppRouter}>{children}</Component>;
+    }
+    ```
+
+  </Tabs.Item>
+</Tabs>
+
+The `Component` component receives the `router` prop, which is the `AppRouter` class that contains all the routes of the application.
+It will be responsible for setting up the routing system based on the routes defined in the `AppRouter` class.
+
+## Props
+
+The `Component` component accepts two props:
+
+- `router`: The `AppRouter` class that contains all the routes of the application.
+- `children`: The children of the `Component` component, which represents all the routing system of the application.
+
+<Pagination 
+  prev={{
+    href: '/docs/api-reference/components/outlet',
+    label: 'Outlet',
+  }}
+  next={{
+    href: '/docs/api-reference/components/template',
+    label: 'Template',
+  }}
+/>

docs/src/app/docs/pages/home/api/components/components.group.ts

@@ -0,0 +1,21 @@
+import { defineRoutesGroup } from 'rasengan';
+import LinkPage from './link.page.mdx';
+import OutletPage from './outlet.page.mdx';
+import ComponentPage from './component.page.mdx';
+import LayoutComponentPage from './layout-component.page.mdx';
+import PageComponentPage from './page-component.page.mdx';
+import RouterComponentPage from './router-component.page.mdx';
+import TemplatePage from './template.page.mdx';
+
+export default defineRoutesGroup({
+  path: '/components',
+  children: [
+    LinkPage,
+    OutletPage,
+    ComponentPage,
+    LayoutComponentPage,
+    PageComponentPage,
+    RouterComponentPage,
+    TemplatePage,
+  ],
+});