Skip to main content
AppShell gives you everything you need to build production-ready ERP applications on Tailor Platform with minimal configuration.

​
What is AppShell?

AppShell is a React-based framework that provides the foundation for building custom ERP applications on Tailor Platform. It handles the complex infrastructure so you can focus on building business-level screens and features.

​
Key features

Module-based routing

Define routes through modules and resources instead of file-based routing. Automatic sidebar navigation and breadcrumbs.

Built-in authentication

OAuth2/OIDC integration with Tailor Platform’s Auth service. Supports any configured IdP including Google, Okta, and Auth0.

Beautiful UI components

Responsive layouts, description cards, command palette, and more. Built with Tailwind CSS v4 and shadcn/ui principles.

ERP module integration

Connect compatible ERP modules like PIM, SO, MO with automatic data provider to Tailor’s application gateway.

​
Out of the box

When you integrate AppShell into your React application, you get:
  • Simple composition - Compose custom Tailor-powered, React-based ERP applications with minimal code
  • User authentication - Complete OAuth2 flow with token management and session persistence
  • Authorization - Route guards for permission-based and role-based access control
  • Module system - Organize your app with modules and resources that auto-generate navigation
  • Beautiful layouts - Responsive, opinionated layouts with sidebar navigation and breadcrumbs
  • Convenience hooks - Access application, module, and user contexts with React hooks
  • Data integration - Automatic data provider to Tailor’s application gateway

​
Requirements

Before you start, make sure you have:
  • React 19+ (React 18+ is supported but React 19 is recommended)
  • Node 16 or higher
  • Basic knowledge of React and JavaScript/TypeScript

​
Quick example

Here’s a minimal AppShell application: 
import { AppShell, SidebarLayout, defineModule } from "@tailor-platform/app-shell";

const dashboardModule = defineModule({
  path: "dashboard",
  component: () => <h1>Welcome to AppShell!</h1>,
  meta: {
    title: "Dashboard",
  },
  resources: [],
});

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

export default App;
That’s it! AppShell will:
  • Render your module in the sidebar navigation
  • Handle routing to /app/dashboard
  • Display breadcrumb navigation
  • Apply Tailor’s design system

​
Next steps

Quick start

Get up and running with AppShell in under 5 minutes

Installation

Detailed installation guide with peer dependencies and configuration

Build docs developers (and LLMs) love

Get started for freeTalk to us