Pro Components

Base Components

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.

On this page

ExampleIntroductionInstallationUsage