mirror of
https://github.com/stack-auth/stack.git
synced 2026-06-13 21:01:21 +08:00
4e467c4026
Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com> Co-authored-by: Madison Kennedy <madison@Madisons-MacBook-Pro.local> Co-authored-by: BilalG1 <bg2002@gmail.com>
63 lines
2.0 KiB
Plaintext
63 lines
2.0 KiB
Plaintext
---
|
|
title: Components
|
|
description: Pre-built Next.js components to make your life easier
|
|
---
|
|
|
|
In [the last guide](./setup.mdx), we initialized Stack. This time, we will take a quick look at some of the most useful Next.js components.
|
|
|
|
For the full documentation of all available components, please refer to the [components reference](/components).
|
|
|
|
## `<UserButton />`
|
|
|
|
The `<UserButton />` component shows the user's avatar that opens a dropdown with various user settings on click.
|
|
|
|
<div className="stack-white-image-showcase stack-200h">
|
|
<img src="/imgs/user-button.png" alt="UserButton" />
|
|
</div>
|
|
|
|
```tsx title="page.tsx"
|
|
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.
|
|
|
|
<div className="stack-white-image-showcase stack-350h">
|
|
<img src="/imgs/sign-in.png" alt="SignIn" />
|
|
</div>
|
|
|
|
```tsx title="page.tsx"
|
|
import { SignIn } from '@stackframe/stack';
|
|
|
|
export default function Page() {
|
|
return (
|
|
<SignIn />
|
|
);
|
|
}
|
|
```
|
|
|
|
All of Stack's 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 calls `useStackApp().signInWithMagicLink()`
|
|
- A `<CredentialSignIn />`, which has two text fields and calls `useStackApp().signInWithCredential()`
|
|
|
|
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](../customization/custom-pages.mdx).
|
|
|
|
## Others
|
|
|
|
Stack has many more components available. For a comprehensive list, please check the documentation on [components](../components/overview).
|
|
|
|
## 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.
|