> ## Documentation Index
> Fetch the complete documentation index at: https://stytch.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Get up and running with Stytch in minutes.

export const Quickstarts = () => {
  const [implementationType, setImplementationType] = useState("stytch-ui");
  const [framework, setFramework] = useState("react");
  const getQuickstartUrl = vertical => {
    if (!implementationType) {
      return "#";
    }
    const isHeadless = implementationType === "headless";
    if (!isHeadless && !framework) {
      return "#";
    }
    if (vertical === "b2b") {
      if (implementationType === "stytch-ui") {
        return framework ? "/multi-tenant-auth/build-auth/discovery#" + framework : "/multi-tenant-auth/build-auth/discovery";
      }
      if (implementationType === "headless") {
        return "/multi-tenant-auth/build-auth/custom/via-sdk";
      }
      if (implementationType === "backend") {
        return framework ? "/multi-tenant-auth/build-auth/custom/via-api#" + framework : "/multi-tenant-auth/build-auth/custom/via-api";
      }
      return "/multi-tenant-auth/overview";
    } else if (vertical === "b2c") {
      if (implementationType === "headless") {
        return "/consumer-auth/build-auth/custom/via-sdk";
      }
      if (implementationType === "backend") {
        return framework ? "/consumer-auth/build-auth/custom/via-api#" + framework : "/consumer-auth/build-auth/custom/via-api";
      }
      return framework ? "/consumer-auth/build-auth/login-or-signup#" + framework : "/consumer-auth/build-auth/login-or-signup";
    } else {
      return "/get-started/quickstart";
    }
  };
  const getCardWrapperClass = isSelected => {
    return isSelected ? "quickstart-card-wrapper quickstart-card-wrapper--selected" : "quickstart-card-wrapper";
  };
  const handleImplementationTypeChange = nextType => {
    const nextIsBackend = nextType === "backend";
    const currentIsBackend = implementationType === "backend";
    if (nextIsBackend && !currentIsBackend) {
      setFramework("node-js");
    } else if (!nextIsBackend && currentIsBackend) {
      setFramework("react");
    }
    setImplementationType(nextType);
  };
  return <Steps>
      <Step title="Select an implementation type">
        <Columns cols={3}>
          <div className={getCardWrapperClass(implementationType === "stytch-ui")} onClick={() => handleImplementationTypeChange("stytch-ui")}>
            <Card title="Stytch UI">
              Use our prebuilt UI components for customizable, out of box login and sign up flows.
            </Card>
          </div>
          <div className={getCardWrapperClass(implementationType === "headless")} onClick={() => handleImplementationTypeChange("headless")}>
            <Card title="Headless">
              Build using your own UI with our headless frontend SDKs for more customization.
            </Card>
          </div>
          <div className={getCardWrapperClass(implementationType === "backend")} onClick={() => handleImplementationTypeChange("backend")}>
            <Card title="Backend only">
              Use our backend API and SDKs for maximum code control and flexibility.
            </Card>
          </div>
        </Columns>
      </Step>
      <Step title="Select a framework">
        {implementationType == "stytch-ui" ? <Columns cols={3}>
            <div className={getCardWrapperClass(framework === "react")} onClick={() => setFramework("react")}>
              <Card title="React" icon="react" />
            </div>
            <div className={getCardWrapperClass(framework === "next-js-app")} onClick={() => setFramework("next-js-app")}>
              <Card title="Next.js" icon="triangle" />
            </div>
            <div className={getCardWrapperClass(framework === "vanilla-js")} onClick={() => setFramework("vanilla-js")}>
              <Card title="Vanilla JS" icon="js" />
            </div>
          </Columns> : implementationType == "headless" ? <Columns cols={3}>
            <div className={getCardWrapperClass(framework === "react")} onClick={() => setFramework("react")}>
              <Card title="React" icon="react" />
            </div>
            <div className={getCardWrapperClass(framework === "next-js-app")} onClick={() => setFramework("next-js-app")}>
              <Card title="Next.js" icon="triangle" />
            </div>
            <div className={getCardWrapperClass(framework === "vanilla-js")} onClick={() => setFramework("vanilla-js")}>
              <Card title="Vanilla JS" icon="js" />
            </div>
            <div className={getCardWrapperClass(framework === "ios")} onClick={() => setFramework("ios")}>
              <Card title="iOS" icon="apple" />
            </div>
            <div className={getCardWrapperClass(framework === "android")} onClick={() => setFramework("android")}>
              <Card title="Android" icon="android" />
            </div>
            <div className={getCardWrapperClass(framework === "react-native")} onClick={() => setFramework("react-native")}>
              <Card title="React Native" icon="react" />
            </div>
          </Columns> : <Columns cols={3}>
            <div className={getCardWrapperClass(framework === "node-js")} onClick={() => setFramework("node-js")}>
              <Card title="Node" icon="node" />
            </div>
            <div className={getCardWrapperClass(framework === "python")} onClick={() => setFramework("python")}>
              <Card title="Python" icon="python" />
            </div>
            <div className={getCardWrapperClass(framework === "go")} onClick={() => setFramework("go")}>
              <Card title="Go" icon="golang" />
            </div>
            <div className={getCardWrapperClass(framework === "ruby-on-rails")} onClick={() => setFramework("ruby-on-rails")}>
              <Card title="Ruby" icon="gem" />
            </div>
            <div className={getCardWrapperClass(framework === "java")} onClick={() => setFramework("java")}>
              <Card title="Java" icon="java" />
            </div>
          </Columns>}
      </Step>
      <Step title="Select the type of authentication for your project">
        <Columns cols={2}>
          <Card title="Multi-tenant Auth" href={framework && implementationType ? getQuickstartUrl("b2b") : undefined} arrow={framework && implementationType} icon="building-2">
            Enterprise-grade authentication and authorization for organizations and their members.
          </Card>
          <Card title="Consumer Auth" href={framework && implementationType ? getQuickstartUrl("b2c") : undefined} arrow={framework && implementationType} icon="user">
            Secure, flexible authentication built for individual end-users.
          </Card>
        </Columns>
      </Step>
    </Steps>;
};

<Quickstarts />