Dashboard

Sidebar navigation, stat cards and a data table. The layout most admin UIs start from.

Components: 24
Files exported: 16
Lines of code: 390
Runtime dependencies: next, react, react-dom, lucide-react

Live render — this is real DOM, not a screenshot

Dashboard

$45,231

Total Revenue

+20.1%

2,350

Active Users

+18.2%

1,247

New Orders

+12.5%

3.6%

Conversion Rate

+4.1%

Recent Activity

Q4 Revenue Report

Updated 2 hours ago

User Onboarding Flow

Updated 5 hours ago

Marketing Campaign

Updated yesterday

Interaction is disabled on this page. In the builder the same tree is fully editable.

The code you get

Generated by the same exporter the Export button calls. Standard Next.js App Router and Tailwind — no InBuild runtime, no proprietary imports, nothing to license.

app/page.tsx

68 lines

import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "Home",
  description: "Home — Dashboard",
  openGraph: {
    title: "Home",
    description: "Home — Dashboard",
  },
}

export default function Page() {
  return (
  <div className="min-w-0 min-h-screen bg-gray-50">
    <div className="flex flex-row flex-wrap gap-4 flex items-center justify-between px-8 py-4 bg-white border-b border-gray-200">
      <h1 className="text-4xl font-bold text-2xl font-bold text-gray-900">Dashboard</h1>
      <div className="flex flex-row flex-wrap justify-start flex items-center gap-3">
        <div className="space-y-1.5 border border-gray-300 rounded-lg px-4 py-2 text-sm w-64">
          <input type="text" name="field-dashbo" placeholder="Search..." className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" />
        </div>
        <button className="inline-flex items-center justify-center font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90 bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition">New Report</button>
      </div>
    </div>
    <div className="min-w-0 p-8">
      <div className="grid min-w-0 grid grid-cols-4 gap-6 mb-8">
        <div className="p-4 text-center bg-white p-6 rounded-xl border border-gray-200">
          <p className="text-3xl font-bold">$45,231</p>
          <p className="text-sm opacity-60 mt-1">Total Revenue</p>
          <p className="text-sm mt-1 text-green-600">+20.1%</p>
        </div>
        <div className="p-4 text-center bg-white p-6 rounded-xl border border-gray-200">
          <p className="text-3xl font-bold">2,350</p>
          <p className="text-sm opacity-60 mt-1">Active Users</p>
          <p className="text-sm mt-1 text-green-600">+18.2%</p>
        </div>
        <div className="p-4 text-center bg-white p-6 rounded-xl border border-gray-200">
          <p className="text-3xl font-bold">1,247</p>
          <p className="text-sm opacity-60 mt-1">New Orders</p>
          <p className="text-sm mt-1 text-green-600">+12.5%</p>
        </div>
        <div className="p-4 text-center bg-white p-6 rounded-xl border border-gray-200">
          <p className="text-3xl font-bold">3.6%</p>
          <p className="text-sm opacity-60 mt-1">Conversion Rate</p>
          <p className="text-sm mt-1 text-green-600">+4.1%</p>
        </div>
      </div>
      <section className="w-full bg-white rounded-xl border border-gray-200 p-6">
        <h2 className="text-3xl font-bold text-lg font-semibold text-gray-900 mb-4">Recent Activity</h2>
        <div className="grid min-w-0 grid grid-cols-3 gap-4">
          <div className="p-4 rounded-lg border border-gray-100 hover:bg-gray-50 transition">
            <p className="text-base font-medium text-gray-900 mb-1">Q4 Revenue Report</p>
            <p className="text-base text-sm text-gray-500">Updated 2 hours ago</p>
          </div>
          <div className="p-4 rounded-lg border border-gray-100 hover:bg-gray-50 transition">
            <p className="text-base font-medium text-gray-900 mb-1">User Onboarding Flow</p>
            <p className="text-base text-sm text-gray-500">Updated 5 hours ago</p>
          </div>
          <div className="p-4 rounded-lg border border-gray-100 hover:bg-gray-50 transition">
            <p className="text-base font-medium text-gray-900 mb-1">Marketing Campaign</p>
            <p className="text-base text-sm text-gray-500">Updated yesterday</p>

Truncated — 8 more lines in the exported file.

Every file in the export

.env.local.example
.gitignore
FORMS.md
README.md
app/api/contact/route.ts
app/globals.css
app/layout.tsx
app/page.tsx
app/robots.ts
app/sitemap.ts
eslint.config.mjs
next-env.d.ts
next.config.ts
package.json
postcss.config.mjs
tsconfig.json

package.json

30 lines

{
  "name": "dashboard",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "typecheck": "tsc --noEmit"
  },
  "dependencies": {
    "next": "^15.0.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "lucide-react": "^0.456.0"
  },
  "devDependencies": {
    "typescript": "^5.6.0",
    "@types/node": "^22.0.0",
    "@types/react": "^19.0.0",
    "@types/react-dom": "^19.0.0",
    "tailwindcss": "^4.0.0",
    "@tailwindcss/postcss": "^4.0.0",
    "postcss": "^8.4.0",
    "autoprefixer": "^10.4.0",
    "eslint": "^9.0.0",
    "eslint-config-next": "^15.0.0"
  }
}

Start from this template

Every plan includes all templates, the visual editor, and code export. From $49/mo — no free tier, no trial.