Add base mdxui components

examples/ui/README.md

@@ -0,0 +1,19 @@
+# mdxui Component Examples
+
+This example shows how to compose the basic `mdxui` components.
+
+```tsx
+import { AppShell, NavBar, Sidebar, Footer, HeroSection } from 'mdxui'
+
+export default function Demo() {
+  return (
+    <AppShell
+      nav={<NavBar title='Demo' />}
+      sidebar={<Sidebar>Menu</Sidebar>}
+      footer={<Footer>Footer</Footer>}
+    >
+      <HeroSection title='Hello' subtitle='mdxui components in action' />
+    </AppShell>
+  )
+}
+```

examples/ui/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "mdxui-demo",
+  "private": true,
+  "type": "module",
+  "dependencies": {
+    "mdxui": "workspace:*"
+  }
+}

packages/mdxui/README.md

@@ -0,0 +1,27 @@
+# mdxui
+
+Reusable React components for MDX-based apps.
+
+## Installation
+
+```bash
+npm install mdxui
+```
+
+## Usage
+
+```tsx
+import { AppShell, Sidebar, NavBar, Footer, HeroSection } from 'mdxui'
+
+export default function Example() {
+  return (
+    <AppShell
+      nav={<NavBar title='My App' />}
+      sidebar={<Sidebar>Links</Sidebar>}
+      footer={<Footer>© 2025</Footer>}
+    >
+      <HeroSection title='Welcome' subtitle='Building with mdxui' />
+    </AppShell>
+  )
+}
+```

packages/mdxui/package.json

@@ -3,6 +3,11 @@
   "version": "0.0.1",
   "type": "module",
   "exports": {
+    "./app-shell": "./src/app-shell.tsx",
+    "./sidebar": "./src/sidebar.tsx",
+    "./nav-bar": "./src/nav-bar.tsx",
+    "./footer": "./src/footer.tsx",
+    "./hero-section": "./src/hero-section.tsx",
     "./*": "./src/*.tsx"
   },
   "scripts": {

packages/mdxui/src/app-shell.tsx

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react'
+
+export function AppShell({ nav, sidebar, footer, children }: { nav?: ReactNode; sidebar?: ReactNode; footer?: ReactNode; children: ReactNode }) {
+  return (
+    <div className='app-shell'>
+      {nav && <header>{nav}</header>}
+      <div className='app-body'>
+        {sidebar && <aside>{sidebar}</aside>}
+        <main>{children}</main>
+      </div>
+      {footer && <footer>{footer}</footer>}
+    </div>
+  )
+}

packages/mdxui/src/footer.tsx

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react'
+
+export function Footer({ children, className }: { children: ReactNode; className?: string }) {
+  return <footer className={className}>{children}</footer>
+}

packages/mdxui/src/hero-section.tsx

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react'
+
+export function HeroSection({ title, subtitle, children, className }: { title: string; subtitle?: string; children?: ReactNode; className?: string }) {
+  return (
+    <section className={className}>
+      <h1>{title}</h1>
+      {subtitle && <p>{subtitle}</p>}
+      {children}
+    </section>
+  )
+}

packages/mdxui/src/nav-bar.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react'
+
+export function NavBar({ title, children, className }: { title?: string; children?: ReactNode; className?: string }) {
+  return (
+    <div className={className}>
+      {title && <span>{title}</span>}
+      {children}
+    </div>
+  )
+}

packages/mdxui/src/sidebar.tsx

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react'
+
+export function Sidebar({ children, className }: { children: ReactNode; className?: string }) {
+  return <nav className={className}>{children}</nav>
+}