@microapp-io/ui

A UI component library built using React, TailwindCSS, and Shadcn components. This library provides reusable, styled components that can be easily integrated into your Microapp applications.

Installation

To install the package in your project, you can use npm or yarn:

npm

npm install @microapp-io/ui

yarn

yarn add @microapp-io/ui

Usage

After installing the package, you can start using the components in your React application.

import React from 'react';
import { Button } from '@microapp-io/ui';
import "@microapp-io/ui/dist/style.css";

function App() {
  return (
    <div className="flex justify-center items-center h-screen">
      <Button>Click me!</Button>
    </div>
  );
}

export default App;

Storybook

How to create new components?

We are using shadcn/ui for building our components. If you've never used shadcn/ui, please check their docs.

Example of installing Alert component

npx shadcn@latest add alert

This will generate generate the component under /components/ui.

Export the created component in our src/index.ts file.

import "./index.css";

export * from "@/components/ui/button";
export * from "@/components/ui/alert";

Create stories (Storybook)

We are using Storybook, so please don't forget about creating stories for your new component. You can see the /components/ui/button.stories.tsx as an example.

License

This project is licensed under the MIT License.