快速开始

本页只覆盖最短接入路径：安装当前可用包、接入组件样式，并渲染第一个组件。

前置条件

组件包把 Hooks、图标与基础工具作为 peer 使用。接入组件时，推荐一起安装：

NPMPNPM

npm install @nild/components @nild/hooks @nild/icons @nild/shared

pnpm add @nild/components @nild/hooks @nild/icons @nild/shared

只使用某一类能力时，可以选择更小的组合：

Hooks图标国际化

pnpm add @nild/hooks @nild/shared

pnpm add @nild/icons @nild/shared

pnpm add @nild/i18n @nild/shared

在应用的全局 CSS 中加入最小样式配置：

css

@import 'tailwindcss';
@import '@nild/components/tailwindcss';

@source '../node_modules/@nild/components/dist';

@source 路径按项目实际目录调整即可。更多 Tailwind 扫描、品牌色和明暗模式说明见样式与动态主题。

tsx

import { Button } from '@nild/components';

const App = () => {
  return <Button>开始使用</Button>;
};

export default App;

如果按钮已经带有品牌色、圆角、阴影和交互状态，说明包安装与样式接入都已生效。