In the previous guide, we initialized Neon Auth. This time, we will take a quick look at some of the most useful components.
For the full documentation of all available components, see the components reference.
<UserButton />
The <UserButton />
component shows the user's avatar that opens a dropdown with various user settings on click.

import { UserButton } from '@stackframe/stack';
export default function Page() {
return <UserButton />;
}
<SignIn />
and <SignUp />
These components show a sign-in and sign-up form, respectively.

import { SignIn } from '@stackframe/stack';
export default function Page() {
return <SignIn />;
}
All Neon Auth components are modular and built from smaller primitives. For example, the <SignIn />
component is composed of the following:
- An
<OAuthButtonGroup />
, which itself is composed of multiple<OAuthButton />
components - A
<MagicLinkSignIn />
, which has a text field and callssignInWithMagicLink()
- A
<CredentialSignIn />
, which has two text fields and callssignInWithCredential()
You can use these components individually to build a custom sign-in component.
To change the default sign-in URL to your own, see the documentation on custom pages.
Others
Neon Auth has many more components available. For a comprehensive list, see the components reference.
Next steps
In the next guide, we will do a deep-dive into retrieving and modifying user objects, as well as how to protect a page.