https://github.com/ory/elements
Ory Elements is a component library that makes building login, registration and account pages for Ory a breeze.
https://github.com/ory/elements
component-library express hacktoberfest identity login ory preact react registration user-profile
Last synced: about 1 month ago
JSON representation
Ory Elements is a component library that makes building login, registration and account pages for Ory a breeze.
- Host: GitHub
- URL: https://github.com/ory/elements
- Owner: ory
- License: apache-2.0
- Created: 2022-08-25T11:52:32.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-05-14T09:41:55.000Z (about 1 month ago)
- Last Synced: 2025-05-14T10:51:55.124Z (about 1 month ago)
- Topics: component-library, express, hacktoberfest, identity, login, ory, preact, react, registration, user-profile
- Language: TypeScript
- Homepage: https://ory.sh
- Size: 28.4 MB
- Stars: 111
- Watchers: 9
- Forks: 53
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
- jimsghstars - ory/elements - Ory Elements is a component library that makes building login, registration and account pages for Ory a breeze. Check out the components library on Chromatic https://www.chromatic.com/library?appId=63 (TypeScript)
README
# Ory Elements
Ory Elements is a component library that makes building login, registration and
account pages for Ory a breeze:
- Reduces time to add complex auth flows to your customer experience, including
multi-factor authentication and account recovery.
- Customizable, themeable, and replaceable components.
- Works with the React ecosystem (Next.js, plain React).
- Dynamically adapts the user interface to your Ory identity schema, sign-in and
flow configuration.
Ory Elements has several packages:
- [`@ory/elements-react`](./packages/elements-react/README.md)
- [`@ory/nextjs`](./packages/nextjs/README.md)
> [!NOTE]
> If you've used @ory/elements, @ory/elements-markup or @ory/elements-preact
> before, we recommend migrating to @ory/elements-react. The legacy code base is
> in https://github.com/ory/elements-legacy.
Ory Elements is a set of components that you can use to build your own login,
registration, settings, verification, recovery and consent user interface. To
just integrate authentication into your Next.js application and use the default
user interfaces, follow our
[guide for Auth.js](https://www.ory.sh/docs/getting-started/integrate-auth/auth-js).
## Getting Started
### React
```shell
npm install @ory/elements-react react react-dom
```
For more information, see
[packages/elements-react](https://github.com/ory/elements/tree/main/packages/elements-react).
### Next.js
```shell
npm install @ory/nextjs
```
For more information, see
[packages/nextjs](https://github.com/ory/elements/tree/main/packages/nextjs).
## Example Apps
Full examples are available in the `examples/` directory of this repository.
- [app router](https://github.com/ory/elements/tree/main/examples/nextjs-app-router)
- [pages router](https://github.com/ory/elements/tree/main/examples/nextjs-pages-router)