The Microapp UI library is built on Shadcn because their excellence in creating accessible and customizable components. Their documentation 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

npm install @microapp-io/ui

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

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.

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

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

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:

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.