安装

安装包、引入样式，然后从包导入组件或用 CLI 拷贝源码。

#环境要求

React 18 或 19（react、react-dom 为 peer dependency）。
任意打包工具：Vite、Next.js、Remix 等，需要支持导入 CSS 文件。
TypeScript 可选；包内自带类型声明，CLI 拷贝的是 TSX 源码。

#1. 安装包

组件属于哪个分区，就安装哪个包。即使打算用 CLI 拷贝源码，也需要先安装：拷出来的组件会从包里导入共享的运行时（hooks 与工具函数）。

@elyri/motion

pnpm add @elyri/motion

@elyri/ui

pnpm add @elyri/ui

#2. 引入样式

在应用入口引入一次 styles.css。它定义了全局的设计变量（时长、缓动、配色等），组件自身的样式随组件一起加载。

main.tsx

// main.tsx：只引入用到的包
import '@elyri/motion/styles.css';
import '@elyri/ui/styles.css';

#3. 使用组件

方式一：从包导入

最快的方式，适合不需要修改源码的场景。

Hero.tsx

import { GradientText } from '@elyri/motion';
import { Button } from '@elyri/ui';

export function Hero() {
  return (
    <>
      <GradientText>Hello Elyri</GradientText>
      <Button>Get started</Button>
    </>
  );
}

方式二：用 CLI 拷贝源码

组件源码会进入你的项目，之后可以随意修改。可以一次添加多个组件。

pnpm dlx @elyri/cli@latest add gradient-text

Hero.tsx

// CLI 默认写入 src/components/elyri（配置了 @/* 别名时写入别名对应目录）
import { GradientText } from './components/elyri/GradientText';

export function Hero() {
  return <GradientText>Hello Elyri</GradientText>;
}

每个组件页的「代码」标签都给出了对应的安装命令与用法，参数调好后可以直接复制。

#下一步

CLI →目标目录、覆盖与常见报错。主题定制 →用 CSS 变量调整配色、时长与缓动。