open-index/open-npm huggingface dataset:
npm package: @heroor/tpm
Description: TPM is a typings package manager for your npm, pnpm and yarn projects
Author: Bener
Latest version: 0.0.5

# TPM(typings package manager)

TPM is a command line tool for managing your `TypeScript` `@types/xxx` packages.

> Support npm, pnpm, and yarn package manager.

## Install

```shell
pnpm install @heroor/tpm -g
```

## Usage

### install typings

```shell
tpm node react

# same as:
# npm install @types/node @types/react -D
# or
# pnpm add @types/node @types/react -D
# or
# yarn add @types/node @types/react -D
```

### uninstall typings

```shell
tpm - node react

# same as:
# npm uninstall @types/node @types/react -D
# or
# pnpm remove @types/node @types/react -D
# or
# yarn remove @types/node @types/react -D
```

## develop

```shell
pnpm install
pnpm run dev
pnpm link --global # link to global
pnpm remove --global @heroor/tpm # remove/unlink tpm
```

## Licence

License [MIT](https://github.com/Heroor/tpm/blob/main/LICENSE)

© 2022-present, [Bener](https://github.com/Heroor)
npm package: @heropana/chat-ui-kit-styles
Description: SCSS themes for @chatscope/chat-ui-kit-react library
Latest version: 2.0.6

# Chat UI Kit Styles

[![Actions Status](https://github.com/chatscope/chat-ui-kit-styles/workflows/build/badge.svg)](https://github.com/chatscope/chat-ui-kit-styles/actions) [![npm version](https://img.shields.io/npm/v/@chatscope/chat-ui-kit-styles.svg?style=flat)](https://npmjs.com/@chatscope/chat-ui-kit-styles) [![](https://img.shields.io/npm/l/@chatscope/chat-ui-kit-styles)](https://github.com/chatscope/chat-ui-kit-styles/blob/master/LICENSE) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://chatscope.io/storybook/react/)

Base theme for [chat-ui-kit-react](https://github.com/chatscope/chat-ui-kit-react). 

You can  use this theme, or create your own by customizing scss variables.

## Install

Using yarn.
```sh
yarn add @chatscope/chat-ui-kit-styles
```

Using npm.
```sh
npm install @chatscope/chat-ui-kit-styles
````

## Usage

```jsx
import styles from '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';
```

For more information please visit [Chat UI Kit React repository](https://github.com/chatscope/chat-ui-kit-react)
or check our friendly [Storybook](https://chatscope.io/storybook/react/).


## Community and support

* Twitting via [@chatscope](https://twitter.com/chatscope)
* Chatting at [Discord](https://discord.gg/TkUYWQRf2M)
* Facebooking at [Facebook](https://www.facebook.com/chatscope)
* Articles on the [chatscope blog](https://chatscope.io/blog/)

## Website

[https://chatscope.io](https://chatscope.io)

## License

[MIT](https://github.com/chatscope/chat-ui-kit-styles/blob/master/LICENSE)
npm package: @heroqu/prettier-config
Description: Personal prettier config
Author: Heroqu
Latest version: 1.0.0

# `@heroqu/prettier-config`

Personal [Prettier](https://prettier.io) config.

## Usage

**Install**:

```bash
$ yarn add --dev @heroqu/prettier-config
```

**Edit `package.json`**:

```jsonc
{
  // ...
  "prettier": "@heroqu/prettier-config"
}
```

### Overriding...

If one would like to override some settings one can instead import the file in a `.prettierrc.js` file and export the modifications, e.g.:

```javascript
module.exports = {
  ...require("@heroqu/prettier-config"),
  semi: false,
};
```
npm package: @heroshe/microfrontends
Description: A package for working with microfrontends at Heroshe
Author: mykeels
Latest version: 0.0.24-alpha-attempt-mf-slot--2024-01-25-13.17.37.0

# microfrontends

A library of utilities for powering Microfrontends.

See docs in [README](https://github.com/heroshe/mf-experiments?tab=readme-ov-file#exposing-modules-from-a-microfrontend)
npm package: @heroshe/ui
Description: A library of utilities for powering Microfrontends.
Author: mykeels
Latest version: 0.0.4

# microfrontends

A library of utilities for powering Microfrontends.

## To load a Microfrontend

You need the [Microfrontend](./src/components/Microfrontend/index.ts) component to do this.

```jsx
import { Microfrontend } from "microfrontends";

<Microfrontend
  entry="http://localhost:3002/remoteEntry.js"
  scope="ProjectScope"
  module="./src/bootstrap.js"
  Fallback={<div>Fallback</div>}
  Loading={<div>Loading</div>}
/>;
```

## To load Microfrontends on Routes in a Chassis

```jsx
import { MicrofrontendScreen } from "microfrontends";
import { useNavigate, BrowserRouter, Routes, Route } from "react-router-dom";

import HomeScreen from "./components/HomeScreen";

export const AppRoutes = () => {
  const navigate = useNavigate();
  return (
    <BrowserRouter>
      <Routes>
        <Route exact path="/" component={HomeScreen} />
        <Route
          path="*"
          component={(props) => (
            <MicrofrontendScreen
              getMicrofrontendManifests={async () =>
                fetch("/microfrontend-manifests.json").then((res) => res.json())
              }
              Fallback={() => <div>Page Not Found</div>}
              Loading={() => <div>...Loading...</div>}
              navigate={navigate}
              {...props}
            />
          )}
        />
      </Routes>
    </BrowserRouter>
  );
};
```

## Microfrontend Debugging Tools

To see which microfrontends are currently active on a page, enter the following code in the browser console:

```js
console.table(
  Object.entries(window.$mfs)
    .map(([scope, values]) =>
      Object.entries(values)
        .map(([module, { instances }]) => ({
          scope,
          module,
          instances,
        }))
        .filter(({ instances }) => instances)
    )
    .flat()
);
```
npm package: @heroswap/sdk-bsc
Description: SDK for building applications for the Heroswap on top of Binance Smart Chain
Latest version: 0.1.0

# Heroswap | SDK FOR BSC

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![Actions Status](https://github.com/heroswap/heroswap-sdk-bsc/workflows/CI/badge.svg)](https://github.com/heroswap/heroswap-sdk-bsc)
[![npm version](https://img.shields.io/npm/v/@heroswap/sdk-bsc/latest.svg)](https://www.npmjs.com/package/@heroswap/sdk-bsc/v/latest)
[![npm bundle size (scoped version)](https://img.shields.io/bundlephobia/minzip/@heroswap/sdk-bsc/latest.svg)](https://bundlephobia.com/result?p=@heroswap/sdk-bsc@latest)

## Binance Smart Chain

- [BSC Source Codes](https://github.com/ether-chain)
- [BSC Explorer](https://bscscan.com)
npm package: @heroswap/sdk-heco
Description: SDK for building applications for the Heroswap on top of Huobi ECO Chain
Latest version: 0.1.0

# Heroswap | SDK FOR HECO

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![Actions Status](https://github.com/heroswap/heroswap-sdk-heco/workflows/CI/badge.svg)](https://github.com/heroswap/heroswap-sdk-heco)
[![npm version](https://img.shields.io/npm/v/@heroswap/sdk-heco/latest.svg)](https://www.npmjs.com/package/@heroswap/sdk-heco/v/latest)
[![npm bundle size (scoped version)](https://img.shields.io/bundlephobia/minzip/@heroswap/sdk-heco/latest.svg)](https://bundlephobia.com/result?p=@heroswap/sdk-heco@latest)

## Huobi ECO Chain

- [HECO Source Codes](https://github.com/HuobiGroup/huobi-eco-chain)
- [HECO Explorer](https://scan.hecochain.com/)
npm package: @heroswap/v2-core-bsc
Description: Core contracts for the HeroSwap on top of Binance Smart Chain
Latest version: 0.1.0

# HEROSWAP | CORE CONTRACTS FOR BSC

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![npm version](https://img.shields.io/npm/v/@heroswap/v2-core-bsc/latest.svg)](https://www.npmjs.com/package/@heroswap/v2-core-bsc/v/latest)

## Deployed Contracts / Hash

- Factory - [0x3607b4B510b0A91772d75e0E37205FBD789F5c8C](https://bscscan.com/address/0x3607b4B510b0A91772d75e0E37205FBD789F5c8C#code)
- Router - [0xF5831A68C88e0ca7F6fffcc7a07114B6C2d08507](https://bscscan.com/address/0xF5831A68C88e0ca7F6fffcc7a07114B6C2d08507#code)
- pairCodeHash - `0xadc27a471191372e887b048d7864e4c2629ef9da6ef102e2511b81a8cff7077d`

## Binance Smart Chain

- [BSC Source Codes](https://github.com/binance-chain)
- [BSC Explorer](https://bscscan.com)

## Local Development

The following assumes the use of `node@>=10`

#### Install Dependencies

`yarn`

#### Compile Contracts

`yarn compile`

#### Run Tests

`yarn test`
npm package: @heroswap/v2-core-heco
Description: Core contracts for the HeroSwap on top of Huobi ECO Chain
Latest version: 0.1.0

# HEROSWAP | CORE CONTRACTS FOR HECO

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
[![npm version](https://img.shields.io/npm/v/@heroswap/v2-core-heco/latest.svg)](https://www.npmjs.com/package/@heroswap/v2-core-heco/v/latest)

## Deployed Contracts / Hash

- Factory - [0xB4DDdA1eD5AAd72B701440Aec410F23a33Aa0e23](https://scan.hecochain.com/address/0xB4DDdA1eD5AAd72B701440Aec410F23a33Aa0e23#contracts)
- Router - [0xC5efC84F9ad5B18801a7fa052688419806c47Ec2](https://scan.hecochain.com/address/0xC5efC84F9ad5B18801a7fa052688419806c47Ec2#contracts)
- pairCodeHash - `0xd43c7d8df0a448334169b14755542ff9b6aaccb290d2072a696aae5df94b1f15`

## Huobi ECO Chain

- [HECO Source Codes](https://github.com/HuobiGroup/huobi-eco-chain)
- [HECO Explorer](https://scan.hecochain.com/)

## Local Development

The following assumes the use of `node@>=10`

#### Install Dependencies

`yarn`

#### Compile Contracts

`yarn compile`

#### Run Tests

`yarn test`
npm package: @heroui-mobile/react
Description: 🚀 Beautiful and modern React UI library.
Author: jiezhiyong
Latest version: 1.0.3

# HeroUiMobile

基于 [HeroUI](https://github.com/heroui-inc/heroui) V2 扩展的适用于手机端的组件库，Monorepo 架构（pnpm workspace + Turbo）。
使用 [Storybook](https://storybook.js.org/) 管理扩展组件，使用 [Shadcn CLI](https://github.com/shadcn/cli) 注册、安装组件示例。

## 使用 Plop 生成器创建新组件、Hook、工具包，组件名称小写，使用连字符，如 `my-component`

```bash
pnpm create:cmp
pnpm create:hook
pnpm create:pkg
```

## 安装依赖、启动开发环境、启动文档站点

```bash
pnpm install
pnpm dev
pnpm dev:docs
```

## 启动特定组件的开发模式（监听文件变化）

```bash
cd packages/components/your-component
pnpm dev
```

## 其他开发命令: 类型检查、代码检查、代码修复、运行测试、格式化代码

```bash
pnpm typecheck
pnpm lint
pnpm lint:fix
pnpm test
pnpm format:write
```

## 构建打包: 完整构建（包含类型定义）、快速构建（不包含类型定义，开发时使用）

```bash
pnpm build
pnpm build:fast
```

## 构建特定包

```bash
# 使用 turbo 过滤
pnpm --filter @heroui-mobile/button build

# 或进入组件目录
cd packages/components/your-component
pnpm build
```

## 构建文档

```bash
pnpm build:docs
```

## 构建注册表

```bash
pnpm build:registry
```

## 构建 Storybook

```bash
pnpm build:sb
```

## 发布到 npm: 登录 npm、创建 changeset、提交变更、版本号/CHANGELOG 更新并提交、构建项目、发布到 npm、推送代码（可选推送标签）

```bash
npm login

# 1) 创建 changeset（记录本次变更）
pnpm changeset
git add .
git commit -m "feat: 添加新组件"
git push

# 2) 生成版本号与 CHANGELOG（会修改很多 package.json/CHANGELOG）
# 注意：本仓库使用 `@changesets/changelog-github` 生成 changelog，本地执行需要设置 `GITHUB_TOKEN`（Personal Access Token，至少包含 `read:user` 和 `repo:status` 权限），否则会报错并不修改任何文件；
# 另外：`changelog-github` 需要能在 GitHub 上查到对应 commit 信息；建议先把 `.changeset/*.md` 提交并推送到远端，再执行此步骤；
pnpm run version
git add .
git commit -m "chore: release"

# 3) 创建 git tag
VER=$(node -p "require('./packages/core/react/package.json').version")
git tag -a "v$VER" -m "release v$VER" # echo $VER && git show "v$VER" --no-patch

# 4) 推送代码（如你手动创建了 git tag，可用 --follow-tags 一并推送）
git push --follow-tags

# 5) 构建并发布
pnpm build
pnpm run release
```

## 手动发布单个包

```bash
cd packages/components/your-component
pnpm build
npm publish
```

## 相关资源

- [HeroUI 文档](https://heroui.com/docs)
- [Changesets 文档](https://github.com/changesets/changesets)
- [Turbo 文档](https://turbo.build/repo/docs)
- [pnpm 文档](https://pnpm.io/)
npm package: @heroui-mobile/safe-area-bottom
Description: Safe Area Bottom
Author: jiezhiyong
Latest version: 1.0.2

# @heroui-mobile/safe-area-bottom

底部安全区域占位，默认使用 iOS 的 `env(safe-area-bottom)` CSS 变量， 在 Android 平台你可以手动设置 `--safe-area-bottom` CSS 变量。

## Installation

```sh
yarn add @heroui-mobile/safe-area-bottom
# or
npm i @heroui-mobile/safe-area-bottom
```
npm package: @heroui-mobile/safe-area-top
Description: Safe Area Top
Author: jiezhiyong
Latest version: 1.0.2

# @heroui-mobile/safe-area-top

顶部安全区域占位，默认使用 iOS 的 `env(safe-area-inset-top)` CSS 变量， 在 Android 平台你可以手动设置 `--safe-area-inset-top` CSS 变量。

## Installation

```sh
yarn add @heroui-mobile/safe-area-top
# or
npm i @heroui-mobile/safe-area-top
```
npm package: @heroui-mobile/sms-ticker
Description: SMS Countdown Ticker
Author: jiezhiyong
Latest version: 1.0.2

# @heroui-mobile/sms-ticker

短信验证码倒计时，主要用于短信验证码输入框的倒计时功能。

## Installation

```sh
yarn add @heroui-mobile/sms-ticker
# or
npm i @heroui-mobile/sms-ticker
```
npm package: @heroui-mobile/theme
Description: The default theme for HeroUiMobile components
Latest version: 1.0.3

# @heroui-mobile/theme

基于 [HeroUI](https://github.com/heroui-inc/heroui) V2 扩展的适用于手机端的主题库

## Installation

```sh
yarn add @heroui-mobile/theme
# or
npm i @heroui-mobile/theme
```
npm package: @heroui-mobile/use-navigate
Description: Navigate Hook with query parameters
Author: jiezhiyong
Latest version: 1.0.2

# @heroui-mobile/use-navigate

包装 navigate 函数，自动保留已有的 query 参数。

## Installation

```sh
yarn add @heroui-mobile/use-navigate
# or
npm i @heroui-mobile/use-navigate
```
npm package: @heroui-vue/button
Description: ```bash npm add @heroui-vue/button @heroui-org/theme ```
Author: hotdog
Latest version: 1.0.0-beta.4

# Installation

```bash
npm add @heroui-vue/button @heroui-org/theme
```

# Configuration

```ts
// tailwind.config.js
const { heroui } = require('@heroui-org/theme')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ...
    './node_modules/@heroui-org/theme/dist/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {},
  },
  darkMode: 'class',
  plugins: [heroui()]
}
```

# Usage

```vue
<script lang="ts" setup>
import { Button } from '@heroui-vue/button'
</script>

<template>
  <Button>Click</Button>
</template>
```
npm package: @heroui-vue/core
Description: This is a headless Vue3 component designed with HeroUI in mind.
Author: hotdog
Latest version: 0.0.17

# HeroUI Vue Core
This is a headless Vue3 component designed with HeroUI in mind.

## Features
This package aggregates all HeroUI Vue components, allowing for easy use through a single namespace export. It does not include `@heroui/theme`, allowing for high flexibility and customizability.

### Integrating `@heroui/theme`
Get the Vue3-based HeroUI effect by integrating this package with `@heroui/theme`.

### Custom Themes
If you want a custom HeroUI theme, you can easily integrate your theme with this package without worrying about coupling issues.
npm package: @heroui/accordion
Description: Collapse display a list of high-level options that can expand/collapse to reveal more information.
Author: HeroUI
Latest version: 2.2.29

# @heroui-inc/accordion

Accordion display a list of high-level options that can expand/collapse to reveal more information.

Please refer to the [documentation](https://heroui.com//docs/components/accordion) for more information.

## Installation

```sh
yarn add @heroui/accordion
# or
npm i @heroui/accordion
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/alert
Description: Alerts are temporary notifications that provide concise feedback about an action or event.
Author: HeroUI
Latest version: 2.2.32

# @heroui/alert

Alerts are temporary notifications that provide concise feedback about an action or event.

Please refer to the [documentation](https://heroui.com/docs/components/alert) for more information.

## Installation

```sh
yarn add @heroui/alert
# or
npm i @heroui/alert
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/aria-utils
Description: A package for managing @react-aria HeroUI utils.
Author: HeroUI
Latest version: 2.2.29

# @heroui/aria-utils

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @heroui/aria-utils
# or
npm i @heroui/aria-utils
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/autocomplete
Description: An autocomplete combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
Author: HeroUI
Latest version: 2.3.34

# @heroui/autocomplete

An autocomplete combines a text input with a listbox, allowing users to filter a list of options to items matching a query.

Please refer to the [documentation](https://heroui.com/docs/components/autocomplete) for more information.

## Installation

```sh
yarn add @heroui/autocomplete
# or
npm i @heroui/autocomplete
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/avatar
Description: The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.
Author: HeroUI
Latest version: 2.2.26

# @heroui/avatar

The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.

Please refer to the [documentation](https://heroui.com/docs/components/avatar) for more information.

## Installation

```sh
yarn add @heroui/avatar
# or
npm i @heroui/avatar
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/badge
Description: Badges are used as a small numerical value or status descriptor for UI elements.
Author: HeroUI
Latest version: 2.2.18

# @heroui/badge

Badges are used as a small numerical value or status descriptor for UI elements.

Please refer to the [documentation](https://heroui.com/docs/components/badge) for more information.

## Installation

```sh
yarn add @heroui/badge
# or
npm i @heroui/badge
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/breadcrumbs
Description: Breadcrumbs display a hierarchy of links to the current page or resource in an application.
Author: HeroUI
Latest version: 2.2.25

# @heroui/breadcrumbs

Breadcrumbs display a hierarchy of links to the current page or resource in an application.

Please refer to the [documentation](https://heroui.com/docs/components/breadcrumbs) for more information.

## Installation

```sh
yarn add @heroui/breadcrumbs
# or
npm i @heroui/breadcrumbs
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/button
Description: Buttons allow users to perform actions and choose with a single tap.
Author: HeroUI
Latest version: 2.2.32

# @heroui/button

Buttons allow users to perform actions and choose with a single tap.

Please refer to the [documentation](https://heroui.com/docs/components/button) for more information.

## Installation

```sh
yarn add @heroui/button
# or
npm i @heroui/button
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/calendar
Description: A calendar displays one or more date grids and allows users to select a single date.
Author: HeroUI
Latest version: 2.2.32

# @heroui/calendar

A calendar displays one or more date grids and allows users to select a single date.

Please refer to the [documentation](https://heroui.com/docs/components/calendar) for more information.

## Installation

```sh
yarn add @heroui/calendar
# or
npm i @heroui/calendar
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/card
Description: Card is a container for text, photos, and actions in the context of a single subject.
Author: HeroUI
Latest version: 2.2.28

# @heroui/card

Card is a container for text, photos, and actions in the context of a single subject.

Please refer to the [documentation](https://heroui.com/docs/components/card) for more information.

## Installation

```sh
yarn add @heroui/card
# or
npm i @heroui/card
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/checkbox
Description: Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.
Author: HeroUI
Latest version: 2.3.32

# @heroui/checkbox

Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.

Please refer to the [documentation](https://heroui.com/docs/components/checkbox) for more information.

## Installation

```sh
yarn add @heroui/checkbox
# or
npm i @heroui/checkbox
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/chip
Description: Chips help people enter information, make selections, filter content, or trigger actions.
Author: HeroUI
Latest version: 2.2.25

# @heroui/chip

A Chip is a small block of essential information that represent an input, attribute, or action.

Please refer to the [documentation](https://heroui.com/docs/components/chip) for more information.

## Installation

```sh
yarn add @heroui/chip
# or
npm i @heroui/chip
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/code
Description: Code is a component used to display inline code.
Author: HeroUI
Latest version: 2.2.25

# @heroui/code

Code is a component used to display inline code.

Please refer to the [documentation](https://heroui.com/docs/components/code) for more information.

## Installation

```sh
yarn add @heroui/code
# or
npm i @heroui/code
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/date-input
Description: A date input allows users to enter and edit date and time values using a keyboard.
Author: HeroUI
Latest version: 2.3.32

# @heroui/date-input

A date input allows users to enter and edit date and time values using a keyboard.

## Installation

```sh
yarn add @heroui/date-input
# or
npm i @heroui/date-input
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/date-picker
Description: A date picker combines a DateInput and a Calendar popover to allow users to enter or select a date and time value.
Author: HeroUI
Latest version: 2.3.33

# @heroui/date-picker

A date picker combines a DateInput and a Calendar popover to allow users to enter or select a date and time value.

## Installation

```sh
yarn add @heroui/date-picker
# or
npm i @heroui/date-picker
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/divider
Description: . A separator is a visual divider between two groups of content
Author: HeroUI
Latest version: 2.2.24

# @heroui/divider

Divider is a component that separates content in a page.

Please refer to the [documentation](https://heroui.com/docs/components/divider) for more information.

## Installation

```sh
yarn add @heroui/divider
# or
npm i @heroui/divider
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/dom-animation
Description: Dom Animation from Framer Motion for dynamic import
Author: HeroUI
Latest version: 2.1.10

# @heroui/dom-animation

A Quick description of the component

> This is an internal utility, not intended for public usage.
## Installation

```sh
yarn add @heroui/dom-animation
# or
npm i @heroui/dom-animation
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/drawer
Description: Used to render a content that slides in from the side of the screen.
Author: HeroUI
Latest version: 2.2.29

# @heroui/drawer

Used to render a content that slides in from the side of the screen.

Please refer to the [documentation](https://heroui.com/docs/components/drawer) for more information.

## Installation

```sh
yarn add @heroui/drawer
# or
npm i @heroui/drawer
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/dropdown
Description: A dropdown displays a list of actions or options that a user can choose.
Author: HeroUI
Latest version: 2.3.32

# @heroui/dropdown

Displays a list of actions or options that a user can choose.

Please refer to the [documentation](https://heroui.com/docs/components/dropdown) for more information.

## Installation

```sh
yarn add @heroui/dropdown
# or
npm i @heroui/dropdown
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/form
Description: A form is a group of inputs that allows users submit data to a server and supports field validation errors.
Author: HeroUI
Latest version: 2.1.32

# @heroui/form

A form is a group of inputs that allows users submit data to a server and supports field validation errors.

Please refer to the [documentation](https://heroui.com/docs/components/form) for more information.

## Installation

```sh
yarn add @heroui/form
# or
npm i @heroui/form
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/framer-utils
Description: A set of framer motion transitions for react
Author: HeroUI
Latest version: 2.1.28

# @heroui/framer-utils

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @heroui/framer-utils
# or
npm i @heroui/framer-utils
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/image
Description: A simple image component
Author: HeroUI
Latest version: 2.2.19

# @heroui/image

The Image component is used to display images with support for fallback.

Please refer to the [documentation](https://heroui.com/docs/components/image) for more information.

## Installation

```sh
yarn add @heroui/image
# or
npm i @heroui/image
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/input
Description: The input component is designed for capturing user input within a text field.
Author: HeroUI
Latest version: 2.4.33

# @heroui/input

Input is a component that allows users to enter text. It can be used to get user inputs in forms, search fields, and more.

This package contains the Input component and the TextArea component.

Please refer to the [documentation](https://heroui.com/docs/components/input) for more information.

## Installation

```sh
yarn add @heroui/input
# or
npm i @heroui/input
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/input-otp
Description: InputOTP is a component that allows users to enter otp input. It can be used to get user otp in forms.
Author: HeroUI
Latest version: 2.1.32

# @heroui/input-otp

InputOTP is a component that allows users to enter otp input. It can be used to get user otp in forms.

This package contains the InputOTPcomponent.

Please refer to the [documentation](https://heroui.com/docs/components/input-otp) for more information.

## Installation

```sh
yarn add @heroui/input-otp
# or
npm i @heroui/input-otp
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/kbd
Description: The keyboard key components indicates which key or set of keys used to execute a specificv  action
Author: HeroUI
Latest version: 2.2.26

# @heroui/kbd

Keyboard key or kbd is a component to display which key or combination of keys performs a given action.

Please refer to the [documentation](https://heroui.com/docs/components/kbd) for more information.

## Installation

```sh
yarn add @heroui/kbd
# or
npm i @heroui/kbd
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/link
Description: Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an &lt;a&gt;
Author: HeroUI
Latest version: 2.2.26

# @heroui/link

Links allow users to click their way from page to page. This component is styled to resemble a hyperlink and semantically renders an `<a>` tag.

Please refer to the [documentation](https://heroui.com/docs/components/link) for more information.

## Installation

```sh
yarn add @heroui/link
# or
npm i @heroui/link
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/listbox
Description: A listbox displays a list of options and allows a user to select one or more of them.
Author: HeroUI
Latest version: 2.3.31

# @heroui/listbox

A listbox displays a list of options and allows a user to select one or more of them.

Please refer to the [documentation](https://heroui.com/docs/components/listbox) for more information.

## Installation

```sh
yarn add @heroui/listbox
# or
npm i @heroui/listbox
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/menu
Description: A menu displays a list of options and allows a user to select one or more of them.
Author: HeroUI
Latest version: 2.2.31

# @heroui/menu

A menu displays a list of options and allows a user to select one or more of them.

Please refer to the [documentation](https://heroui.com/docs/components/menu) for more information.

## Installation

```sh
yarn add @heroui/menu
# or
npm i @heroui/menu
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/modal
Description: Displays a dialog with a custom content that requires attention or provides additional information.
Author: HeroUI
Latest version: 2.2.29

# @heroui/modal

Displays a dialog with a custom content that requires attention or provides additional information.

Please refer to the [documentation](https://heroui.com/docs/components/modal) for more information.

## Installation

```sh
yarn add @heroui/modal
# or
npm i @heroui/modal
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/navbar
Description: A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse and more.
Author: HeroUI
Latest version: 2.2.30

# @heroui/navbar

A responsive navigation header positioned on top side of your page that includes support for branding, links, navigation, collapse menu and more.

Please refer to the [documentation](https://heroui.com/docs/components/navbar) for more information.

## Installation

```sh
yarn add @heroui/navbar
# or
npm i @heroui/navbar
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/number-input
Description: The numeric input component is designed for users to enter a number, and increase or decrease the value using stepper buttons
Author: HeroUI
Latest version: 2.0.23

# @heroui/number-input

NumberInput is a component that allows users to enter number. It can be used to get user inputs in forms, search fields, and more.

Please refer to the [documentation](https://heroui.com/docs/components/number-input) for more information.

## Installation

```sh
yarn add @heroui/number-input
# or
npm i @heroui/number-input
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/pagination
Description: The Pagination component allows you to display active page and navigate between multiple pages.
Author: HeroUI
Latest version: 2.2.27

# @heroui/pagination

The Pagination component allows you to display active page and navigate between multiple pages.

Please refer to the [documentation](https://heroui.com/docs/components/pagination) for more information.

## Installation

```sh
yarn add @heroui/pagination
# or
npm i @heroui/pagination
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/popover
Description: A popover is an overlay element positioned relative to a trigger.
Author: HeroUI
Latest version: 2.3.32

# @heroui/popover

Popover is a non-modal dialog that floats around its disclosure. It's commonly used for displaying additional rich content on top of something.

Please refer to the [documentation](https://heroui.com/docs/components/popover) for more information.

## Installation

```sh
yarn add @heroui/popover
# or
npm i @heroui/popover
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/progress
Description: Progress bars show either determinate or indeterminate progress of an operation over time.
Author: HeroUI
Latest version: 2.2.25

# @heroui/progress

The Progress component allows you to view the progress of any activity.

Please refer to the [documentation](https://heroui.com/docs/components/progress) for more information.

## Installation

```sh
yarn add @heroui/progress
# or
npm i @heroui/progress
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/radio
Description: Radios allow users to select a single option from a list of mutually exclusive options.
Author: HeroUI
Latest version: 2.3.32

# @heroui/radio

Radio Group allow users to select a single option from a list of mutually exclusive options.

Please refer to the [documentation](https://heroui.com/docs/components/radio-group) for more information.

## Installation

```sh
yarn add @heroui/radio
# or
npm i @heroui/radio
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/react
Description: 🚀 Beautiful and modern React UI library built with Tailwind CSS 4.0.
Author: HeroUI
Latest version: 3.0.2

<p align="center">
  <a href="https://heroui.com">
      <img 
        alt="HeroUI v3 logo" 
        width="100%" 
        src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/heroui-og_2x.jpg"
      />
  </a>
</p>
<p align="center">
  <a href="https://github.com/heroui-inc/heroui/blob/main/LICENSE">
    <img src="https://img.shields.io/npm/l/@heroui/react?style=flat" alt="License">
  </a>
  <a href="https://www.npmjs.com/package/@heroui/react">
    <img src="https://img.shields.io/npm/dm/@heroui/react.svg?style=flat-round" alt="npm downloads">
  </a>
</p>

HeroUI is the modern UI library built to help you move fast, stay consistent, and deliver delightful user experiences.

## Getting Started

Visit <a aria-label="heroui learn" href="https://heroui.com/docs/quick-start">https://heroui.com/docs/quick-start</a> to get started with HeroUI.

## Documentation

It's the [heroui.com](https://heroui.com) website for the latest version of HeroUI.

- **Latest (v3)**: [https://heroui.com](https://heroui.com)
- **v2**: [https://v2.heroui.com](https://v2.heroui.com)

## Storybook

Visit [https://storybook-v3.heroui.com](https://storybook-v3.heroui.com/) to view the storybook for all components.

## Roadmap

Visit [https://herouiv3.featurebase.app/roadmap](https://herouiv3.featurebase.app/roadmap) to view the roadmap for HeroUI v3.

## Figma

Visit [https://www.figma.com/community/file/1546526812159103429/heroui-figma-kit-v3](https://www.figma.com/community/file/1546526812159103429/heroui-figma-kit-v3) to view the Figma UI Kit for HeroUI v3.

## Community

We're excited to see the community adopt HeroUI, raise issues, and provide feedback.
Whether it's a feature request, bug report, or a project to showcase, please get involved!

- [Discord](https://discord.gg/9b6yyZKmH4)
- [X](https://x.com/hero_ui)
- [GitHub Discussions](https://github.com/heroui-inc/heroui/discussions)

## Contributing

Contributions are always welcome!

See [CONTRIBUTING.md](https://github.com/heroui-inc/heroui/blob/main/CONTRIBUTING.md) for ways to get started.

Please adhere to this project's [CODE_OF_CONDUCT](https://github.com/heroui-inc/heroui/blob/main/CODE_OF_CONDUCT.md).

## License

[MIT](https://choosealicense.com/licenses/mit/)
npm package: @heroui/react-rsc-utils
Description: A set of utilities for react compatible with RSC
Author: HeroUI
Latest version: 2.1.9

# @heroui/react-rsc-utils

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @heroui/react-rsc-utils
# or
npm i @heroui/react-rsc-utils
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/react-utils
Description: A set of utilities for react on client side
Author: HeroUI
Latest version: 2.1.14

# @heroui/react-utils

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @heroui/react-utils
# or
npm i @heroui/react-utils
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/ripple
Description: A simple implementation to display a ripple animation when the source component is clicked
Author: HeroUI
Latest version: 2.2.21

# @heroui/ripple

This is a component that creates a ripple effect on the screen.

Please refer to the [documentation](https://heroui.com/docs/components/button) for more information.

## Installation

```sh
yarn add @heroui/ripple
# or
npm i @heroui/ripple
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/scroll-shadow
Description: A component that applies top and bottom shadows when content overflows on scroll.
Author: HeroUI
Latest version: 2.3.19

# @heroui/scroll-shadow

A component that applies top and bottom shadows when content overflows on scroll.

Please refer to the [documentation](https://heroui.com/docs/components/listbox) for more information.

## Installation

```sh
yarn add @heroui/scroll-shadow
# or
npm i @heroui/scroll-shadow
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/select
Description: A select displays a collapsible list of options and allows a user to select one of them.
Author: HeroUI
Latest version: 2.4.33

# @heroui/select

A select displays a collapsible list of options and allows a user to select one of them.

Please refer to the [documentation](https://heroui.com/docs/components/select) for more information.

## Installation

```sh
yarn add @heroui/select
# or
npm i @heroui/select
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/shared-icons
Description: Internal icons set, commonly used in the components stories
Author: HeroUI
Latest version: 2.1.10

# @heroui/shared-icons

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @heroui/shared-icons
# or
npm i @heroui/shared-icons
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/shared-utils
Description: A set of HeroUI utilities
Author: HeroUI
Latest version: 2.1.12

# @heroui/shared-utils

A Quick description of the component

> This is an internal utility, not intended for public usage.

## Installation

```sh
yarn add @heroui/shared-utils
# or
npm i @heroui/shared-utils
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## File structure

```
src/
├── common/ # Common utilities for all React versions
└── demi/ # Demi utilities for different React versions
   ├── react18/
   └── react19/
```

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).
npm package: @heroui/skeleton
Description: Skeleton is used to display the loading state of some component.
Author: HeroUI
Latest version: 2.2.18

# @heroui/skeleton

Skeleton is a placeholder to show a loading state and the expected shape of a component.

Please refer to the [documentation](https://heroui.com/docs/components/skeleton) for more information.

## Installation

```sh
yarn add @heroui/skeleton
# or
npm i @heroui/skeleton
```

## Contribution

Yes please! See the
[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
for details.

## License

This project is licensed under the terms of the
[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).