Skip to main content

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.

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.