@programmer-molor/ui-components

A collection of 18+ customizable React UI components with Tailwind CSS support.

Installation

npm install @programmer-molor/ui-components

or with yarn:

yarn add @programmer-molor/ui-components

Usage

import { Button, Card, Modal, Input } from "@programmer-molor/ui-components";
import "@programmer-molor/ui-components/style.css";

function App() {
  return (
    <Card>
      <Button variant="primary" size="md">
        Click me
      </Button>
      <Input placeholder="Type here..." />
    </Card>
  );
}

Props

All components accept the following props:

| Prop | Type | Default | Description | | ----------- | ----------- | ------- | ---------------------- | | className | string | "" | Additional CSS classes | | children | ReactNode | - | Component children |

Available Components

This library includes 18+ components including:

• Buttons: Button - Primary, secondary, outline variants
• Form Controls: Input, Checkbox, Select, Textarea, Switch, Slider
• Feedback: Alert, Modal, Progress, Tooltip
• Layout: Card, CardHeader, CardBody, CardFooter
• Navigation: Tabs, TabsList, TabsTrigger, TabsContent
• Data Display: Badge, Avatar, Accordion
• Utilities: PropsTable, CodePreview

Custom Components

You can customize components using the provided props:

import { Button, Card, Alert } from "@programmer-molor/ui-components";

const MyComponent = () => {
  return (
    <Card className="p-4">
      <Alert variant="success">Operation completed successfully!</Alert>
      <Button variant="primary" size="lg" className="mt-4">
        Continue
      </Button>
    </Card>
  );
};

Peer Dependencies

This library requires the following peer dependencies:

• react: ^18.0.0 || ^19.0.0
• react-dom: ^18.0.0 || ^19.0.0

License

MIT © Gilang