open-index/open-npm huggingface dataset:
npm package: @ruchiralk/chat-bot-com
Description: A customizable chatbot UI component for React
Author: Ruchira Kaluarachchi
Latest version: 1.0.17


# React Custom Chatbot

A fully customizable, lightweight and interactive chatbot UI component for React applications. Easily integrate a chatbot into your website with dynamic responses, custom styling and mobile responsiveness.


## Installation and Usage

1.Installing

```bash
npm i @ruchiralk/chat-bot-com

```

2.Import library in your React project (📂src/App.jsx)

```bash
import React from 'react';
import Chatbot from '@ruchiralk/chat-bot-com';
import customResponses from './responses';

function App() {
  return (
    <div className="App">
      <Chatbot customResponses={customResponses} />
    </div>
  );
}

export default App;

```

3.Customize your own chatbot responses,
Create a responses.js file in your project (📂src/responses.js)

```bash
const customResponses = {
  greeting: "How can I help you today!",
  responses: {
    "products": "We offer electronics and cloths.",

    "sale": "Check our homepage for current sales!",

    "price": (input) => {
      if (input.includes("expensive")) {
        return "We offer competitive pricing!";
      }
      return "Prices vary by product.";
    }
  },
  defaultResponse: "I can't respond that."
};

export default customResponses;

```

### ⚙️Customize CSS styles
The chatbot comes with default CSS, but you can override styles

```bash
/* In your global CSS file */

/*  Bot bubbles */
.botText span {
  background: #4CAF50 !important; 
}


/*  User bubbles */
.userText span {
  background: #2196F3 !important; 
}


/*  Chatbot header */
.collapsible {
  background: #FF5722 !important; 
}

```

### Happy coding...!
## Demo

https://chatbot-demo-live.vercel.app/


## 🔗 Links
[![portfolio](https://img.shields.io/badge/my_portfolio-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://www.ruchiralk.me/)
[![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/ruchira-kaluarachchi/)
npm package: @ruchiralk/cursor
Description: A custom animated cursor component for React
Author: Your Name
Latest version: 1.0.4

# Custom cursor

A simple and customizable animated cursor effect for web applications. Works with React applications and plain HTML/CSS/JavaScript.

## 📦 Installation

## For React Application

### 1. To deploy this project run

```bash
  npm install @ruchiralk/cursor
```

### 2. Import library to App.js

```bash
  import Ruchiralkcursor from "@ruchiralk/cursor";

  function App() {
    return (
      <>
        <Ruchiralkcursor />
      </>
    );
  }

  export default App;
```

## For Plain HTML

### 1. Add the CDN link and setup library

```bash

<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@ruchiralk/cursor/src/cursor.css"
    />
  </head>
  <body>
    <!-- Your content -->

    <script type="module">
      import { enableCursorEffect } from "https://cdn.jsdelivr.net/npm/@ruchiralk/cursor/src/cursor.js";
      enableCursorEffect();
    </script>
  </body>
</html>


```
npm package: @ruchisinha2807/theme-switcher
Description: Lightweight theme switching engine using CSS variables
Latest version: 1.0.2

🌗 @ruchisinha2807/theme-switcher

A lightweight, framework-agnostic theme switching engine for modern web apps.
Built with CSS variables, supports light / dark / system themes, persistence, and a clean React API.

This package manages theme state and DOM updates, not UI or styling.

✨ Features

- Light / Dark / System theme support

- CSS variables–based (no styling assumptions)

- Persists theme in localStorage

- React-friendly (ThemeProvider, useTheme)

- SSR-safe

- Zero CSS or Tailwind dependency

- Small & tree-shakeable

📦 Installation
npm install @ruchisinha2807/theme-switcher


or

yarn add @ruchisinha2807/theme-switcher

🧠 Core Concept

The package works by applying a data attribute on the <html> element:

<html data-theme="dark">


You define your themes using CSS variables:

[data-theme="light"] {
  --bg: #ffffff;
  --text: #000000;
}

[data-theme="dark"] {
  --bg: #0f172a;
  --text: #e5e7eb;
}


Your app styles then consume variables:

body {
  background-color: var(--bg);
  color: var(--text);
}

⚛️ React Usage
1. Wrap your app with ThemeProvider
import { ThemeProvider } from "@ruchisinha2807/theme-switcher";

export function App() {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  );
}


ThemeProvider initializes the theme and keeps React in sync with changes.

2. Use useTheme hook
import { useTheme } from "@ruchisinha2807/theme-switcher";

function ThemeToggle() {
  const { theme, resolvedTheme, setTheme } = useTheme();

  return (
    <>
      <p>Theme: {theme}</p>
      <p>Resolved: {resolvedTheme}</p>

      <button onClick={() => setTheme("light")}>Light</button>
      <button onClick={() => setTheme("dark")}>Dark</button>
      <button onClick={() => setTheme("system")}>System</button>
    </>
  );
}

🧩 API Reference
setTheme(theme)
setTheme("light" | "dark" | "system");


Sets and persists the theme.

getTheme()
getTheme(): "light" | "dark" | "system"


Returns the user-selected theme.

getResolvedTheme()
getResolvedTheme(): "light" | "dark"


Returns the actual applied theme (after resolving system).

useTheme()
{
  theme: Theme;
  resolvedTheme: ResolvedTheme;
  setTheme: (theme: Theme) => void;
}

🌐 Non-React Usage (Core API)

You can use the engine without React:

import { initTheme, setTheme } from "@ruchisinha2807/theme-switcher";

initTheme();
setTheme("dark");

🖥️ System Theme Support

When theme = "system":

Uses prefers-color-scheme

Automatically updates when OS theme changes

🧪 SSR Safety

No DOM access during import

All browser APIs are guarded

Safe for Next.js and other SSR frameworks

- What This Package Does NOT Do

- No UI components

- No Tailwind config

- No predefined colors

- No opinionated design system

This keeps the package flexible and reusable.
npm package: @rucimiren/xiao-ui
Description: 生活不能等别人来安排，要自已去争取和奋斗；而不论其结果是喜是悲，但可以慰藉的是，你总不枉在这世界上活了一场。
Author: rucimiren
Latest version: 0.4.1

# my-components

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).


## tailwindCss指引

本项目使用了2.x版本，*覆盖了部分变量，参见`tailwind.config.js`*

* 1.x的英文文档https://v1.tailwindcss.com/
* 也可以参考2.x的中文文档：https://docs.tailwindchina.com/docs，与1.x差异：https://blog.tailwindcss.com/tailwindcss-v2，1.x到2.x的升级指南：https://tailwindcss.com/docs/upgrading-to-v2

## 对齐vscode插件

* `Auto Close Tag`
* `Auto Import`
* `Auto Rename Tag`
* `Better Comments`
* `Code Spell Checker`
* `Color Highlight`
* `Comment Translate`
* `EditorConfig for VS Code`
* `ESLint`
* `Prettier - Code formatter`
* `Jump To Alias File`
* `Image preview`
* `Markdown All in One`
* `minapp`
* `open in browser`
* `Path Intellisense`
* `px to rem & rpx(cssrem)`
* `SCSS IntelliSense`
* `GitLens`
* `Tailwind CSS IntelliSense`
* `Tailwind CSS Transpiler`
* `Vetur`
* `Vue Peek`
* `vue-helper`
* `Color Info`
* `Draw.io Integration`
* `Drawio Preview`