mirror of
https://github.com/stack-auth/stack.git
synced 2026-06-04 21:04:37 +08:00
66 lines
2.0 KiB
Plaintext
66 lines
2.0 KiB
Plaintext
---
|
|
title: Components
|
|
description: Pre-built Next.js components to make your life easier
|
|
sidebarTitle: Components
|
|
---
|
|
|
|
# Components
|
|
|
|
In [the last guide](./setup), 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.
|
|
|
|
<Frame>
|
|
<img src="/images/user-button.png" alt="UserButton" width={200} height={200} />
|
|
</Frame>
|
|
|
|
```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.
|
|
|
|
<Frame>
|
|
<img src="/images/sign-in.png" alt="SignIn" width={350} height={350} />
|
|
</Frame>
|
|
|
|
```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).
|
|
|
|
## Others
|
|
|
|
Stack has many more components available. For a comprehensive list, please check the documentation on [components](../components).
|
|
|
|
## 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.
|