universal-ui-lib

Universal UI Lib

A universal React UI component library that adapts automatically to Ant Design, Material UI, or fallback HTML, depending on which library you install.

Installation

Use with AntD

npm install universal-ui-lib antd

Use with Material UI

npm install universal-ui-lib @mui/material @emotion/react @emotion/styled

Use with plain HTML fallback

npm install universal-ui-lib

Usage

import { Button, Input, Card, Modal, Table, Select } from "universal-ui-lib";

export default function App() {
  const columns = [
    { title: "Name", dataIndex: "name" },
    { title: "Age", dataIndex: "age" }
  ];
  
  const data = [
    { name: "John", age: 25 },
    { name: "Jane", age: 30 }
  ];
  
  const options = [
    { value: "1", label: "Option 1" },
    { value: "2", label: "Option 2" }
  ];

  return (
    <Card title="My App">
      <Button type="primary">Click Me</Button>
      <Input placeholder="Enter text" />
      <Select options={options} />
      <Table columns={columns} dataSource={data} />
    </Card>
  );
}

Available Components

• Button - Renders as Ant Design Button, Material UI Button, or HTML button
• Input - Renders as Ant Design Input, Material UI TextField, or HTML input
• Card - Renders as Ant Design Card, Material UI Card, or styled div
• Modal - Renders as Ant Design Modal, Material UI Modal, or custom overlay
• Table - Renders as Ant Design Table, Material UI Table, or HTML table
• Select - Renders as Ant Design Select, Material UI Select, or HTML select

The library auto-detects which UI framework is available and renders accordingly.