Pro Components

Base Components

App Shell 3

Application shell with top navigation, dropdown nav groups, search, org switcher, notification, user menu, and mobile bottom navigation.

Example

Blake UI
Blake UI

Introduction

App Shell 3 is a dashboard-style shell with:
  • Top header: Logo, mobile menu button, centered search, notification bell (with badge), user dropdown (profile/settings/log out), and organization switcher.
  • Secondary nav (desktop): Dropdown menus for Overview, Projects, Team, and Workspace, each with nested items.
  • Mobile: Left drawer for full navigation; fixed bottom bar with four icon items (Home, Projects, Team, Settings).
It uses Button, Input, Avatar, Dropdown Menu, and Drawer. Good for dashboards and apps that need both desktop dropdown nav and a simple mobile bottom nav.

Usage

import { ApplicationShell13 } from "@/components/ui/application-shell-13";

<ApplicationShell13 />;
Replace the nav groups, org switcher options, user info, and bottom nav items with your own routes and data. Connect the active bottom nav item to your router or state.

On this page

ExampleIntroductionInstallationUsage