Quickstart

Get started with Tailor Platform App Shell in 5 minutes

This guide will help you create your first AppShell application in minutes.

Installation

1. Install the package

   Install AppShell in your React application:

   npm

   npm install @tailor-platform/app-shell
   

   yarn add @tailor-platform/app-shell
   

   pnpm add @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