@mdxui/cockpit

App template components for mdxui - developer dashboards, auth flows, and SaaS patterns.

Installation

npm install @mdxui/cockpit @mdxui/primitives @mdxui/themes mdxui
# or
pnpm add @mdxui/cockpit @mdxui/primitives @mdxui/themes mdxui

Quick Start

import { App, DeveloperDashboard } from '@mdxui/cockpit'

export default function Dashboard() {
  return (
    <App
      branding={{
        name: 'My App',
        logo: <Logo />,
      }}
      theme="default"
    />
  )
}

Auth Pages

import { LoginPage, SignupPage, OTPPage } from '@mdxui/cockpit/auth'

// Login page with all options
<LoginPage
  logo={<Logo />}
  title="Welcome back"
  onSubmit={handleLogin}
  providers={['google', 'github']}
/>

// Signup with onboarding
<SignupPage
  logo={<Logo />}
  onSubmit={handleSignup}
/>

// OTP verification
<OTPPage
  logo={<Logo />}
  email="[email protected]"
  onVerify={handleVerify}
/>

Components

Main Dashboard

• App / DeveloperDashboard - Full dashboard wrapper with routing
• DashboardLayout - Layout with sidebar navigation
• DashboardGrid - Responsive grid for dashboard widgets

Auth Components

• AuthLayout - Shared auth page layout
• LoginPage - Login with social providers
• SignupPage - Registration flow
• PasswordResetPage - Password recovery
• OTPPage - One-time password verification
• OnboardingPage - User onboarding wizard

Dashboard Widgets

• KPICard - Key performance indicator cards
• AreaChart - Area chart visualization
• BarChart - Bar chart visualization
• LineChart - Line chart visualization
• DataTable - Sortable, filterable data table
• ActivityFeed - Recent activity timeline

App Features

• APIKeyManager - API key creation and management
• TeamManager - Team member management
• Billing - Subscription and billing UI
• UserProfile - User profile settings
• SettingsPage - App settings

Navigation

• NavMain - Main navigation menu
• NavUser - User menu dropdown
• TeamSwitcher - Workspace/team switcher
• CommandPalette - Keyboard-driven command palette

Theme System

import { useThemeStore, ThemeScript } from '@mdxui/cockpit/themes'

// In your root layout
<ThemeScript />

// Toggle theme
const { theme, setTheme } = useThemeStore()

Exports

// Main export
import { App, DeveloperDashboard } from '@mdxui/cockpit'

// Developer components
import { KPICard, DataTable } from '@mdxui/cockpit/developer'

// Auth pages
import { LoginPage, SignupPage } from '@mdxui/cockpit/auth'

// Theme utilities
import { useThemeStore, ThemeScript } from '@mdxui/cockpit/themes'

Peer Dependencies

• react ^18.0.0 || ^19.0.0
• @mdxui/primitives - Base UI components
• @mdxui/themes - Theme system
• mdxui - Core types and contracts

Links

• Documentation
• GitHub
• npm

License

MIT