App Shell 2

Application shell with top navigation using tab-style links, search input, user dropdown, and mobile drawer menu.

Example

Introduction

App Shell 2 is a top-navigation layout with:

Header: Logo, horizontal tab-style nav links (Dashboard, Projects, Team) with active state, search input, and user avatar dropdown (name, email, profile, settings, log out).
Mobile: Hamburger opens a left-side drawer with the same nav links and user info.

It uses Button, Input, Avatar, Dropdown Menu, and Drawer. Suited to apps with a flat navigation structure and clear tab-style feedback.

Usage

import { ApplicationShell4 } from "@/components/ui/application-shell-4";

<ApplicationShell4 />

Replace the logo, tab labels, search behavior, and user dropdown content with your own routes and data. Wire the active tab to your router or state as needed.

App Shell 2

Example

Introduction

Usage

On this page