> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/tailor-platform/app-shell/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Get started with Tailor Platform App Shell in 5 minutes

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

## Installation

<Steps>
  <Step title="Install the package">
    Install AppShell in your React application:

    <CodeGroup>
      ```bash npm theme={null}
      npm install @tailor-platform/app-shell
      ```

      ```bash yarn theme={null}
      yarn add @tailor-platform/app-shell
      ```

      ```bash pnpm theme={null}
      pnpm add @tailor-platform/app-shell
      ```
    </CodeGroup>
  </Step>

  <Step title="Import the theme">
    Add AppShell's Tailwind CSS theme to your global stylesheet:

    ```css globals.css theme={null}
    @import "@tailor-platform/app-shell/theme.css";
    @import "tailwindcss";
    ```
  </Step>

  <Step title="Create your first module">
    Define a module with a simple component:

    ```tsx theme={null}
    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",
      },
    });
    ```
  </Step>

  <Step title="Set up AppShell">
    Add the AppShell component to your application:

    ```tsx theme={null}
    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;
    ```
  </Step>

  <Step title="Run your application">
    Start your development server and navigate to `/app/dashboard`:

    ```bash theme={null}
    npm run dev
    ```

    You should see your dashboard page with automatic sidebar navigation!
  </Step>
</Steps>

## Adding More Pages

Now let's add a nested page to see AppShell's routing in action:

```tsx theme={null}
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

<CardGroup cols={2}>
  <Card title="Building Your First App" icon="rocket" href="/guides/building-your-first-app">
    Follow a complete tutorial to build a real application
  </Card>

  <Card title="Modules & Resources" icon="folder-tree" href="/concepts/modules-and-resources">
    Learn how to structure your application
  </Card>

  <Card title="Authentication" icon="lock" href="/concepts/authentication">
    Add user authentication to your app
  </Card>

  <Card title="Components" icon="grid" href="/components/app-shell">
    Explore all available components
  </Card>
</CardGroup>