diff --git a/.github/ISSUE_TEMPLATE/BUG-REPORT.yml b/.github/ISSUE_TEMPLATE/BUG-REPORT.yml
index 7af43d099f..7ba5414bc7 100644
--- a/.github/ISSUE_TEMPLATE/BUG-REPORT.yml
+++ b/.github/ISSUE_TEMPLATE/BUG-REPORT.yml
@@ -25,10 +25,10 @@ body:
Guidelines](https://github.com/ory/docs/blob/master/CONTRIBUTING.md)."
required: true
- label:
- "I have joined the [Ory Community Slack](https://slack.ory.sh)."
+ "I have joined the [Ory Community Slack](https://slack.ory.com)."
- label:
"I am signed up to the [Ory Security Patch
- Newsletter](https://www.ory.sh/l/sign-up-newsletter)."
+ Newsletter](https://www.ory.com/l/sign-up-newsletter)."
id: checklist
type: checkboxes
- attributes:
diff --git a/.github/ISSUE_TEMPLATE/DESIGN-DOC.yml b/.github/ISSUE_TEMPLATE/DESIGN-DOC.yml
index abec5b8d03..209d4f5e24 100644
--- a/.github/ISSUE_TEMPLATE/DESIGN-DOC.yml
+++ b/.github/ISSUE_TEMPLATE/DESIGN-DOC.yml
@@ -36,10 +36,10 @@ body:
Guidelines](https://github.com/ory/docs/blob/master/CONTRIBUTING.md)."
required: true
- label:
- "I have joined the [Ory Community Slack](https://slack.ory.sh)."
+ "I have joined the [Ory Community Slack](https://slack.ory.com)."
- label:
"I am signed up to the [Ory Security Patch
- Newsletter](https://www.ory.sh/l/sign-up-newsletter)."
+ Newsletter](https://www.ory.com/l/sign-up-newsletter)."
id: checklist
type: checkboxes
- attributes:
diff --git a/.github/ISSUE_TEMPLATE/FEATURE-REQUEST.yml b/.github/ISSUE_TEMPLATE/FEATURE-REQUEST.yml
index b1113d7fa8..ef155dcb60 100644
--- a/.github/ISSUE_TEMPLATE/FEATURE-REQUEST.yml
+++ b/.github/ISSUE_TEMPLATE/FEATURE-REQUEST.yml
@@ -29,10 +29,10 @@ body:
Guidelines](https://github.com/ory/docs/blob/master/CONTRIBUTING.md)."
required: true
- label:
- "I have joined the [Ory Community Slack](https://slack.ory.sh)."
+ "I have joined the [Ory Community Slack](https://slack.ory.com)."
- label:
"I am signed up to the [Ory Security Patch
- Newsletter](https://www.ory.sh/l/sign-up-newsletter)."
+ Newsletter](https://www.ory.com/l/sign-up-newsletter)."
id: checklist
type: checkboxes
- attributes:
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
index ee72ee92ea..cde3389ce7 100644
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -9,6 +9,6 @@ contact_links:
Please ask and answer questions here, show your implementations and
discuss ideas.
- name: Ory Chat
- url: https://www.ory.sh/chat
+ url: https://www.ory.com/chat
about:
Hang out with other Ory community members to ask and answer questions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 0796297082..f46e04d5cb 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -24,7 +24,7 @@ Pull requests introducing new features, which do not have a design document link
get merged.
You can discuss changes with maintainers either in the Github Discussions in this repository or
-join the [Ory Chat](https://www.ory.sh/chat).
+join the [Ory Chat](https://www.ory.com/chat).
-->
## Checklist
@@ -39,7 +39,7 @@ them, don't hesitate to ask. We're here to help! This is simply a reminder of wh
- [ ] I have read the [security policy](../security/policy).
- [ ] I confirm that this pull request does not address a security vulnerability.
If this pull request addresses a security vulnerability,
- I confirm that I got approval (please contact [security@ory.sh](mailto:security@ory.sh)) from the maintainers to push the changes.
+ I confirm that I got approval (please contact [security@ory.com](mailto:security@ory.com)) from the maintainers to push the changes.
- [ ] I have added tests that prove my fix is effective or that my feature works.
- [ ] I have added the necessary documentation within the code base (if appropriate).
diff --git a/.prettierignore b/.prettierignore
index 17da25f1cc..268abbd130 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -16,3 +16,4 @@ docs/keto/reference/proto-api.mdx
vendor
code-examples/sdk/typescript/src/**/*.hbs
**/.dart_tool
+**/*.jsonc
diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md
index 9cebaf358e..fc7d9bc2a9 100644
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@@ -47,7 +47,7 @@ individual problems. If Ory open source software is used in production in a
for-profit company or enterprise environment, we mandate a paid support contract
where Ory is obligated under their service level agreements (SLAs) to offer a
defined level of availability and responsibility. For more information about
-paid support please contact us at sales@ory.sh.
+paid support please contact us at sales@ory.com.
## Enforcement Responsibilities
@@ -73,7 +73,7 @@ representative at an online or offline event.
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported to the community leaders responsible for enforcement at
-[office@ory.sh](mailto:office@ory.sh). All complaints will be reviewed and
+[office@ory.com](mailto:office@ory.com). All complaints will be reviewed and
investigated promptly and fairly.
All community leaders are obligated to respect the privacy and security of the
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 8b29a8ee08..3638516491 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -24,7 +24,7 @@
_Please note_: We take Ory Documentation's security and our users' trust very
seriously. If you believe you have found a security issue in Ory Documentation,
-please disclose it by contacting us at security@ory.sh.
+please disclose it by contacting us at security@ory.com.
There are many ways in which you can contribute. The goal of this document is to
provide a high-level overview of how you can get involved in Ory.
@@ -44,7 +44,7 @@ won't clash with Ory
Documentation's direction. A great way to
do this is via
[Ory Documentation Discussions](https://github.com/orgs/ory/discussions)
-or the [Ory Chat](https://www.ory.sh/chat).
+or the [Ory Chat](https://www.ory.com/chat).
## FAQ
@@ -67,7 +67,7 @@ or the [Ory Chat](https://www.ory.sh/chat).
[a Contributors License Agreement?](https://cla-assistant.io/ory/docs)
- I would like updates about new versions of Ory Documentation.
- [How are new releases announced?](https://www.ory.sh/l/sign-up-newsletter)
+ [How are new releases announced?](https://www.ory.com/l/sign-up-newsletter)
## How can I contribute?
@@ -109,7 +109,7 @@ to help out:
## Communication
-We use [Slack](https://www.ory.sh/chat). You are welcome to drop in and ask
+We use [Slack](https://www.ory.com/chat). You are welcome to drop in and ask
questions, discuss bugs and feature requests, talk to other users of Ory, etc.
Check out [Ory Documentation Discussions](https://github.com/orgs/ory/discussions). This is a great place for
@@ -117,7 +117,7 @@ in-depth discussions and lots of code examples, logs and similar data.
You can also join our community calls if you want to speak to the Ory team
directly or ask some questions. You can find more info and participate in
-[Slack](https://www.ory.sh/chat) in the #community-call channel.
+[Slack](https://www.ory.com/chat) in the #community-call channel.
If you want to receive regular notifications about updates to Ory Documentation,
consider joining the mailing list. We will _only_ send you vital information on
@@ -139,7 +139,7 @@ to add your example or Ory-related project to the awesome-ory README.
## Contribute code
Unless you are fixing a known bug, we **strongly** recommend discussing it with
-the core team via a GitHub issue or [in our chat](https://www.ory.sh/chat)
+the core team via a GitHub issue or [in our chat](https://www.ory.com/chat)
before getting started to ensure your work is consistent with Ory Documentation's
roadmap and architecture.
@@ -208,7 +208,7 @@ instructions please head over to the Ory Documentation
## Disclosing vulnerabilities
Please disclose vulnerabilities exclusively to
-[security@ory.sh](mailto:security@ory.sh). Do not use GitHub issues.
+[security@ory.com](mailto:security@ory.com). Do not use GitHub issues.
## Code style
@@ -250,4 +250,4 @@ community a safe place for you and we've got your back.
We welcome discussion about creating a welcoming, safe, and productive
environment for the community. If you have any questions, feedback, or concerns
-[please let us know](https://www.ory.sh/chat).
+[please let us know](https://www.ory.com/chat).
diff --git a/README.md b/README.md
index 3d571925a4..9b46bff52f 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,11 @@
@@ -32,10 +32,16 @@
- [Screenshots and videos](#screenshots-and-videos)
- [Compressing images](#compressing-images)
- [Recording and compressing videos](#recording-and-compressing-videos)
+ - [Ory Console](#ory-console)
+ - [Navigate to Ory Console Pages](#navigate-to-ory-console-pages)
- [Testing](#testing)
- [Formatting documentation](#formatting-documentation)
- [Adding content to "Examples" page](#adding-content-to-examples-page)
- [CLI and API reference - auto-generated content](#cli-and-api-reference---auto-generated-content)
+ - [CanonicalURL](#canonicalurl)
+ - [When to use CanonicalURL](#when-to-use-canonicalurl)
+ - [How to use CanonicalURL](#how-to-use-canonicalurl)
+ - [How to verify CanonicalURL is working](#how-to-verify-canonicalurl-is-working)
@@ -43,9 +49,9 @@
Ory documentation is the single source of truth for usage, implementation,
configuration, and troubleshooting of the Ory Network and all projects of the
-[Ory Ecosystem](https://www.ory.sh/docs/ecosystem/projects/). The documentation
+[Ory Ecosystem](https://www.ory.com/docs/ecosystem/projects/). The documentation
is best consumed through the
-[Ory documentation portal](https://www.ory.sh/docs/).
+[Ory documentation portal](https://www.ory.com/docs/).
To see the source code of each of the projects, visit the project repository:
@@ -419,7 +425,7 @@ import VideoEmbed from '@site/src/components/VideoEmbed'
You can use the `/current/` route to navigate users to their active Ory Network
project. For example, to access the Custom UI settings for the active Ory
Network project in the Console, you can link to:
-https://console.ory.sh/projects/current/ui
+https://console.ory.com/projects/current/ui
When referencing a page of the Ory Console, use the
`` component in MDX files.
@@ -540,3 +546,61 @@ The `cmd/clidoc/main.go` is the general path for all Ory projects.
The command to generate the CLI docs can be found here:
https://github.com/ory/x/blob/master/clidoc/generate.go#L96
+
+## CanonicalURL
+
+The `CanonicalURL` component specifies the authoritative URL for a page to
+search engines. Docusaurus adds trailing slashes to `index.mdx` files and files
+matching their parent directory names before Vercel's trailing slash removal
+takes effect. This means search engines can crawl both versions (with and
+without trailing slashes). The component ensures search engines know which
+version is canonical by explicitly setting a URL without a trailing slash.
+
+### When to use CanonicalURL
+
+Use this component on:
+
+- **Any `index.mdx` file**: These files serve content at their parent path
+ (e.g., `/api/index.mdx`)
+- **Files matching parent directory names**: When a file shares its parent
+ directory's name (e.g., `docs/kratos/organizations/organizations.mdx`)
+
+Common examples include:
+
+- Index Path (`/api/index.mdx`, `/elements/index.mdx`, `/identities/index.mdx`)
+- Matching parent directory names
+ (`docs/kratos/organizations/organizations.mdx`,
+ `docs/self-hosted/oel/monitoring/monitoring.mdx`)
+
+### How to use CanonicalURL
+
+Add the component at the beginning of your MDX file after the front matter:
+
+````md
+---
+id: your-page-id
+title: Your Page Title
+---
+
+```mdx-code-block
+import CanonicalURL from "@site/src/components/CanonicalUrl"
+
+
+
+Your content here...
+```
+````
+
+### How to verify CanonicalURL is working
+
+1. Open the page in your browser
+2. Right-click and select "View Page Source" (not "Inspect")
+3. Search for `
+```
diff --git a/SECURITY.md b/SECURITY.md
index 6104514805..d1764fc716 100644
--- a/SECURITY.md
+++ b/SECURITY.md
@@ -7,7 +7,7 @@ This policy outlines Ory's security commitments and practices for users across
different licensing and deployment models.
To learn more about Ory's security service level agreements (SLAs) and
-processes, please [contact us](https://www.ory.sh/contact/).
+processes, please [contact us](https://www.ory.com/contact/).
## Ory Network Users
@@ -53,4 +53,4 @@ processes, please [contact us](https://www.ory.sh/contact/).
## Reporting a Vulnerability
For details on how to report security vulnerabilities, visit our
-[security policy documentation](https://www.ory.sh/docs/ecosystem/security).
+[security policy documentation](https://www.ory.com/docs/ecosystem/security).
diff --git a/code-examples/curl/search/advanced-result.json b/code-examples/curl/search/advanced-result.json
new file mode 100644
index 0000000000..4b57ebe741
--- /dev/null
+++ b/code-examples/curl/search/advanced-result.json
@@ -0,0 +1,105 @@
+{
+ "facet_counts": [
+ {
+ "counts": [],
+ "field_name": "organization_id",
+ "sampled": false,
+ "stats": {
+ "total_values": 0
+ }
+ }
+ ],
+ "found": 5,
+ "hits": [
+ {
+ "document": {
+ "available_aal": "aal1",
+ "created_at": 1725296067,
+ "id": "9e9763c9-80fc-43d0-97fb-d241cb274c2c",
+ "schema_id": "preset://email",
+ "state": "active",
+ "traits": {
+ "email": "wrhgr@srgpzjdrgpz"
+ },
+ "updated_at": 1725296067
+ },
+ "highlight": {},
+ "highlights": []
+ },
+ {
+ "document": {
+ "available_aal": "aal1",
+ "created_at": 1725295678,
+ "id": "38403863-16c2-4a0c-b53e-428f7d80a65b",
+ "schema_id": "preset://email",
+ "state": "active",
+ "traits": {
+ "email": "SRGSRpgj@SPRGojsgs.com"
+ },
+ "updated_at": 1725295678
+ },
+ "highlight": {},
+ "highlights": []
+ },
+ {
+ "document": {
+ "available_aal": "aal1",
+ "created_at": 1725031786,
+ "id": "f5e85c2f-6f0f-49d7-9b77-1bfbb530add4",
+ "schema_id": "preset://email",
+ "state": "active",
+ "traits": {
+ "email": "wGWRIGOH@WOsPgjzsroig"
+ },
+ "updated_at": 1725031786
+ },
+ "highlight": {},
+ "highlights": []
+ },
+ {
+ "document": {
+ "available_aal": "aal1",
+ "created_at": 1725031437,
+ "external_id": "external-id-123",
+ "id": "d52d5bdb-74b4-4aa0-b706-d1e9c853bd81",
+ "metadata_admin": {
+ "role": "user"
+ },
+ "metadata_public": {
+ "foo": "bar"
+ },
+ "schema_id": "preset://email",
+ "state": "active",
+ "traits": {
+ "email": "wgiho@agpaa.com"
+ },
+ "updated_at": 1758115258
+ },
+ "highlight": {},
+ "highlights": []
+ },
+ {
+ "document": {
+ "available_aal": "aal1",
+ "created_at": 1725031040,
+ "id": "f56128f1-687e-414e-8f5d-ec5f909b33c0",
+ "schema_id": "preset://email",
+ "state": "active",
+ "traits": {
+ "email": "sogihSOG@SdoSORghzdrg"
+ },
+ "updated_at": 1725031040
+ },
+ "highlight": {},
+ "highlights": []
+ }
+ ],
+ "page": 1,
+ "request_params": {
+ "collection_name": "identities-f59802a6-eb63-44cc-a3ac-d90db3d3abc2",
+ "first_q": "*",
+ "per_page": 20,
+ "q": "*"
+ },
+ "search_cutoff": false
+}
diff --git a/code-examples/curl/search/advanced.sh b/code-examples/curl/search/advanced.sh
new file mode 100644
index 0000000000..d7e297e4cf
--- /dev/null
+++ b/code-examples/curl/search/advanced.sh
@@ -0,0 +1,15 @@
+export ORY_API_KEY="ory_pat_XXXXXXXXXXXXXXXX"
+export COLLECTION="identities-d7c52eed-e45c-4483-af3b-4aaa5782bff7" # replace with your project ID
+export ORY_SLUG="upbeat-lalande-zu8omm6wwp" # replace with your Ory slug
+
+# list identities which do not have two-factor authentication enabled,
+# resolved by the organization to which they belong,
+# ordered by creation date (newest first),
+# and limited to 20 per page
+curl -H "Authorization: Bearer $ORY_API_KEY" \
+ "https://$ory_slug.projects.oryapis.com/admin/preview/search/v0beta1/collections/$COLLECTION/documents/search" \
+ --url-query 'q=*' \
+ --url-query 'filter_by=available_aal:!=aal2' \
+ --url-query 'facet_by=organization_id' \
+ --url-query 'sort_by=created_at:desc' \
+ --url-query 'per_page=20'
diff --git a/code-examples/curl/search/basic.sh b/code-examples/curl/search/basic.sh
new file mode 100644
index 0000000000..328f2fe539
--- /dev/null
+++ b/code-examples/curl/search/basic.sh
@@ -0,0 +1,11 @@
+export ORY_API_KEY="ory_pat_XXXXXXXXXXXXXXXX"
+export COLLECTION="identities-d7c52eed-e45c-4483-af3b-4aaa5782bff7" # replace with your project ID
+export ORY_SLUG="upbeat-lalande-zu8omm6wwp" # replace with your Ory slug
+
+# List identities via Search API
+curl -H "Authorization: Bearer $ORY_API_KEY" \
+ "https://$ory_slug.projects.oryapis.com/admin/preview/search/v0beta1/collections/$COLLECTION/documents/search?q=*"
+
+# Search for "foo" in the email trait
+curl -H "Authorization: Bearer $ORY_API_KEY" \
+ "https://$ory_slug.projects.oryapis.com/admin/preview/search/v0beta1/collections/$COLLECTION/documents/search?q=foo&query_by=traits.email"
diff --git a/code-examples/curl/search/model.jsonc b/code-examples/curl/search/model.jsonc
new file mode 100644
index 0000000000..c6954c2a0f
--- /dev/null
+++ b/code-examples/curl/search/model.jsonc
@@ -0,0 +1,19 @@
+{
+ "id": "d52d5bdb-74b4-4aa0-b706-d1e9c853bd81", // the identity ID
+ "organization_id": "org-id-123", // optional, facet
+ "external_id": "external-id-123", // optional
+ "created_at": 1725031437, // UNIX timestamp, facet
+ "updated_at": 1758115258, // UNIX timestamp, facet
+ "state": "active", // "inactive", "deleted", facet
+ "schema_id": "preset://email", // identity schema ID, facet
+ "available_aal": "aal1", // "aal2" etc, facet
+ "metadata_admin": {
+ "role": "user" // custom admin metadata, indexed, search via `query_by=metadata_admin.role`
+ },
+ "metadata_public": {
+ "foo": "bar" // custom public metadata, indexed, search via `query_by=metadata_public.foo`
+ },
+ "traits": {
+ "email": "wgiho@agpaa.com" // traits based on identity schema, indexed, search via `query_by=traits.email`
+ }
+}
diff --git a/code-examples/sdk/go/identity/state.go b/code-examples/sdk/go/identity/state.go
index e83ea92031..e45eb79004 100644
--- a/code-examples/sdk/go/identity/state.go
+++ b/code-examples/sdk/go/identity/state.go
@@ -8,25 +8,22 @@ import (
"fmt"
"os"
- client "github.com/ory/client-go"
+ ory "github.com/ory/client-go"
)
-var authed = context.WithValue(context.Background(), client.ContextAccessToken, os.Getenv("ORY_API_KEY"))
+var oryAuthed = context.WithValue(context.Background(), ory.ContextAccessToken, os.Getenv("ORY_API_KEY"))
-func init() {
- cfg := client.NewConfiguration()
- cfg.Servers = client.ServerConfigurations{
+func setState(identityId string, state string) (err error) {
+ cfg := ory.NewConfiguration()
+ cfg.Servers = ory.ServerConfigurations{
{URL: fmt.Sprintf("https://%s.projects.oryapis.com", os.Getenv("ORY_PROJECT_SLUG"))},
}
+ apiClient := ory.NewAPIClient(cfg)
- ory = client.NewAPIClient(cfg)
-}
-
-func setState(identityId string, state string) (err error) {
// highlight-start
- _, _, err = ory.IdentityApi.
- PatchIdentity(authed, identityId).
- JsonPatch([]client.JsonPatch{{Op: "replace", Path: "/state", Value: state}}).Execute()
+ _, _, err = apiClient.IdentityApi.
+ PatchIdentity(oryAuthed, identityId).
+ JsonPatch([]ory.JsonPatch{{Op: "replace", Path: "/state", Value: state}}).Execute()
// highlight-end
return err
}
diff --git a/code-examples/sdk/go/search/search.go b/code-examples/sdk/go/search/search.go
new file mode 100644
index 0000000000..3ee3615095
--- /dev/null
+++ b/code-examples/sdk/go/search/search.go
@@ -0,0 +1,90 @@
+package search
+
+import (
+ "context"
+ "fmt"
+ "os"
+
+ ory "github.com/ory/client-go"
+ "github.com/typesense/typesense-go/v3/typesense"
+ typesenseapi "github.com/typesense/typesense-go/v3/typesense/api"
+)
+
+var (
+ ORY_PROJECT_URL = os.Getenv("ORY_PROJECT_URL")
+ ORY_API_KEY = os.Getenv("ORY_API_KEY")
+ Collection = "identities-" + os.Getenv("ORY_PROJECT_ID")
+)
+
+func main() {
+ ctx := context.WithValue(context.Background(), ory.ContextAccessToken, os.Getenv("ORY_API_KEY"))
+
+ // Initialize Ory client
+ cfg := ory.NewConfiguration()
+ cfg.Servers = ory.ServerConfigurations{{URL: ORY_PROJECT_URL}}
+ oryClient := ory.NewAPIClient(cfg)
+
+ // Initialize search client
+ searchClient := typesense.NewClient(
+ // highlight-start
+ typesense.WithAPIKey(ORY_API_KEY), // Use your Ory API key here
+ typesense.WithServer(ORY_PROJECT_URL+"/admin/preview/search/v0beta1/"), // configure the base URL to the Ory Search API endpoint
+ // highlight-end
+ )
+
+ // highlight-start
+ // List identities via Search API
+ list, err := searchClient.Collection(Collection).Documents().Search(ctx, &typesenseapi.SearchCollectionParams{
+ Q: ptr("*"),
+ })
+ // highlight-end
+ if err != nil {
+ // handle error
+ }
+
+ for _, res := range *list.Hits {
+ doc := *res.Document
+ fmt.Printf("List result: %+v\n", doc)
+ }
+
+ // highlight-start
+ // Search identities via Search API
+ search, err := searchClient.Collection(Collection).Documents().Search(ctx, &typesenseapi.SearchCollectionParams{
+ Q: ptr("foo"),
+ QueryBy: ptr("traits"),
+ })
+ // highlight-end
+ if err != nil {
+ // handle error
+ }
+
+ if search.Hits == nil || len(*search.Hits) == 0 {
+ fmt.Println("No search hits")
+ }
+ fmt.Println()
+
+ for _, res := range *search.Hits {
+ doc := *res.Document
+ fmt.Printf("Search result: %+v\n", doc)
+ }
+
+ // highlight-start
+ // retrieve identity details from Identity API
+ first := (*search.Hits)[0]
+ identity, _, err := oryClient.IdentityAPI.GetIdentity(ctx, (*first.Document)["id"].(string)).Execute()
+ // highlight-end
+ if err != nil {
+ // handle error
+ }
+ fmt.Printf("Identity: %+v\n", identity)
+}
+
+func NewOryClient(ctx context.Context, url string) *ory.APIClient {
+ cfg := ory.NewConfiguration()
+ cfg.Servers = ory.ServerConfigurations{{URL: url}}
+ return ory.NewAPIClient(cfg)
+}
+
+func ptr[A any](v A) *A {
+ return &v
+}
diff --git a/code-examples/sdk/java/search/App.java b/code-examples/sdk/java/search/App.java
new file mode 100644
index 0000000000..0af90bca1e
--- /dev/null
+++ b/code-examples/sdk/java/search/App.java
@@ -0,0 +1,52 @@
+package sh.ory.examples.search;
+
+import org.typesense.api.Client;
+import org.typesense.api.Configuration;
+import org.typesense.model.SearchParameters;
+import org.typesense.model.SearchResult;
+import org.typesense.resources.Node;
+
+import java.time.Duration;
+import java.util.ArrayList;
+import java.util.List;
+
+public class App {
+ public static void main(String[] args) {
+ try {
+ Client searchClient = initializeSearchClient();
+ // highlight-start
+ // Search identities via Search API
+ String collection = "identities-" + System.getenv("ORY_PROJECT_ID"); // Set the collection name
+ SearchResult searchResult = searchClient.collections(collection).documents()
+ .search(new SearchParameters().q("test@example.com").queryBy("traits.email"));
+ // highlight-end
+
+ System.out.println("Search results: " + searchResult);
+ } catch (Exception e) {
+ System.err.println("Unexpected error: " + e.getMessage());
+ e.printStackTrace();
+ }
+ }
+
+ private static Client initializeSearchClient() {
+ try {
+ List nodes = new ArrayList<>();
+ Node node = new Node("", "", "");
+ // highlight-start
+ // Set the base URL to the Ory Search API endpoint
+ node.baseUrl = System.getenv("ORY_BASE_URL") + "/admin/preview/search/v0beta1";
+ nodes.add(node);
+ Configuration config = new Configuration(
+ nodes,
+ Duration.ofSeconds(5),
+ System.getenv("ORY_API_KEY")); // Use your Ory API key here
+ // highlight-end
+ return new Client(config);
+
+ } catch (Exception e) {
+ System.err.println("Error initializing search client: " + e.getMessage());
+ e.printStackTrace();
+ return null;
+ }
+ }
+}
diff --git a/docs/_common/api-key-needed.mdx b/docs/_common/api-key-needed.mdx
new file mode 100644
index 0000000000..7ab780c2db
--- /dev/null
+++ b/docs/_common/api-key-needed.mdx
@@ -0,0 +1,2 @@
+An API Key is required for all administrative operations. Read
+[Authorization with API Keys](https://www.ory.com/docs/concepts/personal-access-token) to learn more.
diff --git a/docs/_common/install-cli.mdx b/docs/_common/install-cli.mdx
index cee6f6ef6e..e56e05b855 100644
--- a/docs/_common/install-cli.mdx
+++ b/docs/_common/install-cli.mdx
@@ -16,7 +16,7 @@ import Windows from '@site/src/components/Install/Windows'
-
+
diff --git a/docs/_common/install.mdx b/docs/_common/install.mdx
index 6c6040d62f..3b49621fba 100644
--- a/docs/_common/install.mdx
+++ b/docs/_common/install.mdx
@@ -22,7 +22,7 @@ import Linux from '@site/src/components/Install/Linux'
```mdx-code-block
import MacOS from '@site/src/components/Install/MacOS'
-
+
```
## Windows
@@ -43,7 +43,7 @@ import Docker from '@site/src/components/Install/Docker'
## Kubernetes
-A list of available Helm Charts for Kubernetes can be found at [k8s.ory.sh/helm](https://k8s.ory.sh/helm/).
+A list of available Helm Charts for Kubernetes can be found at [k8s.ory.com/helm](https://k8s.ory.com/helm/).
## Download Binaries
diff --git a/docs/_common/need-help.mdx b/docs/_common/need-help.mdx
new file mode 100644
index 0000000000..03340a6364
--- /dev/null
+++ b/docs/_common/need-help.mdx
@@ -0,0 +1,6 @@
+:::info Need help?
+
+- New to Ory? [Talk to the team](https://www.ory.com/contact) about features and plans.
+- Already a customer? [Open a support ticket](https://console.ory.sh/support).
+
+:::
diff --git a/docs/_common/need-selfhosted-support.mdx b/docs/_common/need-selfhosted-support.mdx
new file mode 100644
index 0000000000..e05ae29a80
--- /dev/null
+++ b/docs/_common/need-selfhosted-support.mdx
@@ -0,0 +1,6 @@
+:::info Professional support?
+
+Ory offers support for self-hosted Ory software through the Ory Enterprise License (OEL). Read more about the OEL
+[here](https://www.ory.com/docs/self-hosted/oel).
+
+:::
diff --git a/docs/_common/secure.mdx b/docs/_common/secure.mdx
index c761447b75..4d229c7fa1 100644
--- a/docs/_common/secure.mdx
+++ b/docs/_common/secure.mdx
@@ -6,6 +6,6 @@ considered authenticated, authorized, and will be executed. Leaving the APIs in
When deploying Ory open-source Servers, protect access to their APIs using [Ory Oathkeeper](https://github.com/ory/oathkeeper) or
a comparable API Gateway.
-If you need help, reach out to the community on [Ory Community Slack](http://slack.ory.sh/).
+If you need help, reach out to the community on [Ory Community Slack](http://slack.ory.com/).
:::
diff --git a/docs/account-experience/index.mdx b/docs/account-experience/index.mdx
index 8827e3ef2d..c6dde42043 100644
--- a/docs/account-experience/index.mdx
+++ b/docs/account-experience/index.mdx
@@ -4,8 +4,14 @@ title: Account Experience Overview
sidebar_label: Account Experience
---
+```mdx-code-block
+import CanonicalUrl from "@site/src/components/CanonicalUrl"
+
+
+```
+
The Ory Account Experience is the default user interface for all self-service screens like login, registration, or consent. It can
-be accessed under `https://your-slug.projects.oryapis.com/ui`. New Ory Network projects are automatically configured to use the
+be accessed under `https://your-slug.projects.oryapis.com/login`. New Ory Network projects are automatically configured to use the
Account Experience. You can find various customizations and settings in the Ory Console under `Account Experience`.
## Theming
@@ -14,19 +20,105 @@ The Account Experience can be themed using the Ory Console. Head over to the
[theming settings](https://console.ory.sh/projects/current/account-experience/theming). It is also possible to set a custom logo
and favicon.
-## Welcome Screen
+## Translations (i18n) & Message Customization
-The Account Experience comes with a welcome screen that shows information about the current user's session. As this screen is
-rather meant for debugging purposes, it can be disabled in the [Ory Console](https://console.ory.sh/projects/current/ui).
+The Ory Account Experience is available in 83 languages.
-## Translations (i18n) & Message Customization
+
+Full list of supported languages
+
+- Afrikaans (`af`)
+- Akan (`ak`)
+- Amharic (`am`)
+- Arabic (`ar`)
+- Assamese (`as`)
+- Azerbaijani (Latin) (`az`)
+- Belarusian (`be`)
+- Bulgarian (`bg`)
+- Bamanankan (`bm`)
+- Bangla (`bn`)
+- Catalan (`ca`)
+- Czech (`cs`)
+- Danish (`da`)
+- German (`de`)
+- Greek (`el`)
+- English (`en`)
+- Spanish (`es`)
+- Estonian (`et`)
+- Persian (`fa`)
+- Finnish (`fi`)
+- French (`fr`)
+- Gujarati (`gu`)
+- Hausa (Latin) (`ha`)
+- Hebrew (`he`)
+- Hindi (`hi`)
+- Croatian (`hr`)
+- Hungarian (`hu`)
+- Armenian (`hy`)
+- Indonesian (`id`)
+- Igbo (`ig`)
+- Italian (`it`)
+- Japanese (`ja`)
+- Georgian (`ka`)
+- Kazakh (`kk`)
+- Khmer (`km`)
+- Kannada (`kn`)
+- Korean (`ko`)
+- Central Kurdish (`ku`)
+- Kyrgyz (`ky`)
+- Lithuanian (`lt`)
+- Latvian (`lv`)
+- Macedonian (`mk`)
+- Malayalam (`ml`)
+- Mongolian (Cyrillic) (`mn`)
+- Marathi (`mr`)
+- Malay (`ms`)
+- Burmese (`my`)
+- Nepali (`ne`)
+- Dutch (`nl`)
+- Norwegian (Bokmal) (`no`)
+- Odia (`or`)
+- Punjabi (`pa`)
+- Polish (`pl`)
+- Pashto (`ps`)
+- Portuguese (`pt`)
+- Romanian (`ro`)
+- Russian (`ru`)
+- Sindhi (`sd`)
+- Sinhala (`si`)
+- Slovak (`sk`)
+- Slovenian (`sl`)
+- Somali (`so`)
+- Albanian (`sq`)
+- Serbian (Latin) (`sr`)
+- Sundanese (`su`)
+- Swedish (`sv`)
+- Kiswahili (`sw`)
+- Tamil (`ta`)
+- Telugu (`te`)
+- Tajik (Cyrillic) (`tg`)
+- Thai (`th`)
+- Turkmen (`tk`)
+- Tagalog (`tl`)
+- Turkish (`tr`)
+- Uyghur (`ug`)
+- Ukrainian (`uk`)
+- Urdu (`ur`)
+- Uzbek (Latin) (`uz`)
+- Vietnamese (`vi`)
+- Xhosa (`xh`)
+- Yoruba (`yo`)
+- Chinese (Simplified) (`zh`)
+- Zulu (`zu`)
+
+
+
+The source is available in the
+[GitHub repository of Ory Elements](https://github.com/ory/elements/tree/main/packages/elements-react/src/locales).
-Currently, the account experience is available in English, Spanish, German, French, Spanish, Portuguese, Polish, Finnish, Dutch,
-Swedish, and more. For a full list of available languages please have a look at
-[the source](https://github.com/ory/elements/tree/main/packages/elements-react/src/locales). If you want to add a new language or
-fix some wording, please open a pull request in [ory/elements](https://github.com/ory/elements#internalization-i18n). To determine
-the language to use, the Account Experience uses the `Accept-Language` header. If the language is not available, the fallback
-language (English) is used. Custom translations are not supported at the moment, but please reach out if you need this feature.
+To determine the language to use, the Account Experience uses the `Accept-Language` header. If the language isn't available, the
+fallback language (English) is used. Custom translations are supported as well, use the edit button next to the language to
+override the default translations.
## Custom Domains
diff --git a/docs/actions/live-events.mdx b/docs/actions/live-events.mdx
index 03ec2e6f6b..56c99f08a0 100644
--- a/docs/actions/live-events.mdx
+++ b/docs/actions/live-events.mdx
@@ -11,7 +11,7 @@ your Ory Network project, to your own infrastructure. Pipe those events into you
choice, and use them to power your own analytics, dashboards, data science, and more.
Live event streams are available for Ory Network enterprise contracts. Talk to your account manager or
-[reach out directly](https://www.ory.sh/contact/).
+[reach out directly](https://www.ory.com/contact/).
## Event shape
@@ -91,6 +91,8 @@ New event names may be added in the future, in which case this list will be upda
| **WebhookDelivered** | A webhook has been sent to the configured endpoint for processing. |
| **WebhookFailed** | A webhook delivery or processing has failed at the receiving endpoint. |
| **WebhookSucceeded** | A webhook has been processed and acknowledged by the receiving endpoint. |
+| **CourierMessageAbandoned** | A courier message has been abandoned. |
+| **CourierMessageDispatched** | A courier message has been dispatched. |
### Ory OAuth2
@@ -137,7 +139,7 @@ Stronger guarantees can be implemented for your use case if needed, in this case
## Configure event streams
-Is your workload not running on AWS or you don't want to use SNS? [Reach out](https://www.ory.sh/contact/) to discuss your
+Is your workload not running on AWS or you don't want to use SNS? [Reach out](https://www.ory.com/contact/) to discuss your
requirements! Event streams can be implemented for any data warehouse, data lake, or equivalent solution.
### Stream to AWS SNS
diff --git a/docs/actions/require-verified-address.mdx b/docs/actions/require-verified-address.mdx
index 5f1698236a..798e0eccc4 100644
--- a/docs/actions/require-verified-address.mdx
+++ b/docs/actions/require-verified-address.mdx
@@ -173,7 +173,7 @@ The registration endpoint returns a 400 error with a `continue_with` field that
"action": "show_verification_ui",
"flow": {
"id": "d859f6af-1dfe-453e-9320-d572e10edeea",
- "verifiable_address": "example@ory.sh",
+ "verifiable_address": "example@ory.com",
"url": "https://ory.example.org/verification?flow=d859f6af-1dfe-453e-9320-d572e10edeea"
}
}
@@ -246,7 +246,7 @@ The settings endpoint returns a 400 error with a `continue_with` field that cont
"action": "show_verification_ui",
"flow": {
"id": "d859f6af-1dfe-453e-9320-d572e10edeea",
- "verifiable_address": "example@ory.sh",
+ "verifiable_address": "example@ory.com",
"url": "https://ory.example.org/verification?flow=d859f6af-1dfe-453e-9320-d572e10edeea"
}
}
diff --git a/docs/api/index.mdx b/docs/api/index.mdx
index 9a04434068..ee68f4e060 100644
--- a/docs/api/index.mdx
+++ b/docs/api/index.mdx
@@ -6,8 +6,10 @@ sidebar_label: APIs
```mdx-code-block
import ApiTypes from './_common/api-types.mdx'
+import CanonicalUrl from "@site/src/components/CanonicalUrl"
+
```
## REST API
diff --git a/docs/cli/ory-proxy.md b/docs/cli/ory-proxy.md
index 2caf9d5dd9..cc40ca1ca7 100644
--- a/docs/cli/ory-proxy.md
+++ b/docs/cli/ory-proxy.md
@@ -1,6 +1,6 @@
---
id: ory-proxy
-title: ory proxy (deprecated)
+title: ory proxy
description: ory proxy Run your app and Ory on the same domain using a reverse proxy
---
@@ -11,10 +11,6 @@ To improve this file please make your change against the appropriate "./cmd/*.go
-->
## ory proxy
-
-:::warning DEPRECATED
-Ory Proxy has been deprecated and is no longer recommended for new implementations. Please use [Ory Tunnel](./ory-tunnel.md) instead, which provides similar functionality with an improved architecture. For migration guidance, see the [Proxy and Tunnel documentation](../guides/cli/proxy-and-tunnel#migration-from-proxy-to-tunnel).
-:::
Run your app and Ory on the same domain using a reverse proxy
### Synopsis
@@ -181,3 +177,4 @@ ory proxy http://localhost:3000
### SEE ALSO
* [ory](ory) - The Ory CLI
+
diff --git a/docs/cli/ory.md b/docs/cli/ory.md
index df1450982f..4ee0275ff1 100644
--- a/docs/cli/ory.md
+++ b/docs/cli/ory.md
@@ -35,6 +35,7 @@ The Ory CLI
* [ory parse](ory-parse) - Parse Ory Network resources
* [ory patch](ory-patch) - Patch resources
* [ory perform](ory-perform) - Perform a flow
+* [ory proxy](ory-proxy) - Run your app and Ory on the same domain using a reverse proxy
* [ory revoke](ory-revoke) - Revoke resources
* [ory tunnel](ory-tunnel) - Mirror Ory APIs on your local machine for local development and testing
* [ory update](ory-update) - Update resources
diff --git a/docs/concepts/cache.mdx b/docs/concepts/cache.mdx
index 191540fbc4..2b0f3f8e24 100644
--- a/docs/concepts/cache.mdx
+++ b/docs/concepts/cache.mdx
@@ -32,6 +32,13 @@ The caching strategy is as follows:
- If the session credentials are known and cached, the cache respects the `Cache-Control: max-age=60` header.
- If the user updates their profile or adds another authentication factor, the session is refreshed in the cache automatically.
+:::info
+
+Edge Sessions only work with Ory Session Cookies. They don't work with API tokens from native self-service flows or with OAuth2 or
+OpenID Connect access tokens or ID tokens.
+
+:::
+
## Performance
You can expect a P95 latency of ~35ms and a P99 latency of ~45ms across the globe when you use edge sessions. Results can vary
diff --git a/docs/concepts/password-policy.mdx b/docs/concepts/password-policy.mdx
index 8b425fabf6..77f755405b 100644
--- a/docs/concepts/password-policy.mdx
+++ b/docs/concepts/password-policy.mdx
@@ -72,7 +72,7 @@ they must be implemented in the User Interface that interfaces with Ory Identiti
### Custom User Interface
-When using your [own user interface](https://www.ory.sh/kratos/docs/next/concepts/ui-user-interface), we recommend the following
+When using your [own user interface](https://www.ory.com/kratos/docs/next/concepts/ui-user-interface), we recommend the following
password policies to ensure security and good user experience:
- Allows the pasting of credentials in login etc. forms.
@@ -81,7 +81,7 @@ password policies to ensure security and good user experience:
- Don't expire passwords.
For a more detailed explanation of the concepts of these guidelines please visit the
-[Security Profiles document](https://www.ory.sh/kratos/docs/next/concepts/security/#user-interface-guidelines).
+[Security Profiles document](https://www.ory.com/kratos/docs/next/concepts/security/#user-interface-guidelines).
### Password complexity
diff --git a/docs/concepts/redirects.mdx b/docs/concepts/redirects.mdx
index 54020e42af..b310d52ffd 100644
--- a/docs/concepts/redirects.mdx
+++ b/docs/concepts/redirects.mdx
@@ -33,7 +33,7 @@ The Ory Network has a total of six flows, **Login**, **Registration**, **Verific
which can be configured to redirect back to any URL. A common use case would be to redirect the user to your application home
screen after a logout or to a specific URL on a sub-domain after a settings password update.
-On project creation the redirect flows are by default set to the Ory Account Experience pages.
+By default, the flows always redirect to the Ory Account Experience pages.
### Login, registration, and settings
@@ -159,4 +159,4 @@ It's not possible to set the any Ory-owned domain as redirect URL.
## Read more
For a deeper dive into the background of browser redirects, read
-[this document](https://www.ory.sh/kratos/docs/concepts/browser-redirect-flow-completion)
+[this document](https://www.ory.com/kratos/docs/concepts/browser-redirect-flow-completion)
diff --git a/docs/console/usage-billing.mdx b/docs/console/usage-billing.mdx
index 528380f456..b1b34df7f4 100644
--- a/docs/console/usage-billing.mdx
+++ b/docs/console/usage-billing.mdx
@@ -27,7 +27,7 @@ Depending on the plan, the service usage is comprised of at least three componen
- the number of permission checks.
Additionally, your invoice might include extra charges for additional multi-tenant production environments, etc. For more
-information of what's included in your plan visit [our pricing page](https://www.ory.sh/pricing).
+information of what's included in your plan visit [our pricing page](https://www.ory.com/pricing).
Usage credits will be applied to the total service usage, but unused credits will not be carried over to the next billing period.
diff --git a/docs/ecosystem/api-design.md b/docs/ecosystem/api-design.mdx
similarity index 100%
rename from docs/ecosystem/api-design.md
rename to docs/ecosystem/api-design.mdx
diff --git a/docs/ecosystem/changelog.md b/docs/ecosystem/changelog.mdx
similarity index 87%
rename from docs/ecosystem/changelog.md
rename to docs/ecosystem/changelog.mdx
index 5319dce9de..618e0c01e3 100644
--- a/docs/ecosystem/changelog.md
+++ b/docs/ecosystem/changelog.mdx
@@ -5,22 +5,21 @@ title: Changelog and roadmap
## Ory Changelog
-Read the changelog for Ory Network at [changelog.ory.sh](https://changelog.ory.sh/) !
+```mdx-code-block
+import Help from '@site/docs/_common/need-selfhosted-support.mdx'
-> Running security-critical open source technology in a self-service format requires vigilance. We make your life easier by
-> announcing important software updates via the [Ory Security Newsletter](https://www.ory.sh/l/sign-up-newsletter). Never miss an
-> update and **[sign up now to important release updates!](https://www.ory.sh/l/sign-up-newsletter)**
-
-:::tip
+
+```
-Looking for support? Please contact us at support@ory.sh!
-Ory offers support agreements for self-hosted Ory software.
+Read the changelog for Ory Network at [changelog.ory.com](https://changelog.ory.com/) !
-:::
+> Running security-critical open source technology in a self-service format requires vigilance. We make your life easier by
+> announcing important software updates via the [Ory Security Newsletter](https://www.ory.com/l/sign-up-newsletter). Never miss an
+> update and **[sign up now to important release updates!](https://www.ory.com/l/sign-up-newsletter)**
## Changelogs
-- [Ory Network Changelog](https://changelog.ory.sh/)
+- [Ory Network Changelog](https://changelog.ory.com/)
- [Ory Hydra Changelog](https://github.com/ory/hydra/blob/master/CHANGELOG.md)
- [Ory Kratos Changelog](https://github.com/ory/kratos/blob/master/CHANGELOG.md)
- [Ory Keto Changelog](https://github.com/ory/keto/blob/master/CHANGELOG.md)
@@ -40,7 +39,7 @@ efforts to make development at Ory as transparent as possible to facilitate coll
### Feedback
If you are a user of our Open Source offering and you have feedback, please do so in [GitHub Discussions](#discussions) or on the
-[Ory Community Slack](https://slack.ory.sh/).
+[Ory Community Slack](https://slack.ory.com/).
Please also vote on issues and discussions with a thumbs up. We will ask for community feedback on important changes and consider
the popularity of features in the community when planning development.
diff --git a/docs/ecosystem/community.md b/docs/ecosystem/community.mdx
similarity index 92%
rename from docs/ecosystem/community.md
rename to docs/ecosystem/community.mdx
index f134765830..8e12e3bd4d 100644
--- a/docs/ecosystem/community.md
+++ b/docs/ecosystem/community.mdx
@@ -8,7 +8,7 @@ Sponsors, contributors, and adopters make this ecosystem possible and shape it i
Take part in the Ory Community!
-- Chat on the [Ory Community Slack](https://slack.ory.sh/)
+- Chat on the [Ory Community Slack](https://slack.ory.com/)
:::info
diff --git a/docs/ecosystem/configuring.md b/docs/ecosystem/configuring.mdx
similarity index 100%
rename from docs/ecosystem/configuring.md
rename to docs/ecosystem/configuring.mdx
diff --git a/docs/ecosystem/contributing.md b/docs/ecosystem/contributing.mdx
similarity index 51%
rename from docs/ecosystem/contributing.md
rename to docs/ecosystem/contributing.mdx
index 52abd9d86c..30ca4554c0 100644
--- a/docs/ecosystem/contributing.md
+++ b/docs/ecosystem/contributing.mdx
@@ -3,149 +3,122 @@ id: contributing
title: Contribute to Ory
---
-This document explains how you can contribute to Ory.
+This document explains how you can contribute to Ory.
-If have have ideas to improve it, please have a look at the [template](https://github.com/ory/docs/blob/master/docs/ecosystem/contributing.md).
+If have have ideas to improve it, please have a look at the
+[template](https://github.com/ory/docs/blob/master/docs/ecosystem/contributing.md).
## Introduction
-_Please note_: We take Ory's security and our users' trust very
-seriously. If you believe you have found a security issue in Ory ,
-please disclose it by contacting us at security@ory.sh.
+_Please note_: We take Ory's security and our users' trust very seriously. If you believe you have found a security issue in Ory ,
+please disclose it by contacting us at security@ory.com.
-There are many ways in which you can contribute. The goal of this document is to
-provide a high-level overview of how you can get involved in Ory.
+There are many ways in which you can contribute. The goal of this document is to provide a high-level overview of how you can get
+involved in Ory.
-As a potential contributor, your changes and ideas are welcome at any hour of
-the day or night, on weekdays, weekends, and holidays. Please do not ever
-hesitate to ask a question or send a pull request.
+As a potential contributor, your changes and ideas are welcome at any hour of the day or night, on weekdays, weekends, and
+holidays. Please do not ever hesitate to ask a question or send a pull request.
-If you are unsure, just ask or submit the issue or pull request anyways. You
-won't be yelled at for giving it your best effort. The worst that can happen is
-that you'll be politely asked to change something. We appreciate any sort of
-contributions and don't want a wall of rules to get in the way of that.
+If you are unsure, just ask or submit the issue or pull request anyways. You won't be yelled at for giving it your best effort.
+The worst that can happen is that you'll be politely asked to change something. We appreciate any sort of contributions and don't
+want a wall of rules to get in the way of that.
-That said, if you want to ensure that a pull request is likely to be merged,
-talk to us! You can find out our thoughts and ensure that your contribution
-won't clash with Ory's direction. A great way to
-do this is via
-[Ory Discussions](https://github.com/discussions?discussions_q=org%3Aory+sort%3Aupdated-desc)
-or the [Ory Chat](https://www.ory.sh/chat).
+That said, if you want to ensure that a pull request is likely to be merged, talk to us! You can find out our thoughts and ensure
+that your contribution won't clash with Ory's direction. A great way to do this is via
+[Ory Discussions](https://github.com/discussions?discussions_q=org%3Aory+sort%3Aupdated-desc) or the
+[Ory Chat](https://www.ory.com/chat).
## FAQ
- I am new to the community. Where can I find the
[Ory Community Code of Conduct?](https://github.com/$REPOSITORY/blob/master/CODE_OF_CONDUCT.md)
-- I have a question. Where can I get
- [answers to questions regarding Ory?](#communication)
+- I have a question. Where can I get [answers to questions regarding Ory?](#communication)
-- I would like to contribute but I am not sure how. Are there
- [easy ways to contribute?](#how-can-i-contribute)
+- I would like to contribute but I am not sure how. Are there [easy ways to contribute?](#how-can-i-contribute)
[Or good first issues?](https://github.com/search?l=&o=desc&q=label%3A%22help+wanted%22+label%3A%22good+first+issue%22+is%3Aopen+user%3Aory+user%3Aory-corp&s=updated&type=Issues)
-- I want to talk to other Ory users.
- [How can I become a part of the community?](#communication)
+- I want to talk to other Ory users. [How can I become a part of the community?](#communication)
-- I would like to know what I am agreeing to when I contribute to Ory
- .Does Ory have
+- I would like to know what I am agreeing to when I contribute to Ory .Does Ory have
[a Contributors License Agreement?](https://cla-assistant.io/ory/kratos)
-- I would like updates about new versions of Ory.
- [How are new releases announced?](https://www.ory.sh/l/sign-up-newsletter)
+- I would like updates about new versions of Ory. [How are new releases announced?](https://www.ory.com/l/sign-up-newsletter)
## How can I contribute?
If you want to start to contribute code right away, take a look at the
[list of good first issues](https://github.com/$REPOSITORY/labels/good%20first%20issue).
-There are many other ways you can contribute. Here are a few things you can do
-to help out:
+There are many other ways you can contribute. Here are a few things you can do to help out:
-- **Give us a star.** It may not seem like much, but it really makes a
- difference. This is something that everyone can do to help out Ory.
- Github stars help the project gain visibility and stand out.
+- **Give us a star.** It may not seem like much, but it really makes a difference. This is something that everyone can do to help
+ out Ory. Github stars help the project gain visibility and stand out.
-- **Join the community.** Sometimes helping people can be as easy as listening
- to their problems and offering a different perspective. Join our Slack, have a
- look at discussions in the forum and take part in community events. More info
- on this in [Communication](#communication).
+- **Join the community.** Sometimes helping people can be as easy as listening to their problems and offering a different
+ perspective. Join our Slack, have a look at discussions in the forum and take part in community events. More info on this in
+ [Communication](#communication).
-- **Answer discussions.** At all times, there are several unanswered discussions
- on GitHub. You can see an
- [overview here](https://github.com/discussions?discussions_q=is%3Aunanswered+org%3Aory+sort%3Aupdated-desc).
- If you think you know an answer or can provide some information that might
- help, please share it! Bonus: You get GitHub achievements for answered
+- **Answer discussions.** At all times, there are several unanswered discussions on GitHub. You can see an
+ [overview here](https://github.com/discussions?discussions_q=is%3Aunanswered+org%3Aory+sort%3Aupdated-desc). If you think you
+ know an answer or can provide some information that might help, please share it! Bonus: You get GitHub achievements for answered
discussions.
-- **Help with open issues.** We have a lot of open issues for Ory and
- some of them may lack necessary information, some are duplicates of older
- issues. You can help out by guiding people through the process of filling out
- the issue template, asking for clarifying information or pointing them to
- existing issues that match their description of the problem.
+- **Help with open issues.** We have a lot of open issues for Ory and some of them may lack necessary information, some are
+ duplicates of older issues. You can help out by guiding people through the process of filling out the issue template, asking for
+ clarifying information or pointing them to existing issues that match their description of the problem.
-- **Review documentation changes.** Most documentation just needs a review for
- proper spelling and grammar. If you think a document can be improved in any
- way, feel free to hit the `edit` button at the top of the page. More info on
- contributing to the documentation [here](#contribute-documentation).
+- **Review documentation changes.** Most documentation just needs a review for proper spelling and grammar. If you think a
+ document can be improved in any way, feel free to hit the `edit` button at the top of the page. More info on contributing to the
+ documentation [here](#contribute-documentation).
-- **Help with tests.** Pull requests may lack proper tests or test plans. These
- are needed for the change to be implemented safely.
+- **Help with tests.** Pull requests may lack proper tests or test plans. These are needed for the change to be implemented
+ safely.
## Communication
-We use [Slack](https://www.ory.sh/chat). You are welcome to drop in and ask
-questions, discuss bugs and feature requests, talk to other users of Ory, etc.
+We use [Slack](https://www.ory.com/chat). You are welcome to drop in and ask questions, discuss bugs and feature requests, talk to
+other users of Ory, etc.
Check out [Ory Discussions](https://github.com/discussions?discussions_q=org%3Aory+sort%3Aupdated-desc). This is a great place for
in-depth discussions and lots of code examples, logs and similar data.
-You can also join our community calls if you want to speak to the Ory team
-directly or ask some questions. You can find more info and participate in
-[Slack](https://www.ory.sh/chat) in the #community-call channel.
+You can also join our community calls if you want to speak to the Ory team directly or ask some questions. You can find more info
+and participate in [Slack](https://www.ory.com/chat) in the #community-call channel.
-If you want to receive regular notifications about updates to Ory,
-consider joining the mailing list. We will _only_ send you vital information on
-the projects that you are interested in.
+If you want to receive regular notifications about updates to Ory, consider joining the mailing list. We will _only_ send you
+vital information on the projects that you are interested in.
Also, [follow us on Twitter](https://twitter.com/orycorp).
## Contribute examples or community projects
-One of the most impactful ways to contribute is by adding code examples or other
-Ory-related code. You can find an overview of community code in the
-[awesome-ory](https://github.com/ory/awesome-ory) repository.
+One of the most impactful ways to contribute is by adding code examples or other Ory-related code. You can find an overview of
+community code in the [awesome-ory](https://github.com/ory/awesome-ory) repository.
_If you would like to contribute a new example, we would love to hear from you!_
-Please [open a pull request at awesome-ory](https://github.com/ory/awesome-ory/)
-to add your example or Ory-related project to the awesome-ory README.
+Please [open a pull request at awesome-ory](https://github.com/ory/awesome-ory/) to add your example or Ory-related project to the
+awesome-ory README.
## Contribute code
-Unless you are fixing a known bug, we **strongly** recommend discussing it with
-the core team via a GitHub issue or [in our chat](https://www.ory.sh/chat)
-before getting started to ensure your work is consistent with Ory's
-roadmap and architecture.
+Unless you are fixing a known bug, we **strongly** recommend discussing it with the core team via a GitHub issue or
+[in our chat](https://www.ory.com/chat) before getting started to ensure your work is consistent with Ory's roadmap and
+architecture.
-All contributions are made via pull requests. To make a pull request, you will
-need a GitHub account; if you are unclear on this process, see GitHub's
-documentation on [forking](https://help.github.com/articles/fork-a-repo) and
-[pull requests](https://help.github.com/articles/using-pull-requests). Pull
-requests should be targeted at the `master` branch. Before creating a pull
-request, go through this checklist:
+All contributions are made via pull requests. To make a pull request, you will need a GitHub account; if you are unclear on this
+process, see GitHub's documentation on [forking](https://help.github.com/articles/fork-a-repo) and
+[pull requests](https://help.github.com/articles/using-pull-requests). Pull requests should be targeted at the `master` branch.
+Before creating a pull request, go through this checklist:
1. Create a feature branch off of `master` so that changes do not get mixed up.
-1. [Rebase](http://git-scm.com/book/en/Git-Branching-Rebasing) your local
- changes against the `master` branch.
-1. Run the full project test suite with the `go test -tags sqlite ./...` (or
- equivalent) command and confirm that it passes.
+1. [Rebase](http://git-scm.com/book/en/Git-Branching-Rebasing) your local changes against the `master` branch.
+1. Run the full project test suite with the `go test -tags sqlite ./...` (or equivalent) command and confirm that it passes.
1. Run `make format`
-1. Add a descriptive prefix to commits. This ensures a uniform commit history
- and helps structure the changelog. Please refer to this
- [Convential Commits configuration](https://github.com/$REPOSITORY/blob/master/.github/workflows/conventional_commits.yml)
- for the list of accepted prefixes. You can read more about the Conventional
- Commit specification
+1. Add a descriptive prefix to commits. This ensures a uniform commit history and helps structure the changelog. Please refer to
+ this [Convential Commits configuration](https://github.com/$REPOSITORY/blob/master/.github/workflows/conventional_commits.yml)
+ for the list of accepted prefixes. You can read more about the Conventional Commit specification
[at their site](https://www.conventionalcommits.org/en/v1.0.0/).
If a pull request is not ready to be reviewed yet
@@ -154,46 +127,38 @@ If a pull request is not ready to be reviewed yet
Before your contributions can be reviewed you need to sign our
[Contributor License Agreement](https://cla-assistant.io/$REPOSITORY).
-This agreement defines the terms under which your code is contributed to Ory.
-More specifically it declares that you have the right to, and actually do, grant
-us the rights to use your contribution. You can see the Apache 2.0 license under
-which our projects are published
-[here](https://github.com/ory/meta/blob/master/LICENSE).
+This agreement defines the terms under which your code is contributed to Ory. More specifically it declares that you have the
+right to, and actually do, grant us the rights to use your contribution. You can see the Apache 2.0 license under which our
+projects are published [here](https://github.com/ory/meta/blob/master/LICENSE).
-When pull requests fail the automated testing stages (for example unit or E2E
-tests), authors are expected to update their pull requests to address the
-failures until the tests pass.
+When pull requests fail the automated testing stages (for example unit or E2E tests), authors are expected to update their pull
+requests to address the failures until the tests pass.
Pull requests eligible for review
1. follow the repository's code formatting conventions;
-2. include tests that prove that the change works as intended and does not add
- regressions;
+2. include tests that prove that the change works as intended and does not add regressions;
3. document the changes in the code and/or the project's documentation;
4. pass the CI pipeline;
-5. have signed our
- [Contributor License Agreement](https://cla-assistant.io/$REPOSITORY);
+5. have signed our [Contributor License Agreement](https://cla-assistant.io/$REPOSITORY);
6. include a proper git commit message following the
[Conventional Commit Specification](https://www.conventionalcommits.org/en/v1.0.0/).
-If all of these items are checked, the pull request is ready to be reviewed and
-you should change the status to "Ready for review" and
+If all of these items are checked, the pull request is ready to be reviewed and you should change the status to "Ready for review"
+and
[request review from a maintainer](https://docs.github.com/en/github/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/requesting-a-pull-request-review).
Reviewers will approve the pull request once they are satisfied with the patch.
## Contribute documentation
-Please provide documentation when changing, removing, or adding features. All
-Ory Documentation resides in the
-[Ory documentation repository](https://github.com/ory/docs/). For further
-instructions please head over to the Ory Documentation
+Please provide documentation when changing, removing, or adding features. All Ory Documentation resides in the
+[Ory documentation repository](https://github.com/ory/docs/). For further instructions please head over to the Ory Documentation
[README.md](https://github.com/ory/docs/blob/master/README.md).
## Disclosing vulnerabilities
-Please disclose vulnerabilities exclusively to
-[security@ory.sh](mailto:security@ory.sh). Do not use GitHub issues.
+Please disclose vulnerabilities exclusively to [security@ory.com](mailto:security@ory.com). Do not use GitHub issues.
## Code style
@@ -228,11 +193,10 @@ Now go to the project's GitHub Pull Request page and click "New pull request"
## Conduct
-Whether you are a regular contributor or a newcomer, we care about making this
-community a safe place for you and we've got your back.
+Whether you are a regular contributor or a newcomer, we care about making this community a safe place for you and we've got your
+back.
[Ory Community Code of Conduct](https://github.com/$REPOSITORY/blob/master/CODE_OF_CONDUCT.md)
-We welcome discussion about creating a welcoming, safe, and productive
-environment for the community. If you have any questions, feedback, or concerns
-[please let us know](https://www.ory.sh/chat).
\ No newline at end of file
+We welcome discussion about creating a welcoming, safe, and productive environment for the community. If you have any questions,
+feedback, or concerns [please let us know](https://www.ory.com/chat).
diff --git a/docs/ecosystem/projects.mdx b/docs/ecosystem/projects.mdx
index 8e2e6c47d8..fe37c46cea 100644
--- a/docs/ecosystem/projects.mdx
+++ b/docs/ecosystem/projects.mdx
@@ -84,9 +84,24 @@ enterprise identity providers. It’s modular, supports your preferred database,
data and privacy. Built for flexibility and scale, Ory Polis handles as many tenants and identity providers as your business
demands. If you're delivering enterprise-grade SaaS and need SSO that just works, Ory Polis is the missing link.
+## Ory Elements
+
+
+
+Ory Elements is a component library that allows you to build custom user interfaces for Ory self-service flows. It provides a set
+of pre-built components that can be easily integrated into your application, enabling you to create a seamless user experience
+while leveraging Ory's powerful authentication and identity management capabilities. Ory Elements is designed to work with Ory
+Kratos' self-service flows, such as login, registration, settings, verification, and recovery, as well as the OAuth2 consent flow.
+It allows you to customize the look and feel of your UI to match your brand and user experience requirements. You can use Ory
+Elements to build a custom UI that fits your application's design and user experience.
+
## All of Ory Open Source
-
+```mdx-code-block
+import { ProjectOverviewGraph } from "@site/src/pages/_assets/project-overview-graph"
+
+
+```
If you were to use the full Ory Ecosystem, it would probably look something like this. Keep in mind that any component shown here
can be replaced or removed, depending on your use case.
@@ -94,4 +109,4 @@ can be replaced or removed, depending on your use case.
Now you know what this ecosystem has to offer you. To get some more information on the services, read the developer guide by
selecting the software of your choice from the navigation on the left!
-Contact us at [support@ory.sh](mailto:support@ory.sh) if you need consulting with your specific project.
+Contact us at [support@ory.com](mailto:support@ory.com) if you need consulting with your specific project.
diff --git a/docs/ecosystem/security.md b/docs/ecosystem/security.mdx
similarity index 95%
rename from docs/ecosystem/security.md
rename to docs/ecosystem/security.mdx
index 20d5946c18..82f1226c41 100644
--- a/docs/ecosystem/security.md
+++ b/docs/ecosystem/security.mdx
@@ -5,13 +5,11 @@ title: Security policy
This security policy outlines the security support commitments for different types of Ory users.
-[Get in touch](https://www.ory.sh/contact/) to learn more about Ory's security SLAs and process.
+[Get in touch](https://www.ory.com/contact/) to learn more about Ory's security SLAs and process.
### Apache 2.0 License users
- **Security SLA:** No security Service Level Agreement (SLA) is provided.
-- **Release Schedule:** Releases are planned every 3 to 6 months. These releases will contain all security fixes implemented up to
- that point.
- **Version Support:** Security patches are only provided for the current release version.
### Ory Enterprise License customers
@@ -44,7 +42,7 @@ Please read the following section to learn more about reporting security vulnera
## Ory bug bounty program
Ory is working with Hackerone to provide a private bug bounty program for all Ory products. If you are interested in joining the
-program, please [create an account at Hackerone](https://hackerone.com/sign_up) and [request access](mailto:security@ory.sh). The
+program, please [create an account at Hackerone](https://hackerone.com/sign_up) and [request access](mailto:security@ory.com). The
following is the policy for the private bug bounty program.
Being a security-focused company, Ory appreciates, encourages, and rewards feedback from the security community. Ory is open
diff --git a/docs/ecosystem/software-architecture-philosophy.md b/docs/ecosystem/software-architecture-philosophy.mdx
similarity index 100%
rename from docs/ecosystem/software-architecture-philosophy.md
rename to docs/ecosystem/software-architecture-philosophy.mdx
diff --git a/docs/ecosystem/sqa.md b/docs/ecosystem/sqa.mdx
similarity index 95%
rename from docs/ecosystem/sqa.md
rename to docs/ecosystem/sqa.mdx
index 9263793a86..edda5c2a5a 100644
--- a/docs/ecosystem/sqa.md
+++ b/docs/ecosystem/sqa.mdx
@@ -19,7 +19,7 @@ real-world examples of how this data improved a project.
The data processing pipeline has the following steps:
1. Telemetry data is collected at each service.
-2. Periodically this data is sent to `sqa.ory.sh`.
+2. Periodically this data is sent to `sqa.ory.com`.
3. Data is forwarded to a private Google cloud storage Bucket owned by the Ory organization. The data isn't shared with any other
party.
4. The GCS Bucket(s) are periodically downloaded onto Google compute engine virtual machines.
@@ -64,9 +64,7 @@ protect your privacy:
1. We only transmit information on how often endpoints are requested, how fast they respond and what HTTP status code was sent.
2. We filter out any query parameters, headers, response and request bodies and path parameters. A full list of transmitted URL
paths is listed in section [Request telemetry](#request-telemetry).
-3. **We're unable to see or store the IP address of your host**, as the
- [IP is set to `0.0.0.0`](https://github.com/ory/x/blob/master/metricsx/middleware.go) when transmitting data to our metrics
- aggregator.
+3. Private IP addresses are filtered out from collected host information when transmitting data to the metrics aggregator.
4. We don't transmit any environment information from the host, except:
- Operating system id (windows, linux, osx)
@@ -97,7 +95,7 @@ We collect the following system metrics:
### Request telemetry
-The IP addresses of both host and client are anonymized to `0.0.0.0`.
+Client IP addresses are anonymized to `0.0.0.0`. Private IP addresses are filtered out from host data.
We collect the following request metrics:
diff --git a/docs/ecosystem/upgrading.md b/docs/ecosystem/upgrading.md
deleted file mode 100644
index 344cf08588..0000000000
--- a/docs/ecosystem/upgrading.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-id: upgrading
-title: Versioning and upgrades
----
-
-## Upgrades
-
-> Running security-critical open source technology in a self-service format requires vigilance. We make your life easier by
-> announcing important software updates via the [Ory Security Newsletter](https://www.ory.sh/l/sign-up-newsletter). Never miss an
-> update and **[sign up now to important release updates!](https://www.ory.sh/l/sign-up-newsletter)**
-
-Good software improves over time. If it wouldn't, you shouldn't use it. Unfortunately, some of these improvements have breaking
-changes. We know that breaking changes are annoying so we want to make upgrading as painless as possible.
-
-We document changelogs and upgrade guides for Ory services:
-
-- Ory Kratos: [upgrade guide](../kratos/guides/upgrade), [changelog](https://github.com/ory/kratos/blob/master/CHANGELOG.md)
-- Ory Hydra: [upgrade guide](https://github.com/ory/hydra/blob/master/UPGRADE.md),
- [changelog](https://github.com/ory/hydra/blob/master/CHANGELOG.md)
-- Ory Oathkeeper: [upgrade guide](https://github.com/ory/oathkeeper/blob/master/UPGRADE.md),
- [changelog](https://github.com/ory/oathkeeper/blob/master/CHANGELOG.md)
-- Ory Keto: [upgrade guide](https://github.com/ory/keto/blob/master/UPGRADE.md),
- [changelog](https://github.com/ory/keto/blob/master/CHANGELOG.md)
-
-Before upgrading to a newer version, please make sure to check with these documents first.
-
-## Versioning
-
-The Ory ecosystem consists of multiple services versioned using [semantic versioning](https://semver.org). This section explains
-how we define service versions and what they mean.
-
-## Development stages
-
-:::important
-
-**Ory only releases software that is stable and ready for production!**
-The sandbox/incubating stage is an indicator of how much the API could change in the future, including backward incompatible
-changes.
-
-Ory was founded in 2015, secures more than 50B requests monthly and is the most trusted open source ecosystem for authentication &
-authorization.
-
-:::
-
-There are three main stages of development for services:
-
-- **Graduated:** Mature implementations of proven concepts. They rarely change in backwards incompatible ways. A software is
- considered graduated if the major version is >= 1, for example `v1.0.1`, `v2.2.2`. Backwards incompatible changes are indicated
- by a bump of the major version number. Most, if not all, REST APIs will provide backwards compatible transformations that make
- it possible to interact with the server using older API versions.
-- **Incubating:** Implements well defined but not fully matured concepts. Incubating software has a major version number of `0`,
- for example `v0.10.0`. You may see a pre-release version such as `v0.10.0-beta.1`. Incubating software has a higher (but overall
- moderate) probability for larger changes that can break backwards compatibility, for which there are upgrade guides.
-- **Sandbox:** Implements concepts, APIs and CLIs at the experimental stage and may change in unpredictable ways. Sandbox software
- has a major version number of `0` with a `alpha` or `beta` pre-release indicator, for example `v0.10.0-alpha.1`. It's more
- likely that you'll encounter a version tag with a `alpha` pre-release version. We will provide upgrade guides wherever possible,
- when they're used in production already.
-
-The following is a list of maturity level per project:
-
-- [Ory Hydra](https://github.com/ory/hydra) is a **graduated** project.
-- [Ory Kratos](https://github.com/ory/kratos) is a **graduated** project.
-- [Ory Oathkeeper](https://github.com/ory/oathkeeper) is an **incubating** project.
-- [Ory Keto](https://github.com/ory/keto) is a **sandbox** project.
diff --git a/docs/ecosystem/upgrading.mdx b/docs/ecosystem/upgrading.mdx
new file mode 100644
index 0000000000..e437960dd6
--- /dev/null
+++ b/docs/ecosystem/upgrading.mdx
@@ -0,0 +1,35 @@
+---
+id: upgrading
+title: Versioning and upgrades
+---
+
+## Upgrades
+
+> Running security-critical open source technology in a self-service format requires vigilance. We make your life easier by
+> announcing important software updates via the [Ory Security Newsletter](https://www.ory.com/l/sign-up-newsletter). Never miss an
+> update and **[sign up now to important release updates!](https://www.ory.com/l/sign-up-newsletter)**
+
+Good software improves over time. If it wouldn't, you shouldn't use it. Unfortunately, some of these improvements have breaking
+changes. We know that breaking changes are annoying so we want to make upgrading as painless as possible.
+
+We document changelogs and upgrade guides for Ory services:
+
+- Ory Kratos: [upgrade guide](../kratos/guides/upgrade), [changelog](https://github.com/ory/kratos/blob/master/CHANGELOG.md)
+- Ory Hydra: [upgrade guide](https://github.com/ory/hydra/blob/master/UPGRADE.md),
+ [changelog](https://github.com/ory/hydra/blob/master/CHANGELOG.md)
+- Ory Oathkeeper: [upgrade guide](https://github.com/ory/oathkeeper/blob/master/UPGRADE.md),
+ [changelog](https://github.com/ory/oathkeeper/blob/master/CHANGELOG.md)
+- Ory Keto: [upgrade guide](https://github.com/ory/keto/blob/master/UPGRADE.md),
+ [changelog](https://github.com/ory/keto/blob/master/CHANGELOG.md)
+
+Before upgrading to a newer version, please make sure to check with these documents first.
+
+## Versioning
+
+Ory uses a calendar-based product versioning system, where the version format is `YY.Q.N`, representing the year, quarter, and
+release number within that quarter. For example, version `26.2.0` indicates a product release in the second quarter of 2026, with
+`0` being the first release in that quarter. The release number increases with each subsequent release during the quarter. With
+this system you can understand when a version was released and how recent it released. Starting from October 2025, all Ory
+components use a common versioning number, meaning releases are synchronized across all components such as Ory Kratos, Ory Hydra,
+Ory Oathkeeper, and Ory Keto. This unified versioning simplifies upgrades and ensures compatibility across the entire Ory
+ecosystem.
diff --git a/docs/elements/assets/figma-variables-deps.gen.mermaid b/docs/elements/assets/figma-variables-deps.gen.mermaid
new file mode 100644
index 0000000000..7f6889db9d
--- /dev/null
+++ b/docs/elements/assets/figma-variables-deps.gen.mermaid
@@ -0,0 +1,129 @@
+%% AUTOGENERATED - DO NOT EDIT
+graph LR
+ ui-white --> brand-600
+ ui-white --> interface-background-default-primary
+ ui-white --> interface-foreground-default-inverted
+ ui-warning --> interface-background-validation-warning
+ ui-warning --> interface-border-validation-warning
+ ui-warning --> interface-foreground-validation-warning
+ ui-transparent --> interface-background-default-none
+ ui-transparent --> interface-border-default-none
+ ui-success --> interface-background-validation-success
+ ui-success --> interface-border-validation-success
+ ui-success --> interface-foreground-validation-success
+ ui-danger --> interface-background-validation-danger
+ ui-danger --> interface-border-validation-danger
+ ui-danger --> interface-foreground-validation-danger
+ ui-900 --> brand-500
+ ui-900 --> interface-background-default-inverted
+ ui-900 --> interface-foreground-default-primary
+ ui-800 --> brand-950
+ ui-800 --> interface-background-default-inverted-hover
+ ui-700 --> brand-400
+ ui-700 --> interface-border-default-inverted
+ ui-700 --> interface-foreground-default-secondary
+ ui-600 --> brand-900
+ ui-500 --> brand-300
+ ui-500 --> interface-foreground-default-tertiary
+ ui-50 --> brand-50
+ ui-50 --> interface-background-default-primary-hover
+ ui-50 --> interface-background-default-secondary
+ ui-400 --> brand-800
+ ui-400 --> interface-foreground-disabled-on-disabled
+ ui-300 --> brand-200
+ ui-300 --> interface-background-default-tertiary-hover
+ ui-300 --> interface-border-default-primary
+ ui-300 --> interface-border-disabled-disabled
+ ui-300 --> interface-foreground-disabled-disabled
+ ui-200 --> brand-700
+ ui-200 --> interface-background-default-secondary-hover
+ ui-200 --> interface-background-default-tertiary
+ ui-200 --> interface-background-disabled-disabled
+ ui-100 --> brand-100
+ interface-foreground-disabled-on-disabled --> button-primary-foreground-disabled
+ interface-foreground-disabled-on-disabled --> button-secondary-foreground-disabled
+ interface-foreground-disabled-on-disabled --> button-social-foreground-disabled
+ interface-foreground-disabled-on-disabled --> input-foreground-disabled
+ interface-foreground-disabled-disabled --> button-link-disabled-disabled
+ interface-foreground-default-tertiary --> button-link-default-secondary-hover
+ interface-foreground-default-tertiary --> input-foreground-tertiary
+ interface-foreground-default-secondary --> button-link-default-secondary
+ interface-foreground-default-secondary --> button-secondary-foreground-hover
+ interface-foreground-default-secondary --> button-social-foreground-hover
+ interface-foreground-default-secondary --> input-foreground-secondary
+ interface-foreground-default-primary --> button-link-brand-brand-hover
+ interface-foreground-default-primary --> button-link-default-primary
+ interface-foreground-default-primary --> button-secondary-foreground-default
+ interface-foreground-default-primary --> button-social-foreground-default
+ interface-foreground-default-primary --> checkbox-foreground-default
+ interface-foreground-default-primary --> input-foreground-primary
+ interface-foreground-default-primary --> ory-foreground-default
+ interface-foreground-default-primary --> radio-foreground-default
+ interface-foreground-default-inverted --> button-social-foreground-generic-provider
+ interface-foreground-brand-primary --> button-link-brand-brand
+ interface-foreground-brand-primary --> button-link-default-primary-hover
+ interface-foreground-brand-primary --> toggle-foreground-default
+ interface-foreground-brand-on-secondary --> button-identifier-foreground-default
+ interface-foreground-brand-on-secondary --> button-identifier-foreground-hover
+ interface-foreground-brand-on-primary --> button-primary-foreground-default
+ interface-foreground-brand-on-primary --> button-primary-foreground-hover
+ interface-foreground-brand-on-primary --> checkbox-foreground-checked
+ interface-foreground-brand-on-primary --> radio-foreground-checked
+ interface-foreground-brand-on-primary --> toggle-foreground-checked
+ interface-border-disabled-disabled --> button-primary-border-disabled
+ interface-border-disabled-disabled --> button-secondary-border-disabled
+ interface-border-disabled-disabled --> button-social-border-disabled
+ interface-border-disabled-disabled --> input-border-disabled
+ interface-border-default-primary --> button-secondary-border-default
+ interface-border-default-primary --> button-secondary-border-hover
+ interface-border-default-primary --> button-social-border-default
+ interface-border-default-primary --> button-social-border-hover
+ interface-border-default-primary --> checkbox-border-checkbox-border-default
+ interface-border-default-primary --> form-border-default
+ interface-border-default-primary --> input-border-default
+ interface-border-default-primary --> input-border-hover
+ interface-border-default-primary --> ory-border-default
+ interface-border-default-primary --> radio-border-default
+ interface-border-default-primary --> toggle-border-default
+ interface-border-default-none --> button-primary-border-default
+ interface-border-default-none --> button-primary-border-hover
+ interface-border-default-none --> button-social-border-generic-provider
+ interface-border-default-none --> toggle-border-checked
+ interface-border-brand-brand --> button-identifier-border-border-default
+ interface-border-brand-brand --> button-identifier-border-border-hover
+ interface-border-brand-brand --> checkbox-border-checkbox-border-checked
+ interface-border-brand-brand --> input-border-focus
+ interface-border-brand-brand --> radio-border-checked
+ interface-background-disabled-disabled --> button-primary-background-disabled
+ interface-background-disabled-disabled --> button-secondary-background-disabled
+ interface-background-disabled-disabled --> button-social-background-disabled
+ interface-background-disabled-disabled --> input-background-disabled
+ interface-background-default-secondary --> checkbox-background-default
+ interface-background-default-secondary --> radio-background-default
+ interface-background-default-secondary --> toggle-background-default
+ interface-background-default-primary-hover --> button-secondary-background-hover
+ interface-background-default-primary-hover --> button-social-background-hover
+ interface-background-default-primary-hover --> input-background-hover
+ interface-background-default-primary --> button-secondary-background-default
+ interface-background-default-primary --> button-social-background-default
+ interface-background-default-primary --> form-background-default
+ interface-background-default-primary --> input-background-default
+ interface-background-default-primary --> ory-background-default
+ interface-background-default-inverted --> button-social-background-generic-provider
+ interface-background-brand-secondary-hover --> button-identifier-background-hover
+ interface-background-brand-secondary --> button-identifier-background-default
+ interface-background-brand-primary-hover --> button-primary-background-hover
+ interface-background-brand-primary --> button-primary-background-default
+ interface-background-brand-primary --> checkbox-background-checked
+ interface-background-brand-primary --> radio-background-checked
+ interface-background-brand-primary --> toggle-background-checked
+ brand-950 --> interface-foreground-brand-on-secondary
+ brand-500 --> interface-background-brand-primary
+ brand-500 --> interface-border-brand-brand
+ brand-500 --> interface-foreground-brand-primary
+ brand-50 --> interface-background-brand-secondary
+ brand-50 --> interface-foreground-brand-on-primary
+ brand-50 --> interface-foreground-brand-secondary
+ brand-400 --> interface-background-brand-primary-hover
+ brand-100 --> interface-background-brand-secondary-hover
+
\ No newline at end of file
diff --git a/docs/elements/assets/figma-variables.gen.md b/docs/elements/assets/figma-variables.gen.md
new file mode 100644
index 0000000000..23ee398695
--- /dev/null
+++ b/docs/elements/assets/figma-variables.gen.md
@@ -0,0 +1,145 @@
+| CSS Variable | Description |
+| ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--ui-100` | **Default**: #f1f5f9 |
+| `--ui-200` | **Default**: #e2e8f0 |
+| `--ui-300` | **Default**: #cbd5e1 |
+| `--ui-400` | **Default**: #94a3b8 |
+| `--ui-50` | **Default**: #f8fafc |
+| `--ui-500` | **Default**: #64748b |
+| `--ui-600` | **Default**: #475569 |
+| `--ui-700` | **Default**: #334155 |
+| `--ui-800` | **Default**: #1e293b |
+| `--ui-900` | **Default**: #0f172a |
+| `--ui-950` | **Default**: #020617 |
+| `--ui-black` | **Default**: #000000 |
+| `--ui-danger` | **Default**: #dc2626 |
+| `--ui-success` | **Default**: #22c55e |
+| `--ui-transparent` | **Default**: #ffffff00 |
+| `--ui-warning` | **Default**: #eab308 |
+| `--ui-white` | **Default**: #ffffff |
+| `--brand-100` | **Default**: `ui-100` |
+| `--brand-200` | **Default**: `ui-300` |
+| `--brand-300` | **Default**: `ui-500` |
+| `--brand-400` | **Default**: `ui-700` |
+| `--brand-50` | **Default**: `ui-50` |
+| `--brand-500` | **Default**: `ui-900` |
+| `--brand-600` | **Default**: `ui-white` |
+| `--brand-700` | **Default**: `ui-200` |
+| `--brand-800` | **Default**: `ui-400` |
+| `--brand-900` | **Default**: `ui-600` |
+| `--brand-950` | **Default**: `ui-800` |
+| `--button-identifier-background-default` | The background color for the identifier button in its default state. **Default**: `interface-background-brand-secondary` |
+| `--button-identifier-background-hover` | The background color for the identifier button when hovered. **Default**: `interface-background-brand-secondary-hover` |
+| `--button-identifier-border-border-default` | The border color for the identifier button in its default state. **Default**: `interface-border-brand-brand` |
+| `--button-identifier-border-border-hover` | The border color for the identifier button when hovered. **Default**: `interface-border-brand-brand` |
+| `--button-identifier-foreground-default` | The text color for the identifier button in its default state. **Default**: `interface-foreground-brand-on-secondary` |
+| `--button-identifier-foreground-hover` | The text color for the identifier button when hovered. **Default**: `interface-foreground-brand-on-secondary` |
+| `--button-link-brand-brand` | The text color for links that are styled in the brand color **Default**: `interface-foreground-brand-primary` |
+| `--button-link-brand-brand-hover` | The text color for links that are styled in the brand color when hovered. **Default**: `interface-foreground-default-primary` |
+| `--button-link-default-primary` | The text color for default primary links. **Default**: `interface-foreground-default-primary` |
+| `--button-link-default-primary-hover` | The text color for default primary links when hovered. **Default**: `interface-foreground-brand-primary` |
+| `--button-link-default-secondary` | The text color for default secondary links. **Default**: `interface-foreground-default-secondary` |
+| `--button-link-default-secondary-hover` | The text color for default secondary links when hovered. **Default**: `interface-foreground-default-tertiary` |
+| `--button-link-disabled-disabled` | The text color for links that are disabled. **Default**: `interface-foreground-disabled-disabled` |
+| `--button-primary-background-default` | The background color for primary buttons in their default state. **Default**: `interface-background-brand-primary` |
+| `--button-primary-background-disabled` | The background color for primary buttons when disabled. **Default**: `interface-background-disabled-disabled` |
+| `--button-primary-background-hover` | The background color for primary buttons when hovered. **Default**: `interface-background-brand-primary-hover` |
+| `--button-primary-border-default` | The border color for primary buttons in their default state. **Default**: `interface-border-default-none` |
+| `--button-primary-border-disabled` | The border color for primary buttons when disabled. **Default**: `interface-border-disabled-disabled` |
+| `--button-primary-border-hover` | The border color for primary buttons when hovered. **Default**: `interface-border-default-none` |
+| `--button-primary-foreground-default` | The text color for primary buttons in their default state. **Default**: `interface-foreground-brand-on-primary` |
+| `--button-primary-foreground-disabled` | The text color for primary buttons when disabled. **Default**: `interface-foreground-disabled-on-disabled` |
+| `--button-primary-foreground-hover` | The text color for primary buttons when hovered. **Default**: `interface-foreground-brand-on-primary` |
+| `--button-secondary-background-default` | The background color for secondary buttons in their default state. **Default**: `interface-background-default-primary` |
+| `--button-secondary-background-disabled` | The background color for secondary buttons when disabled. **Default**: `interface-background-disabled-disabled` |
+| `--button-secondary-background-hover` | The background color for secondary buttons when hovered. **Default**: `interface-background-default-primary-hover` |
+| `--button-secondary-border-default` | The border color for secondary buttons in their default state. **Default**: `interface-border-default-primary` |
+| `--button-secondary-border-disabled` | The border color for secondary buttons when disabled. **Default**: `interface-border-disabled-disabled` |
+| `--button-secondary-border-hover` | The border color for secondary buttons when hovered. **Default**: `interface-border-default-primary` |
+| `--button-secondary-foreground-default` | The text color for secondary buttons in their default state. **Default**: `interface-foreground-default-primary` |
+| `--button-secondary-foreground-disabled` | The text color for secondary buttons when disabled. **Default**: `interface-foreground-disabled-on-disabled` |
+| `--button-secondary-foreground-hover` | The text color for secondary buttons when hovered. **Default**: `interface-foreground-default-secondary` |
+| `--button-social-background-default` | The background color for social buttons in their default state. **Default**: `interface-background-default-primary` |
+| `--button-social-background-disabled` | The background color for social buttons when disabled. **Default**: `interface-background-disabled-disabled` |
+| `--button-social-background-generic-provider` | The background color for social buttons for generic providers. **Default**: `interface-background-default-inverted` |
+| `--button-social-background-hover` | The background color for social buttons when hovered. **Default**: `interface-background-default-primary-hover` |
+| `--button-social-border-default` | The border color for social buttons in their default state. **Default**: `interface-border-default-primary` |
+| `--button-social-border-disabled` | The border color for social buttons when disabled. **Default**: `interface-border-disabled-disabled` |
+| `--button-social-border-generic-provider` | The border color for social buttons for generic providers. **Default**: `interface-border-default-none` |
+| `--button-social-border-hover` | The border color for social buttons when hovered. **Default**: `interface-border-default-primary` |
+| `--button-social-foreground-default` | The text color for social buttons in their default state. **Default**: `interface-foreground-default-primary` |
+| `--button-social-foreground-disabled` | The text color for social buttons when disabled. **Default**: `interface-foreground-disabled-on-disabled` |
+| `--button-social-foreground-generic-provider` | The text color for social buttons for generic providers. **Default**: `interface-foreground-default-inverted` |
+| `--button-social-foreground-hover` | The text color for social buttons when hovered. **Default**: `interface-foreground-default-secondary` |
+| `--checkbox-background-checked` | The background color for checkboxes when checked. **Default**: `interface-background-brand-primary` |
+| `--checkbox-background-default` | The background color for checkboxes when unchecked. **Default**: `interface-background-default-secondary` |
+| `--checkbox-border-checkbox-border-checked` | The border color for checkboxes when checked. **Default**: `interface-border-brand-brand` |
+| `--checkbox-border-checkbox-border-default` | The border color for checkboxes when unchecked. **Default**: `interface-border-default-primary` |
+| `--checkbox-foreground-checked` | The color of the checkmark in checkboxes when checked. **Default**: `interface-foreground-brand-on-primary` |
+| `--checkbox-foreground-default` | The text color for checkboxes when unchecked. **Default**: `interface-foreground-default-primary` |
+| `--form-background-default` | The default background color for forms. **Default**: `interface-background-default-primary` |
+| `--form-border-default` | The default border color for forms. **Default**: `interface-border-default-primary` |
+| `--input-background-default` | The default background color for input fields. **Default**: `interface-background-default-primary` |
+| `--input-background-disabled` | The background color for input fields when disabled. **Default**: `interface-background-disabled-disabled` |
+| `--input-background-hover` | The background color for input fields when hovered. **Default**: `interface-background-default-primary-hover` |
+| `--input-border-default` | The default border color for input fields. **Default**: `interface-border-default-primary` |
+| `--input-border-disabled` | The border color for input fields when disabled. **Default**: `interface-border-disabled-disabled` |
+| `--input-border-focus` | The border color for input fields when focused. **Default**: `interface-border-brand-brand` |
+| `--input-border-hover` | The border color for input fields when hovered. **Default**: `interface-border-default-primary` |
+| `--input-foreground-disabled` | The text color for input fields when disabled. **Default**: `interface-foreground-disabled-on-disabled` |
+| `--input-foreground-primary` | The primary text color for input fields. **Default**: `interface-foreground-default-primary` |
+| `--input-foreground-secondary` | The secondary text color for input fields. **Default**: `interface-foreground-default-secondary` |
+| `--input-foreground-tertiary` | The tertiary text color for input fields. **Default**: `interface-foreground-default-tertiary` |
+| `--interface-background-brand-primary` | The background color for interface elements styled with the brand primary color. **Default**: `brand-500` |
+| `--interface-background-brand-primary-hover` | The background color for interface elements styled with the brand primary color when hovered. **Default**: `brand-400` |
+| `--interface-background-brand-secondary` | The background color for interface elements styled with the brand secondary color. **Default**: `brand-50` |
+| `--interface-background-brand-secondary-hover` | The background color for interface elements styled with the brand secondary color when hovered. **Default**: `brand-100` |
+| `--interface-background-default-inverted` | The background color for interface elements in their default inverted state. **Default**: `ui-900` |
+| `--interface-background-default-inverted-hover` | The background color for interface elements in their default inverted state when hovered. **Default**: `ui-800` |
+| `--interface-background-default-none` | Unused **Default**: `ui-transparent` |
+| `--interface-background-default-primary` | The background color for primary interface elements in their default state. **Default**: `ui-white` |
+| `--interface-background-default-primary-hover` | The background color for primary interface elements when hovered. **Default**: `ui-50` |
+| `--interface-background-default-secondary` | The background color for secondary interface elements in their default state. **Default**: `ui-50` |
+| `--interface-background-default-secondary-hover` | The background color for secondary interface elements when hovered. **Default**: `ui-200` |
+| `--interface-background-default-tertiary` | The background color for tertiary interface elements in their default state. **Default**: `ui-200` |
+| `--interface-background-default-tertiary-hover` | The background color for tertiary interface elements when hovered. **Default**: `ui-300` |
+| `--interface-background-disabled-disabled` | The background color for interface elements when disabled. **Default**: `ui-200` |
+| `--interface-background-validation-danger` | The background color for interface elements indicating danger or error. **Default**: `ui-danger` |
+| `--interface-background-validation-success` | The background color for interface elements indicating success. **Default**: `ui-success` |
+| `--interface-background-validation-warning` | The background color for interface elements indicating a warning. **Default**: `ui-warning` |
+| `--interface-border-brand-brand` | The border color for interface elements styled with the brand color. **Default**: `brand-500` |
+| `--interface-border-default-inverted` | The border color for interface elements in their default inverted state. **Default**: `ui-700` |
+| `--interface-border-default-none` | Unused **Default**: `ui-transparent` |
+| `--interface-border-default-primary` | The border color for primary interface elements in their default state. **Default**: `ui-300` |
+| `--interface-border-disabled-disabled` | The border color for interface elements when disabled. **Default**: `ui-300` |
+| `--interface-border-validation-danger` | The border color for interface elements indicating danger or error. **Default**: `ui-danger` |
+| `--interface-border-validation-success` | The border color for interface elements indicating success. **Default**: `ui-success` |
+| `--interface-border-validation-warning` | The border color for interface elements indicating a warning. **Default**: `ui-warning` |
+| `--interface-foreground-brand-on-primary` | The text color for interface elements styled with the brand primary color. **Default**: `brand-50` |
+| `--interface-foreground-brand-on-secondary` | The text color for interface elements styled with the brand secondary color. **Default**: `brand-950` |
+| `--interface-foreground-brand-primary` | The text color for brand colored interface elements in their primary state. **Default**: `brand-500` |
+| `--interface-foreground-brand-secondary` | The text color for brand colored interface elements in their secondary state. **Default**: `brand-50` |
+| `--interface-foreground-default-inverted` | The text color for interface elements in their default inverted state. **Default**: `ui-white` |
+| `--interface-foreground-default-primary` | The text color for primary interface elements in their default state. **Default**: `ui-900` |
+| `--interface-foreground-default-secondary` | The text color for secondary interface elements in their default state. **Default**: `ui-700` |
+| `--interface-foreground-default-tertiary` | The text color for tertiary interface elements in their default state. **Default**: `ui-500` |
+| `--interface-foreground-disabled-disabled` | The text color for interface elements when disabled. **Default**: `ui-300` |
+| `--interface-foreground-disabled-on-disabled` | The text color for interface elements when disabled, specifically for elements that are on a disabled background. **Default**: `ui-400` |
+| `--interface-foreground-validation-danger` | The text color for interface elements indicating danger or error. **Default**: `ui-danger` |
+| `--interface-foreground-validation-success` | The text color for interface elements indicating success. **Default**: `ui-success` |
+| `--interface-foreground-validation-warning` | The text color for interface elements indicating a warning. **Default**: `ui-warning` |
+| `--ory-background-default` | The background color for the Ory badge. **Default**: `interface-background-default-primary` |
+| `--ory-border-default` | The border color for the Ory badge. **Default**: `interface-border-default-primary` |
+| `--ory-foreground-default` | The text color for the Ory badge. **Default**: `interface-foreground-default-primary` |
+| `--radio-background-checked` | Unused **Default**: `interface-background-brand-primary` |
+| `--radio-background-default` | Unused **Default**: `interface-background-default-secondary` |
+| `--radio-border-checked` | Unused **Default**: `interface-border-brand-brand` |
+| `--radio-border-default` | Unused **Default**: `interface-border-default-primary` |
+| `--radio-foreground-checked` | Unused **Default**: `interface-foreground-brand-on-primary` |
+| `--radio-foreground-default` | Unused **Default**: `interface-foreground-default-primary` |
+| `--toggle-background-checked` | The background color for toggles when checked. **Default**: `interface-background-brand-primary` |
+| `--toggle-background-default` | The background color for toggles when unchecked. **Default**: `interface-background-default-secondary` |
+| `--toggle-border-checked` | The border color for toggles when checked. **Default**: `interface-border-default-none` |
+| `--toggle-border-default` | The border color for toggles when unchecked. **Default**: `interface-border-default-primary` |
+| `--toggle-foreground-checked` | The text color for toggles when checked. **Default**: `interface-foreground-brand-on-primary` |
+| `--toggle-foreground-default` | The text color for toggles when unchecked. **Default**: `interface-foreground-brand-primary` |
diff --git a/docs/elements/css-reference.mdx b/docs/elements/css-reference.mdx
new file mode 100644
index 0000000000..80288c7cdc
--- /dev/null
+++ b/docs/elements/css-reference.mdx
@@ -0,0 +1,27 @@
+---
+id: css-reference
+title: CSS Reference
+---
+
+This document provides a reference for the CSS variables used in Ory Elements. You can use these variables to customize the look
+and feel of your application.
+
+## CSS Variables Reference
+
+```mdx-code-block
+import Table from './assets/figma-variables.gen.md'
+
+
+
+```
+
+## Visualizing CSS Variables Dependencies
+
+```mdx-code-block
+import Mermaid from "@site/src/theme/Mermaid"
+import graph from '!!raw-loader!./assets/figma-variables-deps.gen.mermaid'
+
+
+```
diff --git a/docs/elements/guides/02_theming.mdx b/docs/elements/guides/02_theming.mdx
new file mode 100644
index 0000000000..6993c0d2cf
--- /dev/null
+++ b/docs/elements/guides/02_theming.mdx
@@ -0,0 +1,78 @@
+---
+id: theming
+title: Use a custom theme
+sidebar_label: Theming
+---
+
+Ory Elements allows you to customize the look and feel of the default UI components by using a custom theme. This guide will show
+you how to create and apply a custom theme to your Ory Elements components.
+
+## Understanding CSS theming in Ory Elements
+
+Ory Elements uses CSS variables to define the styles of its components. These variables are defined in a hierarchical manner,
+allowing you to override base variables that are used in many components at once or variables that are only used in specifc
+components.
+
+To understand this hierarchical structure, consider the following diagram:
+
+```mdx-code-block
+import Mermaid from "@site/src/theme/Mermaid"
+
+ interface-background-default-primary-hover
+ ui-50 --> interface-background-default-secondary
+
+ interface-background-default-primary-hover --> button-secondary-background-hover
+ interface-background-default-primary-hover --> button-social-background-hover
+ interface-background-default-primary-hover --> input-background-hover
+
+ interface-background-default-secondary --> checkbox-background-default
+ interface-background-default-secondary --> radio-background-default
+ interface-background-default-secondary --> toggle-background-default
+`}
+/>
+```
+
+This diagram shows how the `ui-50` variable is used as a base for other variables like
+`interface-background-default-primary-hover` and `interface-background-default-secondary`. These variables are then used in
+specific components like buttons, checkboxes, and toggles. By overriding the `ui-50` variable, you can change the look and feel of
+all components that use it.
+
+## Creating a custom theme
+
+Now, if you want to change the color in all of these components, you can simply override the `ui-50` variable in your CSS files.
+This will affect all components that use this variable, allowing you to create a consistent look and feel across your application.
+
+A mix is also possible, where you can override the core variables, and then target specific components with additional styles. For
+example, you can override the `ui-50` variable and then add specific styles for buttons:
+
+```css title="theme.css"
+:root {
+ --ui-50: #f0f4f8; /* Change the base color */
+ --button-secondary-background-hover: #e0e4e8; /* Change the button hover color */
+}
+```
+
+For a full list of CSS variables used in Ory Elements, you can refer to the [CSS Reference](../css-reference) document.
+
+## Applying the custom theme
+
+To apply the custom theme to your Ory Elements components, you need to import the CSS file in your application. You can do this in
+your main application file or in a specific component where you want to use the custom theme. Here is an example of how to import
+the CSS file in a Next.js application:
+
+```javascript title="pages/_app.js"
+import "../styles/theme.css" // Import the custom theme CSS file
+
+function MyApp({ Component, pageProps }) {
+ return
+}
+export default MyApp
+```
+
+## Using the default theme with custom components
+
+When building custom components, you can still leverage the default theme by using the CSS variables defined in Ory Elements. The
+default theme's styles are scoped to the `.ory-elements` CSS class. This means that if you wrap your custom components in a
+container with this class, they will inherit the default theme styles.
diff --git a/docs/elements/guides/03_internationalization.mdx b/docs/elements/guides/03_internationalization.mdx
new file mode 100644
index 0000000000..5a54a34944
--- /dev/null
+++ b/docs/elements/guides/03_internationalization.mdx
@@ -0,0 +1,254 @@
+---
+id: internationalization
+title: Use custom translations (i18n)
+sidebar_label: Internationalization (i18n)
+---
+
+```mdx-code-block
+import Tabs from "@theme/Tabs"
+import TabItem from "@theme/TabItem"
+```
+
+Ory Elements supports internationalization (i18n) to help you create applications that can be used by users from different
+locales. This guide will show you how to use custom translations in your Ory Elements components.
+
+Ory Elements uses the react-intl library to handle translations. You can provide your own translations for the Ory Elements
+components by wrapping your application in the `IntlProvider` component from `react-intl` and passing your translations as
+messages.
+
+## Set the default locale
+
+By default, a set of translations is provided for 83 languages:
+
+
+Full list of supported languages
+
+- Afrikaans (`af`)
+- Akan (`ak`)
+- Amharic (`am`)
+- Arabic (`ar`)
+- Assamese (`as`)
+- Azerbaijani (Latin) (`az`)
+- Belarusian (`be`)
+- Bulgarian (`bg`)
+- Bamanankan (`bm`)
+- Bangla (`bn`)
+- Catalan (`ca`)
+- Czech (`cs`)
+- Danish (`da`)
+- German (`de`)
+- Greek (`el`)
+- English (`en`)
+- Spanish (`es`)
+- Estonian (`et`)
+- Persian (`fa`)
+- Finnish (`fi`)
+- French (`fr`)
+- Gujarati (`gu`)
+- Hausa (Latin) (`ha`)
+- Hebrew (`he`)
+- Hindi (`hi`)
+- Croatian (`hr`)
+- Hungarian (`hu`)
+- Armenian (`hy`)
+- Indonesian (`id`)
+- Igbo (`ig`)
+- Italian (`it`)
+- Japanese (`ja`)
+- Georgian (`ka`)
+- Kazakh (`kk`)
+- Khmer (`km`)
+- Kannada (`kn`)
+- Korean (`ko`)
+- Central Kurdish (`ku`)
+- Kyrgyz (`ky`)
+- Lithuanian (`lt`)
+- Latvian (`lv`)
+- Macedonian (`mk`)
+- Malayalam (`ml`)
+- Mongolian (Cyrillic) (`mn`)
+- Marathi (`mr`)
+- Malay (`ms`)
+- Burmese (`my`)
+- Nepali (`ne`)
+- Dutch (`nl`)
+- Norwegian (Bokmal) (`no`)
+- Odia (`or`)
+- Punjabi (`pa`)
+- Polish (`pl`)
+- Pashto (`ps`)
+- Portuguese (`pt`)
+- Romanian (`ro`)
+- Russian (`ru`)
+- Sindhi (`sd`)
+- Sinhala (`si`)
+- Slovak (`sk`)
+- Slovenian (`sl`)
+- Somali (`so`)
+- Albanian (`sq`)
+- Serbian (Latin) (`sr`)
+- Sundanese (`su`)
+- Swedish (`sv`)
+- Kiswahili (`sw`)
+- Tamil (`ta`)
+- Telugu (`te`)
+- Tajik (Cyrillic) (`tg`)
+- Thai (`th`)
+- Turkmen (`tk`)
+- Tagalog (`tl`)
+- Turkish (`tr`)
+- Uyghur (`ug`)
+- Ukrainian (`uk`)
+- Urdu (`ur`)
+- Uzbek (Latin) (`uz`)
+- Vietnamese (`vi`)
+- Xhosa (`xh`)
+- Yoruba (`yo`)
+- Chinese (Simplified) (`zh`)
+- Zulu (`zu`)
+
+
+
+The source is available in the
+[GitHub repository of Ory Elements](https://github.com/ory/elements/tree/main/packages/elements-react/src/locales).
+
+To set the default locale for your application, see [the locale configuration section](./04_configuration.mdx#locale-i18n).
+
+## Detecting a user's locale
+
+If your application supports multiple languages, you can detect the user's locale and set it dynamically. This can be done using
+the `Accept-Language` header from the request in a server-side application or by using the browser's `navigator.language` property
+in a client-side application.
+
+## Using custom translations
+
+To use custom translations in your Ory Elements components, follow these steps:
+
+```mdx-code-block
+
+
+```
+
+1. Define your translations in typescript files. Here is an example of how to create a translations file:
+
+ ```typescript title="translations.ts"
+ export const messages: Record> = {
+ de: {
+ "login.title": "Anmeldung",
+ "login.description": "Bitte melden Sie sich an, um fortzufahren.",
+ // other messages...
+ },
+ en: {
+ "login.title": "Login",
+ "login.description": "Please log in to continue.",
+ // other messages...
+ },
+ }
+ ```
+
+ :::note
+
+ The keys in the `messages` object should match the keys used in the Ory Elements components. You can find the full original
+ files in the
+ [GitHub repository of Ory Elements](https://github.com/ory/elements/tree/main/packages/elements-react/src/locales).
+
+ :::
+
+2. Pass it to the OryProvider's `customTranslations` prop. Here is an example of how to do this in a Next.js application:
+
+ ```tsx title="app.tsx"
+ import { OryProvider } from "@ory/elements-react"
+ import { messages } from "./translations"
+
+ export default function MyApp({ Component, ...props }: { Component: NextPage }) {
+ return (
+
+
+
+ )
+ }
+ ```
+
+```mdx-code-block
+
+
+```
+
+1. Install the `react-intl` library if you haven't already:
+
+ ```bash
+ npm install react-intl
+ ```
+
+2. Create a translations file (e.g., `translations.ts`) that contains your translations for different locales. Here is an example:
+
+ ```typescript title="translations.ts"
+ export const messages: Record = {
+ en: {
+ "login.title": "Login",
+ // other messages...
+ },
+ de: {
+ "login.title": "Anmeldung",
+ },
+ }
+ ```
+
+ :::note
+
+ The keys in the `messages` object should match the keys used in the Ory Elements components. You can find the full original
+ files in the
+ [GitHub repository of Ory Elements](https://github.com/ory/elements/tree/main/packages/elements-react/src/locales).
+
+ :::
+
+3. Wrap your application in the `IntlProvider` component and pass your translations as messages. Here is an example of how to do
+ this in a Next.js application:
+
+ ```mdx-code-block
+
+
+ ```
+
+ ```tsx title="layout.tsx"
+ import { PropsWithChildren } from "react"
+ import { IntlProvider } from "react-intl"
+ import { messages } from "./translations"
+
+ export default function Layout({ children }: PropsWithChildren) {
+ return (
+
+ {children}
+
+ )
+ }
+ ```
+
+ ```mdx-code-block
+
+
+ ```
+
+ ```tsx title="app.tsx"
+ import type { NextPage } from "next"
+ import { IntlProvider } from "react-intl"
+ import { messages } from "./translations"
+
+ export default function MyApp({ Component, ...props }: { Component: NextPage }) {
+ return (
+
+
+
+ )
+ }
+ ```
+
+ ```mdx-code-block
+
+
+ ```
+
+```mdx-code-block
+
+
+```
diff --git a/docs/elements/guides/04_configuration.mdx b/docs/elements/guides/04_configuration.mdx
new file mode 100644
index 0000000000..0ef6a28635
--- /dev/null
+++ b/docs/elements/guides/04_configuration.mdx
@@ -0,0 +1,188 @@
+---
+id: configuration
+title: Configuration
+sidebar_label: Configuration
+---
+
+Ory Elements exposes a few configuration options that can be used to configure the default behavior of the UI components. These
+options can be set globally or per component. This guide will cover the global configuration options available in Ory Elements.
+
+## Project configuration
+
+The `project` configuration is used to configure the overall behavior of the Ory Elements UI components. It includes settings such
+as the default locale, redirect URLs, and UI URLs for various actions like login, registration, and recovery.
+
+You can set the project configuration globally in your application, and it will be used by all Ory Elements components. This
+allows you to use the default UI but still configure certain behaviors and URLs to match your application's requirements.
+
+Define the project configuration in your application like this:
+
+```ts title="projectConfig.ts"
+import { AccountExperienceConfiguration } from "@ory/elements-react"
+
+const projectConfig: AccountExperienceConfiguration = {
+ default_locale: "en", // default locale for the UI
+ default_redirect_url: "https://example.com/dashboard", // URL to redirect after successful login or registration
+ error_ui_url: "https://example.com/error", // URL to handle errors
+ login_ui_url: "https://example.com/login", // URL to the login page
+ registration_ui_url: "https://example.com/register", // URL to the registration page
+ recovery_ui_url: "https://example.com/recovery", // URL to the recovery page
+ settings_ui_url: "https://example.com/settings", // URL to the settings page
+ verification_ui_url: "https://example.com/verify", // URL to the verification page
+ name: "My Project", // the name of your project, used in the UI
+ logo_light_url: "https://example.com/logo-light.png", // URL to the light theme logo
+ recovery_enabled: true, // controls whether the "Forgot Password" button is shown
+ registration_enabled: true, // controls whether the "Register" button in the footer is shown
+ verification_enabled: true,
+
+ locale_behavior: "respect_accept_language", // currently unused
+}
+```
+
+After defining the configuration, you can pass it to the ``, ``, ``, ``, and
+`` components as a prop:
+
+```tsx title="App.tsx"
+import { Login } from "@ory/elements-react/theme"
+import { OryProvider } from "@ory/elements-react"
+
+import { projectConfig } from "./projectConfig" // import your project configuration
+
+function App() {
+ const flow = // fetch or create a flow object for login, registration, etc.
+ return
+}
+```
+
+If you're building your own components, you can pass it to the `OryProvider` to make it available to all Ory Elements components:
+
+```tsx title="App.tsx"
+import { OryProvider } from "@ory/elements-react"
+import { projectConfig } from "./projectConfig" // import your project configuration
+
+function App() {
+ return {/* Your application components */}
+}
+```
+
+### UI URLs
+
+To set the URLs for various UI components, you can use the following properties in the `AccountExperienceConfiguration`:
+
+```typescript title="projectConfig.ts"
+const projectConfig: AccountExperienceConfiguration = {
+ login_ui_url: "https://example.com/login",
+ registration_ui_url: "https://example.com/register",
+ recovery_ui_url: "https://example.com/recovery",
+ settings_ui_url: "https://example.com/settings",
+ verification_ui_url: "https://example.com/verify",
+ // ....
+}
+```
+
+These will be used when the respective actions are triggered, such as when a user needs to log in, register, or recover their
+account and should match the URLs of your application's UI. You can also set the `error_ui_url` to handle errors in a custom way:
+
+```typescript title="projectConfig.ts"
+const projectConfig: AccountExperienceConfiguration = {
+ error_ui_url: "https://example.com/error",
+ // ....
+}
+```
+
+### Logos
+
+To set the logos for the light theme, you can use the following properties:
+
+```typescript title="projectConfig.ts"
+const projectConfig: AccountExperienceConfiguration = {
+ logo_light_url: "https://example.com/logo-light.png",
+ // ....
+}
+```
+
+### Locale (i18n)
+
+To set a default locale:
+
+```typescript title="projectConfig.ts"
+const projectConfig: AccountExperienceConfiguration = {
+ default_locale: "en",
+ // ....
+}
+```
+
+For more advanced localization options, such as providing custom translations, refer to the
+[Internationalization guide](./03_internationalization.mdx).
+
+Reference:
+
+- [OryClientConfiguration](../reference/@ory/elements-react/interfaces/OryClientConfiguration.md)
+
+## SDK configuration
+
+The `sdk` configuration is used to configure the Ory SDK client that is used by Ory Elements. This includes settings such as the
+base URL for the Ory API. You can set the SDK configuration globally in your application, and it will be used by all Ory Elements
+components. You can define the SDK configuration like this:
+
+```ts title="sdkConfig.ts"
+import { OryClientConfiguration } from "@ory/elements-react"
+export const sdkConfig: OryClientConfiguration = {
+ sdk: {
+ baseUrl: "https://api.example.com/", // base URL for the Ory API
+ options: {
+ headers: {
+ "X-Custom-Header": "value", // custom headers for the SDK requests
+ },
+ middlewares: [], // custom middlewares for the SDK requests
+ // other options for the SDK requests
+ },
+ },
+}
+```
+
+:::note
+
+If you're running against a standard Ory Network project you don't need to add any special headers or middlewares. Set the
+`baseUrl` to your project's URL as listed on under **API endpoints**.
+
+:::
+
+Typically, this URL is the same as the one you use to access your Ory services, such as Ory Kratos or Ory Hydra. It is important
+to ensure that the base URL is correctly set to match your Ory deployment.
+
+After defining the SDK configuration, you can pass it to the `` component:
+
+```tsx title="App.tsx"
+import { OryProvider } from "@ory/elements-react"
+import { sdkConfig } from "./sdkConfig" // import your SDK configuration
+import { projectConfig } from "./projectConfig" // import your project configuration
+
+function App() {
+ return {/* Your application components */}
+}
+```
+
+### Base URL
+
+If the `baseUrl` property in the `sdk` configuration is unset, the base URL can be set via the environment variable `ORY_SDK_URL`.
+
+In development environments, if neither is set, Ory Elements tries to "guess" the base URL by looking at the current origin of the
+page.
+
+For code that is executed in the server side rendering part of the application, the base URL is set to the value of the
+`__NEXT_PRIVATE_ORIGIN` or `VERCEL_URL` environment variable (for Vercel preview environments), if available. If neither is found,
+an error is thrown.
+
+For code that is run in the browser, the base URL is set to the current origin of the page (via `window.location.origin`), which
+is typically the URL of your application. Make sure to use the
+[Ory middleware](../reference/@ory/nextjs/middleware/functions/createOryMiddleware.md), so that Ory's self-service API endpoints
+are available at the correct paths, such as `/self-service/login`, `/self-service/registration`, etc. on the same origin as your
+application. This is the default behavior when using Ory Elements in a Next.js application with the Ory middleware.
+
+:::caution
+
+In production environments it is required to explicitly set the `baseUrl` or `ORY_SDK_URL` environment variable to ensure that the
+Ory SDK client communicates with the correct Ory services.
+
+:::
diff --git a/docs/elements/guides/05_migration_0x.mdx b/docs/elements/guides/05_migration_0x.mdx
new file mode 100644
index 0000000000..42fba28ad8
--- /dev/null
+++ b/docs/elements/guides/05_migration_0x.mdx
@@ -0,0 +1,82 @@
+---
+id: migration-0x
+title: Migration from Ory Elements 0.x to 1.x
+sidebar_label: Migration from 0.x to 1.x
+---
+
+This guide will show you how to migrate from Ory Elements 0.x to 1.x.
+
+Ory Elements 1.0 is a complete rewrite of the Ory Elements 0.x library. It is not backwards compatible with 0.x.
+
+## Migration from Ory Elements 0.x to 1.x
+
+### Update the package name
+
+```bash
+npm install @ory/elements-react
+```
+
+And change the import path to the new package name.
+
+### ``
+
+Instead of exporting a single UserAuthCard component, the 1.0 version exports a set of components for each flow.
+
+- In most cases, you can simply replace `` with ``, ``, ``, ``,
+ or `` depending on the flow you are using.
+- Remove the `additionalProps` prop from the components and pass in the configuration object as a prop to each component. You can
+ read more about the configuration in the [configuration guide](./04_configuration.mdx).
+- You no longer need to handle the onSubmit event of the components. The components now handle the form submission automatically
+ based on the configuration object.
+- `includeScripts` is no longer supported. You can remove it from props.
+- `cardImage` is no longer supported. You can remove it from props. Use the `logo_light_url` property in the configuration object
+ to set the logo.
+- `className` is no longer supported. You can remove it from props. Read the [theming guide](./02_theming.mdx) to learn how to
+ customize the look and feel of the components.
+- `title` is no longer supported. You can remove it from props. Read the [configuration guide](./04_configuration.mdx) to learn
+ how to set the title in the card header.
+- `subtitle` is no longer supported. Instead, the card's subtitle will be determined dynamically based on the flow's state.
+
+### ``
+
+The `` component has been removed. You can now use the `` component to render the consent page.
+
+- Change the `consent` prop to `consentChallenge`.
+- `cardImage` is no longer supported. You can remove it from props. Use the `logo_light_url` property in the configuration object
+ to set the logo.
+- `client_name` will be inferred from the `consentChallenge` prop. You can remove it.
+- `requested_scope` will be inferred from the `consentChallenge` prop. You can remove it.
+- `client` will be inferred from the `consentChallenge` prop. You can remove it.
+- `className` is no longer supported. You can remove it from props. Read the [theming guide](./02_theming.mdx) to learn how to
+ customize the look and feel of the components.
+
+### ``
+
+The `` component has been removed. You can now use the `` component to render the error page.
+
+- `title` is no longer supported. You can remove it from props.
+- `error` now supports more variants. In most cases you can pass in the same object, as before.
+- `backUrl` has been removed.
+- `cardImage` is no longer supported. You can remove it from props. Use the `logo_light_url` property in the configuration object
+ to set the logo.
+- `contactSupportEmail` has been removed.
+- `className` is no longer supported. You can remove it from props. Read the [theming guide](./02_theming.mdx) to learn how to
+ customize the look and feel of the components.
+
+### ``
+
+The `` component has been removed. You can now use the `useLogoutFlow` hook from the "@ory/nextjs/pages" package
+to build your own logout flow component.
+
+### ``, `` & ``
+
+The `` component has been removed. You can now use the `` component to render the settings page.
+
+- `className` is no longer supported. You can remove it from props. Read the [theming guide](./02_theming.mdx) to learn how to
+ customize the look and feel of the components.
+- `dividerClassName` is no longer supported. You can remove it from props. Read the [theming guide](./02_theming.mdx) to learn how
+ to customize the look and feel of the components.
+- `includeScripts` is no longer supported. You can remove it from props.
+- `title` is no longer supported. You can remove it from props. Read the [configuration guide](./04_configuration.mdx) to learn
+ how to set the title in the card header.
+- `method` is no longer supported. You can remove it from props.
diff --git a/docs/elements/guides/06_going_to_production.mdx b/docs/elements/guides/06_going_to_production.mdx
new file mode 100644
index 0000000000..a117f44681
--- /dev/null
+++ b/docs/elements/guides/06_going_to_production.mdx
@@ -0,0 +1,28 @@
+---
+id: going-to-production
+title: Going to Production
+sidebar_label: Going to Production
+---
+
+Ory Elements is designed to be used in production environments. However, there are a few things you should consider when going to
+production.
+
+## Base URL
+
+Make sure to set the `baseURL` to the correct value. This is the base URL of your Ory Elements instance.
+
+```ts title="projectConfig.ts"
+const projectConfig: OryElementsConfiguration = {
+ sdk: {
+ baseURL: "https://$project_slug.projects.oryapis.com/", // Or your custom domain
+ },
+}
+```
+
+Setting this value is important because it ensures that the Ory Elements SDK is able to communicate with the correct Ory API
+instance.
+
+In contrast to development environments, Ory Elements and the Ory APIs should be hosted on the same second level domain to make
+sure that the cookies set by the Ory APIs are accessible by the Ory Elements SDK.
+
+Read more about the `baseURL` in the [Configuration](./04_configuration.mdx#base-url) guide.
diff --git a/docs/elements/index.mdx b/docs/elements/index.mdx
new file mode 100644
index 0000000000..b2b1c67aca
--- /dev/null
+++ b/docs/elements/index.mdx
@@ -0,0 +1,39 @@
+---
+id: index
+title: Ory Elements Introduction
+---
+
+```mdx-code-block
+import CanonicalUrl from "@site/src/components/CanonicalUrl"
+
+
+```
+
+import WelcomePageSection from "@site/src/components/Welcome/welcome"
+import { elements } from "@site/src/pages/_assets/welcome-content"
+import { elementsArchitectureGraph } from "@site/src/pages/_assets/ui-graphs"
+import Mermaid from "@site/src/theme/Mermaid"
+
+
+
+## Overview
+
+Ory Elements is a component library that allows you to build custom user interfaces for Ory self-service flows. It provides a set
+of pre-built components that can be easily integrated into your application, enabling you to create a seamless user experience
+while leveraging Ory's powerful authentication and identity management capabilities.
+
+The following diagram illustrates how Ory Elements fits into the Ory ecosystem and your application architecture:
+
+```mdx-code-block
+
+
+```
+
+It is designed to work with Ory's self-service flows, such as login, registration, settings, verification, and recovery and the
+OAuth2 consent flow. It will automatically adjust to the configured identity schema and configuration of your Ory deployment,
+ensuring that your UI is always in sync with the backend. Ory Elements provides a consistent and user-friendly experience across
+all self-service flows, making it easier for users to interact with your application.
+
+While it's default experience is a great starting point, Ory Elements allows you to customize the look and feel of your UI to
+match your brand and user experience requirements. You can use Ory Elements to build a custom UI that fits your application's
+design and user experience, while still leveraging Ory's powerful authentication and identity management capabilities.
diff --git a/docs/elements/reference/@ory/elements-react/functions/OryCard.md b/docs/elements/reference/@ory/elements-react/functions/OryCard.md
new file mode 100644
index 0000000000..b8e797c7d2
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/functions/OryCard.md
@@ -0,0 +1,22 @@
+# ``
+
+```ts
+function OryCard(props: { children?: ReactNode }): Element
+```
+
+The root component of the Ory Card.
+
+This can be used to build fully custom implementations of the Ory Flows.
+
+However, you most likely want to override the individual components instead.
+
+## Parameters
+
+| Parameter | Type | Description |
+| ----------------- | ------------------------------- | ------------------------------------------------------------------ |
+| `props` | \{ `children?`: `ReactNode`; \} | pass children to render instead of the default Ory Card components |
+| `props.children?` | `ReactNode` | - |
+
+## Returns
+
+`Element`
diff --git a/docs/elements/reference/@ory/elements-react/functions/OryCardContent.md b/docs/elements/reference/@ory/elements-react/functions/OryCardContent.md
new file mode 100644
index 0000000000..0bf5213359
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/functions/OryCardContent.md
@@ -0,0 +1,23 @@
+# ``
+
+```ts
+function OryCardContent(props: { children?: ReactNode }): Element
+```
+
+A component that renders the content of the Ory Card. This is the main content of the card, such as the flow's form, with it's
+input fields and messages.
+
+You can use this component to build fully custom implementations of the Ory Flows.
+
+However, you most likely want to override the individual components instead.
+
+## Parameters
+
+| Parameter | Type | Description |
+| ----------------- | ------------------------------- | ------------------------------------------------------------------ |
+| `props` | \{ `children?`: `ReactNode`; \} | pass children to render instead of the default Ory Card components |
+| `props.children?` | `ReactNode` | - |
+
+## Returns
+
+`Element`
diff --git a/docs/elements/reference/@ory/elements-react/functions/OryCardFooter.md b/docs/elements/reference/@ory/elements-react/functions/OryCardFooter.md
new file mode 100644
index 0000000000..9c98985d3f
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/functions/OryCardFooter.md
@@ -0,0 +1,11 @@
+# ``
+
+```ts
+function OryCardFooter(): Element
+```
+
+## Returns
+
+`Element`
+
+The footer of a card component.
diff --git a/docs/elements/reference/@ory/elements-react/functions/OryCardHeader.md b/docs/elements/reference/@ory/elements-react/functions/OryCardHeader.md
new file mode 100644
index 0000000000..374c8811a5
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/functions/OryCardHeader.md
@@ -0,0 +1,13 @@
+# ``
+
+```ts
+function OryCardHeader(): Element
+```
+
+Returns the header of the Ory Card.
+
+## Returns
+
+`Element`
+
+The header of the Ory Card.
diff --git a/docs/elements/reference/@ory/elements-react/functions/OryCardValidationMessages.md b/docs/elements/reference/@ory/elements-react/functions/OryCardValidationMessages.md
new file mode 100644
index 0000000000..ede14af139
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/functions/OryCardValidationMessages.md
@@ -0,0 +1,21 @@
+# ``
+
+```ts
+function OryCardValidationMessages(__namedParameters: { hiddenMessageIds?: number[] }): null | Element
+```
+
+Renders the [OryFlowComponents.Message.Content](../type-aliases/OryFlowComponents.md#message) component for each message in the
+current flow.
+
+See also [useOryFlow](useOryFlow.md)
+
+## Parameters
+
+| Parameter | Type | Description |
+| ------------------------------------- | -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `__namedParameters` | \{ `hiddenMessageIds?`: `number`[]; \} | - |
+| `__namedParameters.hiddenMessageIds?` | `number`[] | An array of message IDs that should be hidden. This is useful for hiding specific messages that are not relevant to the user or are rendered elsewhere. If not provided, the default list of message IDs to hide will be used. **Default** `[1040009, 1060003, 1080003, 1010004, 1010014, 1040005, 1010016, 1010003]` **See** https://www.ory.com/docs/kratos/concepts/ui-messages |
+
+## Returns
+
+`null` \| `Element`
diff --git a/docs/elements/reference/@ory/elements-react/functions/OryConfigurationProvider.md b/docs/elements/reference/@ory/elements-react/functions/OryConfigurationProvider.md
new file mode 100644
index 0000000000..e8e9320207
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/functions/OryConfigurationProvider.md
@@ -0,0 +1,29 @@
+# ``
+
+```ts
+function OryConfigurationProvider(props: {
+ children?: ReactNode
+ project?: Partial
+ sdk?: {
+ options?: Partial
+ url?: string
+ }
+}): Element
+```
+
+The `OryConfigurationProvider` component provides the Ory Elements configuration to its children.
+
+## Parameters
+
+| Parameter | Type | Description |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | \{ `children?`: `ReactNode`; `project?`: `Partial`\<`AccountExperienceConfiguration`\>; `sdk?`: \{ `options?`: `Partial`\<`ConfigurationParameters`\>; `url?`: `string`; \}; \} | The properties for the OryConfigurationProvider component. |
+| `props.children?` | `ReactNode` | - |
+| `props.project?` | `Partial`\<`AccountExperienceConfiguration`\> | This configuration is used to customize the behavior and appearance of Ory Elements. |
+| `props.sdk?` | \{ `options?`: `Partial`\<`ConfigurationParameters`\>; `url?`: `string`; \} | The Ory SDK configuration to use. If not provided, the SDK URL will be determined automatically based on the environment. Always required for production environments. |
+| `props.sdk.options?` | `Partial`\<`ConfigurationParameters`\> | Additional parameters for the Ory SDK configuration. This can include options like headers, credentials, and other settings. |
+| `props.sdk.url?` | `string` | The URL the Ory SDK should connect to. This is typically the base URL of your Ory instance. |
+
+## Returns
+
+`Element`
diff --git a/docs/elements/reference/@ory/elements-react/functions/OryConsentCard.md b/docs/elements/reference/@ory/elements-react/functions/OryConsentCard.md
new file mode 100644
index 0000000000..6f8d06ae46
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/functions/OryConsentCard.md
@@ -0,0 +1,13 @@
+# ``
+
+```ts
+function OryConsentCard(): Element
+```
+
+The `OryConsentCard` component renders a card for displaying the OAuth2 consent flow.
+
+## Returns
+
+`Element`
+
+The consent card component.
diff --git a/docs/elements/reference/@ory/elements-react/functions/OryForm.md b/docs/elements/reference/@ory/elements-react/functions/OryForm.md
new file mode 100644
index 0000000000..95b2399c29
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/functions/OryForm.md
@@ -0,0 +1,24 @@
+# ``
+
+```ts
+function OryForm(props: {
+ children?: ReactNode
+ onAfterSubmit?: (method: undefined | string | number | boolean) => void
+}): Element
+```
+
+The OryForm component is the main form container for Ory flows.
+
+It renders the form with the correct action and method, and handles the submission of the form.
+
+## Parameters
+
+| Parameter | Type | Description |
+| ---------------------- | ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | \{ `children?`: `ReactNode`; `onAfterSubmit?`: (`method`: `undefined` \| `string` \| `number` \| `boolean`) => `void`; \} | The props for the OryForm component. |
+| `props.children?` | `ReactNode` | - |
+| `props.onAfterSubmit?` | (`method`: `undefined` \| `string` \| `number` \| `boolean`) => `void` | A callback function that is called after the form is submitted. It is always called after the form is submitted, unless the form submission is prevented by client side validation or the API response dictated that the client should be redirected |
+
+## Returns
+
+`Element`
diff --git a/docs/elements/reference/@ory/elements-react/functions/OryFormGroupDivider.md b/docs/elements/reference/@ory/elements-react/functions/OryFormGroupDivider.md
new file mode 100644
index 0000000000..7de427ce65
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/functions/OryFormGroupDivider.md
@@ -0,0 +1,16 @@
+# ``
+
+```ts
+function OryFormGroupDivider(): null | Element
+```
+
+Renders the [OryFlowComponents.Card.Divider](../type-aliases/OryFlowComponents.md#card) between the groups of nodes in the Ory
+Form.
+
+You can use this component to build fully custom implementations of the Ory Flows.
+
+However, you most likely want to override the individual components instead.
+
+## Returns
+
+`null` \| `Element`
diff --git a/docs/elements/reference/@ory/elements-react/functions/OryFormSsoButtons.md b/docs/elements/reference/@ory/elements-react/functions/OryFormSsoButtons.md
new file mode 100644
index 0000000000..6cfac75996
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/functions/OryFormSsoButtons.md
@@ -0,0 +1,13 @@
+# ``
+
+```ts
+function OryFormSsoButtons(): null | Element
+```
+
+Renders the flow's OIDC buttons.
+
+## Returns
+
+`null` \| `Element`
+
+a React component that renders the OIDC buttons.
diff --git a/docs/elements/reference/@ory/elements-react/functions/OryFormSsoForm.md b/docs/elements/reference/@ory/elements-react/functions/OryFormSsoForm.md
new file mode 100644
index 0000000000..61346ec96b
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/functions/OryFormSsoForm.md
@@ -0,0 +1,15 @@
+# ``
+
+```ts
+function OryFormSsoForm(): null | Element
+```
+
+The `OryFormSsoForm` component renders the Ory Form for SSO methods (OIDC and SAML).
+
+It needs to be its own form, as the OIDC buttons are form submits but are not related to the main form.
+
+## Returns
+
+`null` \| `Element`
+
+a React component that renders the Ory Form for SSO methods.
diff --git a/docs/elements/reference/@ory/elements-react/functions/OryPageHeader.md b/docs/elements/reference/@ory/elements-react/functions/OryPageHeader.md
new file mode 100644
index 0000000000..e3b4e4fdc3
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/functions/OryPageHeader.md
@@ -0,0 +1,16 @@
+# ``
+
+```ts
+function OryPageHeader(): Element
+```
+
+The OryPageHeader component renders the header of the page.
+
+Customize the header by providing a custom [OryFlowComponents.Page.Header](../type-aliases/OryFlowComponents.md#page) component in
+the `components` prop of the [OryProvider](OryProvider.md).
+
+## Returns
+
+`Element`
+
+a React component that renders the page header.
diff --git a/docs/elements/reference/@ory/elements-react/functions/OryProvider.md b/docs/elements/reference/@ory/elements-react/functions/OryProvider.md
new file mode 100644
index 0000000000..562dac528a
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/functions/OryProvider.md
@@ -0,0 +1,42 @@
+# ``
+
+```ts
+function OryProvider(props: OryProviderProps): Element
+```
+
+OryProvider is a React component that provides the necessary context for rendering Ory flows.
+
+It wraps the application in several context providers, including [OryConfigurationProvider](OryConfigurationProvider.md).
+
+You can use this component to set up the Ory SDK, provide custom translations, and specify the components to use for rendering Ory
+flows.
+
+## Parameters
+
+| Parameter | Type | Description |
+| --------- | --------------------------------------------------------- | --------------------------------------------- |
+| `props` | [`OryProviderProps`](../type-aliases/OryProviderProps.md) | The properties for the OryProvider component. |
+
+## Returns
+
+`Element`
+
+## Example
+
+```tsx
+import { OryProvider, LoginFlow, OryFlowComponents, OryClientConfiguration } from "@ory/elements-react"
+
+export type Props = {
+ flow: LoginFlow
+ components: OryFlowComponents
+ config: OryClientConfiguration
+}
+
+function App({ flow, config, children, components }: PropsWithChildren) {
+ return (
+
+ {children}
+
+ )
+}
+```
diff --git a/docs/elements/reference/@ory/elements-react/functions/OrySelfServiceFlowCard.md b/docs/elements/reference/@ory/elements-react/functions/OrySelfServiceFlowCard.md
new file mode 100644
index 0000000000..50f289fa28
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/functions/OrySelfServiceFlowCard.md
@@ -0,0 +1,32 @@
+# ``
+
+```ts
+function OrySelfServiceFlowCard(): Element
+```
+
+The `OrySelfServiceFlowCard` component is an umbrella component that can render the self-service flows.
+
+Note: prefer using the [\ component](../theme/functions/Login.md), etc. directly instead of this component.
+
+It renders different forms based on the current flow state, such as providing an identifier, entering a password or one time code
+or selecting a method for authentication.
+
+The component must be use within an [OryProvider](OryProvider.md) that provides the flow context and components to use.
+
+## Returns
+
+`Element`
+
+The Ory Two-Step Card component that renders different forms based on the current flow state.
+
+## Example
+
+```jsx
+import { OrySelfServiceFlowCard } from "@ory/elements-react";
+
+function MyComponent() {
+ return
+
+ ;
+}
+```
diff --git a/docs/elements/reference/@ory/elements-react/functions/OrySettingsCard.md b/docs/elements/reference/@ory/elements-react/functions/OrySettingsCard.md
new file mode 100644
index 0000000000..2c6d09aba1
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/functions/OrySettingsCard.md
@@ -0,0 +1,16 @@
+# ``
+
+```ts
+function OrySettingsCard(): Element
+```
+
+Renders the Ory Settings Card component.
+
+This component is used to display the settings flow for the user. It utilizes the `useOryFlow` hook to access the current flow and
+renders the nodes with components provided by the Ory Elements context.
+
+## Returns
+
+`Element`
+
+The Ory Settings Card component that renders the settings flow.
diff --git a/docs/elements/reference/@ory/elements-react/functions/OrySettingsFormSection.md b/docs/elements/reference/@ory/elements-react/functions/OrySettingsFormSection.md
new file mode 100644
index 0000000000..914d10bdf8
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/functions/OrySettingsFormSection.md
@@ -0,0 +1,595 @@
+# ``
+
+```ts
+function OrySettingsFormSection(props: {
+ about?: string;
+ acceptCharset?: string;
+ accessKey?: string;
+ aria-activedescendant?: string;
+ aria-atomic?: Booleanish;
+ aria-autocomplete?: "inline" | "list" | "none" | "both";
+ aria-braillelabel?: string;
+ aria-brailleroledescription?: string;
+ aria-busy?: Booleanish;
+ aria-checked?: boolean | "true" | "false" | "mixed";
+ aria-colcount?: number;
+ aria-colindex?: number;
+ aria-colindextext?: string;
+ aria-colspan?: number;
+ aria-controls?: string;
+ aria-current?: boolean | "true" | "false" | "time" | "date" | "page" | "step" | "location";
+ aria-describedby?: string;
+ aria-description?: string;
+ aria-details?: string;
+ aria-disabled?: Booleanish;
+ aria-dropeffect?: "copy" | "link" | "none" | "execute" | "move" | "popup";
+ aria-errormessage?: string;
+ aria-expanded?: Booleanish;
+ aria-flowto?: string;
+ aria-grabbed?: Booleanish;
+ aria-haspopup?: | boolean
+ | "true"
+ | "false"
+ | "dialog"
+ | "grid"
+ | "listbox"
+ | "menu"
+ | "tree";
+ aria-hidden?: Booleanish;
+ aria-invalid?: boolean | "true" | "false" | "grammar" | "spelling";
+ aria-keyshortcuts?: string;
+ aria-label?: string;
+ aria-labelledby?: string;
+ aria-level?: number;
+ aria-live?: "off" | "assertive" | "polite";
+ aria-modal?: Booleanish;
+ aria-multiline?: Booleanish;
+ aria-multiselectable?: Booleanish;
+ aria-orientation?: "horizontal" | "vertical";
+ aria-owns?: string;
+ aria-placeholder?: string;
+ aria-posinset?: number;
+ aria-pressed?: boolean | "true" | "false" | "mixed";
+ aria-readonly?: Booleanish;
+ aria-relevant?: | "text"
+ | "all"
+ | "additions"
+ | "additions removals"
+ | "additions text"
+ | "removals"
+ | "removals additions"
+ | "removals text"
+ | "text additions"
+ | "text removals";
+ aria-required?: Booleanish;
+ aria-roledescription?: string;
+ aria-rowcount?: number;
+ aria-rowindex?: number;
+ aria-rowindextext?: string;
+ aria-rowspan?: number;
+ aria-selected?: Booleanish;
+ aria-setsize?: number;
+ aria-sort?: "none" | "other" | "ascending" | "descending";
+ aria-valuemax?: number;
+ aria-valuemin?: number;
+ aria-valuenow?: number;
+ aria-valuetext?: string;
+ autoCapitalize?: | string & {
+ }
+ | "none"
+ | "off"
+ | "on"
+ | "sentences"
+ | "words"
+ | "characters";
+ autoComplete?: string;
+ autoCorrect?: string;
+ autoFocus?: boolean;
+ autoSave?: string;
+ children?: ReactNode;
+ className?: string;
+ color?: string;
+ content?: string;
+ contentEditable?: Booleanish | "inherit" | "plaintext-only";
+ contextMenu?: string;
+ dangerouslySetInnerHTML?: {
+ __html: string | TrustedHTML;
+ };
+ datatype?: string;
+ defaultChecked?: boolean;
+ defaultValue?: string | number | readonly string[];
+ dir?: string;
+ draggable?: Booleanish;
+ encType?: string;
+ enterKeyHint?: "search" | "previous" | "enter" | "done" | "go" | "next" | "send";
+ exportparts?: string;
+ hidden?: boolean;
+ id?: string;
+ inlist?: any;
+ inputMode?: | "text"
+ | "search"
+ | "none"
+ | "email"
+ | "tel"
+ | "url"
+ | "numeric"
+ | "decimal";
+ is?: string;
+ itemID?: string;
+ itemProp?: string;
+ itemRef?: string;
+ itemScope?: boolean;
+ itemType?: string;
+ key?: null | Key;
+ lang?: string;
+ name?: string;
+ nodes?: UiNode[];
+ nonce?: string;
+ noValidate?: boolean;
+ onAbort?: ReactEventHandler;
+ onAbortCapture?: ReactEventHandler;
+ onAnimationEnd?: AnimationEventHandler;
+ onAnimationEndCapture?: AnimationEventHandler;
+ onAnimationIteration?: AnimationEventHandler;
+ onAnimationIterationCapture?: AnimationEventHandler;
+ onAnimationStart?: AnimationEventHandler;
+ onAnimationStartCapture?: AnimationEventHandler;
+ onAuxClick?: MouseEventHandler;
+ onAuxClickCapture?: MouseEventHandler;
+ onBeforeInput?: FormEventHandler;
+ onBeforeInputCapture?: FormEventHandler;
+ onBlur?: FocusEventHandler;
+ onBlurCapture?: FocusEventHandler;
+ onCanPlay?: ReactEventHandler;
+ onCanPlayCapture?: ReactEventHandler;
+ onCanPlayThrough?: ReactEventHandler;
+ onCanPlayThroughCapture?: ReactEventHandler;
+ onChange?: FormEventHandler;
+ onChangeCapture?: FormEventHandler;
+ onClick?: MouseEventHandler;
+ onClickCapture?: MouseEventHandler;
+ onCompositionEnd?: CompositionEventHandler;
+ onCompositionEndCapture?: CompositionEventHandler;
+ onCompositionStart?: CompositionEventHandler;
+ onCompositionStartCapture?: CompositionEventHandler;
+ onCompositionUpdate?: CompositionEventHandler;
+ onCompositionUpdateCapture?: CompositionEventHandler;
+ onContextMenu?: MouseEventHandler;
+ onContextMenuCapture?: MouseEventHandler;
+ onCopy?: ClipboardEventHandler;
+ onCopyCapture?: ClipboardEventHandler;
+ onCut?: ClipboardEventHandler;
+ onCutCapture?: ClipboardEventHandler;
+ onDoubleClick?: MouseEventHandler;
+ onDoubleClickCapture?: MouseEventHandler;
+ onDrag?: DragEventHandler;
+ onDragCapture?: DragEventHandler;
+ onDragEnd?: DragEventHandler;
+ onDragEndCapture?: DragEventHandler;
+ onDragEnter?: DragEventHandler;
+ onDragEnterCapture?: DragEventHandler;
+ onDragExit?: DragEventHandler;
+ onDragExitCapture?: DragEventHandler;
+ onDragLeave?: DragEventHandler;
+ onDragLeaveCapture?: DragEventHandler;
+ onDragOver?: DragEventHandler;
+ onDragOverCapture?: DragEventHandler;
+ onDragStart?: DragEventHandler;
+ onDragStartCapture?: DragEventHandler;
+ onDrop?: DragEventHandler;
+ onDropCapture?: DragEventHandler;
+ onDurationChange?: ReactEventHandler;
+ onDurationChangeCapture?: ReactEventHandler;
+ onEmptied?: ReactEventHandler;
+ onEmptiedCapture?: ReactEventHandler;
+ onEncrypted?: ReactEventHandler;
+ onEncryptedCapture?: ReactEventHandler;
+ onEnded?: ReactEventHandler;
+ onEndedCapture?: ReactEventHandler;
+ onError?: ReactEventHandler;
+ onErrorCapture?: ReactEventHandler;
+ onFocus?: FocusEventHandler;
+ onFocusCapture?: FocusEventHandler;
+ onGotPointerCapture?: PointerEventHandler;
+ onGotPointerCaptureCapture?: PointerEventHandler;
+ onInput?: FormEventHandler;
+ onInputCapture?: FormEventHandler;
+ onInvalid?: FormEventHandler;
+ onInvalidCapture?: FormEventHandler;
+ onKeyDown?: KeyboardEventHandler;
+ onKeyDownCapture?: KeyboardEventHandler;
+ onKeyPress?: KeyboardEventHandler;
+ onKeyPressCapture?: KeyboardEventHandler;
+ onKeyUp?: KeyboardEventHandler;
+ onKeyUpCapture?: KeyboardEventHandler;
+ onLoad?: ReactEventHandler;
+ onLoadCapture?: ReactEventHandler;
+ onLoadedData?: ReactEventHandler;
+ onLoadedDataCapture?: ReactEventHandler;
+ onLoadedMetadata?: ReactEventHandler;
+ onLoadedMetadataCapture?: ReactEventHandler;
+ onLoadStart?: ReactEventHandler;
+ onLoadStartCapture?: ReactEventHandler;
+ onLostPointerCapture?: PointerEventHandler;
+ onLostPointerCaptureCapture?: PointerEventHandler;
+ onMouseDown?: MouseEventHandler;
+ onMouseDownCapture?: MouseEventHandler;
+ onMouseEnter?: MouseEventHandler;
+ onMouseLeave?: MouseEventHandler;
+ onMouseMove?: MouseEventHandler;
+ onMouseMoveCapture?: MouseEventHandler;
+ onMouseOut?: MouseEventHandler;
+ onMouseOutCapture?: MouseEventHandler;
+ onMouseOver?: MouseEventHandler;
+ onMouseOverCapture?: MouseEventHandler;
+ onMouseUp?: MouseEventHandler;
+ onMouseUpCapture?: MouseEventHandler;
+ onPaste?: ClipboardEventHandler;
+ onPasteCapture?: ClipboardEventHandler;
+ onPause?: ReactEventHandler;
+ onPauseCapture?: ReactEventHandler;
+ onPlay?: ReactEventHandler;
+ onPlayCapture?: ReactEventHandler;
+ onPlaying?: ReactEventHandler;
+ onPlayingCapture?: ReactEventHandler;
+ onPointerCancel?: PointerEventHandler;
+ onPointerCancelCapture?: PointerEventHandler;
+ onPointerDown?: PointerEventHandler;
+ onPointerDownCapture?: PointerEventHandler;
+ onPointerEnter?: PointerEventHandler;
+ onPointerLeave?: PointerEventHandler;
+ onPointerMove?: PointerEventHandler;
+ onPointerMoveCapture?: PointerEventHandler;
+ onPointerOut?: PointerEventHandler;
+ onPointerOutCapture?: PointerEventHandler;
+ onPointerOver?: PointerEventHandler;
+ onPointerOverCapture?: PointerEventHandler;
+ onPointerUp?: PointerEventHandler;
+ onPointerUpCapture?: PointerEventHandler;
+ onProgress?: ReactEventHandler;
+ onProgressCapture?: ReactEventHandler;
+ onRateChange?: ReactEventHandler;
+ onRateChangeCapture?: ReactEventHandler;
+ onReset?: FormEventHandler;
+ onResetCapture?: FormEventHandler;
+ onScroll?: UIEventHandler;
+ onScrollCapture?: UIEventHandler;
+ onSeeked?: ReactEventHandler;
+ onSeekedCapture?: ReactEventHandler;
+ onSeeking?: ReactEventHandler;
+ onSeekingCapture?: ReactEventHandler;
+ onSelect?: ReactEventHandler;
+ onSelectCapture?: ReactEventHandler;
+ onStalled?: ReactEventHandler;
+ onStalledCapture?: ReactEventHandler;
+ onSubmitCapture?: FormEventHandler;
+ onSuspend?: ReactEventHandler;
+ onSuspendCapture?: ReactEventHandler;
+ onTimeUpdate?: ReactEventHandler;
+ onTimeUpdateCapture?: ReactEventHandler;
+ onTouchCancel?: TouchEventHandler;
+ onTouchCancelCapture?: TouchEventHandler;
+ onTouchEnd?: TouchEventHandler;
+ onTouchEndCapture?: TouchEventHandler;
+ onTouchMove?: TouchEventHandler;
+ onTouchMoveCapture?: TouchEventHandler;
+ onTouchStart?: TouchEventHandler;
+ onTouchStartCapture?: TouchEventHandler;
+ onTransitionEnd?: TransitionEventHandler;
+ onTransitionEndCapture?: TransitionEventHandler;
+ onVolumeChange?: ReactEventHandler;
+ onVolumeChangeCapture?: ReactEventHandler;
+ onWaiting?: ReactEventHandler;
+ onWaitingCapture?: ReactEventHandler;
+ onWheel?: WheelEventHandler;
+ onWheelCapture?: WheelEventHandler;
+ part?: string;
+ prefix?: string;
+ property?: string;
+ radioGroup?: string;
+ rel?: string;
+ resource?: string;
+ results?: number;
+ rev?: string;
+ role?: AriaRole;
+ security?: string;
+ slot?: string;
+ spellCheck?: Booleanish;
+ style?: CSSProperties;
+ suppressContentEditableWarning?: boolean;
+ suppressHydrationWarning?: boolean;
+ tabIndex?: number;
+ target?: string;
+ title?: string;
+ translate?: "no" | "yes";
+ typeof?: string;
+ unselectable?: "off" | "on";
+ vocab?: string;
+}): Element;
+```
+
+OrySettingsFormSection is a component that provides a form section for Ory settings.
+
+Can be used independently to render a form section with Ory nodes.
+
+## Parameters
+
+| Parameter | Type | Description |
+| --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | \{ `about?`: `string`; `acceptCharset?`: `string`; `accessKey?`: `string`; `aria-activedescendant?`: `string`; `aria-atomic?`: `Booleanish`; `aria-autocomplete?`: `"inline"` \| `"list"` \| `"none"` \| `"both"`; `aria-braillelabel?`: `string`; `aria-brailleroledescription?`: `string`; `aria-busy?`: `Booleanish`; `aria-checked?`: `boolean` \| `"true"` \| `"false"` \| `"mixed"`; `aria-colcount?`: `number`; `aria-colindex?`: `number`; `aria-colindextext?`: `string`; `aria-colspan?`: `number`; `aria-controls?`: `string`; `aria-current?`: `boolean` \| `"true"` \| `"false"` \| `"time"` \| `"date"` \| `"page"` \| `"step"` \| `"location"`; `aria-describedby?`: `string`; `aria-description?`: `string`; `aria-details?`: `string`; `aria-disabled?`: `Booleanish`; `aria-dropeffect?`: `"copy"` \| `"link"` \| `"none"` \| `"execute"` \| `"move"` \| `"popup"`; `aria-errormessage?`: `string`; `aria-expanded?`: `Booleanish`; `aria-flowto?`: `string`; `aria-grabbed?`: `Booleanish`; `aria-haspopup?`: \| `boolean` \| `"true"` \| `"false"` \| `"dialog"` \| `"grid"` \| `"listbox"` \| `"menu"` \| `"tree"`; `aria-hidden?`: `Booleanish`; `aria-invalid?`: `boolean` \| `"true"` \| `"false"` \| `"grammar"` \| `"spelling"`; `aria-keyshortcuts?`: `string`; `aria-label?`: `string`; `aria-labelledby?`: `string`; `aria-level?`: `number`; `aria-live?`: `"off"` \| `"assertive"` \| `"polite"`; `aria-modal?`: `Booleanish`; `aria-multiline?`: `Booleanish`; `aria-multiselectable?`: `Booleanish`; `aria-orientation?`: `"horizontal"` \| `"vertical"`; `aria-owns?`: `string`; `aria-placeholder?`: `string`; `aria-posinset?`: `number`; `aria-pressed?`: `boolean` \| `"true"` \| `"false"` \| `"mixed"`; `aria-readonly?`: `Booleanish`; `aria-relevant?`: \| `"text"` \| `"all"` \| `"additions"` \| `"additions removals"` \| `"additions text"` \| `"removals"` \| `"removals additions"` \| `"removals text"` \| `"text additions"` \| `"text removals"`; `aria-required?`: `Booleanish`; `aria-roledescription?`: `string`; `aria-rowcount?`: `number`; `aria-rowindex?`: `number`; `aria-rowindextext?`: `string`; `aria-rowspan?`: `number`; `aria-selected?`: `Booleanish`; `aria-setsize?`: `number`; `aria-sort?`: `"none"` \| `"other"` \| `"ascending"` \| `"descending"`; `aria-valuemax?`: `number`; `aria-valuemin?`: `number`; `aria-valuenow?`: `number`; `aria-valuetext?`: `string`; `autoCapitalize?`: \| `string` & \{ \} \| `"none"` \| `"off"` \| `"on"` \| `"sentences"` \| `"words"` \| `"characters"`; `autoComplete?`: `string`; `autoCorrect?`: `string`; `autoFocus?`: `boolean`; `autoSave?`: `string`; `children?`: `ReactNode`; `className?`: `string`; `color?`: `string`; `content?`: `string`; `contentEditable?`: `Booleanish` \| `"inherit"` \| `"plaintext-only"`; `contextMenu?`: `string`; `dangerouslySetInnerHTML?`: \{ `__html`: `string` \| `TrustedHTML`; \}; `datatype?`: `string`; `defaultChecked?`: `boolean`; `defaultValue?`: `string` \| `number` \| readonly `string`[]; `dir?`: `string`; `draggable?`: `Booleanish`; `encType?`: `string`; `enterKeyHint?`: `"search"` \| `"previous"` \| `"enter"` \| `"done"` \| `"go"` \| `"next"` \| `"send"`; `exportparts?`: `string`; `hidden?`: `boolean`; `id?`: `string`; `inlist?`: `any`; `inputMode?`: \| `"text"` \| `"search"` \| `"none"` \| `"email"` \| `"tel"` \| `"url"` \| `"numeric"` \| `"decimal"`; `is?`: `string`; `itemID?`: `string`; `itemProp?`: `string`; `itemRef?`: `string`; `itemScope?`: `boolean`; `itemType?`: `string`; `key?`: `null` \| `Key`; `lang?`: `string`; `name?`: `string`; `nodes?`: `UiNode`[]; `nonce?`: `string`; `noValidate?`: `boolean`; `onAbort?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onAbortCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onAnimationEnd?`: `AnimationEventHandler`\<`HTMLFormElement`\>; `onAnimationEndCapture?`: `AnimationEventHandler`\<`HTMLFormElement`\>; `onAnimationIteration?`: `AnimationEventHandler`\<`HTMLFormElement`\>; `onAnimationIterationCapture?`: `AnimationEventHandler`\<`HTMLFormElement`\>; `onAnimationStart?`: `AnimationEventHandler`\<`HTMLFormElement`\>; `onAnimationStartCapture?`: `AnimationEventHandler`\<`HTMLFormElement`\>; `onAuxClick?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onAuxClickCapture?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onBeforeInput?`: `FormEventHandler`\<`HTMLFormElement`\>; `onBeforeInputCapture?`: `FormEventHandler`\<`HTMLFormElement`\>; `onBlur?`: `FocusEventHandler`\<`HTMLFormElement`\>; `onBlurCapture?`: `FocusEventHandler`\<`HTMLFormElement`\>; `onCanPlay?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onCanPlayCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onCanPlayThrough?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onCanPlayThroughCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onChange?`: `FormEventHandler`\<`HTMLFormElement`\>; `onChangeCapture?`: `FormEventHandler`\<`HTMLFormElement`\>; `onClick?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onClickCapture?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onCompositionEnd?`: `CompositionEventHandler`\<`HTMLFormElement`\>; `onCompositionEndCapture?`: `CompositionEventHandler`\<`HTMLFormElement`\>; `onCompositionStart?`: `CompositionEventHandler`\<`HTMLFormElement`\>; `onCompositionStartCapture?`: `CompositionEventHandler`\<`HTMLFormElement`\>; `onCompositionUpdate?`: `CompositionEventHandler`\<`HTMLFormElement`\>; `onCompositionUpdateCapture?`: `CompositionEventHandler`\<`HTMLFormElement`\>; `onContextMenu?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onContextMenuCapture?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onCopy?`: `ClipboardEventHandler`\<`HTMLFormElement`\>; `onCopyCapture?`: `ClipboardEventHandler`\<`HTMLFormElement`\>; `onCut?`: `ClipboardEventHandler`\<`HTMLFormElement`\>; `onCutCapture?`: `ClipboardEventHandler`\<`HTMLFormElement`\>; `onDoubleClick?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onDoubleClickCapture?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onDrag?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragCapture?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragEnd?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragEndCapture?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragEnter?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragEnterCapture?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragExit?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragExitCapture?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragLeave?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragLeaveCapture?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragOver?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragOverCapture?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragStart?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDragStartCapture?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDrop?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDropCapture?`: `DragEventHandler`\<`HTMLFormElement`\>; `onDurationChange?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onDurationChangeCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onEmptied?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onEmptiedCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onEncrypted?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onEncryptedCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onEnded?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onEndedCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onError?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onErrorCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onFocus?`: `FocusEventHandler`\<`HTMLFormElement`\>; `onFocusCapture?`: `FocusEventHandler`\<`HTMLFormElement`\>; `onGotPointerCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onGotPointerCaptureCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onInput?`: `FormEventHandler`\<`HTMLFormElement`\>; `onInputCapture?`: `FormEventHandler`\<`HTMLFormElement`\>; `onInvalid?`: `FormEventHandler`\<`HTMLFormElement`\>; `onInvalidCapture?`: `FormEventHandler`\<`HTMLFormElement`\>; `onKeyDown?`: `KeyboardEventHandler`\<`HTMLFormElement`\>; `onKeyDownCapture?`: `KeyboardEventHandler`\<`HTMLFormElement`\>; `onKeyPress?`: `KeyboardEventHandler`\<`HTMLFormElement`\>; `onKeyPressCapture?`: `KeyboardEventHandler`\<`HTMLFormElement`\>; `onKeyUp?`: `KeyboardEventHandler`\<`HTMLFormElement`\>; `onKeyUpCapture?`: `KeyboardEventHandler`\<`HTMLFormElement`\>; `onLoad?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onLoadCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onLoadedData?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onLoadedDataCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onLoadedMetadata?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onLoadedMetadataCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onLoadStart?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onLoadStartCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onLostPointerCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onLostPointerCaptureCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onMouseDown?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseDownCapture?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseEnter?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseLeave?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseMove?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseMoveCapture?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseOut?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseOutCapture?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseOver?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseOverCapture?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseUp?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onMouseUpCapture?`: `MouseEventHandler`\<`HTMLFormElement`\>; `onPaste?`: `ClipboardEventHandler`\<`HTMLFormElement`\>; `onPasteCapture?`: `ClipboardEventHandler`\<`HTMLFormElement`\>; `onPause?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onPauseCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onPlay?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onPlayCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onPlaying?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onPlayingCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onPointerCancel?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerCancelCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerDown?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerDownCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerEnter?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerLeave?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerMove?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerMoveCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerOut?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerOutCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerOver?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerOverCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerUp?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onPointerUpCapture?`: `PointerEventHandler`\<`HTMLFormElement`\>; `onProgress?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onProgressCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onRateChange?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onRateChangeCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onReset?`: `FormEventHandler`\<`HTMLFormElement`\>; `onResetCapture?`: `FormEventHandler`\<`HTMLFormElement`\>; `onScroll?`: `UIEventHandler`\<`HTMLFormElement`\>; `onScrollCapture?`: `UIEventHandler`\<`HTMLFormElement`\>; `onSeeked?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onSeekedCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onSeeking?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onSeekingCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onSelect?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onSelectCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onStalled?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onStalledCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onSubmitCapture?`: `FormEventHandler`\<`HTMLFormElement`\>; `onSuspend?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onSuspendCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onTimeUpdate?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onTimeUpdateCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onTouchCancel?`: `TouchEventHandler`\<`HTMLFormElement`\>; `onTouchCancelCapture?`: `TouchEventHandler`\<`HTMLFormElement`\>; `onTouchEnd?`: `TouchEventHandler`\<`HTMLFormElement`\>; `onTouchEndCapture?`: `TouchEventHandler`\<`HTMLFormElement`\>; `onTouchMove?`: `TouchEventHandler`\<`HTMLFormElement`\>; `onTouchMoveCapture?`: `TouchEventHandler`\<`HTMLFormElement`\>; `onTouchStart?`: `TouchEventHandler`\<`HTMLFormElement`\>; `onTouchStartCapture?`: `TouchEventHandler`\<`HTMLFormElement`\>; `onTransitionEnd?`: `TransitionEventHandler`\<`HTMLFormElement`\>; `onTransitionEndCapture?`: `TransitionEventHandler`\<`HTMLFormElement`\>; `onVolumeChange?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onVolumeChangeCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onWaiting?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onWaitingCapture?`: `ReactEventHandler`\<`HTMLFormElement`\>; `onWheel?`: `WheelEventHandler`\<`HTMLFormElement`\>; `onWheelCapture?`: `WheelEventHandler`\<`HTMLFormElement`\>; `part?`: `string`; `prefix?`: `string`; `property?`: `string`; `radioGroup?`: `string`; `rel?`: `string`; `resource?`: `string`; `results?`: `number`; `rev?`: `string`; `role?`: `AriaRole`; `security?`: `string`; `slot?`: `string`; `spellCheck?`: `Booleanish`; `style?`: `CSSProperties`; `suppressContentEditableWarning?`: `boolean`; `suppressHydrationWarning?`: `boolean`; `tabIndex?`: `number`; `target?`: `string`; `title?`: `string`; `translate?`: `"no"` \| `"yes"`; `typeof?`: `string`; `unselectable?`: `"off"` \| `"on"`; `vocab?`: `string`; \} | The properties for the OrySettingsFormSection component. |
+| `props.about?` | `string` | - |
+| `props.acceptCharset?` | `string` | - |
+| `props.accessKey?` | `string` | - |
+| `props.aria-activedescendant?` | `string` | Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. |
+| `props.aria-atomic?` | `Booleanish` | Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. |
+| `props.aria-autocomplete?` | `"inline"` \| `"list"` \| `"none"` \| `"both"` | Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made. |
+| `props.aria-braillelabel?` | `string` | Defines a string value that labels the current element, which is intended to be converted into Braille. **See** aria-label. |
+| `props.aria-brailleroledescription?` | `string` | Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille. **See** aria-roledescription. |
+| `props.aria-busy?` | `Booleanish` | - |
+| `props.aria-checked?` | `boolean` \| `"true"` \| `"false"` \| `"mixed"` | Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. **See** - aria-pressed - aria-selected. |
+| `props.aria-colcount?` | `number` | Defines the total number of columns in a table, grid, or treegrid. **See** aria-colindex. |
+| `props.aria-colindex?` | `number` | Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. **See** - aria-colcount - aria-colspan. |
+| `props.aria-colindextext?` | `string` | Defines a human readable text alternative of aria-colindex. **See** aria-rowindextext. |
+| `props.aria-colspan?` | `number` | Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. **See** - aria-colindex - aria-rowspan. |
+| `props.aria-controls?` | `string` | Identifies the element (or elements) whose contents or presence are controlled by the current element. **See** aria-owns. |
+| `props.aria-current?` | `boolean` \| `"true"` \| `"false"` \| `"time"` \| `"date"` \| `"page"` \| `"step"` \| `"location"` | Indicates the element that represents the current item within a container or set of related elements. |
+| `props.aria-describedby?` | `string` | Identifies the element (or elements) that describes the object. **See** aria-labelledby |
+| `props.aria-description?` | `string` | Defines a string value that describes or annotates the current element. **See** related aria-describedby. |
+| `props.aria-details?` | `string` | Identifies the element that provides a detailed, extended description for the object. **See** aria-describedby. |
+| `props.aria-disabled?` | `Booleanish` | Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. **See** - aria-hidden - aria-readonly. |
+| `props.aria-dropeffect?` | `"copy"` \| `"link"` \| `"none"` \| `"execute"` \| `"move"` \| `"popup"` | Indicates what functions can be performed when a dragged object is released on the drop target. **Deprecated** in ARIA 1.1 |
+| `props.aria-errormessage?` | `string` | Identifies the element that provides an error message for the object. **See** - aria-invalid - aria-describedby. |
+| `props.aria-expanded?` | `Booleanish` | Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. |
+| `props.aria-flowto?` | `string` | Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order. |
+| `props.aria-grabbed?` | `Booleanish` | Indicates an element's "grabbed" state in a drag-and-drop operation. **Deprecated** in ARIA 1.1 |
+| `props.aria-haspopup?` | \| `boolean` \| `"true"` \| `"false"` \| `"dialog"` \| `"grid"` \| `"listbox"` \| `"menu"` \| `"tree"` | Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. |
+| `props.aria-hidden?` | `Booleanish` | Indicates whether the element is exposed to an accessibility API. **See** aria-disabled. |
+| `props.aria-invalid?` | `boolean` \| `"true"` \| `"false"` \| `"grammar"` \| `"spelling"` | Indicates the entered value does not conform to the format expected by the application. **See** aria-errormessage. |
+| `props.aria-keyshortcuts?` | `string` | Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. |
+| `props.aria-label?` | `string` | Defines a string value that labels the current element. **See** aria-labelledby. |
+| `props.aria-labelledby?` | `string` | Identifies the element (or elements) that labels the current element. **See** aria-describedby. |
+| `props.aria-level?` | `number` | Defines the hierarchical level of an element within a structure. |
+| `props.aria-live?` | `"off"` \| `"assertive"` \| `"polite"` | Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. |
+| `props.aria-modal?` | `Booleanish` | Indicates whether an element is modal when displayed. |
+| `props.aria-multiline?` | `Booleanish` | Indicates whether a text box accepts multiple lines of input or only a single line. |
+| `props.aria-multiselectable?` | `Booleanish` | Indicates that the user may select more than one item from the current selectable descendants. |
+| `props.aria-orientation?` | `"horizontal"` \| `"vertical"` | Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. |
+| `props.aria-owns?` | `string` | Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. **See** aria-controls. |
+| `props.aria-placeholder?` | `string` | Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format. |
+| `props.aria-posinset?` | `number` | Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. **See** aria-setsize. |
+| `props.aria-pressed?` | `boolean` \| `"true"` \| `"false"` \| `"mixed"` | Indicates the current "pressed" state of toggle buttons. **See** - aria-checked - aria-selected. |
+| `props.aria-readonly?` | `Booleanish` | Indicates that the element is not editable, but is otherwise operable. **See** aria-disabled. |
+| `props.aria-relevant?` | \| `"text"` \| `"all"` \| `"additions"` \| `"additions removals"` \| `"additions text"` \| `"removals"` \| `"removals additions"` \| `"removals text"` \| `"text additions"` \| `"text removals"` | Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. **See** aria-atomic. |
+| `props.aria-required?` | `Booleanish` | Indicates that user input is required on the element before a form may be submitted. |
+| `props.aria-roledescription?` | `string` | Defines a human-readable, author-localized description for the role of an element. |
+| `props.aria-rowcount?` | `number` | Defines the total number of rows in a table, grid, or treegrid. **See** aria-rowindex. |
+| `props.aria-rowindex?` | `number` | Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. **See** - aria-rowcount - aria-rowspan. |
+| `props.aria-rowindextext?` | `string` | Defines a human readable text alternative of aria-rowindex. **See** aria-colindextext. |
+| `props.aria-rowspan?` | `number` | Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. **See** - aria-rowindex - aria-colspan. |
+| `props.aria-selected?` | `Booleanish` | Indicates the current "selected" state of various widgets. **See** - aria-checked - aria-pressed. |
+| `props.aria-setsize?` | `number` | Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. **See** aria-posinset. |
+| `props.aria-sort?` | `"none"` \| `"other"` \| `"ascending"` \| `"descending"` | Indicates if items in a table or grid are sorted in ascending or descending order. |
+| `props.aria-valuemax?` | `number` | Defines the maximum allowed value for a range widget. |
+| `props.aria-valuemin?` | `number` | Defines the minimum allowed value for a range widget. |
+| `props.aria-valuenow?` | `number` | Defines the current value for a range widget. **See** aria-valuetext. |
+| `props.aria-valuetext?` | `string` | Defines the human readable text alternative of aria-valuenow for a range widget. |
+| `props.autoCapitalize?` | \| `string` & \{ \} \| `"none"` \| `"off"` \| `"on"` \| `"sentences"` \| `"words"` \| `"characters"` | - |
+| `props.autoComplete?` | `string` | - |
+| `props.autoCorrect?` | `string` | - |
+| `props.autoFocus?` | `boolean` | - |
+| `props.autoSave?` | `string` | - |
+| `props.children?` | `ReactNode` | - |
+| `props.className?` | `string` | - |
+| `props.color?` | `string` | - |
+| `props.content?` | `string` | - |
+| `props.contentEditable?` | `Booleanish` \| `"inherit"` \| `"plaintext-only"` | - |
+| `props.contextMenu?` | `string` | - |
+| `props.dangerouslySetInnerHTML?` | \{ `__html`: `string` \| `TrustedHTML`; \} | - |
+| `props.dangerouslySetInnerHTML.__html` | `string` \| `TrustedHTML` | - |
+| `props.datatype?` | `string` | - |
+| `props.defaultChecked?` | `boolean` | - |
+| `props.defaultValue?` | `string` \| `number` \| readonly `string`[] | - |
+| `props.dir?` | `string` | - |
+| `props.draggable?` | `Booleanish` | - |
+| `props.encType?` | `string` | - |
+| `props.enterKeyHint?` | `"search"` \| `"previous"` \| `"enter"` \| `"done"` \| `"go"` \| `"next"` \| `"send"` | - |
+| `props.exportparts?` | `string` | **See** [https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts) |
+| `props.hidden?` | `boolean` | - |
+| `props.id?` | `string` | - |
+| `props.inlist?` | `any` | - |
+| `props.inputMode?` | \| `"text"` \| `"search"` \| `"none"` \| `"email"` \| `"tel"` \| `"url"` \| `"numeric"` \| `"decimal"` | Hints at the type of data that might be entered by the user while editing the element or its contents **See** [https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute) |
+| `props.is?` | `string` | Specify that a standard HTML element should behave like a defined custom built-in element **See** [https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is](https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is) |
+| `props.itemID?` | `string` | - |
+| `props.itemProp?` | `string` | - |
+| `props.itemRef?` | `string` | - |
+| `props.itemScope?` | `boolean` | - |
+| `props.itemType?` | `string` | - |
+| `props.key?` | `null` \| `Key` | - |
+| `props.lang?` | `string` | - |
+| `props.name?` | `string` | - |
+| `props.nodes?` | `UiNode`[] | - |
+| `props.nonce?` | `string` | - |
+| `props.noValidate?` | `boolean` | - |
+| `props.onAbort?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onAbortCapture?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onAnimationEnd?` | `AnimationEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onAnimationEndCapture?` | `AnimationEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onAnimationIteration?` | `AnimationEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onAnimationIterationCapture?` | `AnimationEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onAnimationStart?` | `AnimationEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onAnimationStartCapture?` | `AnimationEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onAuxClick?` | `MouseEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onAuxClickCapture?` | `MouseEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onBeforeInput?` | `FormEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onBeforeInputCapture?` | `FormEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onBlur?` | `FocusEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onBlurCapture?` | `FocusEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onCanPlay?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onCanPlayCapture?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onCanPlayThrough?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onCanPlayThroughCapture?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onChange?` | `FormEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onChangeCapture?` | `FormEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onClick?` | `MouseEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onClickCapture?` | `MouseEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onCompositionEnd?` | `CompositionEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onCompositionEndCapture?` | `CompositionEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onCompositionStart?` | `CompositionEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onCompositionStartCapture?` | `CompositionEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onCompositionUpdate?` | `CompositionEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onCompositionUpdateCapture?` | `CompositionEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onContextMenu?` | `MouseEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onContextMenuCapture?` | `MouseEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onCopy?` | `ClipboardEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onCopyCapture?` | `ClipboardEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onCut?` | `ClipboardEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onCutCapture?` | `ClipboardEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onDoubleClick?` | `MouseEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onDoubleClickCapture?` | `MouseEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onDrag?` | `DragEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onDragCapture?` | `DragEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onDragEnd?` | `DragEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onDragEndCapture?` | `DragEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onDragEnter?` | `DragEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onDragEnterCapture?` | `DragEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onDragExit?` | `DragEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onDragExitCapture?` | `DragEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onDragLeave?` | `DragEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onDragLeaveCapture?` | `DragEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onDragOver?` | `DragEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onDragOverCapture?` | `DragEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onDragStart?` | `DragEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onDragStartCapture?` | `DragEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onDrop?` | `DragEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onDropCapture?` | `DragEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onDurationChange?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onDurationChangeCapture?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onEmptied?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onEmptiedCapture?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onEncrypted?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onEncryptedCapture?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onEnded?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onEndedCapture?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onError?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onErrorCapture?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onFocus?` | `FocusEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onFocusCapture?` | `FocusEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onGotPointerCapture?` | `PointerEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onGotPointerCaptureCapture?` | `PointerEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onInput?` | `FormEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onInputCapture?` | `FormEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onInvalid?` | `FormEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onInvalidCapture?` | `FormEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onKeyDown?` | `KeyboardEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onKeyDownCapture?` | `KeyboardEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onKeyPress?` | `KeyboardEventHandler`\<`HTMLFormElement`\> | **Deprecated** Use `onKeyUp` or `onKeyDown` instead |
+| `props.onKeyPressCapture?` | `KeyboardEventHandler`\<`HTMLFormElement`\> | **Deprecated** Use `onKeyUpCapture` or `onKeyDownCapture` instead |
+| `props.onKeyUp?` | `KeyboardEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onKeyUpCapture?` | `KeyboardEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onLoad?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onLoadCapture?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onLoadedData?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onLoadedDataCapture?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onLoadedMetadata?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onLoadedMetadataCapture?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onLoadStart?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onLoadStartCapture?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onLostPointerCapture?` | `PointerEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onLostPointerCaptureCapture?` | `PointerEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onMouseDown?` | `MouseEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onMouseDownCapture?` | `MouseEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onMouseEnter?` | `MouseEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onMouseLeave?` | `MouseEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onMouseMove?` | `MouseEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onMouseMoveCapture?` | `MouseEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onMouseOut?` | `MouseEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onMouseOutCapture?` | `MouseEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onMouseOver?` | `MouseEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onMouseOverCapture?` | `MouseEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onMouseUp?` | `MouseEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onMouseUpCapture?` | `MouseEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onPaste?` | `ClipboardEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onPasteCapture?` | `ClipboardEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onPause?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onPauseCapture?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onPlay?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onPlayCapture?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onPlaying?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onPlayingCapture?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onPointerCancel?` | `PointerEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onPointerCancelCapture?` | `PointerEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onPointerDown?` | `PointerEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onPointerDownCapture?` | `PointerEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onPointerEnter?` | `PointerEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onPointerLeave?` | `PointerEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onPointerMove?` | `PointerEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onPointerMoveCapture?` | `PointerEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onPointerOut?` | `PointerEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onPointerOutCapture?` | `PointerEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onPointerOver?` | `PointerEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onPointerOverCapture?` | `PointerEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onPointerUp?` | `PointerEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onPointerUpCapture?` | `PointerEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onProgress?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onProgressCapture?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onRateChange?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onRateChangeCapture?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onReset?` | `FormEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onResetCapture?` | `FormEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onScroll?` | `UIEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onScrollCapture?` | `UIEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onSeeked?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onSeekedCapture?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onSeeking?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onSeekingCapture?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onSelect?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onSelectCapture?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onStalled?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onStalledCapture?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onSubmitCapture?` | `FormEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onSuspend?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onSuspendCapture?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onTimeUpdate?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onTimeUpdateCapture?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onTouchCancel?` | `TouchEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onTouchCancelCapture?` | `TouchEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onTouchEnd?` | `TouchEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onTouchEndCapture?` | `TouchEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onTouchMove?` | `TouchEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onTouchMoveCapture?` | `TouchEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onTouchStart?` | `TouchEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onTouchStartCapture?` | `TouchEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onTransitionEnd?` | `TransitionEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onTransitionEndCapture?` | `TransitionEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onVolumeChange?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onVolumeChangeCapture?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onWaiting?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onWaitingCapture?` | `ReactEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onWheel?` | `WheelEventHandler`\<`HTMLFormElement`\> | - |
+| `props.onWheelCapture?` | `WheelEventHandler`\<`HTMLFormElement`\> | - |
+| `props.part?` | `string` | **See** [https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part) |
+| `props.prefix?` | `string` | - |
+| `props.property?` | `string` | - |
+| `props.radioGroup?` | `string` | - |
+| `props.rel?` | `string` | - |
+| `props.resource?` | `string` | - |
+| `props.results?` | `number` | - |
+| `props.rev?` | `string` | - |
+| `props.role?` | `AriaRole` | - |
+| `props.security?` | `string` | - |
+| `props.slot?` | `string` | - |
+| `props.spellCheck?` | `Booleanish` | - |
+| `props.style?` | `CSSProperties` | - |
+| `props.suppressContentEditableWarning?` | `boolean` | - |
+| `props.suppressHydrationWarning?` | `boolean` | - |
+| `props.tabIndex?` | `number` | - |
+| `props.target?` | `string` | - |
+| `props.title?` | `string` | - |
+| `props.translate?` | `"no"` \| `"yes"` | - |
+| `props.typeof?` | `string` | - |
+| `props.unselectable?` | `"off"` \| `"on"` | - |
+| `props.vocab?` | `string` | - |
+
+## Returns
+
+`Element`
diff --git a/docs/elements/reference/@ory/elements-react/functions/messageTestId.md b/docs/elements/reference/@ory/elements-react/functions/messageTestId.md
new file mode 100644
index 0000000000..c66200311a
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/functions/messageTestId.md
@@ -0,0 +1,32 @@
+# messageTestId()
+
+```ts
+function messageTestId(message: {
+ id: string | number;
+}): {
+ data-testid: string;
+};
+```
+
+Helper function to generate a test id for a UiText message.
+
+## Parameters
+
+| Parameter | Type | Description |
+| ------------ | --------------------------------- | -------------------------------------------- |
+| `message` | \{ `id`: `string` \| `number`; \} | the UiText message to generate a test id for |
+| `message.id` | `string` \| `number` | - |
+
+## Returns
+
+```ts
+{
+ data-testid: string;
+}
+```
+
+a unique, stable test id for the message
+
+| Name | Type |
+| ------------- | -------- |
+| `data-testid` | `string` |
diff --git a/docs/elements/reference/@ory/elements-react/functions/uiTextToFormattedMessage.md b/docs/elements/reference/@ory/elements-react/functions/uiTextToFormattedMessage.md
new file mode 100644
index 0000000000..34a971a51d
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/functions/uiTextToFormattedMessage.md
@@ -0,0 +1,57 @@
+# uiTextToFormattedMessage()
+
+```ts
+function uiTextToFormattedMessage(uiText: Omit, intl: IntlShape): string
+```
+
+Converts a UiText to a FormattedMessage. The UiText contains the id of the message and the context. The context is used to inject
+values into the message from Ory, e.g. a timestamp. For example a UI Node from Ory might look like this:
+
+```json
+{
+ "type": "input",
+ "group": "default",
+ "attributes": {
+ "name": "traits.email",
+ "type": "email",
+ "required": true,
+ "autocomplete": "email",
+ "disabled": false,
+ "node_type": "input"
+ },
+ "messages": [],
+ "meta": {
+ "label": {
+ "id": 1070002,
+ "text": "E-Mail",
+ "type": "info",
+ "context": {
+ "title": "E-Mail"
+ }
+ }
+ }
+}
+```
+
+The context has the key "title" which matches the formatter template name "{title}" An example translation file would look like
+this:
+
+```json
+{
+ "identities.messages.1070002": "{title}"
+}
+```
+
+The formatter would then take the meta.label.id and look for the translation with the key matching the id. It would then replace
+the template "{title}" with the value from the context with the key "title".
+
+## Parameters
+
+| Parameter | Type | Description |
+| --------- | ---------------------------- | ------------------------------------------------------------------------------ |
+| `uiText` | `Omit`\<`UiText`, `"type"`\> | The UiText is part of the UiNode object sent by Kratos when performing a flow. |
+| `intl` | `IntlShape` | The intl object from react-intl |
+
+## Returns
+
+`string`
diff --git a/docs/elements/reference/@ory/elements-react/functions/useComponents.md b/docs/elements/reference/@ory/elements-react/functions/useComponents.md
new file mode 100644
index 0000000000..c15349aefd
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/functions/useComponents.md
@@ -0,0 +1,15 @@
+# useComponents()
+
+```ts
+function useComponents(): OryFlowComponents
+```
+
+The `useComponents` hook provides access to the Ory Flow components provided in the `OryComponentProvider`.
+
+You can use this hook to access the components defined in the `components` prop of the `OryComponentProvider`.
+
+## Returns
+
+[`OryFlowComponents`](../type-aliases/OryFlowComponents.md)
+
+the current component context value.
diff --git a/docs/elements/reference/@ory/elements-react/functions/useNodeSorter.md b/docs/elements/reference/@ory/elements-react/functions/useNodeSorter.md
new file mode 100644
index 0000000000..54efa76012
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/functions/useNodeSorter.md
@@ -0,0 +1,43 @@
+# useNodeSorter()
+
+```ts
+function useNodeSorter(): (
+ a: UiNode,
+ b: UiNode,
+ ctx: {
+ flowType: string
+ },
+) => number
+```
+
+The `useNodeSorter` hook provides a way to access the node sorting function
+
+The node sorting function is used to determine the order of nodes in a flow based on their attributes and context.
+
+To customize the sorting behavior, you can provide a custom `nodeSorter` function to the `OryComponentProvider`.
+
+## Returns
+
+a function that sorts nodes based on the provided context.
+
+```ts
+(
+ a: UiNode,
+ b: UiNode,
+ ctx: {
+ flowType: string;
+}): number;
+```
+
+### Parameters
+
+| Parameter | Type |
+| -------------- | --------------------------- |
+| `a` | `UiNode` |
+| `b` | `UiNode` |
+| `ctx` | \{ `flowType`: `string`; \} |
+| `ctx.flowType` | `string` |
+
+### Returns
+
+`number`
diff --git a/docs/elements/reference/@ory/elements-react/functions/useOryConfiguration.md b/docs/elements/reference/@ory/elements-react/functions/useOryConfiguration.md
new file mode 100644
index 0000000000..e0e516d5ff
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/functions/useOryConfiguration.md
@@ -0,0 +1,16 @@
+# useOryConfiguration()
+
+```ts
+function useOryConfiguration(): OryElementsConfiguration
+```
+
+The `useOryConfiguration` hook provides access to the Ory Elements configuration.
+
+This includes the SDK configuration and the project configuration. To customize the configuration, provide the `sdk` and `project`
+properties in the `OryConfigurationProvider`.
+
+## Returns
+
+[`OryElementsConfiguration`](../interfaces/OryElementsConfiguration.md)
+
+the Ory Elements configuration, which includes the SDK and project configuration.
diff --git a/docs/elements/reference/@ory/elements-react/functions/useOryFlow.md b/docs/elements/reference/@ory/elements-react/functions/useOryFlow.md
new file mode 100644
index 0000000000..d6b4262885
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/functions/useOryFlow.md
@@ -0,0 +1,13 @@
+# useOryFlow()
+
+```ts
+function useOryFlow(): FlowContextValue
+```
+
+Returns an object that contains the current flow and the flow type, as well as the configuration.
+
+## Returns
+
+[`FlowContextValue`](../type-aliases/FlowContextValue.md)
+
+The current flow container
diff --git a/docs/elements/reference/@ory/elements-react/index.mdx b/docs/elements/reference/@ory/elements-react/index.mdx
new file mode 100644
index 0000000000..8c52069bca
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/index.mdx
@@ -0,0 +1,109 @@
+---
+id: index
+title: "@ory/elements-react"
+sidebar_label: "@ory/elements-react"
+---
+
+```mdx-code-block
+import CanonicalUrl from "@site/src/components/CanonicalUrl"
+
+
+```
+
+# @ory/elements-react
+
+This package provides the core functionality for Ory Elements in React.
+
+## Interfaces
+
+- [ConsentFlow](interfaces/ConsentFlow.md)
+- [ConsentFlowContainer](interfaces/ConsentFlowContainer.md)
+- [ErrorFlowContainer](interfaces/ErrorFlowContainer.md)
+- [FlowContainerSetter](interfaces/FlowContainerSetter.md)
+- [LoginFlowContainer](interfaces/LoginFlowContainer.md)
+- [OryCardProps](interfaces/OryCardProps.md)
+- [OryCardSettingsSectionProps](interfaces/OryCardSettingsSectionProps.md)
+- [OryClientConfiguration](interfaces/OryClientConfiguration.md)
+- [OryElementsConfiguration](interfaces/OryElementsConfiguration.md)
+- [OryMessageContentProps](interfaces/OryMessageContentProps.md)
+- [OryMessageRootProps](interfaces/OryMessageRootProps.md)
+- [RecoveryFlowContainer](interfaces/RecoveryFlowContainer.md)
+- [RegistrationFlowContainer](interfaces/RegistrationFlowContainer.md)
+- [SettingsFlowContainer](interfaces/SettingsFlowContainer.md)
+- [VerificationFlowContainer](interfaces/VerificationFlowContainer.md)
+
+## Type Aliases
+
+- [FlowContextValue](type-aliases/FlowContextValue.md)
+- [FormState](type-aliases/FormState.md)
+- [FormStateAction](type-aliases/FormStateAction.md)
+- [FormValues](type-aliases/FormValues.md)
+- [IntlConfig](type-aliases/IntlConfig.md)
+- [OnSubmitHandlerProps](type-aliases/OnSubmitHandlerProps.md)
+- [OryCardAuthMethodListItemProps](type-aliases/OryCardAuthMethodListItemProps.md)
+- [OryCardContentProps](type-aliases/OryCardContentProps.md)
+- [OryCardDividerProps](type-aliases/OryCardDividerProps.md)
+- [OryCardFooterProps](type-aliases/OryCardFooterProps.md)
+- [OryCardHeaderProps](type-aliases/OryCardHeaderProps.md)
+- [OryCardLogoProps](type-aliases/OryCardLogoProps.md)
+- [OryFlowComponentOverrides](type-aliases/OryFlowComponentOverrides.md)
+- [OryFlowComponents](type-aliases/OryFlowComponents.md)
+- [OryFlowContainer](type-aliases/OryFlowContainer.md)
+- [OryFormGroupProps](type-aliases/OryFormGroupProps.md)
+- [OryFormRootProps](type-aliases/OryFormRootProps.md)
+- [OryFormSectionContentProps](type-aliases/OryFormSectionContentProps.md)
+- [OryFormSectionFooterProps](type-aliases/OryFormSectionFooterProps.md)
+- [OryFormSsoRootProps](type-aliases/OryFormSsoRootProps.md)
+- [OryNodeAnchorProps](type-aliases/OryNodeAnchorProps.md)
+- [OryNodeButtonProps](type-aliases/OryNodeButtonProps.md)
+- [OryNodeCaptchaProps](type-aliases/OryNodeCaptchaProps.md)
+- [OryNodeConsentScopeCheckboxProps](type-aliases/OryNodeConsentScopeCheckboxProps.md)
+- [OryNodeImageProps](type-aliases/OryNodeImageProps.md)
+- [OryNodeInputProps](type-aliases/OryNodeInputProps.md)
+- [OryNodeLabelProps](type-aliases/OryNodeLabelProps.md)
+- [OryNodeSsoButtonProps](type-aliases/OryNodeSsoButtonProps.md)
+- [OryNodeTextProps](type-aliases/OryNodeTextProps.md)
+- [OryPageHeaderProps](type-aliases/OryPageHeaderProps.md)
+- [OryProviderProps](type-aliases/OryProviderProps.md)
+- [OrySettingsFormProps](type-aliases/OrySettingsFormProps.md)
+- [OrySettingsPasskeyProps](type-aliases/OrySettingsPasskeyProps.md)
+- [OrySettingsRecoveryCodesProps](type-aliases/OrySettingsRecoveryCodesProps.md)
+- [OrySettingsSsoProps](type-aliases/OrySettingsSsoProps.md)
+- [OrySettingsTotpProps](type-aliases/OrySettingsTotpProps.md)
+- [OrySettingsWebauthnProps](type-aliases/OrySettingsWebauthnProps.md)
+- [OryToastProps](type-aliases/OryToastProps.md)
+
+## Variables
+
+- [OryLocales](variables/OryLocales.md)
+
+## Components
+
+- [OryCard](functions/OryCard.md)
+- [OryCardContent](functions/OryCardContent.md)
+- [OryCardFooter](functions/OryCardFooter.md)
+- [OryCardHeader](functions/OryCardHeader.md)
+- [OryCardValidationMessages](functions/OryCardValidationMessages.md)
+- [OryConfigurationProvider](functions/OryConfigurationProvider.md)
+- [OryConsentCard](functions/OryConsentCard.md)
+- [OryForm](functions/OryForm.md)
+- [OryFormGroupDivider](functions/OryFormGroupDivider.md)
+- [OryFormSsoButtons](functions/OryFormSsoButtons.md)
+- [OryFormSsoForm](functions/OryFormSsoForm.md)
+- [OryPageHeader](functions/OryPageHeader.md)
+- [OryProvider](functions/OryProvider.md)
+- [OrySelfServiceFlowCard](functions/OrySelfServiceFlowCard.md)
+- [OrySettingsCard](functions/OrySettingsCard.md)
+- [OrySettingsFormSection](functions/OrySettingsFormSection.md)
+
+## Hooks
+
+- [useComponents](functions/useComponents.md)
+- [useNodeSorter](functions/useNodeSorter.md)
+- [useOryConfiguration](functions/useOryConfiguration.md)
+- [useOryFlow](functions/useOryFlow.md)
+
+## Utilities
+
+- [messageTestId](functions/messageTestId.md)
+- [uiTextToFormattedMessage](functions/uiTextToFormattedMessage.md)
diff --git a/docs/elements/reference/@ory/elements-react/interfaces/ConsentFlow.md b/docs/elements/reference/@ory/elements-react/interfaces/ConsentFlow.md
new file mode 100644
index 0000000000..dc98aa2877
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/interfaces/ConsentFlow.md
@@ -0,0 +1,102 @@
+# ConsentFlow
+
+A flow container for the OAuth2 consent flow
+
+Note: This is a polyfill for the OAuth2 consent flow, which is not yet implemented in the Ory SDK. It tries to mirror the
+structure of the other flow containers as closely as possible.
+
+## Properties
+
+### active
+
+```ts
+active: "oauth2_consent"
+```
+
+The active part of the flow, which is always "oauth2_consent" for this flow.
+
+---
+
+### consent_request
+
+```ts
+consent_request: OAuth2ConsentRequest
+```
+
+---
+
+### created_at
+
+```ts
+created_at: Date
+```
+
+When the flow was created.
+
+---
+
+### expires_at
+
+```ts
+expires_at: Date
+```
+
+When the flow expires.
+
+---
+
+### id
+
+```ts
+id: "UNSET"
+```
+
+Always "UNSET" as the consent flow does not have a specific ID.
+
+---
+
+### issued_at
+
+```ts
+issued_at: Date
+```
+
+When the flow was issued.
+
+---
+
+### return_to?
+
+```ts
+optional return_to: string;
+```
+
+---
+
+### session
+
+```ts
+session: Session
+```
+
+---
+
+### state
+
+```ts
+state: "show_form" | "rejected" | "accepted"
+```
+
+The state of the consent flow.
+
+- "show_form": The form is being shown to the user.
+- "rejected": The user has rejected the consent request.
+- "accepted": The user has accepted the consent request.
+
+---
+
+### ui
+
+```ts
+ui: UiContainer
+```
diff --git a/docs/elements/reference/@ory/elements-react/interfaces/ConsentFlowContainer.md b/docs/elements/reference/@ory/elements-react/interfaces/ConsentFlowContainer.md
new file mode 100644
index 0000000000..b9d2163586
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/interfaces/ConsentFlowContainer.md
@@ -0,0 +1,19 @@
+# ConsentFlowContainer
+
+A flow container for the OAuth2 [ConsentFlow](ConsentFlow.md)
+
+## Properties
+
+### flow
+
+```ts
+flow: ConsentFlow
+```
+
+---
+
+### flowType
+
+```ts
+flowType: OAuth2Consent
+```
diff --git a/docs/elements/reference/@ory/elements-react/interfaces/ErrorFlowContainer.md b/docs/elements/reference/@ory/elements-react/interfaces/ErrorFlowContainer.md
new file mode 100644
index 0000000000..f53e12d996
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/interfaces/ErrorFlowContainer.md
@@ -0,0 +1,19 @@
+# ErrorFlowContainer
+
+A flow container for the FlowError
+
+## Properties
+
+### flow
+
+```ts
+flow: FlowError
+```
+
+---
+
+### flowType
+
+```ts
+flowType: Error
+```
diff --git a/docs/elements/reference/@ory/elements-react/interfaces/FlowContainerSetter.md b/docs/elements/reference/@ory/elements-react/interfaces/FlowContainerSetter.md
new file mode 100644
index 0000000000..1e3cd6af38
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/interfaces/FlowContainerSetter.md
@@ -0,0 +1,19 @@
+# FlowContainerSetter()
+
+Function to set the flow container.
+
+```ts
+FlowContainerSetter(value: OryFlowContainer): void;
+```
+
+Function to set the flow container.
+
+## Parameters
+
+| Parameter | Type |
+| --------- | --------------------------------------------------------- |
+| `value` | [`OryFlowContainer`](../type-aliases/OryFlowContainer.md) |
+
+## Returns
+
+`void`
diff --git a/docs/elements/reference/@ory/elements-react/interfaces/LoginFlowContainer.md b/docs/elements/reference/@ory/elements-react/interfaces/LoginFlowContainer.md
new file mode 100644
index 0000000000..336dee84ab
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/interfaces/LoginFlowContainer.md
@@ -0,0 +1,19 @@
+# LoginFlowContainer
+
+A flow container for the LoginFlow
+
+## Properties
+
+### flow
+
+```ts
+flow: LoginFlow
+```
+
+---
+
+### flowType
+
+```ts
+flowType: Login
+```
diff --git a/docs/elements/reference/@ory/elements-react/interfaces/OryCardProps.md b/docs/elements/reference/@ory/elements-react/interfaces/OryCardProps.md
new file mode 100644
index 0000000000..60860e1fcc
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/interfaces/OryCardProps.md
@@ -0,0 +1,9 @@
+# OryCardProps
+
+## Properties
+
+### children?
+
+```ts
+optional children: ReactNode;
+```
diff --git a/docs/elements/reference/@ory/elements-react/interfaces/OryCardSettingsSectionProps.md b/docs/elements/reference/@ory/elements-react/interfaces/OryCardSettingsSectionProps.md
new file mode 100644
index 0000000000..3e136478c9
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/interfaces/OryCardSettingsSectionProps.md
@@ -0,0 +1,43 @@
+# OryCardSettingsSectionProps
+
+## Extends
+
+- `PropsWithChildren`
+
+## Properties
+
+### action
+
+```ts
+action: string
+```
+
+---
+
+### children?
+
+```ts
+optional children: ReactNode;
+```
+
+#### Inherited from
+
+```ts
+PropsWithChildren.children
+```
+
+---
+
+### method
+
+```ts
+method: string
+```
+
+---
+
+### onSubmit
+
+```ts
+onSubmit: FormEventHandler
+```
diff --git a/docs/elements/reference/@ory/elements-react/interfaces/OryClientConfiguration.md b/docs/elements/reference/@ory/elements-react/interfaces/OryClientConfiguration.md
new file mode 100644
index 0000000000..5129f265b5
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/interfaces/OryClientConfiguration.md
@@ -0,0 +1,50 @@
+# OryClientConfiguration
+
+The configuration for Ory Elements.
+
+This configuration is used to customize the behavior and appearance of Ory Elements.
+
+By setting UI urls, you can override the default URLs for the login, registration, recovery, and verification flows.
+
+You can also set the name of the application, the logo URL, and the SDK configuration. By default, the name and logo are displayed
+in the card's header.
+
+## Properties
+
+### intl?
+
+```ts
+optional intl: IntlConfig;
+```
+
+The internationalization configuration. This configuration is used to set the locale and any additional options used for the i18n
+library. The locale is used to determine the language of the UI. The default locale is "en".
+
+---
+
+### project
+
+```ts
+project: AccountExperienceConfiguration
+```
+
+The configuration for the project.
+
+---
+
+### sdk?
+
+```ts
+optional sdk: {
+ options?: Partial;
+ url?: string;
+};
+```
+
+The SDK configuration. This configuration is used to set the URL of the Ory SDK and any additional options used for the SDK
+client.
+
+| Name | Type | Description |
+| ---------- | -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| `options?` | `Partial`\<`ConfigurationParameters`\> | Additional parameters for the Ory SDK configuration. This can include options like headers, credentials, and other settings. |
+| `url?` | `string` | The URL the Ory SDK should connect to. This is typically the base URL of your Ory instance. |
diff --git a/docs/elements/reference/@ory/elements-react/interfaces/OryElementsConfiguration.md b/docs/elements/reference/@ory/elements-react/interfaces/OryElementsConfiguration.md
new file mode 100644
index 0000000000..c2a2414a24
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/interfaces/OryElementsConfiguration.md
@@ -0,0 +1,23 @@
+# OryElementsConfiguration
+
+The Ory Elements configuration object.
+
+## Properties
+
+### project
+
+```ts
+project: AccountExperienceConfiguration
+```
+
+The project configuration. This includes the project name, URLs, and other settings for the Ory Elements project.
+
+---
+
+### sdk
+
+```ts
+sdk: OrySDK
+```
+
+The Ory SDK configuration. This includes the URL and options for the Ory SDK.
diff --git a/docs/elements/reference/@ory/elements-react/interfaces/OryMessageContentProps.md b/docs/elements/reference/@ory/elements-react/interfaces/OryMessageContentProps.md
new file mode 100644
index 0000000000..f2fe5cc46e
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/interfaces/OryMessageContentProps.md
@@ -0,0 +1,13 @@
+# OryMessageContentProps
+
+Props for the OryMessageContent component.
+
+## Properties
+
+### message
+
+```ts
+message: UiText
+```
+
+The message to display.
diff --git a/docs/elements/reference/@ory/elements-react/interfaces/OryMessageRootProps.md b/docs/elements/reference/@ory/elements-react/interfaces/OryMessageRootProps.md
new file mode 100644
index 0000000000..dae1982fd2
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/interfaces/OryMessageRootProps.md
@@ -0,0 +1,11 @@
+# OryMessageRootProps
+
+**`Expand`**
+
+## Properties
+
+### children?
+
+```ts
+optional children: ReactNode;
+```
diff --git a/docs/elements/reference/@ory/elements-react/interfaces/RecoveryFlowContainer.md b/docs/elements/reference/@ory/elements-react/interfaces/RecoveryFlowContainer.md
new file mode 100644
index 0000000000..137e30b02c
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/interfaces/RecoveryFlowContainer.md
@@ -0,0 +1,19 @@
+# RecoveryFlowContainer
+
+A flow container for the RecoveryFlow
+
+## Properties
+
+### flow
+
+```ts
+flow: RecoveryFlow
+```
+
+---
+
+### flowType
+
+```ts
+flowType: Recovery
+```
diff --git a/docs/elements/reference/@ory/elements-react/interfaces/RegistrationFlowContainer.md b/docs/elements/reference/@ory/elements-react/interfaces/RegistrationFlowContainer.md
new file mode 100644
index 0000000000..6c38f247ef
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/interfaces/RegistrationFlowContainer.md
@@ -0,0 +1,19 @@
+# RegistrationFlowContainer
+
+A flow container for the RegistrationFlow
+
+## Properties
+
+### flow
+
+```ts
+flow: RegistrationFlow
+```
+
+---
+
+### flowType
+
+```ts
+flowType: Registration
+```
diff --git a/docs/elements/reference/@ory/elements-react/interfaces/SettingsFlowContainer.md b/docs/elements/reference/@ory/elements-react/interfaces/SettingsFlowContainer.md
new file mode 100644
index 0000000000..5ff5dae453
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/interfaces/SettingsFlowContainer.md
@@ -0,0 +1,19 @@
+# SettingsFlowContainer
+
+A flow container for the SettingsFlow
+
+## Properties
+
+### flow
+
+```ts
+flow: SettingsFlow
+```
+
+---
+
+### flowType
+
+```ts
+flowType: Settings
+```
diff --git a/docs/elements/reference/@ory/elements-react/interfaces/VerificationFlowContainer.md b/docs/elements/reference/@ory/elements-react/interfaces/VerificationFlowContainer.md
new file mode 100644
index 0000000000..71bbc82ee2
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/interfaces/VerificationFlowContainer.md
@@ -0,0 +1,19 @@
+# VerificationFlowContainer
+
+A flow container for the VerificationFlow
+
+## Properties
+
+### flow
+
+```ts
+flow: VerificationFlow
+```
+
+---
+
+### flowType
+
+```ts
+flowType: Verification
+```
diff --git a/docs/elements/reference/@ory/elements-react/theme/functions/Consent.md b/docs/elements/reference/@ory/elements-react/theme/functions/Consent.md
new file mode 100644
index 0000000000..82203c6aec
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/theme/functions/Consent.md
@@ -0,0 +1,37 @@
+# ``
+
+```ts
+function Consent(props: {
+ children?: ReactNode
+ components?: OryFlowComponentOverrides
+ config: OryClientConfiguration
+ consentChallenge: OAuth2ConsentRequest
+ csrfToken: string
+ formActionUrl: string
+ session: Session
+}): Element
+```
+
+The Consent component allows you to render the consent flow for Ory OAuth2.
+
+It is used to request user consent for accessing their data and resources. The component takes in the OAuth2 consent request
+object, the session object, the Ory client configuration, a CSRF token, and the URL to submit the consent form to.
+
+## Parameters
+
+| Parameter | Type | Description |
+| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | \{ `children?`: `ReactNode`; `components?`: [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md); `config`: [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md); `consentChallenge`: `OAuth2ConsentRequest`; `csrfToken`: `string`; `formActionUrl`: `string`; `session`: `Session`; \} | The props for the Consent component. |
+| `props.children?` | `ReactNode` | Optional children to render inside the Consent component. If not provided, the default OryConsentCard will be rendered. |
+| `props.components?` | [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md) | The components to override the default ones. This allows you to customize the appearance and behavior of the consent flow. |
+| `props.config` | [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md) | The Ory client configuration object. This object contains the configuration for the Ory client, such as the base URL |
+| `props.consentChallenge` | `OAuth2ConsentRequest` | The OAuth2 consent request object. |
+| `props.csrfToken` | `string` | The CSRF token to protect against CSRF attacks. This token is used to prevent cross-site request forgery attacks by ensuring that the request is coming from the same origin as the consent flow. |
+| `props.formActionUrl` | `string` | The URL to submit the consent form to. This URL is typically an endpoint on the server that handles the consent request. Make sure that this endpoint handles CSRF protection. During the form submission the Consent component will send along the CSRF token passed in the props. The server should validate this token before processing the consent request. |
+| `props.session` | `Session` | The session object. Since the consent flow is used in the context of a logged-in user, the session object is required. It contains information about the user, such as their ID and any associated metadata. This information is used to accept or reject the consent request based on the user's preferences. The session object is typically obtained from the Ory Kratos session API. |
+
+## Returns
+
+`Element`
+
+the Consent component.
diff --git a/docs/elements/reference/@ory/elements-react/theme/functions/DefaultButtonSocial.md b/docs/elements/reference/@ory/elements-react/theme/functions/DefaultButtonSocial.md
new file mode 100644
index 0000000000..9a93d5f0d6
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/theme/functions/DefaultButtonSocial.md
@@ -0,0 +1,28 @@
+# ``
+
+```ts
+function DefaultButtonSocial(props: {
+ attributes: UiNodeInputAttributes
+ logos?: Record
+ node: UiNode
+ onClick?: () => void
+ showLabel?: boolean
+}): Element
+```
+
+The default implementation of a social button for Ory SSO. It renders a button with a logo and an optional label.
+
+## Parameters
+
+| Parameter | Type | Description |
+| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| `props` | \{ `attributes`: `UiNodeInputAttributes`; `logos?`: `Record`\<`string`, `ElementType`\>; `node`: `UiNode`; `onClick?`: () => `void`; `showLabel?`: `boolean`; \} | The props for the DefaultButtonSocial component. |
+| `props.attributes` | `UiNodeInputAttributes` | - |
+| `props.logos?` | `Record`\<`string`, `ElementType`\> | Logos to use for the social buttons. If not provided, the default logos will be used. |
+| `props.node` | `UiNode` | - |
+| `props.onClick?` | () => `void` | - |
+| `props.showLabel?` | `boolean` | Whether to show the label next to the logo. If not provided, it will be determined based on the number of SSO nodes. |
+
+## Returns
+
+`Element`
diff --git a/docs/elements/reference/@ory/elements-react/theme/functions/DefaultCard.md b/docs/elements/reference/@ory/elements-react/theme/functions/DefaultCard.md
new file mode 100644
index 0000000000..ad527867fe
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/theme/functions/DefaultCard.md
@@ -0,0 +1,18 @@
+# ``
+
+```ts
+function DefaultCard(props: { children?: ReactNode }): Element
+```
+
+The DefaultCard component is a styled container that serves as the main card layout for Ory Elements.
+
+## Parameters
+
+| Parameter | Type | Description |
+| ----------------- | ------------------------------- | --------------------------------------------- |
+| `props` | \{ `children?`: `ReactNode`; \} | The properties for the DefaultCard component. |
+| `props.children?` | `ReactNode` | - |
+
+## Returns
+
+`Element`
diff --git a/docs/elements/reference/@ory/elements-react/theme/functions/DefaultCardContent.md b/docs/elements/reference/@ory/elements-react/theme/functions/DefaultCardContent.md
new file mode 100644
index 0000000000..9ca8c23e23
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/theme/functions/DefaultCardContent.md
@@ -0,0 +1,18 @@
+# ``
+
+```ts
+function DefaultCardContent(props: { children?: ReactNode }): ReactNode
+```
+
+Simply renders the children passed to it.
+
+## Parameters
+
+| Parameter | Type | Description |
+| ----------------- | ------------------------------- | ------------------------------------------------------------------ |
+| `props` | \{ `children?`: `ReactNode`; \} | pass children to render instead of the default Ory Card components |
+| `props.children?` | `ReactNode` | - |
+
+## Returns
+
+`ReactNode`
diff --git a/docs/elements/reference/@ory/elements-react/theme/functions/DefaultCardFooter.md b/docs/elements/reference/@ory/elements-react/theme/functions/DefaultCardFooter.md
new file mode 100644
index 0000000000..00a89675f5
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/theme/functions/DefaultCardFooter.md
@@ -0,0 +1,13 @@
+# ``
+
+```ts
+function DefaultCardFooter(): null | Element
+```
+
+DefaultCardFooter renders the default footer for the card component based on the current flow type.
+
+## Returns
+
+`null` \| `Element`
+
+The default card footer component that renders the appropriate footer based on the current flow type.
diff --git a/docs/elements/reference/@ory/elements-react/theme/functions/DefaultCardHeader.md b/docs/elements/reference/@ory/elements-react/theme/functions/DefaultCardHeader.md
new file mode 100644
index 0000000000..80583e8be7
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/theme/functions/DefaultCardHeader.md
@@ -0,0 +1,15 @@
+# ``
+
+```ts
+function DefaultCardHeader(): Element
+```
+
+Renders the default card header component.
+
+This component is used to display the header of a card, including the logo, title, description, and current identifier button.
+
+## Returns
+
+`Element`
+
+the default card header component
diff --git a/docs/elements/reference/@ory/elements-react/theme/functions/DefaultCardLogo.md b/docs/elements/reference/@ory/elements-react/theme/functions/DefaultCardLogo.md
new file mode 100644
index 0000000000..46bfa2bd65
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/theme/functions/DefaultCardLogo.md
@@ -0,0 +1,19 @@
+# ``
+
+```ts
+function DefaultCardLogo(): Element
+```
+
+The DefaultCardLogo component renders the logo from the [@ory/elements-react!OryProvider](../../functions/OryProvider.md) or falls
+back to the project name.
+
+## Returns
+
+`Element`
+
+the default logo for the Ory Card component.
+
+## See
+
+- [@ory/elements-react!OryProvider](../../functions/OryProvider.md)
+- [@ory/elements-react!OryElementsConfiguration](../../interfaces/OryElementsConfiguration.md)
diff --git a/docs/elements/reference/@ory/elements-react/theme/functions/DefaultCurrentIdentifierButton.md b/docs/elements/reference/@ory/elements-react/theme/functions/DefaultCurrentIdentifierButton.md
new file mode 100644
index 0000000000..8c9d61bd6f
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/theme/functions/DefaultCurrentIdentifierButton.md
@@ -0,0 +1,13 @@
+# ``
+
+```ts
+function DefaultCurrentIdentifierButton(): null | Element
+```
+
+The `DefaultCurrentIdentifierButton` component renders a button that displays the current identifier
+
+The button can be used to restart the flow with the current identifier if appropriate.
+
+## Returns
+
+`null` \| `Element`
diff --git a/docs/elements/reference/@ory/elements-react/theme/functions/DefaultFormContainer.md b/docs/elements/reference/@ory/elements-react/theme/functions/DefaultFormContainer.md
new file mode 100644
index 0000000000..9cce7b9c2e
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/theme/functions/DefaultFormContainer.md
@@ -0,0 +1,17 @@
+# ``
+
+```ts
+function DefaultFormContainer(props: PropsWithChildren): Element
+```
+
+The default form container for Ory Elements.
+
+## Parameters
+
+| Parameter | Type | Description |
+| --------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------ |
+| `props` | `PropsWithChildren`\<[`OryFormRootProps`](../../type-aliases/OryFormRootProps.md)\> | The properties for the DefaultFormContainer component. |
+
+## Returns
+
+`Element`
diff --git a/docs/elements/reference/@ory/elements-react/theme/functions/DefaultMessage.md b/docs/elements/reference/@ory/elements-react/theme/functions/DefaultMessage.md
new file mode 100644
index 0000000000..a427998793
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/theme/functions/DefaultMessage.md
@@ -0,0 +1,21 @@
+# ``
+
+```ts
+function DefaultMessage(props: OryMessageContentProps): Element
+```
+
+The default message component for Ory Elements.
+
+## Parameters
+
+| Parameter | Type | Description |
+| --------- | ---------------------------------------------------------------------- | ------------------------------------------------ |
+| `props` | [`OryMessageContentProps`](../../interfaces/OryMessageContentProps.md) | The properties for the DefaultMessage component. |
+
+## Returns
+
+`Element`
+
+## See
+
+[@ory/elements-react!uiTextToFormattedMessage](../../functions/uiTextToFormattedMessage.md)
diff --git a/docs/elements/reference/@ory/elements-react/theme/functions/DefaultMessageContainer.md b/docs/elements/reference/@ory/elements-react/theme/functions/DefaultMessageContainer.md
new file mode 100644
index 0000000000..2efe1ac9b2
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/theme/functions/DefaultMessageContainer.md
@@ -0,0 +1,18 @@
+# ``
+
+```ts
+function DefaultMessageContainer(props: { children?: ReactNode }): null | Element
+```
+
+The default message container for Ory Elements.
+
+## Parameters
+
+| Parameter | Type | Description |
+| ----------------- | ------------------------------- | --------------------------------------------------------- |
+| `props` | \{ `children?`: `ReactNode`; \} | The properties for the DefaultMessageContainer component. |
+| `props.children?` | `ReactNode` | - |
+
+## Returns
+
+`null` \| `Element`
diff --git a/docs/elements/reference/@ory/elements-react/theme/functions/Error.md b/docs/elements/reference/@ory/elements-react/theme/functions/Error.md
new file mode 100644
index 0000000000..ec8ae35c69
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/theme/functions/Error.md
@@ -0,0 +1,34 @@
+# ``
+
+```ts
+function Error(props: {
+ components?: OryFlowComponentOverrides
+ config: OryClientConfiguration
+ error:
+ | FlowError
+ | {
+ error: string
+ error_description: string
+ }
+ | {
+ error: GenericError
+ }
+ session?: Session
+}): Element
+```
+
+The Error component is used to display an error message to the user.
+
+## Parameters
+
+| Parameter | Type | Description |
+| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | \{ `components?`: [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md); `config`: [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md); `error`: \| `FlowError` \| \{ `error`: `string`; `error_description`: `string`; \} \| \{ `error`: `GenericError`; \}; `session?`: `Session`; \} | The props for the Error component. |
+| `props.components?` | [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md) | The components to override the default ones. This allows you to customize the appearance and behavior of the error flow. |
+| `props.config` | [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md) | The Ory client configuration object. This object contains the configuration for the Ory client, such as the base URL and project information. |
+| `props.error` | \| `FlowError` \| \{ `error`: `string`; `error_description`: `string`; \} \| \{ `error`: `GenericError`; \} | The error object returned by the Ory SDK. This can be a FlowError, OAuth2Error, or a GenericError. |
+| `props.session?` | `Session` | The session object, if available. This is used to determine if the user is logged in and to provide appropriate actions. |
+
+## Returns
+
+`Element`
diff --git a/docs/elements/reference/@ory/elements-react/theme/functions/Login.md b/docs/elements/reference/@ory/elements-react/theme/functions/Login.md
new file mode 100644
index 0000000000..3c8c295f44
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/theme/functions/Login.md
@@ -0,0 +1,29 @@
+# ``
+
+```ts
+function Login(props: {
+ children?: ReactNode
+ components?: OryFlowComponentOverrides
+ config: OryClientConfiguration
+ flow: LoginFlow
+}): Element
+```
+
+The `Login` component is used to render the login flow in Ory Elements.
+
+It provides the necessary context and components for the login flow, allowing you to customize the appearance and behavior of the
+login form.
+
+## Parameters
+
+| Parameter | Type | Description |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | \{ `children?`: `ReactNode`; `components?`: [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md); `config`: [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md); `flow`: `LoginFlow`; \} | The props for the Login component. |
+| `props.children?` | `ReactNode` | Optional children to render If not provided, the default OrySelfServiceFlowCard will be rendered. |
+| `props.components?` | [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md) | Optional components to override the default ones. This allows you to customize the appearance and behavior of the login flow. |
+| `props.config` | [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md) | The Ory client configuration object. This object contains the configuration for the Ory client, such as the base URL and other settings. |
+| `props.flow` | `LoginFlow` | The login flow object containing the state and data for the login process. |
+
+## Returns
+
+`Element`
diff --git a/docs/elements/reference/@ory/elements-react/theme/functions/Recovery.md b/docs/elements/reference/@ory/elements-react/theme/functions/Recovery.md
new file mode 100644
index 0000000000..43e27dd234
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/theme/functions/Recovery.md
@@ -0,0 +1,28 @@
+# ``
+
+```ts
+function Recovery(props: {
+ children?: ReactNode
+ components?: OryFlowComponentOverrides
+ config: OryClientConfiguration
+ flow: RecoveryFlow
+}): Element
+```
+
+The `Recovery` component is used to render the recovery flow in Ory Elements.
+
+## Parameters
+
+| Parameter | Type | Description |
+| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | \{ `children?`: `ReactNode`; `components?`: [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md); `config`: [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md); `flow`: `RecoveryFlow`; \} | The props for the Recovery component. |
+| `props.children?` | `ReactNode` | Optional children to render If not provided, the default OrySelfServiceFlowCard will be rendered. |
+| `props.components?` | [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md) | Optional components to override the default ones. This allows you to customize the appearance and behavior of the recovery flow. |
+| `props.config` | [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md) | The Ory client configuration object. This object contains the configuration for the Ory client, such as the base URL and other settings. |
+| `props.flow` | `RecoveryFlow` | The recovery flow object containing the state and data for the recovery process. |
+
+## Returns
+
+`Element`
+
+the recovery flow component.
diff --git a/docs/elements/reference/@ory/elements-react/theme/functions/Registration.md b/docs/elements/reference/@ory/elements-react/theme/functions/Registration.md
new file mode 100644
index 0000000000..d76c50296e
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/theme/functions/Registration.md
@@ -0,0 +1,26 @@
+# ``
+
+```ts
+function Registration(props: {
+ children?: ReactNode
+ components?: OryFlowComponentOverrides
+ config: OryClientConfiguration
+ flow: RegistrationFlow
+}): Element
+```
+
+The `Registration` component is used to render the registration flow in Ory Elements.
+
+## Parameters
+
+| Parameter | Type | Description |
+| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | \{ `children?`: `ReactNode`; `components?`: [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md); `config`: [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md); `flow`: `RegistrationFlow`; \} | The props for the Registration component. |
+| `props.children?` | `ReactNode` | Optional children to render If not provided, the default OrySelfServiceFlowCard will be rendered. |
+| `props.components?` | [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md) | Optional components to override the default ones. This allows you to customize the appearance and behavior of the registration flow. |
+| `props.config` | [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md) | The Ory client configuration object. This object contains the configuration for the Ory client, such as the base URL and other settings. |
+| `props.flow` | `RegistrationFlow` | The registration flow object containing the state and data for the registration process. |
+
+## Returns
+
+`Element`
diff --git a/docs/elements/reference/@ory/elements-react/theme/functions/Settings.md b/docs/elements/reference/@ory/elements-react/theme/functions/Settings.md
new file mode 100644
index 0000000000..cf4d6457e6
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/theme/functions/Settings.md
@@ -0,0 +1,29 @@
+# ``
+
+```ts
+function Settings(props: {
+ children?: ReactNode
+ components?: OryFlowComponentOverrides
+ config: OryClientConfiguration
+ flow: SettingsFlow
+}): Element
+```
+
+The `Settings` component is used to render the settings flow in Ory Elements.
+
+It provides the necessary context and components for the settings flow, allowing you to customize the appearance and behavior of
+the settings form.
+
+## Parameters
+
+| Parameter | Type | Description |
+| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | \{ `children?`: `ReactNode`; `components?`: [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md); `config`: [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md); `flow`: `SettingsFlow`; \} | The props for the Settings component. |
+| `props.children?` | `ReactNode` | Optional children to render If not provided, the default OrySettingsCard will be rendered. |
+| `props.components?` | [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md) | Optional components to override the default ones. This allows you to customize the appearance and behavior of the settings flow. |
+| `props.config` | [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md) | The Ory client configuration object. This object contains the configuration for the Ory client, such as the base URL and other settings. |
+| `props.flow` | `SettingsFlow` | The settings flow object containing the state and data for the settings process. |
+
+## Returns
+
+`Element`
diff --git a/docs/elements/reference/@ory/elements-react/theme/functions/Verification.md b/docs/elements/reference/@ory/elements-react/theme/functions/Verification.md
new file mode 100644
index 0000000000..2187241f62
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/theme/functions/Verification.md
@@ -0,0 +1,29 @@
+# ``
+
+```ts
+function Verification(props: {
+ children?: ReactNode
+ components?: OryFlowComponentOverrides
+ config: OryClientConfiguration
+ flow: VerificationFlow
+}): Element
+```
+
+The `Verification` component is used to render the verification flow in Ory Elements.
+
+It provides the necessary context and components for the verification flow, allowing you to customize the appearance and behavior
+of the verification form.
+
+## Parameters
+
+| Parameter | Type | Description |
+| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `props` | \{ `children?`: `ReactNode`; `components?`: [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md); `config`: [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md); `flow`: `VerificationFlow`; \} | The props for the Verification component. |
+| `props.children?` | `ReactNode` | Optional children to render If not provided, the default OrySelfServiceFlowCard will be rendered. |
+| `props.components?` | [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md) | Optional components to override the default ones. This allows you to customize the appearance and behavior of the verification flow. |
+| `props.config` | [`OryClientConfiguration`](../../interfaces/OryClientConfiguration.md) | The Ory client configuration object. This object contains the configuration for the Ory client, such as the base URL and other settings. |
+| `props.flow` | `VerificationFlow` | The verification flow object containing the state and data for the verification process. |
+
+## Returns
+
+`Element`
diff --git a/docs/elements/reference/@ory/elements-react/theme/functions/getOryComponents.md b/docs/elements/reference/@ory/elements-react/theme/functions/getOryComponents.md
new file mode 100644
index 0000000000..6a666bb4f2
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/theme/functions/getOryComponents.md
@@ -0,0 +1,19 @@
+# getOryComponents()
+
+```ts
+function getOryComponents(overrides?: OryFlowComponentOverrides): OryFlowComponents
+```
+
+Merges the default Ory components with any provided overrides.
+
+The output of this function is a complete set of components that can be used in Ory flows.
+
+## Parameters
+
+| Parameter | Type | Description |
+| ------------ | ------------------------------------------------------------------------------ | ---------------------------------------------- |
+| `overrides?` | [`OryFlowComponentOverrides`](../../type-aliases/OryFlowComponentOverrides.md) | Optional overrides for the default components. |
+
+## Returns
+
+[`OryFlowComponents`](../../type-aliases/OryFlowComponents.md)
diff --git a/docs/elements/reference/@ory/elements-react/theme/index.mdx b/docs/elements/reference/@ory/elements-react/theme/index.mdx
new file mode 100644
index 0000000000..a33b634d35
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/theme/index.mdx
@@ -0,0 +1,42 @@
+---
+id: index
+title: "@ory/elements-react/theme"
+sidebar_label: "theme"
+---
+
+```mdx-code-block
+import CanonicalUrl from "@site/src/components/CanonicalUrl"
+
+
+```
+
+# @ory/elements-react/theme
+
+This package provides the default theme for Ory Elements React.
+
+## Default Components
+
+- [DefaultButtonSocial](functions/DefaultButtonSocial.md)
+- [DefaultCard](functions/DefaultCard.md)
+- [DefaultCardContent](functions/DefaultCardContent.md)
+- [DefaultCardFooter](functions/DefaultCardFooter.md)
+- [DefaultCardHeader](functions/DefaultCardHeader.md)
+- [DefaultCardLogo](functions/DefaultCardLogo.md)
+- [DefaultCurrentIdentifierButton](functions/DefaultCurrentIdentifierButton.md)
+- [DefaultFormContainer](functions/DefaultFormContainer.md)
+- [DefaultMessage](functions/DefaultMessage.md)
+- [DefaultMessageContainer](functions/DefaultMessageContainer.md)
+
+## Flows
+
+- [Consent](functions/Consent.md)
+- [Error](functions/Error.md)
+- [Login](functions/Login.md)
+- [Recovery](functions/Recovery.md)
+- [Registration](functions/Registration.md)
+- [Settings](functions/Settings.md)
+- [Verification](functions/Verification.md)
+
+## Utilities
+
+- [getOryComponents](functions/getOryComponents.md)
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/FlowContextValue.md b/docs/elements/reference/@ory/elements-react/type-aliases/FlowContextValue.md
new file mode 100644
index 0000000000..3dbdb25716
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/FlowContextValue.md
@@ -0,0 +1,19 @@
+# FlowContextValue
+
+```ts
+type FlowContextValue = OryFlowContainer & {
+ dispatchFormState: Dispatch
+ formState: FormState
+ setFlowContainer: FlowContainerSetter
+}
+```
+
+The return value of the OryFlowContext.
+
+## Type declaration
+
+| Name | Type | Description |
+| ------------------- | ------------------------------------------------------------- | ------------------------------------------- |
+| `dispatchFormState` | `Dispatch`\<[`FormStateAction`](FormStateAction.md)\> | Dispatch function to update the form state. |
+| `formState` | [`FormState`](FormState.md) | The current form state. **See** FormState |
+| `setFlowContainer` | [`FlowContainerSetter`](../interfaces/FlowContainerSetter.md) | Function to set the flow container. |
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/FormState.md b/docs/elements/reference/@ory/elements-react/type-aliases/FormState.md
new file mode 100644
index 0000000000..b55b4a0134
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/FormState.md
@@ -0,0 +1,32 @@
+# FormState
+
+```ts
+type FormState =
+ | {
+ current: "select_method"
+ }
+ | {
+ current: "provide_identifier"
+ }
+ | {
+ current: "method_active"
+ method: UiNodeGroupEnum
+ }
+ | {
+ current: "success_screen"
+ }
+ | {
+ current: "settings"
+ }
+```
+
+Represents the state of the form based on the flow type and active method. This type is used to determine which part of the form
+should be displayed.
+
+It can be one of the following:
+
+- `select_method`: The user is selecting an authentication method.
+- `provide_identifier`: The user is providing an identifier (e.g., email or username).
+- `method_active`: An authentication method is active, and the user is interacting with it.
+- `success_screen`: The flow has successfully completed (only used in the verification flow).
+- `settings`: The user is in the settings flow.
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/FormStateAction.md b/docs/elements/reference/@ory/elements-react/type-aliases/FormStateAction.md
new file mode 100644
index 0000000000..e24c2f2d5f
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/FormStateAction.md
@@ -0,0 +1,55 @@
+# FormStateAction
+
+```ts
+type FormStateAction =
+ | {
+ flow: OryFlowContainer
+ type: "action_flow_update"
+ }
+ | {
+ method: UiNodeGroupEnum
+ type: "action_select_method"
+ }
+ | {
+ type: "action_clear_active_method"
+ }
+```
+
+Represents the actions that can be dispatched to update the form state. These actions are used to change the current state of the
+form based on user interactions or flow updates.
+
+## Type declaration
+
+```ts
+{
+ flow: OryFlowContainer
+ type: "action_flow_update"
+}
+```
+
+| Name | Type | Description |
+| ------ | ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `flow` | [`OryFlowContainer`](OryFlowContainer.md) | The updated flow container that contains the new flow data. |
+| `type` | `"action_flow_update"` | Action to update the flow state. This action is dispatched when the flow is updated, and it will parse the new flow to determine the current form state. |
+
+```ts
+{
+ method: UiNodeGroupEnum
+ type: "action_select_method"
+}
+```
+
+| Name | Type | Description |
+| -------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `method` | `UiNodeGroupEnum` | The authentication method that the user has selected. |
+| `type` | `"action_select_method"` | Action to select an authentication method. This action is dispatched when the user selects an authentication method (e.g., password, passkey, etc.) from the available options. |
+
+```ts
+{
+ type: "action_clear_active_method"
+}
+```
+
+| Name | Type | Description |
+| ------ | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `type` | `"action_clear_active_method"` | Action to clear the active authentication method. This action is dispatched when the user wants to clear the currently active method and return to the method selection state. |
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/FormValues.md b/docs/elements/reference/@ory/elements-react/type-aliases/FormValues.md
new file mode 100644
index 0000000000..01c2e1b9e8
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/FormValues.md
@@ -0,0 +1,7 @@
+# FormValues
+
+```ts
+type FormValues = Record
+```
+
+A generic type for the form values.
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/IntlConfig.md b/docs/elements/reference/@ory/elements-react/type-aliases/IntlConfig.md
new file mode 100644
index 0000000000..d28fa3ae95
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/IntlConfig.md
@@ -0,0 +1,39 @@
+# IntlConfig
+
+```ts
+type IntlConfig = {
+ customTranslations?: Partial
+ locale: Locale
+}
+```
+
+The configuration for internationalization (i18n) in Ory Elements.
+
+This configuration is used to set the locale and can be used to provide custom translations. The locale is used to determine the
+language of the UI.
+
+## Properties
+
+### customTranslations?
+
+```ts
+optional customTranslations: Partial;
+```
+
+Provide custom translations for the UI.
+
+---
+
+### locale
+
+```ts
+locale: Locale
+```
+
+The locale to use for internationalization.
+
+#### Default Value
+
+```ts
+"en"
+```
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OnSubmitHandlerProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OnSubmitHandlerProps.md
new file mode 100644
index 0000000000..675f3aa566
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/OnSubmitHandlerProps.md
@@ -0,0 +1,57 @@
+# OnSubmitHandlerProps\
+
+```ts
+type OnSubmitHandlerProps = {
+ body: T
+ onRedirect: OnRedirectHandler
+ setFlowContainer: (flowContainer: OryFlowContainer) => void
+}
+```
+
+Props for the submit handler
+
+## Type Parameters
+
+| Type Parameter |
+| -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `T` _extends_ \| `UpdateLoginFlowBody` \| `UpdateRegistrationFlowBody` \| `UpdateVerificationFlowBody` \| `UpdateRecoveryFlowBody` \| `UpdateSettingsFlowBody` |
+
+## Properties
+
+### body
+
+```ts
+body: T
+```
+
+The form values to submit.
+
+---
+
+### onRedirect
+
+```ts
+onRedirect: OnRedirectHandler
+```
+
+This method is used to redirect the user to a different page.
+
+---
+
+### setFlowContainer()
+
+```ts
+setFlowContainer: (flowContainer: OryFlowContainer) => void;
+```
+
+This method is used to update the flow container when a validation error occurs, for example.
+
+#### Parameters
+
+| Parameter | Type |
+| --------------- | ----------------------------------------- |
+| `flowContainer` | [`OryFlowContainer`](OryFlowContainer.md) |
+
+#### Returns
+
+`void`
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryCardAuthMethodListItemProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryCardAuthMethodListItemProps.md
new file mode 100644
index 0000000000..34c23fda9d
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryCardAuthMethodListItemProps.md
@@ -0,0 +1,50 @@
+# OryCardAuthMethodListItemProps
+
+```ts
+type OryCardAuthMethodListItemProps = {
+ group: string
+ onClick: () => void
+ title?: {
+ id: string
+ values?: Record
+ }
+}
+```
+
+Props for the AuthMethodListItem component. This component is used to render a single auth method in the AuthMethodList component.
+
+## Properties
+
+### group
+
+```ts
+group: string
+```
+
+---
+
+### onClick()
+
+```ts
+onClick: () => void;
+```
+
+#### Returns
+
+`void`
+
+---
+
+### title?
+
+```ts
+optional title: {
+ id: string;
+ values?: Record;
+};
+```
+
+| Name | Type |
+| --------- | ------------------------------ |
+| `id` | `string` |
+| `values?` | `Record`\<`string`, `string`\> |
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryCardContentProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryCardContentProps.md
new file mode 100644
index 0000000000..7a6f392812
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryCardContentProps.md
@@ -0,0 +1,7 @@
+# OryCardContentProps
+
+```ts
+type OryCardContentProps = PropsWithChildren
+```
+
+Props for the OryCardContent component.
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryCardDividerProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryCardDividerProps.md
new file mode 100644
index 0000000000..bc988cf4cb
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryCardDividerProps.md
@@ -0,0 +1,7 @@
+# OryCardDividerProps
+
+```ts
+type OryCardDividerProps = Record
+```
+
+Props type for the Form Group Divider component.
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryCardFooterProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryCardFooterProps.md
new file mode 100644
index 0000000000..90974adb46
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryCardFooterProps.md
@@ -0,0 +1,5 @@
+# OryCardFooterProps
+
+```ts
+type OryCardFooterProps = Record
+```
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryCardHeaderProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryCardHeaderProps.md
new file mode 100644
index 0000000000..99dae9c0cb
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryCardHeaderProps.md
@@ -0,0 +1,5 @@
+# OryCardHeaderProps
+
+```ts
+type OryCardHeaderProps = Record
+```
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryCardLogoProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryCardLogoProps.md
new file mode 100644
index 0000000000..2663b726ec
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryCardLogoProps.md
@@ -0,0 +1,5 @@
+# OryCardLogoProps
+
+```ts
+type OryCardLogoProps = Record
+```
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryFlowComponentOverrides.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryFlowComponentOverrides.md
new file mode 100644
index 0000000000..af899bae08
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryFlowComponentOverrides.md
@@ -0,0 +1,11 @@
+# OryFlowComponentOverrides
+
+```ts
+type OryFlowComponentOverrides = {
+ [P in keyof OryFlowComponents]?: OryFlowComponents[P] extends object
+ ? { [K in keyof OryFlowComponents[P]]?: OryFlowComponents[P][K] }
+ : OryFlowComponents[P]
+}
+```
+
+Makes the components in OryFlowComponents optional, so that you can override only the components you want to change.
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryFlowComponents.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryFlowComponents.md
new file mode 100644
index 0000000000..a02639d526
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryFlowComponents.md
@@ -0,0 +1,180 @@
+# OryFlowComponents
+
+```ts
+type OryFlowComponents = {
+ Card: {
+ AuthMethodListContainer: ComponentType
+ AuthMethodListItem: ComponentType
+ Content: ComponentType
+ Divider: ComponentType
+ Footer: ComponentType
+ Header: ComponentType
+ Logo: ComponentType
+ Root: ComponentType
+ SettingsSection: ComponentType
+ SettingsSectionContent: ComponentType
+ SettingsSectionFooter: ComponentType
+ }
+ Form: {
+ Group: ComponentType
+ PasskeySettings: ComponentType
+ RecoveryCodesSettings: ComponentType
+ Root: ComponentType
+ SsoRoot: ComponentType
+ SsoSettings: ComponentType
+ TotpSettings: ComponentType
+ WebauthnSettings: ComponentType
+ }
+ Message: {
+ Content: ComponentType
+ Root: ComponentType
+ Toast: ComponentType
+ }
+ Node: {
+ Anchor: ComponentType
+ Button: ComponentType
+ Captcha: ComponentType
+ Checkbox: ComponentType
+ CodeInput: ComponentType
+ ConsentScopeCheckbox: ComponentType
+ Image: ComponentType
+ Input: ComponentType
+ Label: ComponentType
+ SsoButton: ComponentType
+ Text: ComponentType
+ }
+ Page: {
+ Header: ComponentType
+ }
+}
+```
+
+A record of all the components that are used in the OryForm component.
+
+## Properties
+
+### Card
+
+```ts
+Card: {
+ AuthMethodListContainer: ComponentType
+ AuthMethodListItem: ComponentType
+ Content: ComponentType
+ Divider: ComponentType
+ Footer: ComponentType
+ Header: ComponentType
+ Logo: ComponentType
+ Root: ComponentType
+ SettingsSection: ComponentType
+ SettingsSectionContent: ComponentType
+ SettingsSectionFooter: ComponentType
+}
+```
+
+| Name | Type | Description |
+| ------------------------- | ------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `AuthMethodListContainer` | `ComponentType`\<`PropsWithChildren`\> | The AuthMethodListContainer component is rendered around the "method" chooser step in the identifier_first login flow. This is only used, if login is configured to use identifier_first authentication. |
+| `AuthMethodListItem` | `ComponentType`\<[`OryCardAuthMethodListItemProps`](OryCardAuthMethodListItemProps.md)\> | The AuthMethodListItem component is rendered on the "method" chooser step in the identifier_first login flow. This is only used, if login is configured to use identifier_first authentication. |
+| `Content` | `ComponentType`\<[`OryCardContentProps`](OryCardContentProps.md)\> | The card content is the main content of the card container. |
+| `Divider` | `ComponentType`\<[`OryCardDividerProps`](OryCardDividerProps.md)\> | The HorizontalDivider component is rendered between groups. |
+| `Footer` | `ComponentType`\<[`OryCardFooterProps`](OryCardFooterProps.md)\> | The card footer is the footer of the card container. |
+| `Header` | `ComponentType`\<[`OryCardProps`](../interfaces/OryCardProps.md)\> | The card header is the header of the card container. |
+| `Logo` | `ComponentType`\<[`OryCardLogoProps`](OryCardLogoProps.md)\> | The card logo is the logo of the card container. |
+| `Root` | `ComponentType`\<[`OryCardProps`](../interfaces/OryCardProps.md)\> | The card container is the main container of the card. |
+| `SettingsSection` | `ComponentType`\<[`OryCardSettingsSectionProps`](../interfaces/OryCardSettingsSectionProps.md)\> | The SettingsSection component is rendered around each section of the settings. |
+| `SettingsSectionContent` | `ComponentType`\<[`OryFormSectionContentProps`](OryFormSectionContentProps.md)\> | The SettingsSectionContent component is rendered around the content of each section of the settings. |
+| `SettingsSectionFooter` | `ComponentType`\<[`OryFormSectionFooterProps`](OryFormSectionFooterProps.md)\> | The SettingsSectionFooter component is rendered around the footer of each section of the settings. |
+
+---
+
+### Form
+
+```ts
+Form: {
+ Group: ComponentType
+ PasskeySettings: ComponentType
+ RecoveryCodesSettings: ComponentType
+ Root: ComponentType
+ SsoRoot: ComponentType
+ SsoSettings: ComponentType
+ TotpSettings: ComponentType
+ WebauthnSettings: ComponentType
+}
+```
+
+| Name | Type | Description |
+| ----------------------- | -------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Group` | `ComponentType`\<[`OryFormGroupProps`](OryFormGroupProps.md)\> | The FormGroup is rendered around each group of nodes in the UI nodes. |
+| `PasskeySettings` | `ComponentType`\<[`OrySettingsPasskeyProps`](OrySettingsPasskeyProps.md)\> | The section on the settings page, rendering the Passkey settings |
+| `RecoveryCodesSettings` | `ComponentType`\<[`OrySettingsRecoveryCodesProps`](OrySettingsRecoveryCodesProps.md)\> | The section on the settings page, rendering the recovery code settings |
+| `Root` | `ComponentType`\<[`OryFormRootProps`](OryFormRootProps.md)\> | The FormContainer component is the main container of the form. It should render its children. You most likely don't want to override this component directly. |
+| `SsoRoot` | `ComponentType`\<[`OryFormSsoRootProps`](OryFormSsoRootProps.md)\> | A special form group container for the social buttons. This is required, because the social buttons need to be in its form, to not influence the other form groups. You most likely don't want to override this component directly. |
+| `SsoSettings` | `ComponentType`\<[`OrySettingsSsoProps`](OrySettingsSsoProps.md)\> | The section on the settings page, rendering the OIDC settings |
+| `TotpSettings` | `ComponentType`\<[`OrySettingsTotpProps`](OrySettingsTotpProps.md)\> | The section on the settings page, rendering the TOTP settings |
+| `WebauthnSettings` | `ComponentType`\<[`OrySettingsWebauthnProps`](OrySettingsWebauthnProps.md)\> | The section on the settings page, rendering the Webauthn settings |
+
+---
+
+### Message
+
+```ts
+Message: {
+ Content: ComponentType
+ Root: ComponentType
+ Toast: ComponentType
+}
+```
+
+| Name | Type | Description |
+| --------- | -------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
+| `Content` | `ComponentType`\<[`OryMessageContentProps`](../interfaces/OryMessageContentProps.md)\> | The Message component is rendered whenever a message is encountered. |
+| `Root` | `ComponentType`\<[`OryMessageRootProps`](../interfaces/OryMessageRootProps.md)\> | The MessageContainer is rendered around the messages. |
+| `Toast` | `ComponentType`\<[`OryToastProps`](OryToastProps.md)\> | The Toast component is rendered for toast messages. Currently only used in the settings page to display messages. |
+
+---
+
+### Node
+
+```ts
+Node: {
+ Anchor: ComponentType
+ Button: ComponentType
+ Captcha: ComponentType
+ Checkbox: ComponentType
+ CodeInput: ComponentType
+ ConsentScopeCheckbox: ComponentType
+ Image: ComponentType
+ Input: ComponentType
+ Label: ComponentType
+ SsoButton: ComponentType
+ Text: ComponentType
+}
+```
+
+| Name | Type | Description |
+| ---------------------- | -------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Anchor` | `ComponentType`\<[`OryNodeAnchorProps`](OryNodeAnchorProps.md)\> | Anchor component, rendered whenever an "anchor" node is encountered |
+| `Button` | `ComponentType`\<[`OryNodeButtonProps`](OryNodeButtonProps.md)\> | Button component, rendered whenever a button is encountered in the Ory UI Nodes. |
+| `Captcha` | `ComponentType`\<[`OryNodeCaptchaProps`](OryNodeCaptchaProps.md)\> | The Captcha component is rendered whenever a "captcha" group is encountered. |
+| `Checkbox` | `ComponentType`\<[`OryNodeInputProps`](OryNodeInputProps.md)\> | The Checkbox component is rendered whenever an input node with of boolean type is encountered. |
+| `CodeInput` | `ComponentType`\<[`OryNodeInputProps`](OryNodeInputProps.md)\> | Special version of the Input component for OTP codes. |
+| `ConsentScopeCheckbox` | `ComponentType`\<[`OryNodeConsentScopeCheckboxProps`](OryNodeConsentScopeCheckboxProps.md)\> | Special version of the Input component for scopes in OAuth2 flows. |
+| `Image` | `ComponentType`\<[`OryNodeImageProps`](OryNodeImageProps.md)\> | The Image component is rendered whenever an "image" node is encountered. For example used in the "Logo" node. |
+| `Input` | `ComponentType`\<[`OryNodeInputProps`](OryNodeInputProps.md)\> | The Input component is rendered whenever a "input" node is encountered. |
+| `Label` | `ComponentType`\<[`OryNodeLabelProps`](OryNodeLabelProps.md)\> | The Label component is rendered around Input components and is used to render form labels. |
+| `SsoButton` | `ComponentType`\<[`OryNodeSsoButtonProps`](OryNodeSsoButtonProps.md)\> | The SsoButton component is rendered whenever a button of group "oidc" or "saml" node is encountered. It renders the "Login with Google", "Login with Facebook" etc. buttons. |
+| `Text` | `ComponentType`\<[`OryNodeTextProps`](OryNodeTextProps.md)\> | The Text component is rendered whenever a "text" node is encountered. |
+
+---
+
+### Page
+
+```ts
+Page: {
+ Header: ComponentType
+}
+```
+
+| Name | Type |
+| -------- | ---------------------------------------------------------------- |
+| `Header` | `ComponentType`\<[`OryPageHeaderProps`](OryPageHeaderProps.md)\> |
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryFlowContainer.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryFlowContainer.md
new file mode 100644
index 0000000000..41d7e495ff
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryFlowContainer.md
@@ -0,0 +1,13 @@
+# OryFlowContainer
+
+```ts
+type OryFlowContainer =
+ | LoginFlowContainer
+ | RegistrationFlowContainer
+ | RecoveryFlowContainer
+ | VerificationFlowContainer
+ | SettingsFlowContainer
+ | ConsentFlowContainer
+```
+
+A union type of all flow containers
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryFormGroupProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryFormGroupProps.md
new file mode 100644
index 0000000000..e3f79875f4
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryFormGroupProps.md
@@ -0,0 +1,7 @@
+# OryFormGroupProps
+
+```ts
+type OryFormGroupProps = PropsWithChildren
+```
+
+Props for the Form.Group component.
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryFormRootProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryFormRootProps.md
new file mode 100644
index 0000000000..c530bc62ed
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryFormRootProps.md
@@ -0,0 +1,15 @@
+# OryFormRootProps
+
+```ts
+type OryFormRootProps = ComponentPropsWithoutRef<"form"> & {
+ onSubmit: FormEventHandler
+}
+```
+
+Props for the Form.Root component.
+
+## Type declaration
+
+| Name | Type |
+| ---------- | --------------------------------------- |
+| `onSubmit` | `FormEventHandler`\<`HTMLFormElement`\> |
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryFormSectionContentProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryFormSectionContentProps.md
new file mode 100644
index 0000000000..a5d71a7c12
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryFormSectionContentProps.md
@@ -0,0 +1,8 @@
+# OryFormSectionContentProps
+
+```ts
+type OryFormSectionContentProps = PropsWithChildren<{
+ description?: string
+ title?: string
+}>
+```
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryFormSectionFooterProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryFormSectionFooterProps.md
new file mode 100644
index 0000000000..b146a08e09
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryFormSectionFooterProps.md
@@ -0,0 +1,7 @@
+# OryFormSectionFooterProps
+
+```ts
+type OryFormSectionFooterProps = PropsWithChildren<{
+ text?: string
+}>
+```
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryFormSsoRootProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryFormSsoRootProps.md
new file mode 100644
index 0000000000..f49d683a8b
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryFormSsoRootProps.md
@@ -0,0 +1,7 @@
+# OryFormSsoRootProps
+
+```ts
+type OryFormSsoRootProps = PropsWithChildren<{
+ nodes: UiNode[]
+}>
+```
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeAnchorProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeAnchorProps.md
new file mode 100644
index 0000000000..7b67e3d93c
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeAnchorProps.md
@@ -0,0 +1,15 @@
+# OryNodeAnchorProps
+
+```ts
+type OryNodeAnchorProps = {
+ attributes: UiNodeAnchorAttributes
+ node: UiNode
+} & Omit, "children">
+```
+
+## Type declaration
+
+| Name | Type |
+| ------------ | ------------------------ |
+| `attributes` | `UiNodeAnchorAttributes` |
+| `node` | `UiNode` |
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeButtonProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeButtonProps.md
new file mode 100644
index 0000000000..ef3fd4d495
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeButtonProps.md
@@ -0,0 +1,16 @@
+# OryNodeButtonProps
+
+```ts
+type OryNodeButtonProps = {
+ attributes: UiNodeInputAttributes
+ node: UiNode
+} & Omit, "children"> &
+ ButtonVariants
+```
+
+## Type declaration
+
+| Name | Type |
+| ------------ | ----------------------- |
+| `attributes` | `UiNodeInputAttributes` |
+| `node` | `UiNode` |
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeCaptchaProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeCaptchaProps.md
new file mode 100644
index 0000000000..8337405a27
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeCaptchaProps.md
@@ -0,0 +1,15 @@
+# OryNodeCaptchaProps
+
+```ts
+type OryNodeCaptchaProps = {
+ node: UiNode
+}
+```
+
+## Properties
+
+### node
+
+```ts
+node: UiNode
+```
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeConsentScopeCheckboxProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeConsentScopeCheckboxProps.md
new file mode 100644
index 0000000000..24a6fb84c2
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeConsentScopeCheckboxProps.md
@@ -0,0 +1,43 @@
+# OryNodeConsentScopeCheckboxProps
+
+```ts
+type OryNodeConsentScopeCheckboxProps = {
+ attributes: UiNodeInputAttributes
+ node: UiNode
+ onCheckedChange: (checked: boolean) => void
+}
+```
+
+## Properties
+
+### attributes
+
+```ts
+attributes: UiNodeInputAttributes
+```
+
+---
+
+### node
+
+```ts
+node: UiNode
+```
+
+---
+
+### onCheckedChange()
+
+```ts
+onCheckedChange: (checked: boolean) => void;
+```
+
+#### Parameters
+
+| Parameter | Type |
+| --------- | --------- |
+| `checked` | `boolean` |
+
+#### Returns
+
+`void`
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeImageProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeImageProps.md
new file mode 100644
index 0000000000..009c7da93f
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeImageProps.md
@@ -0,0 +1,24 @@
+# OryNodeImageProps
+
+```ts
+type OryNodeImageProps = {
+ attributes: UiNodeImageAttributes
+ node: UiNode
+}
+```
+
+## Properties
+
+### attributes
+
+```ts
+attributes: UiNodeImageAttributes
+```
+
+---
+
+### node
+
+```ts
+node: UiNode
+```
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeInputProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeInputProps.md
new file mode 100644
index 0000000000..d11e0ccf42
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeInputProps.md
@@ -0,0 +1,33 @@
+# OryNodeInputProps
+
+```ts
+type OryNodeInputProps = {
+ attributes: UiNodeInputAttributes
+ node: UiNode
+ onClick?: MouseEventHandler
+}
+```
+
+## Properties
+
+### attributes
+
+```ts
+attributes: UiNodeInputAttributes
+```
+
+---
+
+### node
+
+```ts
+node: UiNode
+```
+
+---
+
+### onClick?
+
+```ts
+optional onClick: MouseEventHandler;
+```
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeLabelProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeLabelProps.md
new file mode 100644
index 0000000000..8ec4c27cf1
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeLabelProps.md
@@ -0,0 +1,15 @@
+# OryNodeLabelProps
+
+```ts
+type OryNodeLabelProps = {
+ attributes: UiNodeInputAttributes
+ node: UiNode
+} & ComponentPropsWithoutRef<"label">
+```
+
+## Type declaration
+
+| Name | Type |
+| ------------ | ----------------------- |
+| `attributes` | `UiNodeInputAttributes` |
+| `node` | `UiNode` |
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeSsoButtonProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeSsoButtonProps.md
new file mode 100644
index 0000000000..c4b58d211f
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeSsoButtonProps.md
@@ -0,0 +1,39 @@
+# OryNodeSsoButtonProps
+
+```ts
+type OryNodeSsoButtonProps = {
+ attributes: UiNodeInputAttributes
+ node: UiNode
+ onClick?: () => void
+}
+```
+
+Props for the OryNodeSsoButton component.
+
+## Properties
+
+### attributes
+
+```ts
+attributes: UiNodeInputAttributes
+```
+
+---
+
+### node
+
+```ts
+node: UiNode
+```
+
+---
+
+### onClick()?
+
+```ts
+optional onClick: () => void;
+```
+
+#### Returns
+
+`void`
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeTextProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeTextProps.md
new file mode 100644
index 0000000000..e1e4f53abb
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryNodeTextProps.md
@@ -0,0 +1,24 @@
+# OryNodeTextProps
+
+```ts
+type OryNodeTextProps = {
+ attributes: UiNodeTextAttributes
+ node: UiNode
+}
+```
+
+## Properties
+
+### attributes
+
+```ts
+attributes: UiNodeTextAttributes
+```
+
+---
+
+### node
+
+```ts
+node: UiNode
+```
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryPageHeaderProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryPageHeaderProps.md
new file mode 100644
index 0000000000..42691abfd3
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryPageHeaderProps.md
@@ -0,0 +1,5 @@
+# OryPageHeaderProps
+
+```ts
+type OryPageHeaderProps = Record
+```
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OryProviderProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OryProviderProps.md
new file mode 100644
index 0000000000..a8a78b0d26
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/OryProviderProps.md
@@ -0,0 +1,18 @@
+# OryProviderProps
+
+```ts
+type OryProviderProps = {
+ components: OryFlowComponents
+ config: OryClientConfiguration
+} & OryFlowContainer &
+ PropsWithChildren
+```
+
+Props type for the OryProvider component.
+
+## Type declaration
+
+| Name | Type | Description |
+| ------------ | ------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `components` | [`OryFlowComponents`](OryFlowComponents.md) | The components to use for rendering Ory flows. You can provide custom components to override the default Ory components. |
+| `config` | [`OryClientConfiguration`](../interfaces/OryClientConfiguration.md) | The Ory client configuration. This includes the SDK and project configuration. |
diff --git a/docs/elements/reference/@ory/elements-react/type-aliases/OrySettingsFormProps.md b/docs/elements/reference/@ory/elements-react/type-aliases/OrySettingsFormProps.md
new file mode 100644
index 0000000000..9e97a82208
--- /dev/null
+++ b/docs/elements/reference/@ory/elements-react/type-aliases/OrySettingsFormProps.md
@@ -0,0 +1,8 @@
+# OrySettingsFormProps
+
+```ts
+type OrySettingsFormProps = Omit