Contains all of my personal customized components using Tailwind CSS and favorite UI library, custom hooks and utilities for rapid frontend development.
- This is a personal project of mine and I do not recommend using it for your production projects.
- Whatever you see in the Storybook are all available for use. Just follow the instructions properly on how to use them.
Your app should have the following:
- React v19.
- Tailwind CSS v4.
You can import components, hooks, and utilities right away using the following methods:
- Create your own microfrontend app.
- You can use Jack Herrington's Create MF App CLI to start fast.
- Setup remotes in your Microfrontend project.
- If you used Jack Herrington's CLI, check if you started your App with Webpack (webpack.config.js) or Rspack (rspack.config.js).
- Find the plugin
ModuleFederationPluginand add theremoteEntryof this project.
plugins: [
new ModuleFederationPlugin({
..... other codes
...
remotes: {
"@core":
"core@https://core.thecodebit.digital/remoteEntry.js",
},
...
..... other codes
})
],
- Hooray! 🎉 You can now use all the components, hooks, and utilities present here. See example consumption below.
import React, { Suspense } from "react";
import ReactDOM from "react-dom/client";
import {
NeuFollowButton,
DrawOutlineButton,
NeuBrutalism,
AIButton,
} from "@core/components"; // Core Components
import {
Button,
Badge,
} from "@core/components/shadcn"; // Shadcn Components
import { ThemeProvider, useTheme } from "@core/themes/shadcn"; // Shadcn Theme Provider
import { cn } from "@core/lib"; // Core Utilities
import { useIsMobile } from "@core/hooks"; // Core Hooks
import "@core/styles";
import "./index.css";
const App = () => {
const isMobile = useIsMobile();
return (
<Suspense fallback="Loading..."> // Suspense is required.
<h1 className={cn("text-4xl font-bold", isMobile && "text-2xl")}>
Core Components
</h1>
<NeuFollowButton>Button</NeuFollowButton>
<DrawOutlineButton>Button</DrawOutlineButton>
<NeuBrutalism>Button</NeuBrutalism>
<AIButton>Button</AIButton>
<h1 className="text-4xl font-bold">Shadcn Components</h1>
<ThemeProvider>
<Badge>Hello</Badge>
<Button onClick={() => setTheme("light")}>Light Mode</Button>
<Button onClick={() => setTheme("dark")}>Dark Mode</Button>
</ThemeProvider>
</Suspense>
);
};
const rootElement = document.getElementById("app");
if (!rootElement) throw new Error("Failed to find the root element");
const root = ReactDOM.createRoot(rootElement);
root.render(<App />);
- For Core components, they are all client-side components. For shadcn/ui components, please refer to the shadcn/ui documentation.
- Find all components, hooks, and utils in the Storybook.
- If you're still unsure what to do, refer to this example repo: https://github.com/jeffreybernadas/microfrontend-cart
Note: React v19 and Tailwind CSS v4 are required.
- Install package.
npm install @bernz322/core
- Inside your index.css file, copy and paste the import code below at the top of the file.
@import "tailwindcss";
@import "@bernz322/core/styles/index.css";
- Hooray! 🎉 You are now set! See example consumption below.
import React, { Suspense } from "react";
import ReactDOM from "react-dom/client";
import {
NeuFollowButton,
DrawOutlineButton,
NeuBrutalism,
AIButton,
} from "@bernz322/core/components"; // Core Components
import {
Button,
Badge,
} from "@bernz322/core/components/shadcn"; // Shadcn Components
import { ThemeProvider, useTheme } from "@bernz322/core/themes/shadcn"; // Shadcn Theme Provider
import { cn } from "@bernz322/core/lib"; // Core Utilities
import { useIsMobile } from "@bernz322/core/hooks"; // Core Hooks
import "./index.css";
const App = () => {
const isMobile = useIsMobile();
return (
<Suspense fallback="Loading..."> // Suspense is required.
<h1 className={cn("text-4xl font-bold", isMobile && "text-2xl")}>
Core Components
</h1>
<NeuFollowButton>Button</NeuFollowButton>
<DrawOutlineButton>Button</DrawOutlineButton>
<NeuBrutalism>Button</NeuBrutalism>
<AIButton>Button</AIButton>
<h1 className="text-4xl font-bold">Shadcn Components</h1>
<ThemeProvider>
<Badge>Hello</Badge>
<Button onClick={() => setTheme("light")}>Light Mode</Button>
<Button onClick={() => setTheme("dark")}>Dark Mode</Button>
</ThemeProvider>
</Suspense>
);
};
const rootElement = document.getElementById("app");
if (!rootElement) throw new Error("Failed to find the root element");
const root = ReactDOM.createRoot(rootElement);
root.render(<App />);
- You can also use both as microfrontend and NPM package. Just make sure to import the the stuffs you need correctly. However, I don't recommend using both at the same time.
- Node.js 20+ and npm
Run the following command on your local environment:
git clone https://github.com/jeffreybernadas/core my-project-name
cd my-project-name
npm install
Note: I always update all dependencies whenever I have the time. Then run the storybook in development mode to see components by running:
npm run storybook
Open http://localhost:6006 with your favorite browser to see the storybook.
Create a new component file inside "src/components" directory and export it in "src/index.ts". Note: This is not limited to components only, you can add React Hooks, Utility Functions, and more to it.
To check your created component, create a story of it and run storybook.
You can execute testing by running:
npm run test
For linting and checking code quality and problems, execute:
npm run lint
To fix errors, execute:
npm run lint:fix
For formatting codes, execute:
npm run format
For building your library, execute:
npm run build
This will create a build folder containing index.esm.js, index.cjs.js and typings folder for declarations.
Deployment of Storybook is automated via Github Actions. You can check storybook.yml on how it's done.
Same with Storybook deployment, publishing to NPM is also automated. Just make sure to add NPM_TOKEN in your repositories "Secrets and variables" > "Actions".