> ## 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.

# UI Customization Overview

<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>

<Tip>
  All the guides in this section pertain to UI customizations for [the Dynamic UI components](/react/reference/components/components-introduction) of the SDK.
</Tip>

There are multiple ways to customize the UI of the Dynamic SDK. You can customize the views, translations, and CSS design among other things. We outline the main methods below and link to respective guides.

## Views

Views are used to customize the kind of UI that shows up at any point in time in your application, specifically giving you complete control over the signup/login options you show your user. [Learn more about views.](/react/using-our-ui/design-customizations/views)

## Translations

Every piece of text displayed in a Dynamic UI component has a corresponding key in our translation file. You can override these keys to customize the text displayed in the UI. [Learn more about translations.](/react/using-our-ui/design-customizations/customizing-copy-translations)

## CSS Design

You have three primary options for completely adapting the look and feel of the UI components on a CSS level. These are:

<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>

<Tip>
  You'll get to interact with all three methods if you take the [Design Tutorial](/react/using-our-ui/design-customizations/tutorials/design-tutorial)!
</Tip>