A complete Angular UI shell library for building sophisticated application layouts with workspaces, theming, tabs, split views, and more. Built on Angular Material.

• 🎨 Theming — Light/Dark/System modes with 5 color palettes, persisted automatically
• 🗂️ Workspaces — Switch between multiple navigation contexts from the toolbar
• 📑 Tab System — Browser-style tabs with pin, reorder (drag & drop), and context menu actions
• ↔️ Split View — Side-by-side or stacked pane layout with resizable divider
• 👤 Profile Mode — Built-in profile menu with avatar, name, email, and sign-out
• 📐 Responsive — Adaptive layout with mobile bottom nav, collapsible sidebar, and three-state desktop sidenav
• ⚙️ Settings Pages — Pre-built Appearance, Account, Notifications, Privacy, and Advanced pages

Install the package:

npm install @mydrift/ngx-dwex

Add to your app:

import { Shell, ShellWorkspace, NavItem } from '@mydrift/ngx-dwex';

@Component({
  selector: 'app-root',
  imports: [Shell],
  template: `
    <dwex-shell
      [workspaces]="workspaces"
      [settingsNavItems]="settingsNav"
      [enableTabs]="true"
      [profileMode]="true"
      userName="Jane Doe"
      userEmail="jane@example.com"
      (signOut)="onSignOut()">
      <div shell-branding>My App</div>
      <div shell-actions><!-- custom buttons --></div>
    </dwex-shell>
  `
})
export class App {
  workspaces: ShellWorkspace[] = [
    {
      id: 'main',
      label: 'Main',
      icon: 'home',
      navItems: [
        { label: 'Dashboard', route: '/dashboard', icon: 'dashboard' },
        { label: 'Profile', route: '/profile', icon: 'person' },
      ]
    }
  ];

  settingsNav: NavItem[] = [
    { label: 'Appearance', route: '/settings/appearance', icon: 'palette' },
  ];

  onSignOut() { /* ... */ }
}

• API Reference & Examples — Complete library documentation
• Customization Guide — Theming, styling, and configuration

• Node.js 18+
• Angular CLI 19+

# Clone the repository
git clone https://github.com/mydrift-user/ngx-dwex.git
cd ngx-dwex

# Install dependencies
npm install

# Build the library
ng build ngx-dwex

# Full demo — all features
ng serve dwex-demo

# Minimal demo — one workspace, one page
ng serve dwex-minimal

Navigate to http://localhost:4200/

This project is licensed under the NGX-DWEX Attribution License. See LICENSE for details.

Made with ❤️ by MyDrift