Please add how to use Vanilla-Extract in ory/elements examples

[meotimdihia]

Currently, I don't know how to implement a custom style:

https://github.com/ory/elements#strongly-typed-css-using-vanilla-extract

Please add the code to Next/React examples:

Also currently, it is hard to change the style in @ory/elements. It is good if we can add a headless UI.

[aeneasr]

@Benehiko can you take a look?

[Benehiko]

Hi @meotimdihia,

Thank you for using @ory/elements :)

You can override the css properties by passing in your own class. to the AuthCard component. It's not perfect since we haven't abstracted enough of the components from the styling. But it should also be possible for you to build your own "AuthCard" with your own buttons by using the internal components. FilterFlowNodes should be your friend here since it only adds gaps to each element it adds to the dom. The container managing these elements can be whatever you want it to be. https://github.com/ory/elements/blob/main/src/react-components/ory/helpers/filter-flow-nodes.tsx#L16

On our website, we just add a max-width override with tailwindcss (https://www.ory.sh/identity-authentication/)

const AuthComponent => (
 <ThemeProvider>
      <UserAuthCard
        className={cn("!max-w-[28rem]", styles)}
        title={theme.cardTitle}
        flow={theme.flowData || (defaultLogin as SelfServiceFlow)}
        flowType="login"
      />
    </ThemeProvider>
  )
)

If you have other suggestions on how we can improve @ory/elements, please add an issue to the GitHub repository here https://github.com/ory/elements/issues. Contributions in the form of a PR are also welcome :)

[meotimdihia]

@Benehiko Thanks, it works for me. Yesterday, I tried with w-[40rem] but forgot about max-width limiting this attribute.
Then I read about Vanilla-Extract and got confused.

[meotimdihia]

@Benehiko Please add an example of how to add class/change style for child elements.

[Benehiko]

You can't at such a nested level. At that level you need to then implement your own UserAuthCard using the internal components. https://github.com/ory/elements/tree/main/src/react-components