Skip to main content
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.
⌘I