Commonux2 NPM | npm.io

CommonUX2.0

A collection of styled components for use in ABB projects, designed for React and Next.js. It features TypeScript support, integrates Lucide icons, and is built on Radix primitives with Tailwind CSS.

Installation

To install, run the following command in your project:

npm install commonux2

Configuration

Update your tsconfig.json with the following paths configuration:

{
  // ...
  "baseUrl": ".",
  "paths": {
    // ...
    "commonux2/components/*": ["node_modules/commonux2/dist/components/*"]
  }
}

Import `style.css' from package to your main component

// main.tsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import "commonux2/styles.css";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Start importing components and use it

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "commonux2/components/alert-dialog";

export function SomeComponent() {
  return (
    <div>
      <AlertDialog>
        <AlertDialogTrigger className="text-red-500">Open</AlertDialogTrigger>
          {/*  various component takes variant, size, color and classNames  */}
        <AlertDialogContent variant="error">
          <AlertDialogHeader>
            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
            <AlertDialogDescription>
              This action cannot be undone. This will permanently delete your
              account and remove your data from our servers.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction>Continue</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
}