open-index/open-npm huggingface dataset:
npm package: @rechakra/cli
Description: Generate theme typings for autocomplete
Author: teunlao
Latest version: 1.0.5

# @rechakra/cli

Generate TypeScript types to provide autocomplete for your custom theme and add
components and blocks to your project.

## Commands

### Type Generation

Generate TypeScript types for your custom theme:

```sh
npx @rechakra/cli tokens <path/to/your/theme.(js|ts)>
```

or

```sh
npx @rechakra/cli tokens <@your-org/chakra-theme-package>
```

```sh
$ npx @rechakra/cli tokens --help

Usage: chakra-cli tokens [options] <source>

Options:
  --out <path>              output file e.g. node_modules/@rechakra/styled-system/dist/declarations/src/theming.types.d.ts
  --strict-component-types  Generate strict types for props variant and size
  --strict-token-types      Generate strict types for theme tokens (e.g. color, spacing)
  --no-format               Disable auto formatting
  --watch [path]            Watch directory for changes and rebuild
  --template <template>     Choose the template to use for the generation (choices: "default", "augmentation", default: "default"
  -h, --help                display help for command

Example call:
  $ chakra-cli tokens theme.ts
```

> Note 🚨: If you delete the `node_modules` directory, you'll need to re-run the
> command to get proper typings again.

For convenience, you can add a `postinstall` script to your `package.json`, so
you don't have to think about this every time you re-install your dependencies.

```json title="package.json"
"scripts": {
  "gen:theme-typings": "chakra-cli tokens <path/to/your/theme.(js|ts)>",
  "postinstall": "npm run gen:theme-typings"
}
```

### Snippets

Add community-driven snippets to your project:

```sh
# Add recommended snippets
npx @rechakra/cli snippet add

# Add specific snippets
npx @rechakra/cli snippet add provider toaster

# List available snippets
npx @rechakra/cli snippet list
```

### Pro Blocks

Add premium blocks from Chakra UI Pro to your project:

```sh
# Interactive block selection
npx @rechakra/cli blocks add

# Add all variants of a specific block
npx @rechakra/cli blocks add hero

# Add a specific variant of a block
npx @rechakra/cli blocks add hero --variant "simple"

# List available blocks
npx @rechakra/cli blocks list

# List blocks in a specific category
npx @rechakra/cli blocks list --category "marketing"
```

#### Pro Blocks Setup

To use Pro blocks, you need a Chakra UI Pro API key:

1. Get your API key from [Chakra UI Pro](https://pro.chakra-ui.com)
2. Set the environment variable:

   ```sh
   export CHAKRA_UI_PRO_API_KEY="your-api-key"
   ```

   Or create a `.env` file in your project root:

   ```env
   CHAKRA_UI_PRO_API_KEY=your-api-key
   ```

#### Pro Blocks Options

- `--variant <variant>`: Add a specific variant instead of all variants
- `--outdir <dir>`: Specify output directory for blocks
- `--force`: Overwrite existing files
- `--dry-run`: Preview what will be downloaded without writing files
- `--tsx`: Force TypeScript JSX format (auto-detected by default)
npm package: @rechakra/panda-preset
Description: Panda preset for Chakra UI
Author: teunlao
Latest version: 1.0.5

# @rechakra/panda-preset

Panda preset for using Chakra UI design system in your Panda CSS.

## Installation

```bash
npm install @rechakra/panda-preset
```

## Usage

```tsx
// panda.config.ts
import { defineConfig } from "@pandacss/dev"

export default defineConfig({
  presets: ["@rechakra/panda-preset"],
})
```
npm package: @rechakra/react-mcp
Description: The official MCP server for Chakra UI
Author: teunlao
Latest version: 1.0.0

# Chakra UI MCP Server

An MCP server providing AI assistants with access to Chakra UI components,
examples, migration patterns, and premium templates.

## Features

- **Component Library**: Get components, props, and usage examples
- **Migration Support**: v2 to v3 upgrade guidance with before/after code
  snippets
- **Design Tokens**: Access semantic tokens and text styles for consistent
  theming
- **Premium Templates**: Chakra UI Pro blocks and component templates (requires
  API key)

## Available Tools

- `get_components` - List all Chakra UI components
- `get_component_props` - Get component properties and configuration
- `get_component_example` - Retrieve usage examples and code patterns
- `get_theme` - Get theme tokens, semantic tokens, text styles and layer styles
- `list_blocks` - List Chakra UI Pro blocks
- `get_component_templates` - Get premium component templates (Pro)
- `v2_to_v3_code_review` - Migration guidance with code snippets

## Setup

### Claude Desktop / Cursor

Add to your Claude Desktop or Cursor configuration file:

```json
{
  "mcpServers": {
    "chakra-ui": {
      "command": "npx",
      "args": ["-y", "@rechakra/react-mcp"],
      "env": {
        "CHAKRA_PRO_API_KEY": "your-api-key-here"
      }
    }
  }
}
```

### OpenAI Codex

Add to your `~/.codex/config.toml` file:

```toml
[mcp_servers.chakra-ui]
command = "npx"
args = ["-y", "@rechakra/react-mcp"]
startup_timeout_ms = 20_000

# Optional: Add Chakra Pro API key if using premium features
# [mcp_servers.chakra-ui.env]
# CHAKRA_PRO_API_KEY = "your-api-key-here"
```

Or use the CLI command:

```bash
codex mcp add chakra-ui -- npx -y @rechakra/react-mcp
```

**Note:** Requires Codex CLI v0.34.0 or later.

### Environment Variables

- `CHAKRA_PRO_API_KEY` (optional) - For accessing premium templates and blocks

## Development

```bash
pnpm install
pnpm build
pnpm dev
```

## License

MIT @ Chakra Systems
npm package: @rechardleeh/rchsum
Description: Một thư viện giúp bạn tính tổng của 2 số bất kỳ
Author: @rechardleeh
Latest version: 1.0.1

- Cài đặt nodejs và npm tại https://nodejs.org/en

- Tải file và lưu ở desktop

- Truy cập github.com tạo repository với tên tea-xyz-quest (Phải để repo public)

- Truy cập https://www.npmjs.com để tạo tài khoản

- Sửa file package.json, theo format
  - name => @username_npm/tea-xyz-quest 
  - author => @username_npm
  - repository => link tới repo github vừa tạo

- Truy cập repo github vừa tạo và upload cả folder vừa sửa lên Github

- Mở terminal, gõ lệnh "npm -v" để kiểm tra xem đã cài đặt thành công npm ở bước 1 chưa

- Gõ tiếp lệnh "cd Desktop/tea-xyz-quest" để trỏ tới thư mục code 

- "npm login" => Có 1 đường dẫn để bấm vào sẽ mở trình duyệt dẫn tới web login npm

- Sau khi login thành công gõ lệnh "npm publish --access public" để public package lên npm publish. 

- Truy cập app.tea.xyz => Register a New OSS Project

- Tìm kiếm tên package vừa tạo. . Bước này có thể mất tới 2-3 ngày để package mới xuất hiện trên hệ thống của tea.xyz

- Sau đó tea sẽ cho 1 file có tên tea.yaml, tải về và quay lại repo github, upload tiếp file đó lên là xong
npm package: @rechardleeh/rchtea
Description: A special Quest for tea.xyz
Author: @rechardleeh
Latest version: 1.0.0

- Cài đặt nodejs và npm tại https://nodejs.org/en

- Tải file và lưu ở desktop

- Truy cập github.com tạo repository với tên tea-xyz-quest (Phải để repo public)

- Truy cập https://www.npmjs.com để tạo tài khoản

- Sửa file package.json, theo format
  - name => @username_npm/tea-xyz-quest 
  - author => @username_npm
  - repository => link tới repo github vừa tạo

- Truy cập repo github vừa tạo và upload cả folder vừa sửa lên Github

- Mở terminal, gõ lệnh "npm -v" để kiểm tra xem đã cài đặt thành công npm ở bước 1 chưa

- Gõ tiếp lệnh "cd Desktop/tea-xyz-quest" để trỏ tới thư mục code 

- "npm login" => Có 1 đường dẫn để bấm vào sẽ mở trình duyệt dẫn tới web login npm

- Sau khi login thành công gõ lệnh "npm publish --access public" để public package lên npm publish. 

- Truy cập app.tea.xyz => Register a New OSS Project

- Tìm kiếm tên package vừa tạo. . Bước này có thể mất tới 2-3 ngày để package mới xuất hiện trên hệ thống của tea.xyz

- Sau đó tea sẽ cho 1 file có tên tea.yaml, tải về và quay lại repo github, upload tiếp file đó lên là xong
npm package: @rechardleeh/rechardtea
Description: Quest for tea.xyz
Author: @rechardleeh
Latest version: 1.0.1

- Cài đặt nodejs và npm tại https://nodejs.org/en

- Tải file và lưu ở desktop

- Truy cập github.com tạo repository với tên tea-xyz-quest (Phải để repo public)

- Truy cập https://www.npmjs.com để tạo tài khoản

- Sửa file package.json, theo format
  - name => @username_npm/tea-xyz-quest 
  - author => @username_npm
  - repository => link tới repo github vừa tạo

- Truy cập repo github vừa tạo và upload cả folder vừa sửa lên Github

- Mở terminal, gõ lệnh "npm -v" để kiểm tra xem đã cài đặt thành công npm ở bước 1 chưa

- Gõ tiếp lệnh "cd Desktop/tea-xyz-quest" để trỏ tới thư mục code 

- "npm login" => Có 1 đường dẫn để bấm vào sẽ mở trình duyệt dẫn tới web login npm

- Sau khi login thành công gõ lệnh "npm publish --access public" để public package lên npm publish. 

- Truy cập app.tea.xyz => Register a New OSS Project

- Tìm kiếm tên package vừa tạo. . Bước này có thể mất tới 2-3 ngày để package mới xuất hiện trên hệ thống của tea.xyz

- Sau đó tea sẽ cho 1 file có tên tea.yaml, tải về và quay lại repo github, upload tiếp file đó lên là xong
npm package: @rechargeapps/storefront-client
Description: Storefront client for Recharge
Author: Recharge Inc.
Latest version: 1.81.0

# Recharge JS-SDK

Recharge JavaScript SDK

## Install

Script:

```html
<head>
  ...
  <script src="https://static.rechargecdn.com/assets/storefront/recharge-client-{version}.min.js"></script>
  ...
</head>
```

NPM/Yarn/Pnpm

```bash
npm install @rechargeapps/storefront-client
```

```bash
yarn add @rechargeapps/storefront-client
```

```bash
pnpm add @rechargeapps/storefront-client
```

## Docs & examples

See our public documentation [here](https://storefront.rechargepayments.com/client/)
npm package: @recharts/devtools
Description: Devtools and helper functions for Recharts
Author: Recharts Group
Latest version: 0.0.11

# @recharts/devtools

Devtools for Recharts.

[![npm version](https://badge.fury.io/js/@recharts%2Fdevtools.svg)](https://badge.fury.io/js/@recharts%2Fdevtools)

## Installation

```bash
npm install @recharts/devtools --save-dev
```

## Usage

### Basic Usage

Import the `RechartsDevtools` component and render it inside of your chart.

Add a div with specific ID where the devtools will render a portal.

```tsx
import { RechartsDevtools, RECHARTS_DEVTOOLS_PORTAL_ID } from '@recharts/devtools';
import { AreaChart } from 'recharts';

function App() {
  return (
    <article>
      <AreaChart>
        {/* The DevTools component reads state from inside of the chart */}
        <RechartsDevtools />
      </AreaChart>
        {/* The Portal component renders the devtools UI, debugging information, hooks and other stuff */}
      <div id={RECHARTS_DEVTOOLS_PORTAL_ID} />
    </article>
  );
}
```

### Multiple Instances (Context Mode)

If you have multiple charts or devtools instances on the same page (e.g., in a documentation site with live editors), you should use the `RechartsDevtoolsContext` and `RechartsDevtoolsPortal` to ensure each devtools instance targets the correct location without ID conflicts.

1. Wrap your chart and editor/devtools area with `RechartsDevtoolsContext`. One context for one devtools.
2. Place `RechartsDevtoolsPortal` where you want the devtools UI to be rendered.
3. `RechartsDevtools` will automatically detect the context and render into the associated portal.

```tsx
import { RechartsDevtools, RechartsDevtoolsContext, RechartsDevtoolsPortal } from '@recharts/devtools';
import { AreaChart, LineChart } from 'recharts';

function EditorWithPreview() {
  return (
    <RechartsDevtoolsContext>
        <AreaChart>
          <RechartsDevtools />
        </AreaChart>
        <RechartsDevtoolsPortal />
    </RechartsDevtoolsContext>
      
    <RechartsDevtoolsContext>
        <LineChart>
          <RechartsDevtools />
        </LineChart>
        <RechartsDevtoolsPortal />
    </RechartsDevtoolsContext>
  );
}
```