mirror of
https://github.com/stack-auth/stack.git
synced 2026-06-13 21:01:21 +08:00
cf7a540e1a
<!--
Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md
-->
Fixes broken links on /docs/{platform}/components pagse to now work, and
fixes redirect when switching off of react-like platforms when on
components or sdk pages.
<!-- ELLIPSIS_HIDDEN -->
----
> [!IMPORTANT]
> Fixes broken links and redirect issues on components index page by
updating paths and improving URL handling logic.
>
> - **Behavior**:
> - Fixes broken links on `/docs/{platform}/components` pages by
updating relative paths in `index.mdx`.
> - Corrects redirect logic when switching platforms on components or
SDK pages in `docs-layout-router.tsx`.
> - **Functions**:
> - Adds `joinUrlPath()` in `generate-platform-navigation.js` to safely
join URL path segments.
> - Updates `pageExistsForPlatform()` in
`generate-platform-navigation.js` to handle `/index.mdx` paths.
> - **Misc**:
> - Adds type safety checks for platform handling in
`docs-layout-router.tsx`.
>
> <sup>This description was created by </sup>[<img alt="Ellipsis"
src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=stack-auth%2Fstack-auth&utm_source=github&utm_medium=referral)<sup>
for 0a5337de8c. You can
[customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this
summary. It will automatically update as commits are pushed.</sup>
<!-- ELLIPSIS_HIDDEN -->
---------
Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com>
151 lines
4.4 KiB
Plaintext
151 lines
4.4 KiB
Plaintext
---
|
|
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>
|
|
<SignIn />
|
|
</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>
|
|
<SignUp />
|
|
</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>
|
|
<CredentialSignIn />
|
|
</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>
|
|
<CredentialSignUp />
|
|
</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>
|
|
<OAuthButton />
|
|
</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>
|
|
<OAuthButtonGroup />
|
|
</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>
|
|
<UserButton />
|
|
</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>
|
|
<AccountSettings />
|
|
</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>
|
|
<SelectedTeamSwitcher />
|
|
</div>
|
|
</Card>
|
|
</CardGroup>
|
|
|
|
## Utilities
|
|
|
|
<CardGroup>
|
|
<Card href="./components/stack-handler">
|
|
<div className="components-card-content">
|
|
<StackHandler />
|
|
</div>
|
|
</Card>
|
|
<Card href="./components/stack-provider">
|
|
<div className="components-card-content">
|
|
<StackProvider />
|
|
</div>
|
|
</Card>
|
|
<Card href="./components/stack-theme">
|
|
<div className="components-card-content">
|
|
<StackTheme />
|
|
</div>
|
|
</Card>
|
|
</CardGroup>
|
|
</div>
|