A professional platform to create investor dashboards in a simple and elegant way

Investor Room is a modern and customizable template built with Nextra that allows any founder to create a professional dashboard for investor reports, business metrics, and product updates.

🚀 View Live Example

• 📈 Complete Dashboard: Financial metrics, KPIs, quarterly comparisons
• 🎨 Professional Design: Modern and responsive interface with custom components
• 📱 Mobile First: Optimized for mobile devices and tablets
• 🔒 Access Control: Easy integration with Auth0 and Supabase
• ⚡ Performance: Built on Next.js 14 with performance optimizations
• 📝 Easy Editing: Content in MDX format for simple editing
• 🌙 Dark Mode: Native support for light and dark themes

• Executive Summary: Executive summary with key metrics
• Financial Metrics: ARR, revenue, cash runway
• Product KPIs: Active users, retention, NPS
• Product Updates: Roadmap and releases
• Quarterly Comparisons: Period-over-period growth analysis
• North Star Metrics: Business star metrics
• Methodology: Explanation of calculations and definitions

• Next.js 14 - React framework for web applications
• Nextra - Documentation framework built on Next.js
• TypeScript - Static typing for JavaScript
• Tailwind CSS - Utility-first CSS framework (included in Nextra)
• MDX - Markdown with React components

# Clone the repository
git clone https://github.com/your-username/investor-room.git
cd investor-room

# Install dependencies
npm install
# or
pnpm install
# or
yarn install

# Start development server
npm run dev
# or
pnpm dev
# or
yarn dev

Open http://localhost:3002 in your browser to see the result.

1. Edit your startup information in pages/index.mdx
2. Update metrics in pages/kpis.mdx and pages/financials.mdx
3. Modify configuration in theme.config.tsx
4. Customize components in the components/ folder

1. Push your code to GitHub:

   git add .
   git commit -m "Initial commit"
   git push origin main

2. Deploy with one click:

   

3. Configure your custom domain (optional) in the Vercel dashboard

1. Install Vercel CLI:

   npm i -g vercel

2. Login to Vercel:

   vercel login

3. Deploy your project:

   vercel --prod

If you use authentication, configure these variables in Vercel:

# For Auth0
AUTH0_SECRET=your-secret-here
AUTH0_BASE_URL=https://your-domain.vercel.app
AUTH0_ISSUER_BASE_URL=https://your-tenant.auth0.com
AUTH0_CLIENT_ID=your-client-id
AUTH0_CLIENT_SECRET=your-client-secret

# For Supabase
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

Auth0 is perfect for startups that need robust enterprise authentication.

1. Create an account on Auth0
2. Create a new application of type "Regular Web Application"
3. Configure URLs:
   • Allowed Callback URLs: https://your-domain.vercel.app/api/auth/callback
   • Allowed Logout URLs: https://your-domain.vercel.app

npm install @auth0/nextjs-auth0

Create pages/api/auth/[...auth0].js:

import { handleAuth } from '@auth0/nextjs-auth0';

export default handleAuth();

Wrap your application in pages/_app.tsx:

import { UserProvider } from '@auth0/nextjs-auth0/client';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <UserProvider>
      <Component {...pageProps} />
    </UserProvider>
  );
}

import { withPageAuthRequired } from '@auth0/nextjs-auth0/client';

export default withPageAuthRequired(function Dashboard() {
  return <div>Your protected dashboard</div>;
});

Supabase is ideal for startups that prefer an open-source solution with more control.

1. Create a project on Supabase
2. Configure authentication in Authentication > Settings
3. Enable providers (Email, Google, GitHub, etc.)

npm install @supabase/auth-helpers-nextjs @supabase/supabase-js

Create lib/supabase.js:

import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';

export const supabase = createClientComponentClient();

Create middleware.js:

import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs';
import { NextResponse } from 'next/server';

export async function middleware(req) {
  const res = NextResponse.next();
  const supabase = createMiddlewareClient({ req, res });
  
  const {
    data: { session },
  } = await supabase.auth.getSession();

  if (!session) {
    return NextResponse.redirect(new URL('/login', req.url));
  }

  return res;
}

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico|login).*)'],
};

'use client';
import { supabase } from '../lib/supabase';

export default function Login() {
  const handleLogin = async () => {
    await supabase.auth.signInWithOAuth({
      provider: 'google',
      options: {
        redirectTo: `${window.location.origin}/`
      }
    });
  };

  return (
    <button onClick={handleLogin}>
      Sign in with Google
    </button>
  );
}

Edit theme.config.tsx:

const config: DocsThemeConfig = {
  logo: <span>📊 YourStartup Investor Room</span>,
  project: {
    link: 'https://github.com/your-username/your-investor-room',
  },
  footer: {
    content: '© 2024 YourStartup - Investor Dashboard',
  },
}

Update files in pages/:

• index.mdx - Main page with executive summary
• kpis.mdx - Key business KPIs
• financials.mdx - Financial metrics
• q1-2025.mdx - Current quarter objectives

Components in components/ are fully customizable:

• MetricCard.tsx - Metric display cards
• GradientHeader.tsx - Gradient headers
• FeatureCard.tsx - Feature cards

Nextra uses Tailwind CSS, you can customize:

• Main colors in components
• Typography and spacing
• Dark/light mode

# Development
npm run dev          # Start development server on port 3002

# Production
npm run build        # Build application for production
npm run start        # Start production server

# Utilities
npm run lint         # Run ESLint to check code
npm run type-check   # Check TypeScript types

investor-room/
├── components/          # Reusable components
│   ├── MetricCard.tsx   # Metric cards
│   ├── GradientHeader.tsx
│   └── ...
├── pages/               # Dashboard pages
│   ├── index.mdx        # Main page
│   ├── kpis.mdx         # Key KPIs
│   ├── financials.mdx   # Financial metrics
│   └── ...
├── public/              # Static files
├── theme.config.tsx     # Nextra configuration
├── next.config.mjs      # Next.js configuration
└── package.json         # Dependencies and scripts

• Monthly/quarterly reports to investors
• Real-time metrics dashboards
• Fundraising presentations with updated data
• Stakeholder transparency

• Portfolio company tracking
• Standardized metrics across startups
• 24/7 access to updated information
• Performance comparisons

Contributions are welcome! If you have ideas to improve the template:

1. Fork the project
2. Create a branch for your feature (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

This project is under the MIT License. See the LICENSE file for more details.

• Documentation: Nextra Docs
• Issues: GitHub Issues
• Discussions: GitHub Discussions

Do you use this template? We'd love to see your implementation!

Share your Investor Room:

• Twitter: @your_handle
• LinkedIn: Your Profile

Made with ❤️ for the founder community

Last updated: January 2025