To configure component overrides for the Login flow in Ory Elements using

@ory/elements-react/theme

, you need to use the

components

prop of the

<Login />

component. This prop accepts an object of type

OryFlowComponentOverrides

, allowing you to override the default components with your own—such as those styled with Tailwind CSS or shadcn/ui. Here’s how you can approach this: 1. Create Your Custom Components Build your custom components using Tailwind or shadcn/ui. For example, you might create a custom button or card component. 2. Define the Overrides Object Construct an object matching the

OryFlowComponentOverrides

type, specifying only the components you want to override. 3. Pass the Overrides to the Login Component Use the

components

prop on

<Login />

to provide your overrides. ### Example

jsx import { Login } from "@ory/elements-react/theme" import { OryFlowComponentOverrides } from "@ory/elements-react" import { MyTailwindButton, MyShadcnCard } from "./my-custom-components" import { flow, config } from "./ory-setup" // Assume you have these set up  const myOverrides: OryFlowComponentOverrides = {   Card: {     Root: MyShadcnCard, // Override the card root with your shadcn component   },   Button: {     Root: MyTailwindButton, // Override the button with your Tailwind component   },   // Add more overrides as needed }  export default function LoginPage() {   return (     <Login       flow={flow}       config={config}       components={myOverrides}     />   ) }

- The

components

prop allows you to override only the components you want to change, leaving the rest as defaults. - The overrides object structure matches the shape of

OryFlowComponents

, but all properties are optional, so you can override as much or as little as you like [OryFlowComponentOverrides](https://www.ory.sh/docs/elements/reference/@ory/elements-react/type-aliases/OryFlowComponentOverrides). - The default components you can override are listed in the [@ory/elements-react/theme reference](https://www.ory.sh/docs/elements/reference/@ory/elements-react/theme). Note: The knowledge sources do not provide a full example with Tailwind or shadcn/ui specifically, but the override mechanism is generic and works with any React component, including those styled with Tailwind or shadcn/ui [getOryComponents](https://www.ory.sh/docs/elements/reference/@ory/elements-react/theme/functions/getOryComponents). For more details on the available components to override, see the [OryFlowComponentOverrides reference](https://www.ory.sh/docs/elements/reference/@ory/elements-react/type-aliases/OryFlowComponentOverrides) and the [theme components list](https://www.ory.sh/docs/elements/reference/@ory/elements-react/theme).