# @ciromaciel/components-kit 中文文档

规范地址：https://npmcn.com/package/%40ciromaciel/components-kit/

版本：1\.8\.10
npm 元数据更新时间：2026-10-31T10:01:11.847Z
中文译文更新时间：2026-11-09T17:35:35.622Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40ciromaciel/components-kit
原文对照：https://npmcn.com/package/%40ciromaciel/components-kit/?lang=original
项目主页：https://ciromaciel.click/

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：273 kB，6 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^18\.0\.0 \|\| ^19\.0\.0，@mantine/core ^7\.0\.0 \|\| ^8\.0\.0，@mantine/hooks ^7\.0\.0 \|\| ^8\.0\.0，@mantine/charts 8\.3\.18，@tabler/icons-react ^3\.0\.0
- 首次发布：2026-09-20T14:40:59.513Z
- 最新版本发布：2026-10-31T10:01:11.677Z
- 近 30 天下载量：2092（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：28（近 12 个月 28 个）

## 中文简介

营销站点组件:英雄,定价,特征分拆和脚步,以曼汀为主.

## 安装

```sh
npm install @ciromaciel/components-kit
```

也可以使用：`pnpm add @ciromaciel/components-kit`、`yarn add @ciromaciel/components-kit`、`bun add @ciromaciel/components-kit`

## README

# @ ciramaciel/ 组件- kit

[![npm version](https://img.shields.io/npm/v/@ciromaciel/components-kit.svg)](https://www.npmjs.com/package/@ciromaciel/components-kit) [![npm downloads](https://img.shields.io/npm/dm/@ciromaciel/components-kit.svg)](https://www.npmjs.com/package/@ciromaciel/components-kit) [![license](https://img.shields.io/npm/l/@ciromaciel/components-kit.svg)](https://www.npmjs.com/package/@ciromaciel/components-kit)

销售站点组件——英雄、定价、特征分拆和页脚——以 反应和"曼汀",在一色相中,尖锐的美学.

## 安装

```bash
bun add @ciromaciel/components-kit
```

端点 : `@mantine/core`, (中文(简体) ), `@mantine/hooks`, (中文(简体) ), `@tabler/icons-react`, (中文(简体) ), `react`, (中文(简体) ), `react-dom`。 。 。 . `@mantine/charts` 是可选的.

在应用程序入口处导入样式表一次 :

```js
import '@ciromaciel/components-kit/style.css'
```

## 快开始

```jsx
import { MantineProvider } from '@mantine/core'
import { theme, Hero, FeatureSplit, Pricing, FAQ, Footer } from '@ciromaciel/components-kit'

function App() {
    return (
        <MantineProvider theme={theme}>
            <Hero
                subtitle="Landing pages"
                title="No code, no plugins."
                description="Your landing page live in two minutes."
                cta={{ label: 'Get started', href: '/signup' }}
            />
            <FeatureSplit /* ... */ />
            <Pricing /* ... */ />
            <FAQ /* ... */ />
            <Footer />
        </MantineProvider>
    )
}
```

组件由配置驱动:通过数据对象而不是嵌入JSX.

## (原始内容存档于2013-10-12) (英语). Fundos: dois dongers de palco, um de superfície

(一作"活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活活

| 脚本 | 曼汀语Name | 克拉罗 | 埃斯库罗 |
| --- | --- | --- | --- |
| `SECTION_BACKGROUNDS.white` | `gray.0` | `#FFFFFF` | `#0B0F12` (o fundo da página) (西班牙语) |
| `SECTION_BACKGROUNDS.gray` | `gray.1` | `#F9FAFB` | `#12181D` |

**帕尔科** (原始内容存档于2018-10-21) (英语). o fundo da página, a barra 包括página、o pachel de 、 o pachel 等 o rodapé, as páginas legais e a 404))的菜单。 奥斯 组件矩形 `background="white" | "gray"` e 解析相册 `resolveBackground`作为fixas ternam os dois吨.

欧 `white` 做曼汀语 **无** tom de palco:没有埃斯库罗·埃莱 `#1A2127`页:1 {\\fn黑体\\fs22\\bord1\\shad0\\3aHBE\\4aH00\\fscx67\\fscy66\\2cHFFFFFF\\3cH808080}超级爱奇艺 服务于风口浪花 风口浪花 手提箱:手提箱,摩代斯,给定后发箱,菜单悬索, 泡泡花,一个Caixa de um formulário dentro de uma faixa. 中国植物物种信息数据库. 车厢,使用 `resolveCardBackground`。 。 。 .

Uma 给 ou 模式 que é palco (o menula de um Cabeçalho) recebe a 类 `rlg-stage`时间轴: `Paper` 连线 `white` 爱丽华多,不要 爱斯提洛做元素, e 类 devolve o tom da página.

Por Quê:em 21/10/2026 o cartão fixo do Cabeçalho e a fixa da complete usavam 互联网档案馆的存檔,存档日期2013-12-20 `bg="white"`,没有página最重吨(`#0B0F12`, (中文(简体) ), `#12181D`, (中文(简体) ), `#1A2127`) (中文(简体) ). 农卡 `bg="white"` numa faixa, barra, rodapé ou página. 中国植物物种信息数据库.

## 构成部分

**版式和结构** —— 说 `Layout`, (中文(简体) ), `Header`, (中文(简体) ), `Navbar`, (中文(简体) ), `Footer`, (中文(简体) ), `Section`。 。 。 .

**推销科** —— 说 `Hero`, (中文(简体) ), `SocialProof`, (中文(简体) ), `FeatureSplit`, (中文(简体) ), `FeaturesGrid`, (中文(简体) ), `StatsGrid`, (中文(简体) ), `ProductGrid`, (中文(简体) ), `PlatformShelf`, (中文(简体) ), `Steps`, (中文(简体) ), `Comparison`, (中文(简体) ), `CriteriaList`, (中文(简体) ), `Callout`, (中文(简体) ), `FounderCard`。 。 。 .

**改划** —— 说 `Pricing`, (中文(简体) ), `FAQ`, (中文(简体) ), `Testimonials`, (中文(简体) ), `CTABanner`, (中文(简体) ), `SecondaryCTA`, (中文(简体) ), `LeadForm`, (中文(简体) ), `TrustBadge`, (中文(简体) ), `SeloExclusivo`。 。 。 .

**状况和状态** —— 说 `StatusBoard`, (中文(简体) ), `StatusIndicator`, (中文(简体) ), `AuthLoader`, (中文(简体) ), `NotFound`。 。 。 .

**法律页面** —— 说 `LegalPrivacy`, (中文(简体) ), `LegalTerms`, (中文(简体) ), `LegalSecurity`。 。 。 .

**初级** —— 说 `SectionHeader`, (中文(简体) ), `MediaBlock`, (中文(简体) ), `CTAButton`, (中文(简体) ), `CodeBlock`, (中文(简体) ), `Wordmark`, (中文(简体) ), `BrandLogo`。 。 。 .

**主题、 钩子和配置** —— 说 `theme`, (中文(简体) ), `useServiceStatus`, (中文(简体) ), `SECTION_BACKGROUNDS`, (中文(简体) ), `resolveBackground`。 。 。 .

## 发展

```bash
bun install
bun run dev        # demo
bun run build      # build the library
```

## 链接

-   [网站](https://ciromaciel.click/)
-   [Npm 的软件包](https://www.npmjs.com/package/@ciromaciel/components-kit)

麻省理工学院 [西罗·塞萨尔·马西埃尔](https://ciromaciel.click/)

## 常见问题

### @ciromaciel/components-kit 是什么？

营销站点组件:英雄,定价,特征分拆和脚步,以曼汀为主\.

### 如何安装 @ciromaciel/components-kit？

在项目目录运行 npm install @ciromaciel/components-kit，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.0\.0 \|\| ^19\.0\.0）、react-dom（^18\.0\.0 \|\| ^19\.0\.0）、@mantine/core（^7\.0\.0 \|\| ^8\.0\.0）、@mantine/hooks（^7\.0\.0 \|\| ^8\.0\.0）、@tabler/icons-react（^3\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @ciromaciel/components-kit 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/ciromaciel\_\_components-kit 是否存在。

### @ciromaciel/components-kit 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @ciromaciel/components-kit 可以商用吗？

@ciromaciel/components-kit 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @ciromaciel/components-kit 的下载量有多少？

根据 npm 官方下载统计，@ciromaciel/components-kit 在 2026/10/10 – 2026/11/08 这 30 天内被下载 2,092 次，日均约 70 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @ciromaciel/components-kit 还在维护吗？

最新版本 1\.8\.10 发布于 2026/10/31（9 天前）；至今共发布 28 个版本，其中过去 12 个月发布了 28 个；首次发布于 2026/09/20。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。