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

# Microapp UI

> Use our pre-built components.

The Microapp UI library is built on [Shadcn](https://ui.shadcn.com/) because their excellence in creating accessible and customizable components. Their [documentation](https://ui.shadcn.com/docs) is a valuable resource when building microapps.

Here's how you can use the Microapp UI library in your microapp:

## Installation and Setup

### 1. Install the UI library

<CodeGroup>
  ```bash npm theme={null}
  npm install @microapp-io/ui
  ```

  ```bash yarn theme={null}
  yarn add @microapp-io/ui
  ```

  ```bash pnpm theme={null}
  pnpm add @microapp-io/ui
  ```
</CodeGroup>

### 2. Import the styles

The Microapp UI library's styles must be imported so that UI components are styled correctly. You can do this by importing the `@microapp-io/ui/dist/style.css` file in your microapp.

```typescript theme={null}
import '@microapp-io/ui/dist/styles.css';

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}
```

## Using Components

### 3. Import existing components

The full list of components in the Microapp UI can be found here: [https://ui.microapp.io](https://ui.microapp.io).

Using them in your microapp is easy. Here's an example using the `<Button>` component:

```typescript theme={null}
import { Button } from '@microapp-io/ui';

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}
```

### 4. Create new components

Microapp UI is built on [Shadcn](https://ui.shadcn.com/), so their command line interface (CLI) can be used to add components to your microapp.

For example, to add an `<Alert>` component, run the following Shadcn command:

```bash theme={null}
npx shadcn@latest add alert
```

This will create the `<Alert>` component in the `components` directory of your microapp. You can import and use it like any other component:

```typescript theme={null}
import { Alert } from '@/components/Alert';

export default function Home() {
  return (
    <div>
      <Alert type="success">This is a success alert</Alert>
    </div>
  );
}
```

For more information, see Shadcn's [documentation](https://ui.shadcn.com/docs).