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

# Customizing your UI

> Customize AppKit's look and feel — themes, colors, fonts, and pre-built UI components.

Reown allows you to customize the look and feel of the UI, including its theme (light or dark), colors and fonts. Plus, you can also add polished functionality to your app with pre-built UI components.

## Theming

Theming settings allow you to:

* Attach your app's theme to the user's system settings (light or dark)
* Override system theme settings and enforce either a light or dark theme.
* Set specific colors for your theme that align with your brand identity, including backgrounds, buttons, icons, labels & more.
* Pick a font that aligns with your brand identity and set its size

To learn more about theming settings, visit the theming page for your chosen framework.

<CardGroup cols={2}>
  <Card title="React" icon="react" href="./react/core/theming">
    Explore React Theming Settings
  </Card>

  <Card title="Next.js" icon="square-n" href="./next/core/theming">
    Explore Next.js Theming Settings
  </Card>

  <Card title="Vue" icon="vuejs" href="./vue/core/theming">
    Explore Vue Theming Settings
  </Card>

  <Card title="Svelte" icon="https://mintcdn.com/reown-5552f0bb/y6FfJGDgiHdFLuuy/images/icons/svelte.svg?fit=max&auto=format&n=y6FfJGDgiHdFLuuy&q=85&s=ac80fcae3436e349d376fa7598bd4d32" href="./svelte/core/theming" width="24" height="24" data-path="images/icons/svelte.svg">
    Explore Svelte Theming Settings
  </Card>

  <Card title="Nuxt" icon="mountains" href="./nuxt/core/theming">
    Explore Nuxt Theming Settings
  </Card>

  <Card title="JavaScript" icon="js" href="./javascript/core/theming">
    Explore JavaScript Theming Settings
  </Card>

  <Card title="React Native" icon="react" href="./react-native/core/theming">
    Explore React Native Theming Settings
  </Card>

  <Card title="Flutter" icon="flutter" href="./flutter/core/theming">
    Explore Flutter Theming Settings
  </Card>

  <Card title="Android" icon="android" href="./android/core/theming">
    Explore Android Theming Settings
  </Card>

  <Card title="Unity" icon="unity" href="./unity/core/customization">
    Explore Unity Theming Settings
  </Card>
</CardGroup>

## Components

Reown also offers pre-built UI components that you can include in your UI immediately to allow specific functions.
These include components such as:

* Wallet Buttons: Provide buttons specifically for wallet connections without triggering the full connection modal
* Connect Button: Allows user to connect a wallet
* Account Button: Allows users to open account view
* Network Button: Lets the user switch networks

To learn more about pre-built components, head to the components page for your chosen framework.

<CardGroup cols={2}>
  <Card title="React" icon="react" href="./react/core/components">
    Explore React Components
  </Card>

  <Card title="Next.js" icon="square-n" href="./next/core/components">
    Explore Next.js Components
  </Card>

  <Card title="Vue" icon="vuejs" href="./vue/core/components">
    Explore Vue Components.
  </Card>

  <Card title="Svelte" icon="https://mintcdn.com/reown-5552f0bb/y6FfJGDgiHdFLuuy/images/icons/svelte.svg?fit=max&auto=format&n=y6FfJGDgiHdFLuuy&q=85&s=ac80fcae3436e349d376fa7598bd4d32" href="./svelte/core/components" width="24" height="24" data-path="images/icons/svelte.svg">
    Explore Svelte Components.
  </Card>

  <Card title="Nuxt" icon="mountains" href="./nuxt/core/components">
    Explore Nuxt Components.
  </Card>

  <Card title="JavaScript" icon="js" href="./javascript/core/components">
    Explore JavaScript Components.
  </Card>

  <Card title="React Native" icon="react" href="./react-native/core/components">
    Explore React Native Components.
  </Card>

  <Card title="Android" icon="android" href="./android/core/components">
    Explore Android Components.
  </Card>
</CardGroup>