@lexibase/rdx-next 1.0.0-beta.4 → 1.0.0-beta.6

package/README.md

@@ -1,6 +1,19 @@
-# `@rdx/next`
+# `@lexibase/rdx-next`
 
 The official Next.js runtime for RDX documentation projects.
 
 It exposes the `rdx` command used by generated projects to create their
 internal `.rdx` application and run Next.js.
+
+Generated sites use the same theme and components as the development website,
+through `@lexibase/rdx-ui`: logo, navbar, Radix version dropdown, mobile/desktop
+sidebar, landing page, MDX styles and theme provider. The adapter owns content
+and route data; it does not implement a parallel UI theme.
+
+Use `homepage: { enabled: true }` in `rdx.config.ts` for the centered-logo
+homepage, or import a project-owned React component with `homepage.component`.
+Without the option, `/` redirects to `/docs`. Additional content sources from
+explicitly configured plugins enable the shared navbar dropdown.
+
+`.rdx/` is generated. Configure the site or edit a project-owned `home.tsx`
+instead of modifying files inside `.rdx/`.

package/bin/rdx.mjs

@@ -47,6 +47,7 @@ async function main() {
   const jiti = createJiti(import.meta.url, {
     moduleCache: false,
     fsCache: false,
+    jsx: { runtime: 'automatic' },
   })
   let input
   try {

package/dist/index.d.ts

@@ -1,2 +1,2 @@
 export { defineConfig } from '@lexibase/rdx-core/config';
-export { RdxConfig, RdxPlugin, RdxPluginContext, RdxRuntimeConfig } from '@lexibase/rdx-types';
+export { RdxConfig, RdxHomepage, RdxPlugin, RdxPluginContext, RdxRuntimeConfig } from '@lexibase/rdx-types';

package/dist/runtime/index.d.ts

@@ -3,13 +3,17 @@ import { ReactNode } from 'react';
 import { RdxProject, RdxRuntimeConfig } from '@lexibase/rdx-types';
 export { createRdxProject, getProjectDocsPaths } from '@lexibase/rdx-core';
 
-declare function RdxLayout({ children, config, }: {
+declare function RdxLayout({ children, config, bodyClassName, }: {
     children: ReactNode;
     config: RdxRuntimeConfig;
+    bodyClassName?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function HomePage({ project }: {
+    project: RdxProject;
 }): react_jsx_runtime.JSX.Element;
 declare function DocsPage({ slug, project, }: {
     slug?: string[];
     project: RdxProject;
 }): Promise<react_jsx_runtime.JSX.Element>;
 
-export { DocsPage, RdxLayout };
+export { DocsPage, HomePage, RdxLayout };

package/dist/runtime/index.js

@@ -5,64 +5,98 @@ import {
   getSourceOptions,
   resolveDocsRoute
 } from "@lexibase/rdx-core";
+import { Button } from "@lexibase/rdx-ui/components/button";
+import { DocsSidebar } from "@lexibase/rdx-ui/components/docs-sidebar";
+import { Home } from "@lexibase/rdx-ui/components/home";
+import { Logo } from "@lexibase/rdx-ui/components/logo";
+import { mdxComponents } from "@lexibase/rdx-ui/components/mdx-components";
+import { Navbar } from "@lexibase/rdx-ui/components/navbar";
+import {
+  VersionDropdown
+} from "@lexibase/rdx-ui/components/version-dropdown";
+import { ThemeProvider } from "@lexibase/rdx-ui/providers/theme-provider";
 import { compileMDX } from "next-mdx-remote/rsc";
 import Link from "next/link";
-import { notFound } from "next/navigation";
+import { notFound, redirect } from "next/navigation";
 import { createRdxProject, getProjectDocsPaths } from "@lexibase/rdx-core";
-import { jsx, jsxs } from "react/jsx-runtime";
-var mdxComponents = {
-  h1: (props) => /* @__PURE__ */ jsx("h1", { ...props }),
-  h2: (props) => /* @__PURE__ */ jsx("h2", { ...props }),
-  h3: (props) => /* @__PURE__ */ jsx("h3", { ...props }),
-  p: (props) => /* @__PURE__ */ jsx("p", { ...props }),
-  ul: (props) => /* @__PURE__ */ jsx("ul", { ...props }),
-  ol: (props) => /* @__PURE__ */ jsx("ol", { ...props }),
-  li: (props) => /* @__PURE__ */ jsx("li", { ...props }),
-  blockquote: (props) => /* @__PURE__ */ jsx("blockquote", { ...props }),
-  pre: (props) => /* @__PURE__ */ jsx("pre", { ...props }),
-  code: (props) => /* @__PURE__ */ jsx("code", { ...props }),
-  a: ({ href, ...props }) => {
-    const isExternal = href?.startsWith("http");
-    return /* @__PURE__ */ jsx(
-      "a",
-      {
-        href,
-        rel: isExternal ? "noreferrer" : void 0,
-        target: isExternal ? "_blank" : void 0,
-        ...props
-      }
-    );
-  }
-};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function RdxLayout({
   children,
-  config
+  config,
+  bodyClassName
+}) {
+  return /* @__PURE__ */ jsx("html", { suppressHydrationWarning: true, lang: config.lang ?? "en", children: /* @__PURE__ */ jsx("body", { className: bodyClassName, children: /* @__PURE__ */ jsxs(
+    ThemeProvider,
+    {
+      disableTransitionOnChange: true,
+      enableSystem: true,
+      attribute: "class",
+      defaultTheme: config.theme?.defaultTheme ?? "system",
+      children: [
+        /* @__PURE__ */ jsx("a", { className: "rdx-skip-link", href: "#rdx-main", children: "Skip to content" }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col h-dvh", children })
+      ]
+    }
+  ) }) });
+}
+function RdxHeader({
+  project,
+  slug
 }) {
-  const brand = config.navbar?.title ?? config.title;
+  const { config } = project;
+  const { source, slug: currentSlug } = resolveDocsRoute(project, slug);
+  const options = project.sources.map((edition) => {
+    const docs = getSourceOptions(project, edition);
+    const destination = currentSlug && getDocument(currentSlug, docs) ? currentSlug : getDocsPaths(docs)[0];
+    return {
+      id: edition.id,
+      label: edition.id === "current" ? "Current" : `Version ${edition.label}`,
+      kind: edition.id === "current" ? "live" : edition.badge === "Archived" ? "archived" : "version",
+      href: ["/docs", edition.routePrefix, destination].filter(Boolean).join("/")
+    };
+  });
+  const BrandLogo = config.navbar?.logo ?? Logo;
   return /* @__PURE__ */ jsx(
-    "html",
+    Navbar,
     {
-      lang: config.lang ?? "en",
-      "data-theme": config.theme?.defaultTheme ?? "system",
-      children: /* @__PURE__ */ jsxs("body", { children: [
-        /* @__PURE__ */ jsxs("header", { className: "rdx-header", children: [
-          /* @__PURE__ */ jsx(Link, { className: "rdx-brand", href: "/docs", "aria-label": config.title, children: brand }),
-          config.navbar?.actions?.github?.visible && config.navbar.actions.github.url && /* @__PURE__ */ jsx(
-            "a",
-            {
-              className: "rdx-github-link",
-              href: config.navbar.actions.github.url,
-              rel: "noreferrer",
-              target: "_blank",
-              children: "GitHub"
-            }
-          )
-        ] }),
-        children
-      ] })
+      title: config.navbar?.title ?? "",
+      siteTitle: config.title,
+      logo: /* @__PURE__ */ jsx(BrandLogo, { className: "size-5" }),
+      homeHref: config.homepage?.enabled ? "/" : "/docs",
+      docsHref: ["/docs", source.routePrefix].filter(Boolean).join("/"),
+      versionMenu: project.sources.length > 1 ? /* @__PURE__ */ jsx(VersionDropdown, { options, currentId: source.id }) : void 0,
+      github: config.navbar?.actions?.github,
+      showToggleMode: config.navbar?.actions?.showToggleMode
     }
   );
 }
+function HomePage({ project }) {
+  const { config } = project;
+  if (!config.homepage?.enabled) redirect("/docs");
+  const homepage = config.homepage;
+  const CustomHome = homepage.component;
+  const BrandLogo = config.navbar?.logo ?? Logo;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(RdxHeader, { project }),
+    /* @__PURE__ */ jsx(
+      "main",
+      {
+        id: "rdx-main",
+        tabIndex: -1,
+        className: "flex-1 min-h-0 overflow-y-auto",
+        children: CustomHome ? /* @__PURE__ */ jsx(CustomHome, {}) : /* @__PURE__ */ jsx(
+          Home,
+          {
+            title: homepage.title ?? config.title,
+            logo: /* @__PURE__ */ jsx(BrandLogo, { className: "size-52 hover:scale-105 hover:rotate-1 transition-[scale,rotation] duration-1000" }),
+            description: homepage.description,
+            buttons: homepage.buttons
+          }
+        )
+      }
+    )
+  ] });
+}
 async function DocsPage({
   slug,
   project
@@ -73,12 +107,14 @@ async function DocsPage({
     document,
     categories
   } = resolveDocsRoute(project, slug);
-  if (!currentSlug) {
-    return /* @__PURE__ */ jsxs("main", { className: "rdx-empty-state", children: [
-      /* @__PURE__ */ jsx("h1", { children: "Your documentation is ready." }),
-      /* @__PURE__ */ jsx("p", { children: "Add an `.mdx` file inside `docs/` to create your first page." })
+  if (!currentSlug)
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(RdxHeader, { project, slug }),
+      /* @__PURE__ */ jsxs("main", { id: "rdx-main", tabIndex: -1, className: "p-8", children: [
+        /* @__PURE__ */ jsx("h1", { children: "Your documentation is ready." }),
+        /* @__PURE__ */ jsx("p", { children: "Add an .mdx file inside your configured documentation directory." })
+      ] })
     ] });
-  }
   if (!document) notFound();
   const { content } = await compileMDX({
     source: document.content,
@@ -86,55 +122,68 @@ async function DocsPage({
   });
   const title = typeof document.frontmatter.title === "string" ? document.frontmatter.title : currentSlug;
   const description = typeof document.frontmatter.description === "string" ? document.frontmatter.description : null;
-  return /* @__PURE__ */ jsxs("div", { className: "rdx-docs-layout", children: [
-    /* @__PURE__ */ jsxs("aside", { className: "rdx-sidebar", "aria-label": "Documentation navigation", children: [
-      project.sources.length > 1 && /* @__PURE__ */ jsx("nav", { className: "rdx-editions", "aria-label": "Documentation editions", children: project.sources.map((edition) => {
-        const options = getSourceOptions(project, edition);
-        const destination = getDocument(currentSlug, options) ? currentSlug : getDocsPaths(options)[0];
-        const href = ["/docs", edition.routePrefix, destination].filter(Boolean).join("/");
-        return /* @__PURE__ */ jsxs(
-          Link,
-          {
-            href,
-            "aria-current": edition.id === source.id ? "page" : void 0,
-            children: [
-              edition.label,
-              edition.badge ? ` (${edition.badge})` : ""
-            ]
-          },
-          edition.id
-        );
-      }) }),
-      categories.map((category) => /* @__PURE__ */ jsxs("section", { className: "rdx-sidebar-category", children: [
-        /* @__PURE__ */ jsx("h2", { children: category.title }),
-        /* @__PURE__ */ jsx("ul", { children: category.pages.map((page) => {
-          const href = ["/docs", source.routePrefix, page.slug].filter(Boolean).join("/");
-          const isCurrentPage = page.slug === currentSlug;
-          return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-            Link,
+  const hrefFor = (pageSlug) => ["/docs", source.routePrefix, pageSlug].filter(Boolean).join("/");
+  const sidebarCategories = categories.map((category2) => ({
+    title: category2.title,
+    links: category2.pages.map((page) => ({
+      label: page.title,
+      href: hrefFor(page.slug)
+    }))
+  }));
+  const pages = categories.flatMap((category2) => category2.pages);
+  const index = pages.findIndex((page) => page.slug === currentSlug);
+  const previous = pages[index - 1];
+  const next = pages[index + 1];
+  const category = categories.find(
+    (entry) => entry.pages.some((page) => page.slug === currentSlug)
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(RdxHeader, { project, slug }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 min-h-0 overflow-hidden relative", children: [
+      /* @__PURE__ */ jsx(
+        DocsSidebar,
+        {
+          categories: sidebarCategories,
+          pathname: hrefFor(currentSlug)
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 h-full overflow-y-auto pt-12 md:pt-0 outline-none", children: /* @__PURE__ */ jsxs("section", { className: "w-full min-h-full px-7 flex flex-col gap-5 pb-8 md:py-8", children: [
+        /* @__PURE__ */ jsxs("div", { className: "w-full flex flex-col gap-5 md:mx-auto md:max-w-[860px] pt-14 md:pt-0 flex-1", children: [
+          /* @__PURE__ */ jsxs("header", { className: "mb-6", children: [
+            source.badge && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-4", children: source.badge }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-600 font-semibold uppercase block -mb-0.5", children: category?.title }),
+            /* @__PURE__ */ jsx("h1", { className: "text-4xl uppercase font-bold mb-2", children: title }),
+            description && /* @__PURE__ */ jsx("p", { className: "text-sm text-ring max-w-[726px]", children: description })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "main",
             {
-              "aria-current": isCurrentPage ? "page" : void 0,
-              className: isCurrentPage ? "is-active" : void 0,
-              href,
-              children: page.title
+              id: "rdx-main",
+              tabIndex: -1,
+              className: "h-full w-full flex-1 max-w-[960px]",
+              children: content
             }
-          ) }, page.slug);
-        }) })
-      ] }, category.id))
-    ] }),
-    /* @__PURE__ */ jsxs("main", { className: "rdx-document", children: [
-      /* @__PURE__ */ jsxs("header", { className: "rdx-document-header", children: [
-        source.badge && /* @__PURE__ */ jsx("p", { className: "rdx-source-badge", children: source.badge }),
-        /* @__PURE__ */ jsx("p", { className: "rdx-breadcrumb", children: currentSlug }),
-        /* @__PURE__ */ jsx("h1", { children: title }),
-        description && /* @__PURE__ */ jsx("p", { className: "rdx-description", children: description })
-      ] }),
-      /* @__PURE__ */ jsx("article", { className: "rdx-mdx-content", children: content })
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("footer", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsxs("section", { className: "flex items-center justify-between", children: [
+            previous ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", asChild: true, children: /* @__PURE__ */ jsx(Link, { href: hrefFor(previous.slug), children: previous.title }) }) : /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", disabled: true, children: "Previous" }),
+            next ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", asChild: true, children: /* @__PURE__ */ jsx(Link, { href: hrefFor(next.slug), children: next.title }) }) : /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", disabled: true, children: "Next" })
+          ] }),
+          /* @__PURE__ */ jsx("section", { className: "flex items-center justify-center w-full py-5", children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+            "\xA9 ",
+            (/* @__PURE__ */ new Date()).getFullYear(),
+            " ",
+            /* @__PURE__ */ jsx("strong", { children: project.config.title })
+          ] }) })
+        ] })
+      ] }) })
     ] })
   ] });
 }
 export {
   DocsPage,
+  HomePage,
   RdxLayout,
   createRdxProject,
   getProjectDocsPaths

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lexibase/rdx-next",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.6",
   "description": "The Next.js runtime for RDX documentation projects.",
   "license": "MIT",
   "type": "module",
@@ -8,6 +8,8 @@
     "rdx": "./bin/rdx.mjs"
   },
   "exports": {
+    "./postcss.config": "./postcss.config.mjs",
+    "./styles.css": "./src/runtime/styles.css",
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
@@ -21,13 +23,16 @@
     "bin",
     "dist",
     "templates",
+    "postcss.config.mjs",
+    "src/runtime/styles.css",
     "README.md"
   ],
   "dependencies": {
     "jiti": "^2.6.1",
     "next-mdx-remote": "^5.0.0",
-    "@lexibase/rdx-types": "1.0.0-beta.2",
-    "@lexibase/rdx-core": "1.0.0-beta.2"
+    "@lexibase/rdx-ui": "1.0.0-beta.0",
+    "@lexibase/rdx-core": "1.0.0-beta.4",
+    "@lexibase/rdx-types": "1.0.0-beta.4"
   },
   "peerDependencies": {
     "next": "^15.5.0",
@@ -62,6 +67,7 @@
     "build": "tsup src/index.ts src/runtime/index.tsx --format esm --dts --clean --external @lexibase/rdx-core --external @lexibase/rdx-types --external next --external react --external react-dom --external next-mdx-remote",
     "lint": "eslint . --max-warnings 0",
     "check-types": "tsc --noEmit",
-    "test": "node --test tests/*.test.mjs"
+    "test": "node --test tests/*.test.mjs",
+    "test:runtime": "node --test tests/runtime.integration.mjs"
   }
 }

package/postcss.config.mjs

@@ -0,0 +1 @@
+export { default } from '@lexibase/rdx-ui/postcss.config'

package/src/runtime/styles.css

@@ -0,0 +1,16 @@
+@import '@lexibase/rdx-ui/globals.css';
+@source '../../dist/**/*.js';
+
+/* Colors, buttons, dropdowns and typography come from the shared UI theme. */
+.rdx-skip-link {
+  position: fixed;
+  top: -100px;
+  left: 16px;
+  z-index: 100;
+  padding: 12px;
+  background: var(--background);
+  color: var(--foreground);
+}
+.rdx-skip-link:focus {
+  top: 12px;
+}

package/templates/runtime/app/globals.css

@@ -1,234 +1,4 @@
-:root {
-  --rdx-background: #ffffff;
-  --rdx-foreground: #171717;
-  --rdx-muted: #666666;
-  --rdx-border: #e7e7e7;
-  --rdx-accent: #f5f5f5;
-  --rdx-link: #0f5ed8;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme='light']) {
-    --rdx-background: #121212;
-    --rdx-foreground: #f4f4f5;
-    --rdx-muted: #a1a1aa;
-    --rdx-border: #303033;
-    --rdx-accent: #202022;
-    --rdx-link: #7bb0ff;
-  }
-}
-
-:root[data-theme='dark'] {
-  --rdx-background: #121212;
-  --rdx-foreground: #f4f4f5;
-  --rdx-muted: #a1a1aa;
-  --rdx-border: #303033;
-  --rdx-accent: #202022;
-  --rdx-link: #7bb0ff;
-}
-
-.rdx-editions {
-  border-bottom: 1px solid var(--rdx-border);
-  margin-bottom: 20px;
-  padding-bottom: 20px;
-}
-
-.rdx-source-badge {
-  color: var(--rdx-muted);
-  font-size: 0.85rem;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  margin: 0;
-  min-height: 100%;
-}
-
-body {
-  background: var(--rdx-background);
-  color: var(--rdx-foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}
-
-a {
-  color: inherit;
-}
-
-.rdx-header {
-  align-items: center;
-  border-bottom: 1px solid var(--rdx-border);
-  display: flex;
-  height: 60px;
-  justify-content: space-between;
-  padding: 0 24px;
-}
-
-.rdx-brand {
-  font-size: 1.1rem;
-  font-weight: 700;
-  text-decoration: none;
-}
-
-.rdx-github-link {
-  color: var(--rdx-muted);
-  font-size: 0.9rem;
-  text-decoration: none;
-}
-
-.rdx-docs-layout {
-  display: grid;
-  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
-  min-height: calc(100vh - 60px);
-}
-
-.rdx-sidebar {
-  border-right: 1px solid var(--rdx-border);
-  padding: 24px;
-}
-
-.rdx-sidebar-category + .rdx-sidebar-category {
-  border-top: 1px solid var(--rdx-border);
-  margin-top: 20px;
-  padding-top: 20px;
-}
-
-.rdx-sidebar h2 {
-  color: var(--rdx-muted);
-  font-size: 0.72rem;
-  letter-spacing: 0.08em;
-  margin: 0 0 8px;
-  text-transform: uppercase;
-}
-
-.rdx-sidebar ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.rdx-sidebar a {
-  border-radius: 6px;
-  display: block;
-  font-size: 0.92rem;
-  padding: 7px 8px;
-  text-decoration: none;
-}
-
-.rdx-sidebar a:hover,
-.rdx-sidebar a.is-active {
-  background: var(--rdx-accent);
-}
-
-.rdx-sidebar a.is-active {
-  font-weight: 600;
-}
-
-.rdx-document,
-.rdx-empty-state {
-  margin: 0 auto;
-  max-width: 860px;
-  padding: 56px 40px 80px;
-  width: 100%;
-}
-
-.rdx-document-header {
-  border-bottom: 1px solid var(--rdx-border);
-  margin-bottom: 36px;
-  padding-bottom: 28px;
-}
-
-.rdx-document-header h1,
-.rdx-mdx-content h1 {
-  font-size: clamp(2rem, 5vw, 3rem);
-  letter-spacing: -0.04em;
-  line-height: 1.1;
-  margin: 0;
-}
-
-.rdx-breadcrumb {
-  color: var(--rdx-muted);
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.8rem;
-  margin: 0 0 12px;
-}
-
-.rdx-description {
-  color: var(--rdx-muted);
-  font-size: 1.05rem;
-  line-height: 1.6;
-  margin: 14px 0 0;
-}
-
-.rdx-mdx-content {
-  font-size: 1rem;
-  line-height: 1.75;
-}
-
-.rdx-mdx-content h2,
-.rdx-mdx-content h3 {
-  letter-spacing: -0.02em;
-  line-height: 1.25;
-  margin: 2.2em 0 0.7em;
-}
-
-.rdx-mdx-content p,
-.rdx-mdx-content ul,
-.rdx-mdx-content ol {
-  margin: 1em 0;
-}
-
-.rdx-mdx-content li + li {
-  margin-top: 0.4em;
-}
-
-.rdx-mdx-content a {
-  color: var(--rdx-link);
-}
-
-.rdx-mdx-content blockquote {
-  border-left: 3px solid var(--rdx-border);
-  color: var(--rdx-muted);
-  margin: 1.5em 0;
-  padding-left: 16px;
-}
-
-.rdx-mdx-content code {
-  background: var(--rdx-accent);
-  border-radius: 4px;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.9em;
-  padding: 0.16em 0.35em;
-}
-
-.rdx-mdx-content pre {
-  background: var(--rdx-accent);
-  border: 1px solid var(--rdx-border);
-  border-radius: 8px;
-  overflow-x: auto;
-  padding: 16px;
-}
-
-.rdx-mdx-content pre code {
-  background: transparent;
-  padding: 0;
-}
-
-@media (max-width: 720px) {
-  .rdx-docs-layout {
-    display: block;
-  }
-
-  .rdx-sidebar {
-    border-bottom: 1px solid var(--rdx-border);
-    border-right: 0;
-  }
-
-  .rdx-document,
-  .rdx-empty-state {
-    padding: 36px 24px 60px;
-  }
-}
+@import '@lexibase/rdx-next/styles.css';
+@source '../../home.{ts,tsx}';
+@source '../../components/**/*.{ts,tsx}';
+@source '../../docs/**/*.mdx';

package/templates/runtime/app/layout.tsx

@@ -18,5 +18,9 @@ export default async function RootLayout({
   children,
 }: Readonly<{ children: React.ReactNode }>) {
   const { config } = await getProject()
-  return <RdxLayout config={config}>{children}</RdxLayout>
+  return (
+    <RdxLayout config={config} bodyClassName="antialiased">
+      {children}
+    </RdxLayout>
+  )
 }

package/templates/runtime/app/page.tsx

@@ -1,5 +1,7 @@
-import { redirect } from 'next/navigation'
+import { HomePage } from '@lexibase/rdx-next/runtime'
 
-export default function Home() {
-  redirect('/docs')
+import { getProject } from '../rdx-project'
+
+export default async function Home() {
+  return <HomePage project={await getProject()} />
 }

package/templates/runtime/next.config.mjs

@@ -6,6 +6,7 @@ const nextConfig = {
   transpilePackages: [
     '@lexibase/rdx-core',
     '@lexibase/rdx-next',
+    '@lexibase/rdx-ui',
     'next-mdx-remote',
   ],
 }

package/templates/runtime/postcss.config.mjs

@@ -0,0 +1 @@
+export { default } from '@lexibase/rdx-next/postcss.config'