@kalcerm/ui

v0.1.10

Published

4 months ago

Kalcerm UI Library

0High
0Medium
0Low

tonisuwendi

@kalcerm/ui kalcerm ui package react component library

🧩 @kalcerm/ui

Reusable, consistent, and themeable UI components for CRM applications.
Built with React, TypeScript, and TailwindCSS 4 for scalable internal systems at CRM Squad (Kalbe Group).

⚠️ Licensed for internal use only under CRM Squad (Cakra Radha Mustika – Kalbe Group).
See the included LICENSE file for details.

🧩 Requirements

React 19 or later
TailwindCSS 4 or later
Node.js 18+
Optional: react-bootstrap-icons for icon components

📚 Available Components

| Component | Status | | --------------- | ----------------- | | BootstrapIcon | ✅ Stable | | Button | ✅ Stable | | Breadcrumb | ✅ Stable | | Radio Button | ✅ Stable | | Checkbox | ✅ Stable | | Tags | ✅ Stable | | Toggle | ✅ Stable | | Accordion | ✅ Stable | | Tabs | ✅ Stable | | Input Field | ✅ Stable | | Text Area | ✅ Stable | | Modal | ✅ Stable | | AlertDialog | ✅ Stable | | Message | 🧩 In Development | | Date Input | 🚧 Planned | | Pagination | 🚧 Planned | | Dropdown | 🚧 Planned | | Uploader | 🚧 Planned | | Table | 🚧 Planned |

ℹ️ More components will be gradually added as the Design System evolves.
Follow the updates on the Chromatic documentation.

🚀 Installation

Install the package from npm:

pnpm add @kalcerm/ui
# or
npm install @kalcerm/ui

🧱 Usage Example

1️⃣ Global Style Import (required once)

Import the generated stylesheet at the root of your app to inject base fonts and design tokens.

📁 Next.js (App Router)

// app/layout.tsx
import "@kalcerm/ui/dist/styles.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

⚛️ React (Vite / CRA)

// src/main.tsx or src/index.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "@kalcerm/ui/dist/styles.css";

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

2️⃣ Basic Button

import { Button } from "@kalcerm/ui";

export default function Example() {
  return (
    <Button variant="primary" typeStyle="text-icon" iconName="Plus">
      Add Item
    </Button>
  );
}

📦 Importing Components

You can import only what you need to optimize bundle size:

import { Button, Tags } from "@kalcerm/ui";

📘 Documentation

Full interactive component documentation and previews are available on Chromatic:
👉 View Documentation on Chromatic

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme