Design screens in React.
See every flow on a canvas.

export default function Login() {
  return (
    <form className="login-form">
      <h1>Welcome back</h1>
      <input type="email" placeholder="Email" />
      <input type="password" placeholder="Password" />

      {/* This attribute creates a flow arrow: */}
      {/*   Login ----→ Dashboard              */}
      <button data-df-navigate="dashboard">
        Sign in
      </button>
    </form>
  )
}

export const theme: Theme = {
  colors: {
    primary:    '#4488ff',
    background: '#ffffff',
    surface:    '#f8fafc',
    text:       '#0f172a',
    muted:      '#64748b',
  },
};