> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Customizing Signup/Login UI

<Card title="Recommended: JavaScript SDK with React Hooks" icon="react" color="#4779FE">
  For new React apps, we recommend the JavaScript SDK with React Hooks (`@dynamic-labs-sdk/react-hooks`) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the [React quickstart (JavaScript SDK)](/javascript/reference/react-quickstart) to get started.
</Card>

As you can see [on the demo](https://demo.dynamic.xyz/), you can configure the login page in many different ways. This page walks you through where to find those configuration options.

For the most part you will find them in [the "Log in & User Profile" section of the Dynamic Dashboard](https://app.dynamic.xyz/dashboard/log-in-user-profile).

## Choose login methods to display and in what order

As far as the login methods to display, this is determined firstly by whatever you have enabled at the time, but you can override it using Login Views and also handle custom ordering there - learn more in [the tutorial](/react/using-our-ui/design-customizations/tutorials/login-views-guide).

## Embedded Widget or Button

By default, if you use our DynamicWidget, it will show up as a button which opens the login screen in a modal. You can change this to an embedded widget so that the whole signup/login modal shows up directly on the page.

You can see both these options in action on [the demo](https://demo.dynamic.xyz/) in the "Widget integration" section under "Design". Learn more about the standard widget [here](/react/reference/components/dynamicwidget) and the embedded widget [here](/react/reference/components/dynamicembeddedwidget).

## Email Continue button

By default, we split email login into two components, an input and a continue button directly below it. You can merge them into one single component using the "Display email submit button inside the input field" button in "Design Settings".

## Expanded vs Collapsed wallet list

The login screen normally lists wallets one by one, which can clutter the screen if branded wallet login is not the most important thing to your users. You can collapse this list down into a single "Continue with a wallet" button (which will in turn open this list) but using the "Collapse wallet list" button in "Design Settings".

## Splitting Social & Email

The social and email sections of the login screen are bundled together by default i.e. without an OR separator like with external wallets, but you can change this using the "Split email and social into separate sections" button in "Design Settings".

## Social above email

The default UI shows email login above social if both are enabled. You can switch the default ordering using the "Place social above email section" button in "Design Settings".

## Changing the text

You can change any part of the text which is shown in the login UI using our translations feature - learn more about that in [the tutorial](/react/using-our-ui/design-customizations/customizing-copy-translations).

## Adjusting Signup/Login button

If you want to change the text/css, please refer to the Changing CSS section below. To change the text itself, we will use the innerButtonComponent prop on the DynamicWidget. This prop allows us to pass in a JSX element that will be rendered as the button.

```jsx theme={"system"}
<DynamicWidget
  innerButtonComponent={<>My Custom Connect Wallet Button</>}
>
  {/* ... rest of your app ... */}
</DynamicWidget>
```

<Warning>
  Note if you use a button tag, you might get a warning about button not being a valid descendant of a button.
</Warning>

If you want to use your own custom button we can use `setShowAuthFlow` available though [the useDynamicContext hook](/react/reference/hooks/usedynamiccontext).

We access it like this:

```jsx theme={"system"}
const { setShowAuthFlow } = useDynamicContext();
```

We can then use this function to trigger the Dynamic Connect Wallet flow when our custom button is clicked.

```jsx theme={"system"}
<button onClick={() => setShowAuthFlow(true)}>
  My Custom Connect Wallet Button
</button>
```

## Adding your own sections

You can inject your own custom content into the login UI using [our Custom Widget Content tutorial](/react/using-our-ui/design-customizations/tutorials/custom-widget-content).

## Changing the CSS

We offer multiple ways of changing/overriding the CSS in the login view as well as every other view:

<CardGroup cols={3}>
  <Card title="Themes">
    You can use a theme to override the default styles of components cohesively. [Learn more.](/react/using-our-ui/design-customizations/css/themes)
  </Card>

  <Card title="CSS Variables">
    You can use CSS variables to override individual styles of the UI components.

    [Learn more.](/react/using-our-ui/design-customizations/css/css-variables)
  </Card>

  <Card title="Custom CSS">
    You can add custom CSS in order to ignore all Dynamic styles and create your own.

    [Learn more.](/react/using-our-ui/design-customizations/css/custom-css)
  </Card>
</CardGroup>