# @ory/elements-preact

> Ory Elements is a component library that makes building login, registration and account pages for Ory a breeze.

Latest version **0.9.1** (published 2026-06-23) · Apache License 2.0 license · 0 weekly downloads

## Install

```sh
npm install @ory/elements-preact
pnpm add @ory/elements-preact
yarn add @ory/elements-preact
bun add @ory/elements-preact
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.9.1 |
| Published | 2026-06-23 |
| First published | 2022-10-12 |
| Weekly downloads | 0 |
| License | Apache License 2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=16.16.0 |
| Dependencies | 0 |
| Unpacked size | 2.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 187 |
| Maintainers | arekkas, hperl, jonas-jonas, clintjhill |

## Links

- npm: https://www.npmjs.com/package/@ory/elements-preact
- Repository: https://github.com/ory/elements
- Homepage: https://github.com/ory/elements#readme
- Issues: https://github.com/ory/elements/issues
- npm.io page: https://npm.io/package/@ory/elements-preact

## Recent versions

- 0.9.1 (latest) — 2026-06-23
- 0.9.0-rc.0 (next) — 2025-11-27
- 0.9.0 — 2025-12-03
- 0.8.0 — 2025-07-25
- 0.7.0 — 2025-07-24
- 0.6.0 — 2025-05-15
- 0.6.0-pre.2 — 2025-05-07
- 0.6.0-pre.1 — 2025-05-07
- 0.5.2-pre.1 — 2025-04-11
- 0.5.2-pre.0 — 2025-04-11
- 0.5.3 — 2025-03-06
- 0.5.2 — 2025-02-05
- 0.5.1 — 2025-02-03
- 0.5.0 — 2024-09-11
- 0.4.0 — 2024-09-04
- … 49 more at https://npm.io/package/@ory/elements-preact/versions

## 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
- Themeable and modular - use only what you need from it
- Works with the React ecosystem (NextJS, React SPA, Preact SPA)
- Works with the Express based ecosystem
- Dynamically adapts the user interface to your Ory identity schema, sign-in and
  flow configuration

Ory Elements supports integrating with:

- React
- Preact
- ExpressJs (experimental)

## Getting Started

Install Ory Elements into your Preact application

```shell
npm i @ory/elements-preact --save
```

Ory Elements provides you with the ability to theme your application. Wrap your
components with `<ThemeProvider />` and import `style.css` from Ory Elements.

It is best to add this to your `main.tsx` file since it will be reused across
your project. All source code is available in the Ory Elements
[examples/preact-spa](https://github.com/ory/elements/tree/main/examples/preact-spa)
folder.

```tsx
// Ory Elements
// optional global css reset
import "@ory/elements-preact/assets/normalize.css"
// optional fontawesome icons
import "@ory/elements-preact/assets/fa-brands.min.css"
import "@ory/elements-preact/assets/fa-solid.min.css"
import "@ory/elements-preact/assets/fontawesome.min.css"

// optional fonts
import "@ory/elements-preact/assets/inter-font.css"
import "@ory/elements-preact/assets/jetbrains-mono-font.css"

// required styles for Ory Elements
import "@ory/elements-preact/style.css"

const Main = () => {
  return (
    <ThemeProvider themeOverrides={customTheme}>
      <Router>
        <Route path="/" component={Dashboard} />
        <Route path="/login" component={Login} />
        <Route path="/signup" component={Register} />
        <Route path="/verification" component={Verification} />
        <Route path="/recovery" component={Recovery} />
        <Route path="/settings" component={Settings} />
      </Router>
    </ThemeProvider>
  )
}

render(<Main />, document.getElementById("app") as HTMLElement)
```

Ory Elements supports integrating with Ory out of the box with the
`<UserAuthCard/>`, `<UserSettingsCard />` and `<UserErrorCard />`.

Each flow can be mapped using these components with only a few lines of code.

Let's create a login example, create `login.tsx`.

```tsx
export const Login = () => {
  // do sdk calls to get the flow data from Ory
  return flow ? (
    <UserAuthCard
      flow={flow}
      flowType={"login"}
      additionalProps={{
        forgotPasswordURL: "/recovery",
        signupURL: "/signup",
      }}
      title={"Login"}
      includeScripts={true}
      onSubmit={submitFormData}
    />
  ) : (
    <div>Loading...</div>
  )
}
```

---
_Source: https://npm.io/package/@ory/elements-preact · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._