Launchpad starter app

Pro starter app. Needs a tealmac UI Pro licence. Set it up once on /pro/login, then see Install Pro.

Launchpad is a whole product, not a page. It is a fictional SaaS for publishing product updates, with everything a real SaaS needs around the core feature. Open the live preview.

What's included

The signed-in app has a sidebar (a drawer on phones), a command menu opened with Ctrl K (⌘ K on Apple devices) and a notifications popover.

Install

Set up your licence and the Pro registry once per project. The steps are in Install Pro:

CopyTEALMAC_UI_LICENSE_KEY=your-licence-key

Copy{
  "registries": {
    "@tealmac-pro": {
      "url": "https://ui.tealmac.com/r/pro/{name}.json",
      "headers": {
        "Authorization": "Bearer ${TEALMAC_UI_LICENSE_KEY}"
      }
    }
  }
}

Then add the app:

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @tealmac-pro/launchpad
Copy

The CLI installs the free components Launchpad uses, plus recharts, sonner and three-based 3D components for the hero.

Where the files land

• components/tealmac-pro/launchpad/*: the shell, data, billing helpers and one file per page.
• app/templates/launchpad/**/page.tsx: a route for each page, for example app/templates/launchpad/app/billing/page.tsx.

Move the routes wherever you like, then change the paths in the lp object at the top of launchpad-shell.tsx. Every link in the app reads from it.

Replace the mock data

All sample data lives in launchpad-data.ts. Each page reads from it at the top of the component, so you can swap an export for a fetch without touching the layout:

Copy// Before
const [members, setMembers] = React.useState<Member[]>(seedMembers)
 
// After: server component fetches, passes data to the client page
export default async function Page() {
  const members = await getMembers()
  return <LaunchpadTeam initialMembers={members} />
}

List pages show loading, empty and error states through StateView. Add ?state=loading, ?state=empty or ?state=error to a page URL in the preview to see them. In your app, drive them from your data fetching status.

Billing with Dodo Payments

launchpad-billing-server.ts has three example helpers and no secrets:

• createCheckoutSession() creates a hosted checkout and returns its URL.
• verifyDodoWebhook() checks a webhook's signature with Web Crypto.
• handleDodoEvent() is a switch you fill in with your database writes.

Add your keys to the environment:

CopyDODO_PAYMENTS_API_KEY=
DODO_PAYMENTS_WEBHOOK_SECRET=
DODO_PAYMENTS_ENVIRONMENT=test_mode
NEXT_PUBLIC_APP_URL=http://localhost:3000
DODO_PRODUCT_GROWTH_MONTHLY=
DODO_PRODUCT_GROWTH_YEARLY=
DODO_PRODUCT_SCALE_MONTHLY=
DODO_PRODUCT_SCALE_YEARLY=

Create one product per plan and interval in the Dodo Payments dashboard and paste the product IDs. Then add two route handlers.

Copyimport { NextResponse } from "next/server"
 
import { createCheckoutSession } from "@/components/tealmac-pro/launchpad/launchpad-billing-server"
 
export async function POST(request: Request) {
  // Get the signed-in user from your auth library; never trust the body for identity.
  const user = await getUser(request)
  if (!user)
    return NextResponse.json({ error: "unauthorised" }, { status: 401 })
 
  const { planId, interval } = await request.json()
  if (
    !["growth", "scale"].includes(planId) ||
    !["monthly", "yearly"].includes(interval)
  ) {
    return NextResponse.json({ error: "bad request" }, { status: 400 })
  }
 
  const session = await createCheckoutSession({
    planId,
    interval,
    email: user.email,
    metadata: { workspaceId: user.workspaceId },
  })
  return NextResponse.json({ checkoutUrl: session.checkoutUrl })
}

Copyimport { NextResponse } from "next/server"
 
import {
  handleDodoEvent,
  verifyDodoWebhook,
} from "@/components/tealmac-pro/launchpad/launchpad-billing-server"
 
export async function POST(request: Request) {
  const result = await verifyDodoWebhook(request)
  if (!result.ok) {
    return NextResponse.json({ error: result.error }, { status: result.status })
  }
  // Dodo retries failed deliveries: skip ids you have already handled.
  await handleDodoEvent(result.event)
  return NextResponse.json({ received: true })
}

Point a webhook endpoint at https://your-domain/api/webhooks/dodo in the dashboard and copy its signing secret into DODO_PAYMENTS_WEBHOOK_SECRET. In launchpad-billing.tsx, set PREVIEW_MODE to false so the upgrade dialog posts to your checkout route and redirects.

Change the plan from the webhook, not from the redirect back to your site. The redirect can be closed before it happens; the webhook always arrives.

Theming

Launchpad uses only semantic tokens (background, card, primary, muted, border, chart-1 to chart-5 and friends) and the rounded-md, rounded-lg and rounded-xl radii. It has no palette of its own, so it follows your theme and works with every theme preset, in light and dark mode.

Accessibility

• One h1 per page, labelled landmarks, a skip link in the app shell and aria-current on the active navigation link.
• Every field has a label, errors are linked with aria-describedby, and validation moves focus to the first invalid field.
• Dialogs, menus, tabs, the command menu and the accordion use Radix and cmdk, so keyboard and screen reader behaviour follows WAI-ARIA practices.
• Async changes are announced through aria-live regions.
• Motion is limited to short transitions that switch off with prefers-reduced-motion, and the 3D hero shows a still frame in that case.
• Layouts hold down to 360px wide with no sideways page scroll. Wide tables scroll inside their own container.