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

# Components

You can use predefined AppKitComponent and add it in your application. As a view, dialog or modal.

```kotlin theme={null}
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.ModalBottomSheetState
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import androidx.compose.material.ModalBottomSheetLayout

setContent {
    val modalSheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden, skipHalfExpanded = true)
    val coroutineScope = rememberCoroutineScope()
    val navController = rememberNavController()

    ModalBottomSheetLayout(
        sheetContent = {
            AppKitComponent(
                shouldOpenChooseNetwork = true | false,
                closeModal = { coroutineScope.launch { modalSheetState.hide() }
            )
        }
    ) {
        // content
    }
}
```

## Buttons

You can add ready made button components to your application

### Web3Button

<Tabs>
  <Tab title="Compose">
    ```kotlin theme={null}
    import com.reown.appkit.ui.components.button.Web3Button
    import com.reown.appkit.ui.components.button.ConnectButtonSize
    import com.reown.appkit.ui.components.button.AccountButtonType
    import com.reown.appkit.ui.components.button.rememberAppKitState

    YourAppScreen(navController: NavController) {
        val appKitState = rememberAppKitState(navController = navController)
        Web3Button(
            state = appKitState,
            accountButtonType = AccountButtonType.NORMAL || AccountButtonType.MIXED,
            connectButtonSize = ConnectButtonSize.NORMAL || ConnectButtonSize.SMALL
        )
    }
    ```
  </Tab>

  <Tab title="View">
    ```xml theme={null}
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

            <com.reown.appkit.ui.components.button.views.Web3Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:connect_button_size="NORMAL" || "SMALL"
                app:account_button_type="NORMAL" || "MIXED"
            />
    </LinearLayout>
    ```
  </Tab>
</Tabs>

### Network Button

<Tabs>
  <Tab title="Compose">
    ```kotlin theme={null}
    import com.reown.appkit.ui.components.button.NetworkButton
    import com.reown.appkit.ui.components.button.rememberAppKitState

    YourAppScreen(navController: NavController) {
        val appKitState = rememberAppKitState(navController = navController)
        NetworkButton(state = appKitState)
    }
    ```
  </Tab>

  <Tab title="View">
    ```xml theme={null}
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

            <com.reown.appkit.ui.components.button.views.NetworkButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
            />
    </LinearLayout>
    ```
  </Tab>
</Tabs>

### Connect Button

<Tabs>
  <Tab title="Compose">
    ```kotlin theme={null}
    import com.reown.appkit.ui.components.button.ConnectButton
    import com.reown.appkit.ui.components.button.ConnectButtonSize
    import com.reown.appkit.ui.components.button.rememberAppKitState

    YourAppScreen(navController: NavController) {
        val appKitState = rememberAppKitState(navController = navController)
        ConnectButton(
            state = appKitState,
            buttonSize = ConnectButtonSize.NORMAL || ConnectButtonSize.SMALL
        )
    }
    ```
  </Tab>

  <Tab title="View">
    ```xml theme={null}
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

            <com.reown.appkit.ui.components.button.views.ConnectButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:connect_button_size="NORMAL" || "SMALL"
            />
    </LinearLayout>
    ```
  </Tab>
</Tabs>

### Account Button

<Tabs>
  <Tab title="Compose">
    ```kotlin theme={null}
    import com.reown.appkit.ui.components.button.AccountButton
    import com.reown.appkit.ui.components.button.AccountButtonType
    import com.reown.appkit.ui.components.button.rememberAppKitState

    YourAppScreen(navController: NavController) {
        val appKitState = rememberAppKitState(navController = navController)
        AccountButton(
            state = appKitState,
            buttonSize = AccountButtonType.NORMAL || AccountButtonType.MIXED
        )
    }
    ```
  </Tab>

  <Tab title="View">
    ```xml theme={null}
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

            <com.reown.appkit.ui.components.button.views.AccountButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:account_button_type="NORMAL" || "MIXED"
            />
    </LinearLayout>
    ```
  </Tab>
</Tabs>

### AppKit State

AppKitState is an object that ensures communication between your application and the state of the AppKit.

#### Create appKitState:

NavController is required to create appKitState

```kotlin theme={null}
    val appKitState = rememberAppKitState(navController)
```

#### AppKitState methods

```kotlin theme={null}
    appKitState.isOpen
```

returns `StateFlow<Boolean>` whose value is updated depending on whether the appkit component is open

```kotlin theme={null}
    appKitState.isConnected
```

returns `StateFlow<Boolean>` whose value depends on the active session in AppKit