@saisricharan/archana-ui

A reusable React UI component library built with React, TypeScript, and Vite.

🚀 Designed for scalable, customizable, and modern UI development.

✨ Features

• Controlled component architecture
• Fully typed with TypeScript
• Reusable and customizable
• Built with Vite (fast & optimized)
• Supports sizes and variants
• Tag add/remove functionality
• Duplicate prevention
• Max tag limit support
• Clean UI with CSS tokens

📦 Installation

npm install @saisricharan/archana-ui

🎨 Import Styles

import "@saisricharan/archana-ui/dist/archana-ui.css";

🚀 Usage
import { useState } from "react";
import { SmartTagInput } from "@saisricharan/archana-ui";
import "@saisricharan/archana-ui/dist/archana-ui.css";

function App() {
  const [tags, setTags] = useState<string[]>(["React"]);

  return (
    <SmartTagInput
      tags={tags}
      onChange={setTags}
      label="Skills"
      placeholder="Type and press Enter..."
      maxTags={5}
      helperText="Press Enter to add a tag"
    />
  );
}

export default App;

🧩 SmartTagInput Props
| Prop              | Type                                   | Required | Default                     | Description             |
| ----------------- | -------------------------------------- | -------- | --------------------------- | ----------------------- |
| `tags`            | `string[]`                             | ✅ Yes    | —                           | Current tags            |
| `onChange`        | `(updatedTags: string[]) => void`      | ✅ Yes    | —                           | Called when tags change |
| `label`           | `string`                               | ❌ No     | `"Add Tags"`                | Input label             |
| `placeholder`     | `string`                               | ❌ No     | `"Type and press Enter..."` | Input placeholder       |
| `maxTags`         | `number`                               | ❌ No     | `5`                         | Maximum number of tags  |
| `disabled`        | `boolean`                              | ❌ No     | `false`                     | Disables input          |
| `allowDuplicates` | `boolean`                              | ❌ No     | `false`                     | Allow duplicate tags    |
| `helperText`      | `string`                               | ❌ No     | `""`                        | Helper text             |
| `error`           | `boolean`                              | ❌ No     | `false`                     | Error state             |
| `errorMessage`    | `string`                               | ❌ No     | `""`                        | Error message           |
| `size`            | `"sm" \| "md" \| "lg"`                 | ❌ No     | `"md"`                      | Component size          |
| `variant`         | `"outlined" \| "filled"`               | ❌ No     | `"outlined"`                | Style variant           |
| `onAddTag`        | `(tag: string) => void`                | ❌ No     | —                           | Callback on add         |
| `onRemoveTag`     | `(tag: string, index: number) => void` | ❌ No     | —                           | Callback on remove      |


💡 Example
import { useState } from "react";
import { SmartTagInput } from "@saisricharan/archana-ui";
import "@saisricharan/archana-ui/dist/archana-ui.css";

function Example() {
  const [skills, setSkills] = useState<string[]>(["HTML", "CSS"]);

  return (
    <SmartTagInput
      tags={skills}
      onChange={setSkills}
      label="Frontend Skills"
      placeholder="Add a skill"
      maxTags={6}
      size="md"
      variant="outlined"
      helperText="You can add up to 6 tags"
      onAddTag={(tag) => console.log("Added:", tag)}
      onRemoveTag={(tag, index) => console.log("Removed:", tag, index)}
    />
  );
}

export default Example;

🛠 Development

Clone the project and install dependencies:

npm install

Run locally:

npm run dev

Build the library:

npm run build

🚀 Publish
npm publish --access public

📦 Package
@saisricharan/archana-ui