TreeLit — JSX Visualizer

TreeLit

No JSX

Editor

function Dashboard() {
  return (
    <main className="min-h-screen bg-gray-50">
      <header className="bg-white shadow px-6 py-4 flex items-center justify-between">
        <h1 className="text-2xl font-bold text-gray-900">Dashboard</h1>
        <nav className="flex gap-6">
          <a href="/home" className="text-sm text-gray-600">Home</a>
          <a href="/analytics" className="text-sm text-gray-600">Analytics</a>
          <a href="/settings" className="text-sm text-gray-600">Settings</a>
        </nav>
      </header>
      <div className="p-6 grid grid-cols-3 gap-4">
        <section className="bg-white rounded-xl p-5 shadow-sm">
          <h2 className="text-sm text-gray-500 mb-1">Total Users</h2>
          <p className="text-3xl font-bold text-gray-900">12,400</p>
        </section>
        <section className="bg-white rounded-xl p-5 shadow-sm">
          <h2 className="text-sm text-gray-500 mb-1">Revenue</h2>
          <p className="text-3xl font-bold text-gray-900">$84,200</p>
        </section>
        <section className="bg-white rounded-xl p-5 shadow-sm">
          <h2 className="text-sm text-gray-500 mb-1">Active Sessions</h2>
          <p className="text-3xl font-bold text-gray-900">3,210</p>
        </section>
        <div className="col-span-2 bg-white rounded-xl p-5 shadow-sm">
          <h2 className="text-lg font-semibold text-gray-900 mb-4">Weekly Activity</h2>
          <div className="h-48 bg-gray-100 rounded-lg" />
        </div>
        <div className="bg-white rounded-xl p-5 shadow-sm">
          <h2 className="text-lg font-semibold text-gray-900 mb-4">Top Items</h2>
          <ul className="space-y-2">
            <li className="flex items-center justify-between">
              <span className="text-sm text-gray-700">Product A</span>
              <span className="text-sm font-semibold">$12k</span>
            </li>
            <li className="flex items-center justify-between">
              <span className="text-sm text-gray-700">Product B</span>
              <span className="text-sm font-semibold">$9k</span>
            </li>
            <li className="flex items-center justify-between">
              <span className="text-sm text-gray-700">Product C</span>
              <span className="text-sm font-semibold">$7k</span>
            </li>
          </ul>
        </div>
      </div>
    </main>
  );
}

Component Tree

No JSX found.
Paste JSX or click Load Example.

Wireframe Preview

structtextactioncomp

No JSX to preview