So here it is, I have gotten really bored creating UI component from scratch for the many projects I work on. It is high time I have a unified component library - so here it is. I have built this to be highly opinionated on certain libraries I love to use like typescript, tailwind, date-fns, next, and react.

I believe in future this UI component library may extend to meta frameworks, Remix and even Nuxt (and naturally Vue.js as well).

Description

The library is written using Next.js, Tailwind and Typescript. The library is uncooked which means there is no build step involved which means you'd have to cater for building the components into your library.

Consuming the library

1. Ensure you have react and typescript install and setup in your project. Then install the library

pnpm add @mbao01/next

or

npm install @mbao01/next

2. Install tailwind - do so by following the installation guide

3. Configure tailwind

export default {
  content: [
    "node_modules/@mbao01/(common|next)/src/**/*", // -> ensure to add this to allow tailwind to scan the library for classes
    ...
  ],
  "plugins": [
    ...require("@mbao01/common/plugin"), // -> import the tailwind library plugin
  ]
}

You can also import styles directly from @mbao01/common/styles. Use this in-place of tailwind.css if you wish.