Getting Started
Learn how to build with Bun React Framework

Installation

bun install

Creating Routes

To create a new route, simply create a folder in the src/app directory and add either an index.tsx or page.tsx file.

// src/app/about/page.tsx
export default function AboutPage() {
  return <div>About</div>;
}

Nested Layouts

Create a layout.tsx file in any directory to wrap child routes with a layout component.

// src/app/dashboard/layout.tsx
export default function DashboardLayout({ 
  children 
}: { 
  children: React.ReactNode 
}) {
  return (
    <div>
      <nav>Dashboard Nav</nav>
      {children}
    </div>
  );
}

Static Pages

Use definePage() to create static pages:

import { definePage } from "~/framework/shared/page";

export default definePage({
  type: 'static',
  loader: async () => {
    const data = await fetchData();
    return { data };
  },
  component: ({ data }) => (
    <div>{data.title}</div>
  )
});

Next Steps

Explore the interactive demos to see all features in action: