open-index/open-npm huggingface dataset:
npm package: @fransarria/react-chatbot-kit
Description: Fully customizable chatbot kit for react.
Author: Fredrik Strand Oseberg
Latest version: 2.2.0

# Introduction

react-chatbot-kit provides an easy way to get started building chatbots.

![package preview](https://media.giphy.com/media/J5kWtT2niLglbF7F54/giphy.gif)

## Documentation

View the documentation here: https://fredrikoseberg.github.io/react-chatbot-kit-docs/
npm package: @fransek/package-template
Description: Package template for TypeScript packages
Author: Frans Ekman
Latest version: 1.2.0

# TypeScript Package Template

- [pnpm](https://pnpm.io/) - Package manager
- [Vitest](https://vitest.dev/) - Testing framework
- [Rollup](https://rollupjs.org/) - Module bundler
- [ESLint](https://eslint.org/) - Linter
- [Prettier](https://prettier.io/) - Code formatter
- [Husky](https://typicode.github.io/husky/) - Git hooks
- [lint-staged](https://github.com/okonet/lint-staged) - Run linters on git staged files
- [commitlint](https://commitlint.js.org/) - Conventional commit messages
- [release-please](https://github.com/googleapis/release-please) - Automated releases
npm package: @fransek/statekit
Description: A tiny state management library for React.
Author: Frans Ekman
Latest version: 2.0.1

# Statekit

[![Version](https://img.shields.io/npm/v/@fransek/statekit)](https://npmjs.com/package/@fransek/statekit)
[![Downloads](https://img.shields.io/npm/dm/@fransek/statekit.svg)](https://npmjs.com/package/@fransek/statekit)
[![Minzipped size](https://img.shields.io/bundlephobia/minzip/@fransek/statekit)](https://bundlephobia.com/package/@fransek/statekit)

A tiny state management library for React.

- Simple
- Lightweight
- First-class TypeScript support

## Getting started

1. Install the package:

```sh
npm i @fransek/statekit
```

2. Create a store:

```ts
import { createStore } from "@fransek/statekit";

const store = createStore({ count: 0 }, (set) => ({
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}));
```

3. Use the store:

```tsx
import { useStore } from "@fransek/statekit";
import { store } from "./store";

function Counter() {
  const {
    state: { count },
    actions: { increment, decrement, reset },
  } = useStore(store);

  return (
    <div>
      <div>{count}</div>
      <button onClick={decrement}>-</button>
      <button onClick={increment}>+</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}
```

[Read the API docs.](https://fransek.github.io/statekit/modules.html)
npm package: @fransek/ui
Description: A design system and component library built on top of Base UI
Author: Frans Ekman
Latest version: 0.8.3

# Fransek UI

```bash
pnpm add @fransek/ui @base-ui/react clsx tailwind-merge tailwindcss lucide-react
```

```css
/* globals.css */
@import "tailwindcss";
@import "@fransek/ui";
```