Skip to main content
This guide will help you create your first AppShell application in minutes.

​
Installation

1

Install the package

Install AppShell in your React application:
npm install @tailor-platform/app-shell
2

Import the theme

Add AppShell’s Tailwind CSS theme to your global stylesheet:
globals.css
@import "@tailor-platform/app-shell/theme.css";
@import "tailwindcss";
3

Create your first module

Define a module with a simple component:
import { defineModule, defineResource } from "@tailor-platform/app-shell";

// Your page component
const DashboardPage = () => {
  return (
    <div>
      <h1>Welcome to AppShell</h1>
      <p>Your first AppShell page is working!</p>
    </div>
  );
};

// Define the module
export const dashboardModule = defineModule({
  path: "dashboard",
  component: DashboardPage,
  meta: {
    title: "Dashboard",
  },
});
4

Set up AppShell

Add the AppShell component to your application:
import { AppShell, SidebarLayout } from "@tailor-platform/app-shell";
import { dashboardModule } from "./modules/dashboard";

function App() {
  return (
    <AppShell
      title="My App"
      basePath="/app"
      modules={[dashboardModule]}
    >
      <SidebarLayout />
    </AppShell>
  );
}

export default App;
5

Run your application

Start your development server and navigate to /app/dashboard:
npm run dev
You should see your dashboard page with automatic sidebar navigation!

​
Adding More Pages

Now let’s add a nested page to see AppShell’s routing in action: 
const OrdersPage = () => {
  return <div>Orders List</div>;
};

const OrderDetailPage = () => {
  const { id } = useParams();
  return <div>Order Details for {id}</div>;
};

export const dashboardModule = defineModule({
  path: "dashboard",
  component: DashboardPage,
  meta: {
    title: "Dashboard",
  },
  resources: [
    defineResource({
      path: "orders",
      component: OrdersPage,
      meta: {
        title: "Orders",
      },
      resources: [
        defineResource({
          path: ":id",
          component: OrderDetailPage,
          meta: {
            title: "Order Details",
          },
        }),
      ],
    }),
  ],
});
Now you have:
  • /app/dashboard - Dashboard page
  • /app/dashboard/orders - Orders list
  • /app/dashboard/orders/123 - Order detail with ID
AppShell automatically:
  • Generates sidebar navigation
  • Creates breadcrumbs
  • Handles routing between pages
  • Provides the Command Palette (press Cmd+K or Ctrl+K)

​
Next Steps

Building Your First App

Follow a complete tutorial to build a real application

Modules & Resources

Learn how to structure your application

Authentication

Add user authentication to your app

Components

Explore all available components

Build docs developers (and LLMs) love

Get started for freeTalk to us