Installation

#Requirements

• React 18 or 19 (react and react-dom are peer dependencies).
• Any bundler that can import CSS files: Vite, Next.js, Remix and so on.
• TypeScript is optional. Packages ship type declarations; the CLI copies TSX source.

#1. Install a package

Install the package of the section a component belongs to. You need it even if you plan to copy source with the CLI: copied components import the shared runtime (hooks and utilities) from the package.

pnpm add @elyri/motion

pnpm add @elyri/ui

#2. Import the styles

Import styles.css once at your app entry. It defines the global design tokens (durations, easings, colours); each component loads its own styles alongside it.

// main.tsx: import only the packages you use
import '@elyri/motion/styles.css';
import '@elyri/ui/styles.css';

#3. Use a component

Option A: import from the package

The quickest route when you do not need to change the source.

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

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

Option B: copy the source with the CLI

The component source lands in your project, ready to edit. You can add several components at once.

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

// The CLI writes to src/components/elyri by default (or under your @/* alias)
import { GradientText } from './components/elyri/GradientText';

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

#Next steps