JSPM

@mdxui/cockpit

0.2.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 18
  • Score
    100M100P100Q59484F
  • License MIT

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

Package Exports

  • @mdxui/cockpit
  • @mdxui/cockpit/auth
  • @mdxui/cockpit/auth/auth-layout
  • @mdxui/cockpit/auth/login-page
  • @mdxui/cockpit/auth/onboarding-page
  • @mdxui/cockpit/auth/otp-page
  • @mdxui/cockpit/auth/password-reset-page
  • @mdxui/cockpit/auth/signup-page
  • @mdxui/cockpit/developer
  • @mdxui/cockpit/themes

Readme

@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="user@example.com"
  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
  • 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

License

MIT