stack/docs/templates/components/index.mdx

---
title: Components
---

Stack Auth provides a set of components for Next.js applications.

To get started with Stack Auth in your Next.js application, follow the [setup guide](../getting-started/setup.mdx). To see the hooks and objects in the Next.js SDK, see the [SDK reference](../sdk).

<div className="components-cards">
  <style>{`
    .components-cards .fern-card > .flex {
      align-items: stretch !important;
    }
    .components-cards .components-card-content {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      color: rgba(var(--body-text), var(--tw-text-opacity));
      font-weight: bold;
    }
    .components-cards .components-card-content > .img-wrapper {
      pointer-events: none;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .components-cards .components-card-content > .img-wrapper img {
      object-fit: contain;
      border-radius: 12px;
      box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.1);
    }
  `}</style>



  ## Sign In and Sign Up

  <CardGroup>
    <Card href="../components/sign-in" >
      <div className="components-card-content">
        <div className="img-wrapper">
          <img src="/imgs/sign-in.png" alt="SignIn" className="stack-200h" />
        </div>
        &lt;SignIn /&gt;
      </div>
    </Card>
    <Card href="../components/sign-up">
      <div className="components-card-content">
        <div className="img-wrapper">
          <img src="/imgs/sign-up.png" alt="SignUp" className="stack-200h" />
        </div>
        &lt;SignUp /&gt;
      </div>
    </Card>
    <Card href="../components/credential-sign-in">
      <div className="components-card-content">
        <div className="img-wrapper">
          <img src="/imgs/credential-sign-in.png" alt="CredentialSignIn" className="stack-150h" />
        </div>
        &lt;CredentialSignIn /&gt;
      </div>
    </Card>
    <Card href="../components/credential-sign-up">
      <div className="components-card-content">
        <div className="img-wrapper">
          <img src="/imgs/credential-sign-up.png" alt="CredentialSignUp" className="stack-200h" />
        </div>
        &lt;CredentialSignUp /&gt;
      </div>
    </Card>
    <Card href="../components/oauth-button">
      <div className="components-card-content">
        <div className="img-wrapper">
          <img src="/imgs/oauth-button.png" alt="OAuthButton" className="stack-50h" />
        </div>
        &lt;OAuthButton /&gt;
      </div>
    </Card>
    <Card href="../components/oauth-button-group">
      <div className="components-card-content">
        <div className="img-wrapper">
          <img src="/imgs/oauth-button-group.png" alt="OAuthButtonGroup" className="stack-200h" />
        </div>
        &lt;OAuthButtonGroup /&gt;
      </div>
    </Card>
  </CardGroup>


  ## User

  <CardGroup>
    <Card href="../components/user-button">
      <div className="components-card-content">
        <div className="img-wrapper">
          <img src="/imgs/user-button.png" alt="UserButton" className="stack-200h" />
        </div>
        &lt;UserButton /&gt;
      </div>
    </Card>
    <Card href="../components/account-settings">
      <div className="components-card-content">
        <div className="img-wrapper">
          <img src="/imgs/account-settings.png" alt="AccountSettings" className="stack-100h" />
        </div>
        &lt;AccountSettings /&gt;
      </div>
    </Card>
  </CardGroup>


    ## Teams & Organizations

  <CardGroup>
    <Card href="../components/selected-team-switcher">
      <div className="components-card-content">
        <div className="img-wrapper">
          <img src="/imgs/selected-team-switcher.png" alt="SelectedTeamSwitcher" className="stack-200h" />
        </div>
        &lt;SelectedTeamSwitcher /&gt;
      </div>
    </Card>
  </CardGroup>

  ## Utilities

  <CardGroup>
    <Card href="../components/stack-handler">
      <div className="components-card-content">
        &lt;StackHandler /&gt;
      </div>
    </Card>
    <Card href="../components/stack-provider">
      <div className="components-card-content">
        &lt;StackProvider /&gt;
      </div>
    </Card>
    <Card href="../components/stack-theme">
      <div className="components-card-content">
        &lt;StackTheme /&gt;
      </div>
    </Card>
  </CardGroup>
</div>