---
updatedAt: 2025-11-11T01:53:20.000Z
agentTools:
  projectIndex: https://docs.formant.io/llms.txt
---

# UI SDK

The UI SDK offers a bevy of [React](https://reactjs.org/) components based on the [Material UI](https://mui.com/), or MUI, library.

For any custom view, we recommend using the UI SDK to make it appear to be a seamless part of the Formant web application.

## Installation

The Formant UI SDK is published as a Node package. The easiest way to install it is with the Yarn package manager:

`yarn add @formant/ui-sdk`

See [this example](https://github.com/FormantIO/toolkit/tree/master/examples/ui-sdk) for a typical installation.

Additionally, Formant publishes the following specialized packages:

* `@formant/ui-sdk-joystick` for getting a simple joystick with keyboard controls
* `@formant/ui-sdk-login` for using a native-looking login window
* `@formant/ui-sdk-realtime-player` for displaying low-latency video

## Example Library

Below is the library of UI SDK components to use in your custom views or modules. See the UI-SDK code powering this page [here](https://github.com/FormantIO/toolkit/blob/master/examples/ui-sdk/src/main.tsx).

For example, to create a select box, your code might look like this (adapted from the link above):

```typescript
import { createRoot } from "react-dom/client";
import { Typography, Select } from "@formant/ui-sdk";

function App() {
  return (
		<Typography variant="h2" sx={{ textDecoration: "underline" }}>
  		Select
    </Typography>
    <Select
      label="Age"
      items={[
           { label: "0-10", value: "0-10" },
           { label: "11-20", value: "11-20" },
           { label: "21-30", value: "21-30" },
           ]}
      />
    );
}
    
const container = document.getElementById("app");
if (container) {
  const root = createRoot(container);
  root.render(
    <FormantProvider>
      <App />
    </FormantProvider>
  );
}
```

<Embed url="https://formantio.github.io/toolkit/examples/ui-sdk/dist/index.html" title="Formant UI SDK" favicon="null" provider="formantio.github.io" href="https://formantio.github.io/toolkit/examples/ui-sdk/dist/index.html" iframe="true" />

Read on for more details about creating custom views.

<Callout icon="👋" theme="default">
  ### If you notice an issue with this page or need help, please reach out to us! Use the 'Did this page help you?' buttons below, or get in contact with our Customer Success team via the Intercom messenger in the bottom-right corner of this page, or at [support@formant.io](mailto:support@formant.io).
</Callout>