Getting Started with Orythemes

Orythemes are CSS and React theme bundles for Ory Elements, the official Ory UI component library.

Prerequisites

Before integrating an Orythemes theme, you’ll need:

• Ory Kratos running (self-hosted or on Ory Network)
• A Next.js, Remix, or Vite-based React app using @ory/elements v0.9+
• Node.js 18+

Installation

(Available when themes launch — join the waitlist to be notified.)

Once you’ve purchased a theme, your download includes:

• theme.css — CSS variable overrides scoped to .ory-elements
• theme-tokens.json — JSON token overrides for ThemeProvider.themeOverrides
• components/ — Optional React component overrides
• docs/INTEGRATION.md — Framework-specific setup instructions
• docs/CHANGELOG.md — Compatibility notes per Ory Elements version

Quick Start (Preview)

// 1. Import the theme CSS in your root layout
import './theme.css'

// 2. Use ThemeProvider from Ory Elements
import { ThemeProvider } from '@ory/elements'

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider>
      {children}
    </ThemeProvider>
  )
}

Flows Covered

All Orythemes themes cover the complete set of Ory Kratos self-service flows:

Flow	Route
Login	/self-service/login
Registration	/self-service/registration
Account Recovery	/self-service/recovery
Email Verification	/self-service/verification
Account Settings	/self-service/settings
Error	/self-service/errors

Ory Elements Version Compatibility

Theme packages are versioned against Ory Elements minor releases. The file naming convention is:

{slug}-v{version}-ory-elements-{minor}.zip

Example: onyx-v1.0-ory-elements-0.9.zip works with any @ory/elements@0.9.x.

When Ory Elements ships breaking theming changes, a new theme package version is released. Buyers within the active update window receive email notification.

Questions?

Open a discussion or contact us at hello@orythemes.com.