@adnanalemran/on-ui

A reusable React component library.

Install

npm install @adnanalemran/on-ui

Use In Another Project

Import the library CSS once in your app entry file (for example src/main.tsx):

import "@adnanalemran/on-ui/style.css";

Then import and use components:

import {
  Button,
  Card,
  Input,
  Checkbox,
  Combobox,
  ComboboxInput,
  ComboboxContent,
  ComboboxList,
  ComboboxItem,
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  Label
} from "@adnanalemran/on-ui";

export default function App() {
  return (
    <Card>
      <h2>My App</h2>
      <Button variant="primary">Click me</Button>
      <Label htmlFor="email">Email</Label>
      <Input placeholder="Your email" />
      <Checkbox label="Accept terms" />
      <Combobox>
        <ComboboxInput placeholder="Select a framework..." />
        <ComboboxContent>
          <ComboboxList>
            <ComboboxItem value="react">React</ComboboxItem>
            <ComboboxItem value="vue">Vue</ComboboxItem>
          </ComboboxList>
        </ComboboxContent>
      </Combobox>
      <ContextMenu>
        <ContextMenuTrigger>Right click me</ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuItem>Rename</ContextMenuItem>
        </ContextMenuContent>
      </ContextMenu>
    </Card>
  );
}

Available Components

• Button
• Card
• Input
• Checkbox
• Combobox
• ContextMenu
• Label

Local Development

npm install
npm run dev

Build

npm run build

Build output is created in dist/.

Publish To npm

1. Login to npm:

npm login

2. Update package version:

npm version patch

3. Publish:

npm publish --access public

prepublishOnly runs the build automatically before publishing.

Peer Dependencies

This package expects your app to provide:

• react (^18 || ^19)
• react-dom (^18 || ^19)