# Flush elevation option for page-mounted components

[View video](./appearance-option-flush.mp4)

A new `elevation` appearance option lets you control whether page-mounted Clerk components render inside a card (`raised`) or directly on the page (`flush`). The default is `raised`, preserving existing behavior.

```tsx
<SignIn
  appearance={{
    options: {
      elevation: 'flush',
    },
  }}
/>
```

When set to `flush`, components drop their card background, border, and shadow, making it easier to embed sign-in, and sign-up components into your own layouts. Modals and popovers always use `raised` regardless of this setting.

See the [appearance options documentation](https://clerk.com/docs/nextjs/guides/customizing-clerk/appearance-prop/options.md) for more details.