Product

Code Export

Export your designs to working code, ready for engineer handoff on day one.

Generated Files

src

components

App.tsx

index.css

index.tsx

index.html

package.json

postcss.config.js

README.md

tailwind.config.js

tsconfig.json

tsconfig.node.json

vite.config.ts

App.tsx

import Header from './components/Header';
...
import MetricList from './components/MetricList';

export default function App() {
  return (
    <div className="p-6 bg-gray-100 min-h-screen">
      <Header
        title="Linea"
        tabs={['Report', 'Dashboard', 'Settings']}
        active="Dashboard"
      />
      <StudioInfo
        name="Visly Studio"
        url="visly.dashboardhub.io"
        logo="visly"
      />

      <div className="grid md:grid-cols-3 gap-4 my-6">
        <StatCard title="All revenue" value="$12,903.45" change="5.7%" />
        <StatCard title="Viewers" value="37,553" change="2.4%" />
        <StatCard title="Active Users" value="322" change="8.5%" />
      </div>

      <div className="bg-white p-6 rounded-xl shadow">
        <div className="flex gap-3 mb-4">
          <Badge text="Conversion Rate: 3.8%" color="green" />
          <Badge text="Churn Rate: 1.2%" />
          <Badge text="ARPU: $15.45" />
        </div>
        <div className="grid md:grid-cols-2 gap-6">
          <RevenueChart title="All revenue" amount="$12,903.45" change="5.7%" />
          <MetricList
            items={[
              { label: 'Day Range', value: '$12,903.45' },
              { label: 'Active Users (MAU)', value: '322' },
              { label: 'Avg. Session Duration', value: '4m 32s' },
              { label: 'Bounce Rate', value: '48.2%' },
              { label: 'Conversion Rate', value: '3.9%' },
            ]}
          />
        </div>
      </div>
    </div>
  );
}